/* ============================================================
   250Website — styles.css
   Vintage U.S. currency engraving meets modern editorial restraint
   ============================================================ */

/* ------------------------------------------------------------
   FONTS
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&display=swap');

/* ------------------------------------------------------------
   DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Color — Primary */
  --color-mint:        #8FB89C;
  --color-mint-deep:   #4A6B57;
  --color-mint-pale:   #D4E4D8;

  /* Color — Neutrals */
  --color-cream:       #F4EFE4;
  --color-cream-warm:  #EDE6D3;
  --color-ink:         #1F2A24;
  --color-ink-soft:    #4A5550;

  /* Color — Accent */
  --color-gold:        #B8945F;
  --color-rust:        #8B5A3C;

  /* Semantic aliases */
  --color-bg:          var(--color-cream);
  --color-text:        var(--color-ink);
  --color-text-soft:   var(--color-ink-soft);
  --color-accent:      var(--color-mint-deep);

  /* Typography — Families */
  --font-display: 'EB Garamond', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;

  /* Typography — Scale (modular, 1.25 ratio) */
  --font-size-xs:   0.8rem;     /* 12.8px */
  --font-size-sm:   1rem;       /* 16px */
  --font-size-base: 1.125rem;   /* 18px */
  --font-size-md:   1.406rem;   /* 22.5px */
  --font-size-lg:   1.758rem;   /* 28.1px */
  --font-size-xl:   2.197rem;   /* 35.2px */
  --font-size-2xl:  2.747rem;   /* 43.9px */
  --font-size-3xl:  3.433rem;   /* 54.9px */
  --font-size-4xl:  4.292rem;   /* 68.6px */

  /* Typography — Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Spacing — 8px base */
  --space-1:  0.5rem;   /*   8px */
  --space-2:  1rem;     /*  16px */
  --space-3:  1.5rem;   /*  24px */
  --space-4:  2rem;     /*  32px */
  --space-5:  3rem;     /*  48px */
  --space-6:  4rem;     /*  64px */
  --space-7:  6rem;     /*  96px */
  --space-8:  8rem;     /* 128px */

  /* Layout */
  --max-width:       1200px;
  --reading-width:   65ch;
  --nav-height:      72px;

  /* Border & radius */
  --radius-sm: 2px;
  --radius:    4px;

  /* Transitions */
  --transition: 200ms ease;
}

/* ------------------------------------------------------------
   RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition), opacity var(--transition);
}

a:hover { opacity: 0.75; }

ul, ol { list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); font-weight: 600; }

p { max-width: var(--reading-width); }

p + p { margin-top: var(--space-3); }

strong { font-weight: 600; }

em { font-style: italic; }

small { font-size: var(--font-size-xs); }

/* Display / hero-scale */
.display {
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

/* Eyebrow label above headings */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
  margin-bottom: var(--space-2);
}

/* Intro / lead paragraph */
.lead {
  font-size: var(--font-size-md);
  line-height: var(--leading-snug);
  color: var(--color-ink-soft);
  max-width: 52ch;
}

/* ------------------------------------------------------------
   LAYOUT UTILITIES
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.container--narrow {
  max-width: 780px;
}

.section {
  padding-block: var(--space-7);
}

.section--lg {
  padding-block: var(--space-8);
}

.section--sm {
  padding-block: var(--space-5);
}

/* Two-column text + image */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

/* Card grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.grid-2--wide { column-gap: var(--space-7); }
.grid-2--top  { align-items: start; }

/* Flex utilities */
.flex       { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }

/* Visually hidden but available to assistive tech */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page; visible only when focused */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  z-index: 200;
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-cream);
  background: var(--color-ink);
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
  outline: 2px solid var(--color-mint);
  outline-offset: 2px;
}

/* Text alignment */
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }

/* ------------------------------------------------------------
   ORNAMENTAL DIVIDER
   ------------------------------------------------------------ */
.ornament-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-5);
  color: var(--color-mint);
}

.ornament-divider::before,
.ornament-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.ornament-divider svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  opacity: 0.6;
}

/* Simple rule variant */
.rule {
  border: none;
  border-top: 1px solid var(--color-mint-pale);
  margin-block: var(--space-5);
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.75em 1.75em;
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-mint-deep);
  color: var(--color-cream);
  border-color: var(--color-mint-deep);
}

.btn--primary:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  opacity: 1;
}

.btn--outline {
  background: transparent;
  color: var(--color-mint-deep);
  border-color: var(--color-mint-deep);
}

.btn--outline:hover {
  background: var(--color-mint-deep);
  color: var(--color-cream);
  opacity: 1;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-inline: 0;
}

.btn--ghost:hover { opacity: 0.6; }

.btn--lg {
  font-size: var(--font-size-md);
  padding: 0.85em 2.25em;
}

/* ------------------------------------------------------------
   PRICE BADGE — classical numeral treatment
   ------------------------------------------------------------ */
.price-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--font-size-4xl);
  font-weight: 400;
  color: var(--color-mint-deep);
  line-height: 1;
}

.price-badge sup {
  font-size: 0.45em;
  vertical-align: super;
  font-weight: 600;
}

/* ------------------------------------------------------------
   SITE HEADER
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-mint-pale);
  display: flex;
  align-items: center;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;   /* keep the bar 72px; the logo is allowed to hang out below it */
}

/* Wordmark */
.site-logo {
  text-decoration: none;
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.site-logo__mark {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.site-logo__sub {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
  font-weight: 400;
}

.site-logo:hover { opacity: 0.8; }

/* Logo image (header). At the top of the page it's double size and hangs below the bar;
   once the page scrolls, main.js adds .is-stuck and it tucks back into the bar so it never
   covers content. Without JS it simply stays large. */
.site-logo {
  align-self: flex-start;
  margin-top: 8px;
}

.site-logo__img {
  display: block;
  height: 112px;
  width: auto;
  transition: height var(--transition);
}

.site-header.is-stuck .site-logo { align-self: center; margin-top: 0; }
.site-header.is-stuck .site-logo__img { height: 56px; }

/* Primary nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.site-nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--color-ink-soft);
  transition: color var(--transition);
}

.site-nav a:not(.btn):hover,
.site-nav a:not(.btn)[aria-current="page"] {
  color: var(--color-ink);
  opacity: 1;
}

.site-nav .btn {
  margin-left: var(--space-2);
}

.site-nav a { white-space: nowrap; }

/* Small laptops: between the hamburger (≤900px) and full desktop, tighten the menu and
   the hanging logo so six items fit on one line. */
@media (min-width: 901px) and (max-width: 1180px) {
  .site-nav { gap: var(--space-3); }
  .site-logo__img { height: 88px; }
}

/* Mobile nav toggle — hidden on desktop */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--space-1);
  color: var(--color-ink);
}

/* ------------------------------------------------------------
   SITE FOOTER
   ------------------------------------------------------------ */
.site-footer {
  background: var(--color-ink);
  color: var(--color-cream);
  padding-block: var(--space-6) var(--space-4);
}

.site-footer a {
  color: var(--color-mint-pale);
  text-decoration: none;
}

.site-footer a:hover { color: var(--color-cream); opacity: 1; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand .site-logo__mark { color: var(--color-cream); }
.footer-brand .site-logo__sub  { color: var(--color-mint); }

.footer-brand p {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-mint-pale);
  opacity: 0.8;
  max-width: 36ch;
}

.footer-col h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint);
  margin-bottom: var(--space-3);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col li a {
  font-size: var(--font-size-sm);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-mint-pale);
  opacity: 0.6;
}

.footer-bottom a { opacity: 1; }

/* ------------------------------------------------------------
   HERO — HOMEPAGE
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-ink);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img,
.hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;
}

/* Two stacked opaque layers: the incoming clip fades in on top (.is-front) until it fully covers the
   outgoing one, which is then switched off without a transition (.no-fade). The 35% "dimming" that
   used to be video opacity now lives in .hero__overlay's background-color, so the look is unchanged
   but the hand-off is a true crossfade — no double exposure, no brightness dip. */
.hero__bg img.is-active,
.hero__bg video.is-active { opacity: 1; }
.hero__bg video.is-front  { z-index: 2; }
.hero__bg video.no-fade   { transition: none; }

.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(31, 42, 36, 0.65);   /* was the videos' 0.35 opacity over ink — same mix, moved up here */
  background-image: linear-gradient(
    to bottom,
    rgba(31,42,36,0.55) 0%,
    rgba(31,42,36,0.7) 60%,
    rgba(31,42,36,0.9) 100%
  );
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-8);
  color: var(--color-cream);
}

.hero__content .eyebrow { color: var(--color-mint); }

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--font-size-2xl), 6vw, var(--font-size-4xl));
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--color-cream);
  max-width: 16ch;
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.hero__headline em {
  font-style: italic;
  color: var(--color-mint);
}

.hero__sub {
  font-size: var(--font-size-md);
  line-height: var(--leading-snug);
  color: var(--color-mint-pale);
  max-width: 46ch;
  margin-bottom: var(--space-5);
  opacity: 0.9;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.hero__proof {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 500;
  color: var(--color-mint);
  line-height: 1;
}

.hero__stat-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mint-pale);
  opacity: 0.7;
}

/* Pause / play for the looping background video (WCAG 2.2.2). Revealed by main.js. */
.hero__video-toggle {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 3;
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-mint-pale);
  background: rgba(31, 42, 36, 0.65);
  border: 1px solid rgba(212, 228, 216, 0.35);
  border-radius: var(--radius);
  cursor: pointer;
}

.hero__video-toggle:hover { background: var(--color-ink); color: var(--color-cream); }

/* ------------------------------------------------------------
   WHAT'S INCLUDED — icon grid
   ------------------------------------------------------------ */
.included-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-6);
}

/* Base item: icon beside text (How It Works' full list uses this with no icon) */
.included-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

/* Home grid: large engraved icon above centred text */
.included-grid .included-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

/* Icons are ink-on-transparent derivatives (assets/images/icon-*.webp, 336px = 2x the 168px display) so the page texture shows through */
.included-item__icon {
  flex-shrink: 0;
  width: 168px;
  height: 168px;
  object-fit: contain;
}

.included-item__text h3 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: 4px;
}

.included-grid .included-item__text h3 {
  font-size: var(--font-size-md);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.included-grid .included-item__text p {
  max-width: 30ch;
  margin-inline: auto;
}

.included-item__text p {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  max-width: none;
}

/* ------------------------------------------------------------
   HOW IT WORKS — 3-step
   ------------------------------------------------------------ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(50% / 3);
  right: calc(50% / 3);
  height: 1px;
  background: var(--color-mint-pale);
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-mint-pale);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 400;
  color: var(--color-mint-deep);
  background: var(--color-bg);
  margin-bottom: var(--space-3);
}

.step h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-2);
}

.step p {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  margin-inline: auto;
}

/* ------------------------------------------------------------
   TEMPLATES PREVIEW — 3-up cards
   ------------------------------------------------------------ */
.template-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.template-card {
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius);
  background: var(--color-bg);   /* solid, so section patterns don't run behind the card text */
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}

.template-card:hover {
  border-color: var(--color-mint);
  transform: translateY(-3px);
}

.template-card__thumb {
  aspect-ratio: 4/3;
  background: var(--color-cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-card__body {
  padding: var(--space-3);
}

.template-card__name {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 500;
  margin-bottom: var(--space-1);
}

.template-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-3);
  max-width: none;
}

.template-card__cta {
  font-size: var(--font-size-sm);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-mint-deep);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.template-card__cta:hover { opacity: 0.7; }

/* ------------------------------------------------------------
   PRICING TIERS
   ------------------------------------------------------------ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  align-items: start;
}

.pricing-card {
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--color-bg);
}

.pricing-card--featured {
  border-color: var(--color-mint-deep);
  background: var(--color-ink);
  color: var(--color-cream);
}

.pricing-card--featured h3,
.pricing-card--featured p,
.pricing-card--featured li {
  color: var(--color-cream);
}

.pricing-card--featured .price-badge {
  color: var(--color-mint);
}

.pricing-card__label {
  font-size: var(--font-size-xs);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
  margin-bottom: var(--space-2);
  display: block;
}

.pricing-card--featured .pricing-card__label { color: var(--color-mint); }

.pricing-card h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-1);
}

.pricing-card .price-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.pricing-card .price-desc {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
  max-width: none;
}

.pricing-card--featured .price-desc { color: var(--color-mint-pale); opacity: 0.8; }

.pricing-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.pricing-list li {
  font-size: var(--font-size-sm);
  padding-left: var(--space-3);
  position: relative;
  color: var(--color-ink-soft);
}

.pricing-card--featured .pricing-list li { color: var(--color-mint-pale); opacity: 0.9; }

.pricing-list li::before {
  content: '—' / '';
  position: absolute;
  left: 0;
  color: var(--color-mint);
  font-family: var(--font-display);
}

/* ------------------------------------------------------------
   SECTION — CREAM WARM BG VARIANT
   ------------------------------------------------------------ */
.bg-cream-warm { background: var(--color-cream-warm); }
.bg-ink        { background: var(--color-ink); color: var(--color-cream); }
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: var(--color-cream); }
.bg-ink .eyebrow { color: var(--color-mint); }
.bg-ink p  { color: var(--color-mint-pale); opacity: 0.85; }
.bg-ink .lead { color: var(--color-mint-pale); opacity: 0.9; }

/* ------------------------------------------------------------
   PATTERN BACKGROUND UTILITY
   ------------------------------------------------------------ */
.bg-pattern {
  position: relative;
}

.bg-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../assets/images/pattern-banknote.jpg');
  background-size: 480px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.bg-pattern > * { position: relative; z-index: 1; }

/* Damask variant — the embossed banknote tile, multiplied over the section's beige so the
   paper colour stays and only the green relief shows. Opacity sets the strength. */
.bg-pattern--damask::before {
  background-image: url('../../assets/images/pattern-damask.jpg');
  background-size: 720px;
  mix-blend-mode: multiply;
  opacity: 0.22;
}

/* ------------------------------------------------------------
   ENGRAVED PORTRAIT — decorative image treatment
   ------------------------------------------------------------ */
.portrait-frame {
  position: relative;
  display: inline-block;
}

.portrait-frame img {
  border-radius: 2px;
  display: block;
}

/* ------------------------------------------------------------
   FAQ ACCORDION
   ------------------------------------------------------------ */
.faq-list {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-mint-pale);
}

.faq-item {
  border-bottom: 1px solid var(--color-mint-pale);
}

.faq-trigger {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: color var(--transition);
}

.faq-trigger:hover { color: var(--color-mint-deep); }

.faq-trigger svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform var(--transition);
  color: var(--color-mint-deep);
}

.faq-item[open] .faq-trigger svg,
.faq-trigger[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.faq-body {
  padding-bottom: var(--space-4);
  padding-right: var(--space-6);
}

.faq-body p {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-normal);
}

/* ------------------------------------------------------------
   TABLE — add-ons, block menu
   ------------------------------------------------------------ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-top: var(--space-4);
}

.data-table thead th {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-mint-pale);
}

.data-table tbody td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-mint-pale);
  color: var(--color-ink-soft);
  vertical-align: top;
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table tbody tr:hover td { background: var(--color-cream-warm); }

.data-table .price-col {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   INTAKE FORM
   ------------------------------------------------------------ */
.form-header {
  background: var(--color-ink);
  padding-block: var(--space-6);
  color: var(--color-cream);
}

.form-header h1 { color: var(--color-cream); }
.form-header p  { color: var(--color-mint-pale); opacity: 0.85; }

/* Sticky progress bar */
.form-progress {
  position: sticky;
  top: var(--nav-height);
  z-index: 90;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-mint-pale);
  padding: var(--space-2) 0;
}

.form-progress__inner {
  display: flex;
  gap: 2px;
  align-items: center;
}

.form-progress__step {
  display: block;
  flex: 1;
  box-sizing: content-box;
  height: 3px;
  padding: 8px 0;
  background: var(--color-mint-pale);
  background-clip: content-box;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color var(--transition);
  cursor: pointer;
}

.form-progress__step:focus-visible {
  outline: 2px solid var(--color-mint-deep);
  outline-offset: 0;
}

.form-progress__step--active { background: var(--color-mint-deep); }
.form-progress__step--done   { background: var(--color-mint); }

/* Form sections */
.form-section {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-mint-pale);
}

.form-section:last-child { border-bottom: none; }

.form-section__header {
  margin-bottom: var(--space-5);
}

.form-section__num {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
}

.form-section h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-1);
}

/* Field groups */
.field-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}

.field-group--full { grid-template-columns: minmax(0, 1fr); }

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--span2 { grid-column: span 2; }

label {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-ink);
}

label .required { color: var(--color-rust); margin-left: 2px; }

label .hint {
  font-weight: 400;
  font-style: italic;
  color: var(--color-ink-soft);
  margin-left: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 0.65em 0.85em;
  background: var(--color-bg);
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-mint-deep);
  box-shadow: 0 0 0 3px rgba(74, 107, 87, 0.12);
}

input.error,
select.error,
textarea.error {
  border-color: var(--color-rust);
}

.field-error {
  font-size: var(--font-size-xs);
  color: var(--color-rust);
  display: none;
}

.field-error.visible { display: block; }

textarea { resize: vertical; min-height: 120px; }

::placeholder {
  color: var(--color-ink-soft);
  opacity: 0.85;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5550' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  padding-right: 2.5em;
  cursor: pointer;
}

/* Radio & checkbox */
.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.radio-group--inline,
.checkbox-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.radio-option input,
.checkbox-option input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--color-mint-deep);
}

.radio-option span,
.checkbox-option span {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  line-height: var(--leading-snug);
}

/* Block selector (Section 3) */
.block-selector {
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.block-selector__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
}

.block-selector__title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 500;
}

.block-counter {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-mint-deep);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: color var(--transition), background var(--transition);
}

.block-counter.at-limit   { color: var(--color-ink);  background: var(--color-mint-pale); }
.block-counter.over-limit { color: var(--color-rust); background: var(--color-cream-warm); }

.block-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.block-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.block-option:hover { background: var(--color-cream-warm); }

.block-option input { accent-color: var(--color-mint-deep); cursor: pointer; }

.block-option span {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}

.block-option--selected {
  background: var(--color-mint-pale);
  border-color: var(--color-mint);
}

.block-upsell {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-cream-warm);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  color: var(--color-rust);
  display: none;
}

.block-upsell.visible { display: block; }

/* Order summary */
.order-summary {
  position: sticky;
  top: calc(var(--nav-height) + 48px);
  background: var(--color-ink);
  color: var(--color-cream);
  border-radius: var(--radius);
  padding: var(--space-4);
  align-self: start;
}

.order-summary h2 {
  color: var(--color-cream);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.order-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-mint-pale);
  opacity: 0.8;
}

.order-line--total {
  border-top: 1px solid rgba(255,255,255,0.15);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-cream);
  opacity: 1;
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
}

/* Care plan upsell in checkout */
.care-plan-upsell {
  border: 1px solid var(--color-mint);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: rgba(143,184,156,0.07);
}

.care-plan-upsell h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-2);
}

/* Scope confirmations */
.scope-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Inline field: label text followed by a small input on the same row (domain, social links) */
.inline-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.radio-option .inline-input,
.checkbox-option .inline-input {
  flex: 1 1 140px;
  min-width: 0;
  width: auto;
  height: auto;
  margin-top: 0;
}

/* Page-name input in the block selector header */
.block-selector__header .page-name-input {
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-mint-pale);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 500;
  padding: 0 4px;
}

/* Small grids inside the form: Section 4 colours, Section 7 social links */
.color-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

/* Error state on option groups (set by intake.js, cleared on change) */
.radio-group.error span,
.checkbox-option.error span { color: var(--color-rust); }

/* ------------------------------------------------------------
   LEGAL PAGES — terms.html, privacy.html
   ------------------------------------------------------------ */
.legal h2 {
  font-size: var(--font-size-lg);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal p,
.legal li {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}

.legal ul {
  list-style: disc;
  padding-left: 1.25em;
  margin-top: var(--space-2);
}

.legal li { margin-top: 4px; }

.updated {
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------
   CONTACT PAGE — contact.html (form logic: code/js/contact.js)
   ------------------------------------------------------------ */
.contact-form[hidden],
.contact-done[hidden],
.contact-form__error[hidden] { display: none; }

.contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-4);
}

.contact-form__alt,
.contact-noscript {
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}

.contact-form__error {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-rust);
}

.contact-form .is-bad { border-color: var(--color-rust); }

.contact-form .ct-submit:disabled { opacity: 0.6; cursor: progress; }

/* The honeypot: off-screen, not display:none (some bots skip hidden inputs) */
.ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* EARLY-LAUNCH: the "Starting a site?" box on contact.html. Remove with it. */
.contact-start {
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-mint);
  background: var(--color-cream-warm);
}
.contact-start h2 { font-size: var(--font-size-md); }
.contact-start ol {
  margin-top: var(--space-2);
  padding-left: 1.25em;
  list-style: decimal;
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}
.contact-start li { margin-top: 6px; }

.contact-done h2 { font-size: var(--font-size-xl); }
.contact-done h2:focus { outline: none; }
.contact-done p { margin-top: var(--space-2); color: var(--color-ink-soft); }
.contact-done .btn { margin-top: var(--space-4); }

/* ------------------------------------------------------------
   WHAT'S NOT INCLUDED — "No" list
   ------------------------------------------------------------ */
.no-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
}

.no-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}

.no-list li::before {
  content: '✕' / '';
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  color: var(--color-rust);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ------------------------------------------------------------
   CALL TO ACTION — full-width banner
   ------------------------------------------------------------ */
.cta-banner {
  background: var(--color-ink);
  color: var(--color-cream);
  text-align: center;
  padding-block: var(--space-7);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../assets/images/pattern-banknote.jpg');
  background-size: 480px;
  opacity: 0.04;
  pointer-events: none;
}

.cta-banner > * { position: relative; z-index: 1; }

.cta-banner h2 { color: var(--color-cream); max-width: 20ch; margin-inline: auto; }
.cta-banner .lead { color: var(--color-mint-pale); opacity: 0.85; margin-inline: auto; margin-block: var(--space-3) var(--space-5); }

/* ------------------------------------------------------------
   HOW IT WORKS — page hero with photo, portrait process, numerals strip
   ------------------------------------------------------------ */
.page-hero { padding-block: var(--space-7) var(--space-5); }

.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.page-hero__media {
  position: relative;
  z-index: 1;
  margin: 0 0 calc(-1 * (var(--space-5) + var(--space-6)));   /* hangs below the section into the next one */
  justify-self: end;
  width: min(100%, 440px);
}

.page-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  object-position: center 30%;
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius);
}

/* The five steps, each led by an engraved banknote portrait */
.process {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.process__step {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.process__figure { margin: 0; text-align: center; }

.process__portrait {
  display: block;
  width: 136px;
  height: 136px;
  margin: 0 auto;
  object-fit: contain;
}

.process__caption {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.process__num { margin-bottom: var(--space-1); }

.process__text h3 { font-size: var(--font-size-md); margin-bottom: var(--space-2); }
.process__text p  { font-size: var(--font-size-sm); color: var(--color-ink-soft); }

/* Numerals strip — the hero stat styles on an ink band */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-8);
  text-align: center;
}

.stat-strip .hero__stat { align-items: center; }

/* ------------------------------------------------------------
   TEMPLATE BUILDER — templates.html (Template 01)
   .tb = the builder; .tb--ready is added by builder.js. Without it the
   stage is a static preview and the palette/tools stay hidden.
   ------------------------------------------------------------ */
.template-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "builder head" "builder foot" "examples examples";
  gap: var(--space-4) var(--space-6);
  align-items: start;
  border: 1px solid var(--color-mint);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  background: var(--color-bg);
}

.template-feature__head    { grid-area: head; }
.template-feature__builder { grid-area: builder; min-width: 0; }
.template-feature__foot    { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.template-feature .template-card__name { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }
.template-feature .template-card__desc { margin-bottom: var(--space-2); }

.template-card__adapts {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-mint-deep);
  margin-bottom: var(--space-3);
}

.template-escape { margin-top: var(--space-3); font-size: var(--font-size-sm); }

/* The miniature browser */
.tb {
  /* Preview palette — the client's "brand", not the site's. Overridden per template below. */
  --tb-ink:    var(--color-ink);
  --tb-accent: var(--color-mint-deep);
  --tb-pale:   var(--color-mint-pale);
  --tb-tint:   var(--color-mint);
  --tb-hatch:  rgba(74, 107, 87, 0.18);
}

.tb[data-template="table"]     { --tb-ink: #3B1F1A; --tb-accent: #B5543C; --tb-pale: #F2DCD2; --tb-tint: #D98C72; --tb-hatch: rgba(181, 84, 60, 0.18); }
.tb[data-template="author"]    { --tb-ink: #1C2740; --tb-accent: #3E5A8A; --tb-pale: #D8DFEC; --tb-tint: #8FA6CC; --tb-hatch: rgba(62, 90, 138, 0.18); }
.tb[data-template="event"]     { --tb-ink: #2B2515; --tb-accent: #B8921E; --tb-pale: #F2E6B8; --tb-tint: #DFC457; --tb-hatch: rgba(184, 146, 30, 0.2); }
.tb[data-template="portfolio"] { --tb-ink: #2A2233; --tb-accent: #6B4E8A; --tb-pale: #E4DCEC; --tb-tint: #A892C4; --tb-hatch: rgba(107, 78, 138, 0.18); }
.tb[data-template="local"]     { --tb-ink: #14302E; --tb-accent: #2E7D73; --tb-pale: #D0E6E2; --tb-tint: #7FBFB4; --tb-hatch: rgba(46, 125, 115, 0.18); }

.tb__frame {
  border: 1px solid var(--tb-pale);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-cream);
}

.tb__chrome {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--tb-pale);
  background: var(--color-cream-warm);
}

.tb__chrome span { width: 8px; height: 8px; border-radius: 50%; background: var(--tb-pale); }

.tb__stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  max-height: 460px;
  overflow: auto;
}

.tb__stage.is-sorting { cursor: grabbing; }

/* A block: label bar + wireframe body */
.tb-block {
  border: 1px solid var(--tb-pale);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
}

.tb-block.is-dragging { outline: 2px solid var(--tb-accent); outline-offset: -1px; opacity: 0.92; }

.tb-block__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--tb-pale);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  user-select: none;
  -webkit-user-select: none;
}

.tb--ready .tb-block__bar { cursor: grab; touch-action: none; }
.tb--ready .tb-block.is-dragging .tb-block__bar { cursor: grabbing; }

.tb-block__handle { display: none; opacity: 0.55; font-size: 12px; }
.tb--ready .tb-block__handle { display: inline; }

.tb-block__tools { display: none; margin-left: auto; gap: 2px; }
.tb--ready .tb-block__tools { display: flex; }

.tb-tool {
  width: 24px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.tb-tool:hover { background: var(--color-cream); border-color: var(--tb-tint); }
.tb-tool:disabled { opacity: 0.3; cursor: default; }
.tb-tool:disabled:hover { background: transparent; border-color: transparent; }

.tb-block__body { padding: 10px 12px; }

/* Wireframe atoms — tinted bars and boxes, no text */
.w-line { height: 6px; border-radius: 3px; margin: 4px 0; background: var(--w-ink, rgba(31, 42, 36, 0.16)); }
.w-line--xl { height: 10px; width: 60%; background: var(--w-strong, rgba(31, 42, 36, 0.55)); }
.w-line--lg { height: 8px;  width: 45%; background: var(--w-strong, rgba(31, 42, 36, 0.4)); }
.w-line--sm { width: 70%; }
.w-line--xs { width: 40%; }
.w-btn  { display: inline-block; width: 64px; height: 14px; border-radius: 2px; background: var(--tb-accent); margin-top: 4px; vertical-align: top; }
.w-pill { display: inline-block; width: 54px; height: 14px; border-radius: 2px; border: 1px solid var(--w-strong, rgba(31, 42, 36, 0.4)); margin: 4px 0 0 6px; vertical-align: top; }
.w-row  { display: flex; gap: 8px; align-items: flex-start; }
.w-row > * { flex: 1; min-width: 0; }
.w-img  { min-height: 40px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--tb-hatch) 0 2px, transparent 2px 7px), var(--tb-pale); }
.w-img--tall { min-height: 56px; }
.w-card { border: 1px solid rgba(31, 42, 36, 0.12); border-radius: 2px; padding: 6px; }
.w-dot  { width: 12px; height: 12px; border-radius: 50%; background: var(--tb-tint); margin-bottom: 4px; }
.w-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--tb-pale); margin: 0 auto 4px; }
.w-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.w-center { text-align: center; }
.w-center .w-line { margin-inline: auto; }
.w-quote { font-family: var(--font-display); font-size: 18px; line-height: 1; color: var(--tb-tint); }
.w-price { height: 14px; width: 40%; margin: 4px auto; border-radius: 2px; background: var(--tb-accent); opacity: 0.6; }
.w-faq  { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid rgba(31, 42, 36, 0.1); }
.w-faq .w-line { flex: 1; margin: 0; }
.w-faq::after { content: '+'; font-size: 10px; color: var(--tb-accent); }

.tb-block--hero .tb-block__body        { background: var(--tb-ink); --w-ink: rgba(244, 239, 228, 0.35); --w-strong: rgba(244, 239, 228, 0.85); }
.tb-block--hero .w-btn                 { background: var(--tb-tint); }
.tb-block--contact-cta .tb-block__body { background: var(--tb-accent); --w-ink: rgba(244, 239, 228, 0.4); --w-strong: rgba(244, 239, 228, 0.9); }
.tb-block--contact-cta .w-btn          { background: var(--color-cream); }

/* Per-template block variants — the same wireframe markup, shaped to match each template's copy */

/* The Table: photo hero, menu cards with photo thumbs */
.tb[data-template="table"] .tb-block--hero .tb-block__body { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 2px, transparent 2px 7px), var(--tb-ink); min-height: 66px; }
.tb[data-template="table"] .tb-block--hero .w-pill { display: none; }
.tb[data-template="table"] .tb-block--services .w-dot { width: 100%; height: 22px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--tb-hatch) 0 2px, transparent 2px 7px), var(--tb-pale); }

/* The Author: portrait hero, no phone pill */
.tb[data-template="author"] .tb-block--hero .tb-block__body::before { content: ''; float: left; width: 40px; height: 40px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--tb-tint); }
.tb[data-template="author"] .tb-block--hero .tb-block__body::after  { content: ''; display: block; clear: both; }
.tb[data-template="author"] .tb-block--hero .w-pill { display: none; }

/* The Event: date badge above the headline, big RSVP button */
.tb[data-template="event"] .tb-block--hero .tb-block__body::before { content: ''; display: inline-block; width: 56px; height: 9px; margin-bottom: 6px; border: 1px solid var(--w-strong); border-radius: 2px; }
.tb[data-template="event"] .tb-block--hero .w-btn { width: 88px; }
.tb[data-template="event"] .tb-block--hero .w-pill { display: none; }

/* The Portfolio: image-first hero with one short line, masonry gallery */
.tb[data-template="portfolio"] .tb-block--hero .tb-block__body { min-height: 74px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px), var(--tb-ink); }
.tb[data-template="portfolio"] .tb-block--hero .w-line--xl { width: 38%; }
.tb[data-template="portfolio"] .tb-block--hero .w-line--lg,
.tb[data-template="portfolio"] .tb-block--hero .w-line--sm,
.tb[data-template="portfolio"] .tb-block--hero .w-pill { display: none; }
.tb[data-template="portfolio"] .tb-block--gallery .w-img { min-height: 34px; }
.tb[data-template="portfolio"] .tb-block--gallery .w-img:nth-child(2) { grid-row: span 2; }

/* The Local: storefront photo beside the headline, address pill stays, bigger map */
.tb[data-template="local"] .tb-block--hero .tb-block__body::before { content: ''; float: left; width: 64px; height: 46px; margin: 0 12px 0 0; border-radius: 2px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 7px), var(--tb-tint); }
.tb[data-template="local"] .tb-block--hero .tb-block__body::after  { content: ''; display: block; clear: both; }
.tb[data-template="local"] .tb-block--map-hours .w-img--tall { min-height: 66px; }

/* Counter, palette, hint, reset */
.tb__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-rust); }

.tb__palette { margin-top: var(--space-3); }

.tb__palette-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
  margin-bottom: var(--space-1);
}

.tb__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.tb__chip {
  padding: 7px 10px;
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.tb__chip:hover { border-color: var(--color-mint); }
.tb__chip[aria-pressed="true"] { background: var(--color-mint-pale); border-color: var(--color-mint); }
.tb__chip[aria-pressed="true"]::before { content: '✓ ' / ''; }

.tb__hint { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-ink-soft); max-width: none; }

.tb__reset {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-mint-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Jump nav at the top of the gallery */
.template-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
}

.template-index__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
}

.template-index a { text-decoration: none; color: var(--color-ink-soft); }
.template-index a:hover { color: var(--color-ink); opacity: 1; }

/* Examples gallery under the featured template */
.template-feature__examples {
  grid-area: examples;
  border-top: 1px solid var(--color-mint-pale);
  padding-top: var(--space-4);
}

.examples__title { font-size: var(--font-size-md); margin-bottom: var(--space-1); }
.examples__lead  { font-size: var(--font-size-sm); color: var(--color-ink-soft); margin-bottom: var(--space-3); max-width: none; }

.lightbox-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.lightbox-grid__caption {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.lightbox-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius);
  background: var(--color-cream-warm);
}

.lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.lightbox-thumb:hover img { transform: scale(1.03); }
.lightbox-thumb:hover { opacity: 1; border-color: var(--color-mint); }

.lightbox-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-2);
  border: 1px dashed var(--color-mint);
  border-radius: var(--radius);
  background: var(--color-cream-warm);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-mint-deep);
}

/* ------------------------------------------------------------
   BLOCKS PAGE — the large builder (.tb--large) with the menu as a sidebar
   ------------------------------------------------------------ */
.blocks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
}

.blocks-main { min-width: 0; }

.blocks-side {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-3));
  max-height: calc(100vh - var(--nav-height) - var(--space-4));
  overflow: auto;
}

.blocks-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
}

.tb__templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.tb__templates-title {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mint-deep);
}

.tb__template {
  padding: 7px 12px;
  border: 1px solid var(--color-mint-pale);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.tb__template:hover { border-color: var(--color-mint); }
.tb__template[aria-pressed="true"] { background: var(--tb-pale); border-color: var(--tb-accent); }

.tb__empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
  max-width: none;
}

.blocks-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.tb__clear:disabled { opacity: 0.4; cursor: default; }

/* The block menu as a sidebar */
.blocks-menu__title { font-size: var(--font-size-md); margin-bottom: var(--space-1); }
.blocks-menu__lead  { font-size: var(--font-size-xs); color: var(--color-ink-soft); margin-bottom: var(--space-2); max-width: none; }

.blocks-menu__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-mint-pale);
}

.blocks-menu__text strong { display: block; font-family: var(--font-display); font-size: var(--font-size-sm); font-weight: 600; }
.blocks-menu__text span   { display: block; font-size: var(--font-size-xs); color: var(--color-ink-soft); line-height: 1.4; }

.blocks-menu .tb__chip { display: none; margin-left: auto; flex-shrink: 0; min-width: 72px; text-align: center; }
.tb--ready .blocks-menu .tb__chip { display: inline-block; }
.blocks-menu .tb__chip[aria-pressed="true"]::before { content: none; }

/* Large mode: same atoms, bigger, with each block's description underneath */
.tb--large .tb__stage { max-height: none; gap: 10px; padding: 12px; }
.tb--large .tb-block__bar { font-size: 12px; padding: 5px 10px; }
.tb--large .tb-block__body { padding: 22px 26px; }
.tb--large .tb-block__desc {
  margin: 0;
  padding: 8px 26px 12px;
  border-top: 1px dashed var(--tb-pale);
  font-size: var(--font-size-xs);
  color: var(--color-ink-soft);
  max-width: none;
}
.tb--large .w-line { height: 10px; margin: 7px 0; border-radius: 5px; }
.tb--large .w-line--xl { height: 18px; }
.tb--large .w-line--lg { height: 13px; }
.tb--large .w-btn  { width: 128px; height: 30px; border-radius: 3px; margin-top: 8px; }
.tb--large .w-pill { width: 100px; height: 30px; border-radius: 3px; margin: 8px 0 0 10px; }
.tb--large .w-row  { gap: 18px; }
.tb--large .w-img  { min-height: 96px; border-radius: 3px; }
.tb--large .w-img--tall { min-height: 140px; }
.tb--large .w-card { padding: 14px; border-radius: 3px; }
.tb--large .w-dot  { width: 24px; height: 24px; margin-bottom: 8px; }
.tb--large .w-avatar { width: 48px; height: 48px; margin-bottom: 8px; }
.tb--large .w-grid-3 { gap: 14px; }
.tb--large .w-quote { font-size: 34px; }
.tb--large .w-price { height: 28px; margin: 8px auto; }
.tb--large .w-faq { padding: 8px 0; gap: 12px; }
.tb--large .w-faq::after { font-size: 18px; }
.tb--large .tb-block--hero .tb-block__body { min-height: 190px; display: flex; flex-direction: column; justify-content: center; }
.tb--large .tb-block--contact-cta .tb-block__body { padding: 32px 26px; }
.tb--large[data-template="table"] .tb-block--hero .tb-block__body { min-height: 230px; }
.tb--large[data-template="table"] .tb-block--services .w-dot { height: 64px; }
.tb--large[data-template="author"] .tb-block--hero .tb-block__body::before { width: 110px; height: 110px; margin: 0 26px 4px 0; }
.tb--large[data-template="event"] .tb-block--hero .tb-block__body::before { width: 130px; height: 20px; border-radius: 3px; margin-bottom: 10px; }
.tb--large[data-template="event"] .tb-block--hero .w-btn { width: 180px; }
.tb--large[data-template="portfolio"] .tb-block--hero .tb-block__body { min-height: 260px; }
.tb--large[data-template="portfolio"] .tb-block--gallery .w-img { min-height: 80px; }
.tb--large[data-template="local"] .tb-block--hero .tb-block__body::before { width: 180px; height: 124px; border-radius: 3px; margin: 0 26px 0 0; }
.tb--large[data-template="local"] .tb-block--map-hours .w-img--tall { min-height: 170px; }

/* ------------------------------------------------------------
   LIGHTBOX — native <dialog>, opened by main.js
   ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-cream);
}

.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(31, 42, 36, 0.92); }

.lightbox__figure { margin: 0; max-width: min(1100px, 92vw); text-align: center; }

.lightbox__img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border: 1px solid rgba(212, 228, 216, 0.3);
  background: var(--color-ink);
}

.lightbox__caption {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  color: var(--color-mint-pale);
}

.lightbox__btn {
  position: fixed;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(212, 228, 216, 0.4);
  border-radius: var(--radius);
  background: rgba(31, 42, 36, 0.6);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  line-height: 1;
  cursor: pointer;
}

.lightbox__btn:hover { background: var(--color-mint-deep); border-color: var(--color-mint); }
.lightbox__btn:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 2px; }
.lightbox__close { top: var(--space-3); right: var(--space-3); }
.lightbox__prev  { top: 50%; left: var(--space-3);  transform: translateY(-50%); }
.lightbox__next  { top: 50%; right: var(--space-3); transform: translateY(-50%); }

/* ------------------------------------------------------------
   RESPONSIVE — Tablet (≤900px)
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root {
    --font-size-3xl: 2.747rem;
    --font-size-4xl: 3.433rem;
  }

  .grid-3,
  .template-cards,
  .pricing-grid,
  .steps { grid-template-columns: 1fr; }

  .steps::before { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }

  .split { grid-template-columns: 1fr; }
  .split--reverse { direction: ltr; }

  .no-list { grid-template-columns: 1fr; }

  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .order-summary { position: static; }

  .field-group { grid-template-columns: minmax(0, 1fr); }
  .field--span2 { grid-column: span 1; }

  .block-list { grid-template-columns: minmax(0, 1fr); }

  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .page-hero__media { margin: 0; justify-self: start; width: 100%; }
  .page-hero__media img { max-height: 380px; }
  .process__step { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-4); }
  .process__portrait { width: 92px; height: 92px; }
  .process__caption { font-size: 10px; letter-spacing: 0.06em; white-space: nowrap; }
  .stat-strip { gap: var(--space-4) var(--space-6); }
  .included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }

  .template-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "builder" "foot" "examples";
    padding: var(--space-4);
  }

  .blocks-layout { grid-template-columns: minmax(0, 1fr); }
  .blocks-side { position: static; max-height: none; overflow: visible; }

  /* Collapsed nav — the desktop nav needs ~900px, so the toggle lives here, not at 600 */
  .site-nav {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-cream);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4);
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-mint-pale);
    box-shadow: 0 8px 24px rgba(31,42,36,0.08);
  }

  .site-nav.is-open { display: flex; }
  .site-nav .btn { margin-left: 0; }
  .nav-toggle { display: block; }

  .site-header { position: relative; }
  .form-progress { top: 0; }
}

/* ------------------------------------------------------------
   RESPONSIVE — Mobile (≤600px)
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  :root {
    --space-7: 4rem;
    --space-8: 5rem;
  }

  .container { padding-inline: var(--space-3); }

  .site-logo__img { height: 88px; }
  .site-header.is-stuck .site-logo__img { height: 44px; }
  .social-grid { grid-template-columns: minmax(0, 1fr); }

  .included-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .included-item__icon { width: 140px; height: 140px; }

  .bg-pattern--damask::before { background-size: 520px; }

  .lightbox__img { max-height: 70vh; }
  .lightbox-grid { gap: var(--space-2); }
  .lightbox-placeholder { font-size: 9px; letter-spacing: 0.06em; padding: 4px; overflow: hidden; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--space-3); transform: none; }
  .lightbox__prev { left: var(--space-3); }
  .lightbox__next { right: var(--space-3); }

  .hero { min-height: 80vh; }
  .hero__proof { gap: var(--space-4); }

  .hero__headline { font-size: var(--font-size-2xl); }

  .hero__ctas { flex-direction: column; align-items: flex-start; }

  h2 { font-size: var(--font-size-xl); }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }

  .pricing-grid { grid-template-columns: 1fr; }

  .data-table { font-size: var(--font-size-xs); }
  .data-table thead th,
  .data-table tbody td { padding: var(--space-1) var(--space-2); }

}

/* ------------------------------------------------------------
   PRINT
   ------------------------------------------------------------ */
@media print {
  .site-header,
  .site-footer,
  .btn,
  .cta-banner { display: none; }
}

/* ------------------------------------------------------------
   FOCUS VISIBLE — accessibility
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--color-mint-deep);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .template-card:hover { transform: none; }
  .lightbox-thumb:hover img { transform: none; }
}