/* =============================================================================
   THE BLISSFUL BEGINNING — Design System v3
   Built to the TBB Website Copybook (Amish Thakkar, September 2026)
   Identity: forest green · warm ivory · champagne gold
   Type:     Fraunces (optical display) · Manrope (body)
   Principle: editorial restraint with real craft. Variety of rhythm, not length.
   ============================================================================= */

@layer reset, tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------------------
   0 · Reset
   --------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100dvh; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  h1, h2, h3, h4 { overflow-wrap: break-word; text-wrap: balance; }
  p { text-wrap: pretty; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}

/* ---------------------------------------------------------------------------
   1 · Tokens
   --------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light;

    /* Surfaces */
    --ivory:    #F6F2EA;
    --ivory-2:  #EFE9DD;
    --ivory-3:  #E5DDCC;
    --paper:    #FBF9F4;

    /* Green */
    --green:    #1B3B32;
    --green-2:  #143028;
    --green-3:  #0C1F1A;
    --green-4:  #071411;

    /* Accents */
    --gold:     #C9A868;
    --gold-lt:  #DCC391;
    --gold-2:   #866A2E;    /* accessible on ivory */
    --sage:     #AFC0AB;
    --sage-2:   #86997F;

    /* Ink */
    --ink:      #22261F;
    --ink-2:    #4B5148;
    --muted:    #767C72;

    /* Lines */
    --line:      color-mix(in oklab, var(--green) 16%, transparent);
    --line-soft: color-mix(in oklab, var(--green) 9%, transparent);
    --line-gold: color-mix(in oklab, var(--gold) 52%, transparent);
    --line-dark: color-mix(in oklab, var(--ivory) 15%, transparent);

    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-xs:    clamp(.70rem,  .68rem + .10vw, .76rem);
    --fs-sm:    clamp(.86rem,  .82rem + .20vw, .94rem);
    --fs-base:  clamp(1rem,    .97rem + .18vw, 1.06rem);
    --fs-md:    clamp(1.1rem,  1.01rem + .38vw, 1.28rem);
    --fs-lg:    clamp(1.35rem, 1.12rem + 1.05vw, 1.9rem);
    --fs-xl:    clamp(1.85rem, 1.42rem + 2vw, 3rem);
    --fs-2xl:   clamp(2.3rem,  1.65rem + 3.1vw, 4.1rem);
    --fs-3xl:   clamp(2.6rem,  1.7rem + 4.2vw, 5rem);
    --fs-hero:  clamp(2.6rem,  1.75rem + 4vw, 5rem);
    --fs-huge:  clamp(4rem,    2rem + 10vw, 11rem);

    --gutter:    clamp(1.25rem, 4.5vw, 3.5rem);
    --container: 1240px;
    --wide:      1480px;
    --narrow:    700px;
    --section:   clamp(3.75rem, 7.5vw, 7.5rem);
    --gap:       clamp(1.5rem, 3vw, 2.75rem);
    --r-img:     4px;
    --r-card:    4px;
    --r-btn:     999px;
    --header-h:  86px;

    --ease-out:  cubic-bezier(.22, .61, .36, 1);
    --ease-luxe: cubic-bezier(.16, 1, .3, 1);
    --dur:       .9s;

    --shadow-soft: 0 10px 28px -20px rgb(12 31 26 / .3);
    --shadow-card: 0 34px 70px -44px rgb(12 31 26 / .5);
    --shadow-lift: 0 44px 80px -50px rgb(12 31 26 / .6);

    /* Fine paper grain, CSS only — no extra request */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  }
}

/* ---------------------------------------------------------------------------
   2 · Base
   --------------------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--font-body); font-size: var(--fs-base); color: var(--ink);
    background: var(--ivory); overflow-x: clip; position: relative;
  }
  /* whole-page grain */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
    background-image: var(--grain); opacity: .035; mix-blend-mode: multiply;
  }
  body.menu-open { overflow: hidden; }
  ::selection { background: var(--gold); color: var(--green-4); }

  h1, h2, h3, h4, .display {
    font-family: var(--font-display); font-weight: 400; line-height: 1.06;
    color: var(--green); letter-spacing: -.018em;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-lg); line-height: 1.14; }
  h4 { font-size: var(--fs-md); line-height: 1.25; }
  h1 em, h2 em, h3 em, .display em { font-style: italic; font-weight: 300; color: var(--gold-2); }

  p { color: var(--ink-2); max-width: 62ch; }
  .lead { font-size: var(--fs-md); line-height: 1.62; color: var(--ink); }

  a { text-decoration: none; transition: color .28s var(--ease-out); }
  a:hover { color: var(--gold-2); }
  :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
  hr { border: 0; border-top: 1px solid var(--line-soft); }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .2s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in .4s var(--ease-out) both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in  { from { opacity: 0; transform: translateY(6px); } }
}

/* ---------------------------------------------------------------------------
   3 · Layout
   --------------------------------------------------------------------------- */
@layer layout {
  .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .container--wide { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
  .container--narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }

  .section { padding-block: var(--section); position: relative; }
  .section--tight { padding-block: calc(var(--section) * .6); }
  .section--flush-top { padding-top: 0; }
  .section--paper { background: var(--paper); }
  .section--ivory-2 { background: var(--ivory-2); }
  .section--green { background: var(--green); color: var(--ivory); position: relative; isolation: isolate; }
  .section--green::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--grain); opacity: .08;
  }
  .section--green h2, .section--green h3, .section--green h4 { color: var(--ivory); }
  .section--green p { color: color-mix(in oklab, var(--ivory) 78%, transparent); }
  .section--green h2 em, .section--green h3 em { color: var(--gold-lt); }
  .section--dark { background: var(--green-4); color: var(--ivory); }

  picture.contents, .hero__media picture, .page-hero__media picture, .fig picture,
  .cs__media picture, .person-note picture, .breaker__media picture,
  .stack__media picture, .cta-band__media picture { display: contents; }

  .grid { display: grid; gap: var(--gap); }
  @media (min-width: 640px)  { .grid-2-sm { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 900px)  { .grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

  .split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  @media (min-width: 900px) {
    .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
    .split--img-right > :first-child { order: 2; }
    .split--45 { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
    .split--54 { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
    .split--top { align-items: start; }
  }
  .main { min-height: 60vh; }
}

/* ---------------------------------------------------------------------------
   4 · Components
   --------------------------------------------------------------------------- */
@layer components {

  /* ---- Type helpers -------------------------------------------------- */
  .eyebrow {
    display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2);
    margin-bottom: 1.35rem; line-height: 1.5;
  }
  .eyebrow::before {
    content: ""; width: 1.75rem; height: 1px; margin-top: .72em; background: var(--gold); flex-shrink: 0;
    transform-origin: left; animation: rule-in 1s var(--ease-luxe) both;
  }
  @keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .eyebrow--center { justify-content: center; }
  .section--green .eyebrow, .cta-band .eyebrow { color: var(--gold-lt); }
  .section--green .eyebrow::before, .cta-band .eyebrow::before { background: var(--gold-lt); }

  .section-head { max-width: 44rem; margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem); }
  .section-head--center { text-align: center; margin-inline: auto; }
  .section-head--center p { margin-inline: auto; }
  .section-head--center .eyebrow { justify-content: center; }
  .section-head p { margin-top: 1.1rem; }
  .section-head h2 + p { font-size: var(--fs-md); }

  .prose > * + * { margin-top: 1.1rem; }
  .prose p { max-width: 60ch; }
  .prose--lead p:first-child { font-size: var(--fs-md); color: var(--ink); line-height: 1.6; }

  /* ---- Buttons -------------------------------------------------------- */
  .btn {
    --btn-bg: var(--green); --btn-fg: var(--ivory); --btn-line: var(--green);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: 1rem 1.75rem; min-height: 3.3rem; border-radius: var(--r-btn);
    font-size: var(--fs-sm); font-weight: 700; letter-spacing: .004em;
    color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-line);
    overflow: hidden; isolation: isolate; text-align: center;
    transition: color .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-luxe), box-shadow .4s var(--ease-out);
  }
  .btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold);
    transform: translateY(101%); transition: transform .5s var(--ease-luxe);
  }
  .btn:hover, .btn:focus-visible { color: var(--green-4); border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
  .btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
  .btn svg { width: 1em; height: 1em; flex-shrink: 0; transition: transform .4s var(--ease-out); }
  .btn:hover svg { transform: translateX(4px); }

  .btn--gold { --btn-bg: var(--gold); --btn-fg: var(--green-4); --btn-line: var(--gold); }
  .btn--gold::after { background: var(--green); }
  .btn--gold:hover, .btn--gold:focus-visible { color: var(--ivory); border-color: var(--green); }
  .btn--ghost { --btn-bg: transparent; --btn-fg: var(--green); --btn-line: color-mix(in oklab, var(--green) 32%, transparent); }
  .btn--ghost::after { background: var(--green); }
  .btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ivory); border-color: var(--green); }
  .btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--ivory); --btn-line: color-mix(in oklab, var(--ivory) 42%, transparent); }
  .btn--ghost-light::after { background: var(--ivory); }
  .btn--ghost-light:hover, .btn--ghost-light:focus-visible { color: var(--green); border-color: var(--ivory); }
  .btn--sm { padding: .68rem 1.2rem; min-height: 2.6rem; font-size: var(--fs-xs); }
  .btn[disabled] { opacity: .55; pointer-events: none; }
  @media (max-width: 460px) { .btn { width: 100%; white-space: normal; line-height: 1.35; } }

  .link-arrow {
    position: relative; display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--fs-sm); font-weight: 700; color: var(--green); padding-bottom: .32rem;
  }
  .link-arrow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-gold); }
  .link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-2); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-luxe); }
  .link-arrow:hover { color: var(--gold-2); }
  .link-arrow:hover::after { transform: scaleX(1); }
  .link-arrow svg { width: .9em; height: .9em; transition: transform .4s var(--ease-out); }
  .link-arrow:hover svg { transform: translateX(4px); }
  .section--green .link-arrow { color: var(--ivory); }
  .section--green .link-arrow::before { background: var(--line-dark); }
  .section--green .link-arrow::after { background: var(--gold-lt); }
  .section--green .link-arrow:hover { color: var(--gold-lt); }

  .cta-row { display: flex; flex-wrap: wrap; gap: .8rem .9rem; }
  .cta-row--center { justify-content: center; }

  /* ---- Header --------------------------------------------------------- */
  .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; padding: .7rem 1rem; background: var(--green); color: var(--ivory); font-size: var(--fs-sm); }
  .skip-link:focus { top: 1rem; }

  .header {
    position: fixed; inset-inline: 0; top: 0; z-index: 100; height: var(--header-h);
    display: flex; align-items: center; color: var(--green);
    background: color-mix(in oklab, var(--ivory) 88%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid transparent;
    transition: background-color .45s var(--ease-out), color .45s var(--ease-out), border-color .45s var(--ease-out), transform .5s var(--ease-luxe), height .45s var(--ease-out);
  }
  .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
  body.is-scrolled .header { --header-h: 70px; border-color: var(--line-soft); }
  body.header-hidden:not(.menu-open) .header { transform: translateY(-100%); }

  body[data-header="transparent"]:not(.is-scrolled):not(.menu-open) .header {
    color: var(--ivory); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent;
  }
  body[data-header="transparent"]:not(.is-scrolled):not(.menu-open) .header::before {
    content: ""; position: absolute; inset: 0 0 -56px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgb(7 20 17 / .72), rgb(7 20 17 / .3) 56%, transparent);
  }
  body[data-header="transparent"]:not(.is-scrolled):not(.menu-open) .brand__mark { color: var(--gold); }
  body[data-header="transparent"]:not(.is-scrolled):not(.menu-open) .brand__tag { color: var(--gold-lt); }
  body[data-header="transparent"]:not(.is-scrolled):not(.menu-open) .header__cta { --btn-fg: var(--ivory); --btn-line: color-mix(in oklab, var(--ivory) 45%, transparent); }
  body.menu-open .header { color: var(--ivory); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
  body.menu-open .brand__tag { color: var(--gold-lt); }
  body.menu-open .brand__mark { color: var(--gold); }

  .brand { display: inline-flex; align-items: center; gap: .85rem; line-height: 1; color: currentColor; padding-block: .2rem; }
  .brand__mark { width: 31px; height: 36px; color: var(--gold-2); flex-shrink: 0; transition: width .45s var(--ease-out), height .45s var(--ease-out), color .45s; }
  .brand__text { display: inline-flex; flex-direction: column; gap: .3rem; }
  .brand__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.08rem, .94rem + .68vw, 1.34rem); letter-spacing: -.01em; white-space: nowrap; }
  .brand__tag { font-size: .52rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; white-space: nowrap; }
  body.is-scrolled .brand__mark { width: 26px; height: 30px; }
  @media (max-width: 400px) { .brand__tag { letter-spacing: .2em; } .brand { gap: .6rem; } }
  .brand--footer .brand__mark { width: 38px; height: 44px; color: var(--gold); }
  .brand--footer .brand__name { font-size: 1.5rem; }
  .brand--footer .brand__tag { color: var(--gold-lt); }

  .nav { display: none; }
  .nav__list { display: flex; align-items: center; gap: clamp(1rem, 1.9vw, 1.9rem); }
  .nav__link { position: relative; display: inline-flex; align-items: center; gap: .32rem; font-size: var(--fs-sm); font-weight: 600; padding: .45rem 0; color: currentColor; opacity: .82; transition: opacity .3s; }
  .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .05rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-luxe); }
  .nav__link:hover, .nav__link[aria-current="page"], .nav__item--open > .nav__link { opacity: 1; }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item--open > .nav__link::after { transform: scaleX(1); transform-origin: left; }
  .nav__caret { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .35s var(--ease-out); }
  .nav__item--open .nav__caret { transform: rotate(180deg); }

  .nav__item { position: relative; }
  .nav__sub {
    position: absolute; top: calc(100% + .6rem); left: -1.1rem; min-width: 21rem; padding: .7rem;
    background: var(--paper); border: 1px solid var(--line-soft); box-shadow: var(--shadow-card);
    display: grid; gap: .05rem; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s var(--ease-out), transform .35s var(--ease-luxe), visibility 0s .35s;
  }
  .nav__item--open .nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-out), transform .35s var(--ease-luxe), visibility 0s; }
  .nav__sub a { display: block; padding: .65rem .85rem; font-size: var(--fs-sm); font-weight: 600; color: var(--green); transition: background .25s, padding-left .3s var(--ease-out); }
  .nav__sub a small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); margin-top: .12rem; }
  .nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--ivory-2); padding-left: 1.1rem; }

  .header__actions { display: flex; align-items: center; gap: .85rem; }
  .header__cta { display: none; }
  .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; color: currentColor; }
  .burger span { display: block; height: 1.4px; width: 100%; background: currentColor; transition: transform .45s var(--ease-luxe), opacity .3s, width .45s var(--ease-luxe); }
  .burger span:nth-child(2) { width: 66%; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }
  @media (min-width: 1000px) { .nav { display: block; } .burger { display: none; } }
  @media (min-width: 1180px) { .header__cta { display: inline-flex; } }

  .menu {
    position: fixed; inset: 0; z-index: 90; background: var(--green-3); color: var(--ivory);
    display: grid; grid-template-rows: 1fr auto; gap: 1.5rem; padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2rem;
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .75s var(--ease-luxe), visibility 0s .75s; overflow-y: auto;
  }
  .menu::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .07; pointer-events: none; }
  .menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .75s var(--ease-luxe), visibility 0s; }
  .menu__list { display: flex; flex-direction: column; position: relative; }
  .menu__list > li { border-bottom: 1px solid var(--line-dark); }
  .menu__link { display: flex; align-items: baseline; gap: .9rem; font-family: var(--font-display); font-size: clamp(1.6rem, 6.5vw, 2.3rem); font-weight: 300; line-height: 1.3; color: var(--ivory); padding: .55rem 0; opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease-out), transform .55s var(--ease-luxe), color .25s; }
  .menu.is-open .menu__link { opacity: 1; transform: none; }
  .menu.is-open li:nth-child(1) .menu__link { transition-delay: .14s } .menu.is-open li:nth-child(2) .menu__link { transition-delay: .19s } .menu.is-open li:nth-child(3) .menu__link { transition-delay: .24s } .menu.is-open li:nth-child(4) .menu__link { transition-delay: .29s } .menu.is-open li:nth-child(5) .menu__link { transition-delay: .34s } .menu.is-open li:nth-child(6) .menu__link { transition-delay: .39s }
  .menu__link::before { content: counter(mi, decimal-leading-zero); counter-increment: mi; font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .14em; color: var(--gold); opacity: .8; }
  .menu__list { counter-reset: mi; }
  .menu__link:hover, .menu__link[aria-current="page"] { color: var(--gold-lt); }
  .menu__sub { display: grid; gap: .1rem; padding: 0 0 .9rem 2.3rem; }
  .menu__sub a { font-size: var(--fs-sm); font-weight: 600; color: color-mix(in oklab, var(--ivory) 74%, transparent); padding: .28rem 0; }
  .menu__sub a:hover, .menu__sub a[aria-current="page"] { color: var(--gold-lt); }
  .menu__foot { display: grid; gap: 1rem; font-size: var(--fs-sm); color: color-mix(in oklab, var(--ivory) 70%, transparent); position: relative; }
  .menu__foot a { color: var(--ivory); }
  .menu__foot .btn { justify-self: start; }
  @media (min-width: 1000px) { .menu { display: none; } }

  .progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); z-index: 101; pointer-events: none; }
  @supports (animation-timeline: scroll()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } @keyframes grow { from { transform: scaleX(0) } to { transform: scaleX(1) } } }

  /* ---- Home hero ------------------------------------------------------ */
  .hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding-top: var(--header-h); color: var(--ivory); isolation: isolate; overflow: hidden; background: var(--green-4); }
  .hero__media { position: absolute; inset: -6% 0 0; z-index: -3; }
  .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; animation: kenburns 30s var(--ease-out) both; }
  @keyframes kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }
  .hero__veil {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(to top, rgb(7 20 17 / .94) 0%, rgb(7 20 17 / .6) 38%, rgb(7 20 17 / .24) 72%, rgb(7 20 17 / .46) 100%),
      linear-gradient(100deg, rgb(7 20 17 / .82) 0%, rgb(7 20 17 / .58) 38%, rgb(7 20 17 / .12) 72%, transparent 100%);
  }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .09; }
  .hero__inner { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(5.5rem, 10vw, 7.5rem); }
  .hero__title { font-size: var(--fs-hero); color: var(--ivory); font-weight: 300; line-height: 1; max-width: 16ch; letter-spacing: -.028em; }
  .hero__title em { color: var(--gold-lt); }
  .hero__sub { margin-top: 1.5rem; max-width: 48ch; font-size: var(--fs-md); color: color-mix(in oklab, var(--ivory) 86%, transparent); line-height: 1.6; }
  .hero .cta-row { margin-top: 2.1rem; }

  /* facts rail across the bottom of the hero */
  .hero__rail {
    position: relative; z-index: 1; border-top: 1px solid var(--line-dark);
    display: grid; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 5vw, 4rem);
  }
  .hero__rail div { padding: 1rem 0; border-bottom: 1px solid var(--line-dark); }
  .hero__rail dt { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); font-weight: 700; }
  .hero__rail dd { margin-top: .3rem; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 300; color: var(--ivory); }
  @media (min-width: 760px) {
    .hero__rail { grid-template-columns: repeat(3, 1fr); gap: 0; }
    .hero__rail div { padding: 1.1rem 1.5rem 1.1rem 0; border-bottom: 0; border-right: 1px solid var(--line-dark); }
    .hero__rail div:last-child { border-right: 0; }
  }
  .hero__scroll { position: absolute; right: var(--gutter); bottom: 1.4rem; display: none; align-items: center; gap: .7rem; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 700; color: color-mix(in oklab, var(--ivory) 58%, transparent); }
  .hero__scroll::after { content: ""; width: 3rem; height: 1px; background: linear-gradient(90deg, var(--gold-lt), transparent); animation: slide 2.6s var(--ease-out) infinite; }
  @keyframes slide { 0% { transform: scaleX(0); transform-origin: left } 55% { transform: scaleX(1); transform-origin: left } 56% { transform-origin: right } 100% { transform: scaleX(0); transform-origin: right } }
  @media (min-width: 900px) { .hero__scroll { display: flex; } }

  /* ---- Page hero ------------------------------------------------------ */
  .page-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem)); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); background: var(--ivory); position: relative; }
  .page-hero h1 { max-width: 17ch; font-size: var(--fs-3xl); letter-spacing: -.028em; }
  .page-hero__lead { margin-top: 1.35rem; max-width: 54ch; font-size: var(--fs-md); color: var(--ink); line-height: 1.62; }
  .page-hero .cta-row { margin-top: 1.85rem; }
  .page-hero__media { width: min(100% - 2 * var(--gutter), var(--wide)); margin: clamp(2.25rem, 4.5vw, 3.75rem) auto 0; overflow: hidden; aspect-ratio: 21 / 9; background: var(--ivory-3); position: relative; }
  .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
  .page-hero__media::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .06; pointer-events: none; }
  @media (max-width: 780px) { .page-hero__media { aspect-ratio: 4 / 3; } }

  .crumbs { padding-top: calc(var(--header-h) + 1.2rem); font-size: var(--fs-xs); color: var(--muted); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
  .crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line-gold); }
  .crumbs a:hover { color: var(--gold-2); }
  .crumbs + .page-hero { padding-top: clamp(1.25rem, 3vw, 2rem); }

  /* ---- Figures -------------------------------------------------------- */
  .fig { position: relative; overflow: hidden; background: var(--ivory-3); }
  .fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.6s var(--ease-luxe); }
  .fig--wide img { aspect-ratio: 16 / 10; }
  .fig--square img { aspect-ratio: 1; }
  .fig--tall img { aspect-ratio: 3 / 4; }
  .fig::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; pointer-events: none; }
  .fig:hover img { transform: scale(1.035); }
  .fig figcaption { position: absolute; left: 0; bottom: 0; padding: .7rem 1rem; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ivory); background: color-mix(in oklab, var(--green-4) 74%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  /* thin gold rule offset behind an image */
  .fig--framed { isolation: isolate; }
  .fig--framed::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--gold); translate: 12px 12px; z-index: -1; }

  /* ---- Statement (large editorial line) ------------------------------- */
  .statement { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-2xl); line-height: 1.08; letter-spacing: -.025em; color: var(--green); max-width: 20ch; }
  .statement em { font-style: italic; color: var(--gold-2); }
  .section--green .statement { color: var(--ivory); }
  .section--green .statement em { color: var(--gold-lt); }

  /* ---- Sticky split (image holds while text scrolls) ------------------ */
  .stack { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
  @media (min-width: 940px) {
    .stack { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
    .stack--img-left > .stack__media { order: -1; }
    .stack__media { position: sticky; top: calc(var(--header-h) + 3rem); }
  }
  .stack__media { overflow: hidden; position: relative; background: var(--ivory-3); }
  .stack__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .stack__media::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; pointer-events: none; }
  .stack__body > * + * { margin-top: 1.15rem; }

  /* ---- Index list (numbered rows with hairlines) ---------------------- */
  .index-list { border-top: 1px solid var(--line); counter-reset: ix; }
  .index-list__item {
    display: grid; grid-template-columns: 2.6rem minmax(0,1fr); gap: .2rem 1.25rem;
    padding: clamp(1.4rem, 3vw, 2.1rem) 0; border-bottom: 1px solid var(--line);
    transition: background-color .4s var(--ease-out);
  }
  .index-list__item::before {
    content: counter(ix, decimal-leading-zero); counter-increment: ix; grid-row: 1 / span 2;
    font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--gold-2);
    padding-top: .18rem; letter-spacing: .02em;
  }
  .index-list__item h3 { font-size: var(--fs-lg); }
  .index-list__item p { margin-top: .55rem; font-size: var(--fs-sm); line-height: 1.7; max-width: 58ch; }
  @media (min-width: 900px) {
    .index-list__item { grid-template-columns: 3.5rem minmax(0, 20rem) minmax(0,1fr); align-items: start; gap: 2.5rem; }
    .index-list__item::before { grid-row: 1; }
    .index-list__item p { margin-top: 0; }
  }
  .section--green .index-list, .section--green .index-list__item { border-color: var(--line-dark); }
  .section--green .index-list__item::before { color: var(--gold-lt); }
  .section--green .index-list__item h3 { color: var(--ivory); font-weight: 300; }

  /* ---- Cards (offset, with hairline corner) --------------------------- */
  .cards { display: grid; gap: var(--gap); }
  @media (min-width: 780px) { .cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  @media (min-width: 640px) { .cards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .card {
    position: relative; display: flex; flex-direction: column; gap: .75rem;
    padding: clamp(1.6rem, 3vw, 2.25rem); background: var(--paper);
    border: 1px solid var(--line-soft);
    transition: transform .5s var(--ease-luxe), box-shadow .5s var(--ease-out), border-color .5s;
  }
  .card::before {
    content: ""; position: absolute; top: -1px; left: -1px; width: 22px; height: 22px;
    border-top: 1px solid var(--gold); border-left: 1px solid var(--gold);
    opacity: 0; transition: opacity .45s var(--ease-out), width .45s var(--ease-luxe), height .45s var(--ease-luxe);
  }
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--line); }
  .card:hover::before { opacity: 1; width: 34px; height: 34px; }
  .card__num { font-family: var(--font-display); font-size: .95rem; color: var(--gold-2); letter-spacing: .04em; }
  .card h3 { font-size: var(--fs-lg); }
  .card p { font-size: var(--fs-sm); line-height: 1.7; }
  .card .link-arrow { margin-top: auto; align-self: flex-start; font-size: var(--fs-xs); padding-top: .5rem; }
  @media (min-width: 780px) { .cards--offset > :nth-child(2) { transform: translateY(2rem); } .cards--offset > :nth-child(2):hover { transform: translateY(calc(2rem - 4px)); } }
  .section--green .card { background: color-mix(in oklab, var(--ivory) 6%, transparent); border-color: var(--line-dark); }
  .section--green .card h3 { color: var(--ivory); }
  .section--green .card__num { color: var(--gold-lt); }

  /* ---- Service pathways ----------------------------------------------- */
  .paths { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
  @media (min-width: 900px) { .paths { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .path {
    position: relative; display: flex; flex-direction: column; gap: .8rem;
    padding: clamp(1.7rem, 3vw, 2.5rem); background: var(--paper);
    transition: background-color .5s var(--ease-out);
  }
  .path::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-luxe); }
  .path:hover { background: var(--ivory); }
  .path:hover::after { transform: scaleX(1); }
  .path__eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); line-height: 1.6; }
  @media (min-width: 900px) { .path__eyebrow { min-height: 2.6em; } }
  .path h3 { font-size: var(--fs-lg); }
  .path p { font-size: var(--fs-sm); line-height: 1.7; }
  .path .link-arrow { margin-top: auto; align-self: flex-start; padding-top: .6rem; }

  /* ---- Full-bleed breaker with overlaid line -------------------------- */
  .breaker { position: relative; isolation: isolate; overflow: hidden; color: var(--ivory); min-height: clamp(22rem, 52vh, 34rem); display: grid; align-items: center; }
  .breaker__media { position: absolute; inset: -8% 0 0; z-index: -3; }
  .breaker__media img { width: 100%; height: 100%; object-fit: cover; }
  .breaker__veil {
    position: absolute; inset: 0; z-index: -2;
    background:
      linear-gradient(95deg, rgb(7 20 17 / .95) 0%, rgb(7 20 17 / .9) 34%, rgb(7 20 17 / .62) 62%, rgb(7 20 17 / .34) 100%),
      linear-gradient(to top, rgb(7 20 17 / .5), transparent 55%);
  }
  .breaker::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .08; }
  .breaker__inner { padding-block: clamp(3.25rem, 6vw, 5.25rem); }
  .breaker__inner > * { max-width: 40rem; }
  .breaker .statement { color: var(--ivory); max-width: 17ch; }
  .breaker .statement em { color: var(--gold-lt); }
  .breaker p { margin-top: 1.3rem; max-width: 46ch; color: color-mix(in oklab, var(--ivory) 82%, transparent); }
  .breaker .cta-row { margin-top: 2rem; }
  .breaker__figure { margin-top: 2rem; display: flex; align-items: center; gap: 1.15rem; }
  .breaker__figure b { font-family: var(--font-display); font-size: clamp(3.25rem, 7vw, 5.5rem); font-weight: 300; line-height: .85; color: var(--gold-lt); letter-spacing: -.04em; }
  .breaker__figure span { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: color-mix(in oklab, var(--ivory) 74%, transparent); max-width: 22ch; line-height: 1.75; border-left: 1px solid var(--line-dark); padding-left: 1.15rem; }

  /* ---- Method steps (sticky index + content) -------------------------- */
  .method { display: grid; gap: clamp(2rem, 4vw, 3rem); }
  @media (min-width: 1000px) { .method { grid-template-columns: minmax(0, 15rem) minmax(0,1fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: start; } }
  .method__nav { display: none; }
  @media (min-width: 1000px) {
    .method__nav { display: block; position: sticky; top: calc(var(--header-h) + 3rem); }
    .method__nav ol { list-style: none; padding: 0; display: grid; gap: .1rem; counter-reset: mn; border-left: 1px solid var(--line); }
    .method__nav a { display: flex; gap: .7rem; padding: .5rem 0 .5rem 1rem; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; position: relative; transition: color .3s, padding-left .35s var(--ease-out); }
    .method__nav a::before { content: counter(mn, decimal-leading-zero); counter-increment: mn; font-family: var(--font-display); font-size: .72rem; color: var(--gold-2); opacity: .75; }
    .method__nav a::after { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--gold); transform: scaleY(0); transition: transform .4s var(--ease-luxe); }
    .method__nav a:hover, .method__nav a.is-active { color: var(--green); padding-left: 1.35rem; }
    .method__nav a:hover::after, .method__nav a.is-active::after { transform: scaleY(1); }
  }
  .steps { display: grid; border-top: 1px solid var(--line); }
  .step { display: grid; gap: .6rem; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 2rem); position: relative; }
  .step__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
  .step h3, .step h2 { font-size: var(--fs-lg); font-weight: 400; }
  .step p { font-size: var(--fs-sm); line-height: 1.72; }
  .step .prose { display: grid; gap: .85rem; }
  .section--green .steps, .section--green .step { border-color: var(--line-dark); }
  .section--green .step__label { color: var(--gold-lt); }

  /* ---- Principles ------------------------------------------------------ */
  .principles { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
  .principle { padding: clamp(1.4rem, 3vw, 2rem) 0; border-bottom: 1px solid var(--line-dark); display: grid; gap: .55rem; }
  .principle h3 { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 300; }
  .principle p { font-size: var(--fs-sm); line-height: 1.7; }
  @media (min-width: 820px) { .principle { grid-template-columns: minmax(0, 22rem) minmax(0,1fr); gap: 2.5rem; align-items: start; } }

  /* ---- Quote ---------------------------------------------------------- */
  .quote { max-width: 46rem; }
  .quote--center { margin-inline: auto; text-align: center; }
  .quote__mark { font-family: var(--font-display); font-size: 4.5rem; line-height: .55; color: var(--gold); font-weight: 300; opacity: .85; }
  .quote blockquote { margin-top: 1.2rem; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 300; line-height: 1.26; letter-spacing: -.018em; color: var(--green); font-style: italic; }
  .quote cite { display: block; margin-top: 1.4rem; font-style: normal; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
  .section--green .quote blockquote { color: var(--ivory); }
  .section--green .quote cite { color: var(--gold-lt); }
  .section--green .quote__mark { color: var(--gold-lt); }

  /* ---- Case studies ---------------------------------------------------- */
  .cs { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-soft); }
  .cs:first-of-type { border-top: 0; padding-top: 0; }
  @media (min-width: 940px) { .cs { grid-template-columns: minmax(0,6fr) minmax(0,6fr); align-items: center; } .cs--flip > :first-child { order: 2; } }
  .cs__media { overflow: hidden; background: var(--ivory-3); position: relative; }
  .cs__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1.6s var(--ease-luxe); }
  .cs:hover .cs__media img { transform: scale(1.035); }
  .cs__media::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; pointer-events: none; }
  .cs__label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
  .cs h3, .cs h2 { margin-top: .65rem; font-size: var(--fs-xl); letter-spacing: -.022em; }
  .cs .prose { margin-top: 1.1rem; }
  .cs .prose p { font-size: var(--fs-sm); line-height: 1.72; }
  .cs .link-arrow { margin-top: 1.35rem; }
  .cs__quote { margin-top: 1.35rem; padding-left: 1.2rem; border-left: 2px solid var(--gold); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: var(--fs-md); line-height: 1.45; color: var(--green); }

  /* ---- Person note ----------------------------------------------------- */
  .person-note { display: flex; align-items: center; gap: 1.1rem; padding: 1.05rem 1.2rem; background: var(--paper); border: 1px solid var(--line-soft); max-width: 34rem; }
  .person-note img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
  .person-note p { font-size: var(--fs-sm); line-height: 1.52; }
  .person-note strong { display: block; color: var(--green); font-weight: 700; }

  /* ---- Note / disclosure ----------------------------------------------- */
  .note { padding: clamp(1.2rem, 2.5vw, 1.7rem) clamp(1.2rem, 2.5vw, 1.8rem); background: var(--ivory-2); border-left: 2px solid var(--gold); }
  .note p { font-size: var(--fs-sm); line-height: 1.68; max-width: 62ch; }
  .note strong { color: var(--green); }
  .section--green .note { background: color-mix(in oklab, var(--ivory) 7%, transparent); border-color: var(--gold-lt); }

  /* ---- FAQ -------------------------------------------------------------- */
  .faq-group + .faq-group { margin-top: clamp(2.5rem, 4.5vw, 3.75rem); }
  .faq-group > h2 { font-size: var(--fs-lg); margin-bottom: .5rem; }
  .faq { border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; padding: 1.2rem 0; font-family: var(--font-display); font-size: var(--fs-md); color: var(--green); transition: color .28s; }
  .faq summary:hover { color: var(--gold-2); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; width: 11px; height: 11px; flex-shrink: 0; margin-top: .45rem; background: var(--gold-2); clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%); transition: transform .45s var(--ease-luxe); }
  .faq details[open] summary::after { transform: rotate(135deg); }
  .faq__body { padding-bottom: 1.3rem; }
  .faq__body p { font-size: var(--fs-sm); line-height: 1.72; }
  .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-luxe), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }

  /* ---- Forms ------------------------------------------------------------ */
  .form { display: grid; gap: 1.3rem; }
  .form__row { display: grid; gap: 1.3rem; }
  @media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  .field { display: grid; gap: .4rem; }
  .field > label, .field legend { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
  .field .hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
  .field input, .field select, .field textarea {
    width: 100%; padding: .9rem 1.05rem; background: var(--paper); border: 1px solid var(--line);
    font-size: 1rem; color: var(--ink); min-height: 3.25rem; border-radius: 2px;
    transition: border-color .28s, box-shadow .28s, background-color .28s;
  }
  .field textarea { min-height: 7rem; resize: vertical; }
  .field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
  .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--green); background: #fff; box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage) 42%, transparent); }
  .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #97382C; }
  .field .error { font-size: var(--fs-xs); color: #97382C; display: none; }
  .field.is-invalid .error { display: block; }
  .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%231B3B32' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
  .field input[type="date"] { color-scheme: light; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
  .chips label { position: relative; }
  .chips input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
  .chips span { display: inline-flex; align-items: center; gap: .45rem; padding: .62rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--paper); transition: all .3s var(--ease-out); user-select: none; }
  .chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--gold-2); transition: background .3s; }
  .chips input:checked + span { background: var(--green); color: var(--ivory); border-color: var(--green); }
  .chips input:checked + span::before { background: var(--gold); border-color: var(--gold); }
  .chips input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
  .form__foot { display: grid; gap: .9rem; }
  .form__privacy { font-size: var(--fs-xs); color: var(--muted); line-height: 1.62; max-width: 60ch; }
  .form__error { display: none; padding: .9rem 1.1rem; background: #FAEDEA; border: 1px solid #DFB4AA; color: #762C21; font-size: var(--fs-sm); }
  .form__error.is-visible { display: block; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-success { display: none; padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--line-gold); background: var(--paper); text-align: center; }
  .form-success.is-visible { display: block; animation: fadeUp .7s var(--ease-luxe) both; }
  .form-success__mark { width: 54px; height: 54px; margin: 0 auto 1.15rem; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold-2); }
  .form-success__mark svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .form-success h2 { font-size: var(--fs-xl); }
  .form-success p { margin: .95rem auto 0; }
  .form-card { background: var(--ivory-2); padding: clamp(1.5rem, 3.5vw, 2.75rem); position: relative; }
  .form-card::before { content: ""; position: absolute; top: 0; left: 0; width: 42px; height: 42px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }

  /* ---- Contact list ------------------------------------------------------ */
  .contact-list { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
  .contact-list > div { padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); }
  .contact-list dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
  .contact-list dd { margin-top: .35rem; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 300; color: var(--green); }
  .contact-list dd small { display: block; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--muted); margin-top: .2rem; }

  /* ---- CTA band ---------------------------------------------------------- */
  .cta-band { position: relative; isolation: isolate; color: var(--ivory); overflow: hidden; background: var(--green); }
  .cta-band__media { position: absolute; inset: -6% 0 0; z-index: -3; }
  .cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
  .cta-band__veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgb(7 20 17 / .68), rgb(7 20 17 / .88)); }
  .cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); opacity: .08; }
  .cta-band__inner { text-align: center; padding-block: var(--section); }
  .cta-band h2 { color: var(--ivory); font-weight: 300; max-width: 20ch; margin-inline: auto; font-size: var(--fs-2xl); letter-spacing: -.025em; }
  .cta-band h2 em { color: var(--gold-lt); }
  .cta-band p { margin: 1.2rem auto 0; color: color-mix(in oklab, var(--ivory) 80%, transparent); }
  .cta-band .cta-row { justify-content: center; margin-top: 2rem; }
  .cta-band .eyebrow { justify-content: center; }

  /* ---- Footer ------------------------------------------------------------ */
  .footer { background: var(--green-4); color: color-mix(in oklab, var(--ivory) 72%, transparent); font-size: var(--fs-sm); position: relative; isolation: isolate; }
  .footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .06; pointer-events: none; }
  .footer a { color: color-mix(in oklab, var(--ivory) 86%, transparent); }
  .footer a:hover { color: var(--gold-lt); }
  .footer__top { padding-block: clamp(3.25rem, 6vw, 5rem) clamp(2.25rem, 4vw, 3.25rem); display: grid; gap: 2.25rem; border-bottom: 1px solid var(--line-dark); }
  @media (min-width: 640px)  { .footer__top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1000px) { .footer__top { grid-template-columns: 1.75fr 1fr 1fr 1fr; gap: 2.75rem; } }
  .footer .brand__name { color: var(--ivory); }
  .footer__tag { margin-top: 1rem; max-width: 34ch; line-height: 1.72; color: color-mix(in oklab, var(--ivory) 66%, transparent); }
  .footer__philosophy { margin-top: 1.15rem; max-width: 32ch; font-family: var(--font-display); font-size: 1.08rem; font-style: italic; font-weight: 300; line-height: 1.45; color: var(--gold-lt); }
  .footer h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.05rem; }
  .footer ul { display: grid; gap: .55rem; }
  .footer__contact li { line-height: 1.62; }
  .footer__contact strong { display: block; color: var(--ivory); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .12rem; }
  .footer__cta { margin-top: 1.6rem; }
  .footer__bottom { padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; justify-content: space-between; font-size: var(--fs-xs); color: color-mix(in oklab, var(--ivory) 50%, transparent); }
  .footer__bottom a { color: inherit; }
  .footer__bottom nav { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; }

  /* ---- WhatsApp ---------------------------------------------------------- */
  .whatsapp {
    --wa: #25D366; --wa-dark: #1DB954;
    position: fixed; right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.1rem, env(safe-area-inset-bottom)); z-index: 80;
    display: inline-flex; align-items: center; justify-content: center; height: 54px; min-width: 54px; padding: 0 13px; border-radius: 999px;
    background: var(--wa); color: #fff; box-shadow: 0 16px 30px -12px rgb(0 0 0 / .45);
    transition: transform .35s var(--ease-luxe), background-color .25s;
  }
  .whatsapp svg { width: 27px; height: 27px; fill: #fff; flex-shrink: 0; }
  .whatsapp span { max-width: 0; overflow: hidden; white-space: nowrap; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; transition: max-width .45s var(--ease-luxe), margin .45s var(--ease-luxe); }
  .whatsapp:hover, .whatsapp:focus-visible { transform: translateY(-3px); background: var(--wa-dark); color: #fff; }
  @media (hover: hover) and (min-width: 900px) { .whatsapp { right: 1.6rem; bottom: 1.6rem; } .whatsapp:hover span, .whatsapp:focus-visible span { max-width: 11rem; margin-left: .6rem; margin-right: .2rem; } }

  .env-notice { position: fixed; top: 0; inset-inline: 0; z-index: 200; padding: .8rem var(--gutter); background: var(--green); color: var(--ivory); font-size: var(--fs-sm); text-align: center; line-height: 1.5; }

  /* ---- Legal ------------------------------------------------------------- */
  .legal h2 { font-size: var(--fs-lg); margin-top: 2.35rem; }
  .legal h2:first-child { margin-top: 0; }
  .legal p, .legal li { font-size: var(--fs-sm); line-height: 1.75; }
  .legal ul { margin-top: .8rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
  .legal p + p { margin-top: .85rem; }

  /* ---- 404 --------------------------------------------------------------- */
  .error-page { min-height: 76svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem; }
  .error-page .num { font-family: var(--font-display); font-size: var(--fs-huge); line-height: .85; color: var(--ivory-3); font-weight: 300; letter-spacing: -.04em; }
}

/* ---------------------------------------------------------------------------
   5 · Utilities & motion
   --------------------------------------------------------------------------- */
@layer utilities {
  .text-center { text-align: center; }
  .mt-1 { margin-top: 1rem } .mt-2 { margin-top: 2rem } .mt-3 { margin-top: 3rem }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-luxe); transition-delay: var(--d, 0ms); }
  .reveal--scale { transform: scale(.985); }
  .reveal.is-in { opacity: 1; transform: none; }
  /* Image wipe reveal.
     The clip is applied to the inner image, never to the observed element:
     a fully clipped element reports no intersection, which would leave it
     hidden for good. */
  .reveal--wipe { opacity: 1; transform: none; }
  .reveal--wipe > img,
  .reveal--wipe picture > img { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-luxe); transition-delay: var(--d, 0ms); }
  .reveal--wipe.is-in > img,
  .reveal--wipe.is-in picture > img { clip-path: inset(0 0 0 0); }
  .stagger > * { --d: calc(var(--i, 0) * 75ms); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .reveal--wipe > img, .reveal--wipe picture > img { clip-path: none; transition: none; }
  }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .no-js .reveal { opacity: 1; transform: none; }
  .no-js .reveal--wipe > img, .no-js .reveal--wipe picture > img { clip-path: none; }
}

/* =============================================================================
   v4 layout refinements
   - the home hero fits one screen, so the buttons and facts are never below the fold
   - image and text columns centre against each other instead of leaving a gap
   - text-only sections put the heading beside the copy and use the full width
   - page heroes and method steps use two columns on wide screens
   ============================================================================= */
@layer components {
  .hero .eyebrow { color: var(--gold-lt); }
  .hero .eyebrow::before { background: var(--gold-lt); }
  .hero__title { font-size: clamp(2.4rem, min(1.75rem + 4vw, 8.4svh), 5rem); }
  .hero__inner { padding-block: clamp(1.25rem, 4svh, 3.25rem) clamp(2rem, 6svh, 4.5rem); }
  .hero__sub { margin-top: clamp(.85rem, 2.2svh, 1.5rem); }
  .hero .cta-row { margin-top: clamp(1.1rem, 3svh, 2.1rem); }
  .hero__rail { margin-top: clamp(1.25rem, 4svh, 3rem); }

  @media (min-width: 940px) {
    .stack { align-items: center; }
    .stack__media { position: relative; top: auto; }
  }

  .split--statement { align-items: center; }
  @media (min-width: 900px) {
    .split--statement { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
  }
  .split--statement .statement { font-size: var(--fs-xl); max-width: 18ch; }
  .split--statement .prose p { font-size: var(--fs-md); line-height: 1.65; }

  .feature { display: grid; gap: 1.25rem; }
  .feature .section-head { margin-bottom: 0; }
  .feature__body > * + * { margin-top: 1.1rem; }
  .feature__body .prose p { font-size: var(--fs-md); line-height: 1.65; }
  @media (min-width: 900px) {
    .feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
    .feature__body { padding-top: 1.6rem; }
  }

  @media (min-width: 1000px) {
    .page-hero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; }
    .page-hero .container > .eyebrow { grid-column: 1; grid-row: 1; }
    .page-hero .container > h1 { grid-column: 1; grid-row: 2; }
    .page-hero .container > .page-hero__lead { grid-column: 2; grid-row: 2; margin-top: 0; align-self: end; max-width: 46ch; }
    .page-hero .container > .cta-row { grid-column: 2; grid-row: 3; }
  }

  @media (min-width: 1200px) {
    .step { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); column-gap: clamp(2rem, 3.5vw, 3.25rem); row-gap: .6rem; align-items: start; }
    .step__label { grid-column: 1 / -1; }
    .step h3, .step h2 { grid-column: 1; }
    .step .prose { grid-column: 2; grid-row: 2; }
  }

  .section--tight > .container > .note { max-width: 52rem; margin-inline: auto; }

  @media (min-width: 1000px) {
    .faq-group { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
    .faq-group > h2 { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; padding-top: 1.15rem; }
  }
}

/* Short laptop screens: keep the whole home hero, including the facts rail, on one screen */
@layer components {
  @media (min-width: 900px) and (max-height: 800px) {
    .hero__title { font-size: clamp(2.1rem, 7.2svh, 3.6rem); }
    .hero__sub { font-size: var(--fs-base); line-height: 1.55; max-width: 56ch; }
    .hero .cta-row { margin-top: 1rem; }
    .hero .btn { padding-block: .8rem; }
    .hero__rail { margin-top: 1.1rem; }
    .hero__rail div { padding-block: .65rem; }
    .hero__rail dd { font-size: var(--fs-base); }
    .hero__inner { padding-block: .75rem 1.5rem; }
  }
}

/* =============================================================================
   Home page v5
   - image columns match the height of the copy beside them
   - three cards stack and settle against each other while scrolling
   - a photography strip drifts slowly across the page
   - full-bleed photographs drift with the scroll where the browser supports it
   All motion is disabled for visitors who ask for reduced motion.
   ============================================================================= */
@layer components {
  @media (min-width: 940px) {
    .stack { align-items: stretch; }
    .stack__media { position: relative; min-height: 30rem; }
    .stack__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  }
  @media (min-width: 900px) {
    .split--panel { align-items: stretch; }
    .split--panel > .fig--panel { position: relative; min-height: 26rem; }
    .fig--panel img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  }

  /* ---- Stacking cards -------------------------------------------------- */
  .cardstack { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
  .cardstack__item {
    display: grid; overflow: hidden; background: var(--paper);
    border: 1px solid var(--line-soft); box-shadow: 0 1px 0 rgb(7 20 17 / .02);
  }
  .cardstack__media { position: relative; min-height: 13rem; background: var(--ivory-3); }
  .cardstack__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cardstack__media::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .05; }
  .cardstack__body { padding: clamp(1.5rem, 3vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
  .cardstack__num { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 300; color: var(--gold-2); line-height: 1; }
  .cardstack__body h3 { font-size: var(--fs-lg); }
  .cardstack__body p { font-size: var(--fs-sm); line-height: 1.72; max-width: 52ch; }
  @media (min-width: 720px) {
    .cardstack__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
    .cardstack__media { min-height: 20rem; }
  }
  @media (min-width: 900px) {
    .cardstack { gap: clamp(2rem, 4vw, 3.25rem); }
    .cardstack__item { position: sticky; top: calc(var(--header-h) + 2rem + var(--i) * 2.25rem); }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
      .cardstack__item { animation: card-settle linear both; animation-timeline: view(); animation-range: exit -20% exit 70%; }
      @keyframes card-settle { to { transform: scale(.955); filter: brightness(.965); } }
    }
  }

  /* ---- Photography strip ----------------------------------------------- */
  .section--strip { overflow: hidden; }
  .gallery { position: relative; margin-inline: calc(var(--gutter) * -1); }
  .gallery::before, .gallery::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 6vw, 6rem); z-index: 2; pointer-events: none;
  }
  .gallery::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
  .gallery::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
  .gallery__track { display: flex; gap: clamp(.75rem, 1.5vw, 1.25rem); width: max-content; animation: drift 66s linear infinite; }
  .gallery:hover .gallery__track, .gallery:focus-within .gallery__track { animation-play-state: paused; }
  .gallery__item { position: relative; width: clamp(13rem, 21vw, 19rem); aspect-ratio: 4 / 5; overflow: hidden; background: var(--ivory-3); margin: 0; }
  .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-luxe); }
  .gallery__item:hover img { transform: scale(1.04); }
  @keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
  @media (prefers-reduced-motion: reduce) {
    .gallery { overflow-x: auto; }
    .gallery__track { animation: none; }
  }

  /* ---- Full-bleed photographs drift with the scroll -------------------- */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .breaker__media img, .cta-band__media img {
        animation: photo-drift linear both; animation-timeline: view(); animation-range: cover;
      }
      @keyframes photo-drift {
        from { transform: translate3d(0, -3.5%, 0) scale(1.08); }
        to { transform: translate3d(0, 3.5%, 0) scale(1.08); }
      }
    }
  }
}

/* Stacking cards: keep each card's heading visible once the next card settles over it */
@layer components {
  .cardstack__body { justify-content: flex-start; }
  @media (min-width: 720px) {
    .cardstack__body { padding-block: clamp(1.4rem, 2.6vw, 2rem); }
  }
  @media (min-width: 900px) {
    .cardstack__item { top: calc(var(--header-h) + 1.5rem + var(--i) * 5.5rem); }
  }
  .fig--panel img { object-position: 50% 30%; }
}

/* Image reveal without clipping.
   A clipped image is treated as not visible by the browser, so lazy loading can
   skip it entirely and the photograph never arrives. The reveal now fades and
   settles the image instead, which leaves loading untouched. */
@layer components {
  .reveal--wipe > img, .reveal--wipe picture > img {
    clip-path: none;
    opacity: 0;
    transform: scale(1.045);
    transition: opacity .85s var(--ease-luxe), transform 1.5s var(--ease-luxe);
    transition-delay: var(--d, 0ms);
  }
  .reveal--wipe.is-in > img, .reveal--wipe.is-in picture > img { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal--wipe > img, .reveal--wipe picture > img { opacity: 1; transform: none; transition: none; }
  }
}

/* =============================================================================
   Inquiry form — sections, choices and the confirmation panel
   ============================================================================= */
@layer components {
  .form--inquiry { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); }
  .form__sec { display: grid; gap: 1.15rem; padding-top: clamp(1.25rem, 2.5vw, 1.9rem); border-top: 1px solid var(--line); position: relative; }
  .form__sec:first-child { border-top: 0; padding-top: 0; }
  .form__num { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 300; color: var(--gold-2); line-height: 1; }
  .form__sec > h3 { font-size: var(--fs-lg); letter-spacing: -.015em; }
  .form__sec-intro { font-size: var(--fs-sm); line-height: 1.7; color: var(--muted); max-width: 60ch; }
  .form__sec > .form__num + h3 { margin-top: -.55rem; }

  .field--choice { border: 0; padding: 0; margin: 0; min-width: 0; }
  .field--choice > legend { display: block; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--green); margin-bottom: .35rem; }
  .req { color: var(--gold-2); }

  .opts { display: grid; gap: .5rem; margin-top: .55rem; }
  @media (min-width: 620px) { .opts--check, .opts--radio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .opt {
    display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .9rem;
    border: 1px solid var(--line); background: var(--ivory-2); cursor: pointer;
    font-size: var(--fs-sm); line-height: 1.5; transition: border-color .25s, background-color .25s;
  }
  .opt:hover { border-color: var(--gold); }
  .opt input { margin: .18rem 0 0; accent-color: var(--green); flex-shrink: 0; }
  .opt:has(input:checked) { border-color: var(--gold); background: color-mix(in oklab, var(--gold) 12%, var(--paper)); }
  .opt:has(input:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 2px; }
  .hint--note { margin-top: .6rem; font-style: italic; }

  .form-success__sign { margin-top: 1.6rem; font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.6; color: var(--green); }
  .form-success__tag { margin-top: .5rem; font-style: italic; color: var(--gold-2); }

  .form-trust { border-top: 1px solid var(--line); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
  .form-trust p { font-size: var(--fs-sm); line-height: 1.72; }
  .form-trust p + p { margin-top: .9rem; }
  .form-trust__close { margin-top: 1.1rem; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 300; line-height: 1.45; color: var(--green); }

  iframe.hp { position: absolute; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none; }
}

/* Radio and checkbox controls must not stretch like text inputs */
@layer components {
  .opt input[type="radio"], .opt input[type="checkbox"] { width: auto; min-width: 0; flex: 0 0 auto; }
  .opt span { min-width: 0; overflow-wrap: anywhere; }
}

/* Policy pages: the date line */
@layer components {
  .legal__date { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold-2); margin-bottom: 1.6rem; }
}

/* Comparison table: three planning levels side by side */
@layer components {
  .compare { overflow-x: auto; border: 1px solid var(--line); background: var(--paper); }
  .compare table { width: 100%; border-collapse: collapse; min-width: 44rem; }
  .compare th, .compare td { text-align: left; padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(.9rem, 1.8vw, 1.4rem); vertical-align: top; font-size: var(--fs-sm); line-height: 1.6; border-bottom: 1px solid var(--line); }
  .compare thead th { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 400; color: var(--green); border-bottom: 1px solid var(--gold); }
  .compare tbody th { width: 11rem; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--gold-2); }
  .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
  .compare tbody tr:hover { background: var(--ivory-2); }
  @media (max-width: 720px) {
    .compare { overflow: visible; border: 0; background: none; }
    .compare table, .compare tbody, .compare tr, .compare td, .compare th { display: block; min-width: 0; }
    .compare thead { display: none; }
    .compare tbody tr { border: 1px solid var(--line); background: var(--paper); margin-bottom: .9rem; padding: .3rem .2rem; }
    .compare tbody th { width: auto; border-bottom: 0; padding-bottom: .2rem; }
    .compare tbody td { border-bottom: 0; padding-top: .2rem; }
    .compare tbody td::before { content: attr(data-label); display: block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--green); margin-bottom: .2rem; }
  }
}

/* =============================================================================
   Ask Amish — hub and advice pages
   ============================================================================= */
@layer components {
  .section--flush { padding-top: 0; }
  .ask-hero__line { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 300; line-height: 1.15; color: var(--green); letter-spacing: -.02em; margin-bottom: 1rem; }
  .ask-hero__line em { color: var(--gold-2); }
  .page-hero__lead > p + p { margin-top: .9rem; }

  .answer-box { border-left: 3px solid var(--gold); background: var(--paper); padding: clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.25rem, 2.8vw, 2.1rem); max-width: 52rem; }
  .answer-box h2 { font-size: var(--fs-lg); margin-bottom: .6rem; }
  .answer-box__label { font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gold-2); margin-bottom: .5rem; }
  .answer-box__text, .answer-box p { font-size: var(--fs-md); line-height: 1.62; color: var(--ink); }

  .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
  .filter { min-height: 44px; padding: .55rem 1rem; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: var(--fs-sm); color: var(--green); cursor: pointer; border-radius: 999px; transition: background-color .25s, border-color .25s, color .25s; }
  .filter:hover { border-color: var(--gold); }
  .filter[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: var(--ivory); }
  .filter:focus-visible, .stage-btn:focus-visible, .scenario__btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

  .topic-grid { list-style: none; padding: 0; display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); }
  @media (min-width: 640px) { .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1000px) { .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .topic-card a { display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: clamp(1.25rem, 2.4vw, 1.75rem); background: var(--paper); border: 1px solid var(--line-soft); transition: border-color .3s, transform .45s var(--ease-luxe), box-shadow .45s var(--ease-luxe); }
  .topic-card a:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 14px 30px -22px rgb(7 20 17 / .45); }
  .topic-card__cat { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold-2); }
  .topic-card__title { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.2; color: var(--green); }
  .topic-card__text { font-size: var(--fs-sm); line-height: 1.65; color: var(--ink); }
  .topic-card__go { margin-top: auto; padding-top: .5rem; display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); font-weight: 600; color: var(--green); }
  .topic-card__go svg { width: 1em; height: 1em; }

  .stage-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
  .stage-btn { min-height: 44px; padding: .65rem 1.15rem; border: 1px solid var(--gold); background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--green); cursor: pointer; }
  .stage-btn[aria-pressed="true"] { background: var(--gold); color: var(--green-4); }
  .stage-panels { display: grid; gap: 1rem; }
  @media (min-width: 900px) { .stage-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stage-tool.is-live .stage-panels { grid-template-columns: 1fr; } }
  .stage-panel { padding: 1.1rem 1.25rem; border: 1px solid var(--line); background: var(--paper); }
  .stage-panel__label { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold-2); margin-bottom: .5rem; }

  .related-list { list-style: none; padding: 0; display: grid; gap: .1rem; border-top: 1px solid var(--line); }
  .related-link { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-md); color: var(--green); min-height: 44px; }
  .related-link svg { width: 1.1em; height: 1.1em; flex-shrink: 0; color: var(--gold-2); transition: transform .3s var(--ease-luxe); }
  .related-link:hover svg { transform: translateX(4px); }

  .meet-steps { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
  .meet-steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
  .meet-step__n { font-family: var(--font-display); font-size: var(--fs-md); color: var(--gold-2); }
  .meet-steps h3 { font-size: var(--fs-md); }
  .meet-steps p { font-size: var(--fs-sm); line-height: 1.65; margin-top: .25rem; }

  .adv-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
  @media (min-width: 820px) { .adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .adv { border-top: 1px solid var(--line-dark); padding-top: 1.1rem; }
  .adv h3 { font-size: var(--fs-md); color: var(--ivory); font-weight: 400; }
  .adv p { margin-top: .5rem; font-size: var(--fs-sm); line-height: 1.7; }
  .adv-quote { margin-top: clamp(2rem, 4vw, 3rem); max-width: 48rem; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 300; line-height: 1.3; color: var(--ivory); font-style: italic; }
  .adv-quote em { color: var(--gold-lt); }

  .scenarios { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
  @media (min-width: 900px) { .scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .scenario { border: 1px solid var(--line); background: var(--paper); padding: clamp(1.25rem, 2.4vw, 1.75rem); display: grid; gap: .7rem; align-content: start; }
  .scenario__num { font-family: var(--font-display); color: var(--gold-2); }
  .scenario h3 { font-size: var(--fs-lg); }
  .scenario__sees span, .scenario__notices span { display: block; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: .25rem; }
  .scenario__sees { font-size: var(--fs-sm); line-height: 1.65; }
  .scenario__btn { justify-self: start; min-height: 44px; padding: .6rem 1.1rem; border: 1px solid var(--green); background: var(--green); color: var(--ivory); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
  .scenario__btn[aria-expanded="true"] { background: transparent; color: var(--green); }
  .scenario__notices { border-left: 2px solid var(--gold); padding-left: 1rem; }
  .scenario__notices span { color: var(--gold-2); }
  .scenario__notices p { font-size: var(--fs-sm); line-height: 1.7; }

  .dl-list { list-style: none; padding: 0; display: grid; gap: .8rem; }
  @media (min-width: 760px) { .dl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .dl-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--paper); transition: border-color .25s; }
  .dl-list a:hover { border-color: var(--gold); }
  .dl__title { font-family: var(--font-display); font-size: var(--fs-md); color: var(--green); }
  .dl__meta { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold-2); white-space: nowrap; }

  .hub-faqs { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 56rem; }
  .hub-faq { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
  .hub-faq h3 { font-size: var(--fs-md); }
  .hub-faq p { margin-top: .45rem; font-size: var(--fs-sm); line-height: 1.7; }

  .author-line { display: flex; align-items: center; gap: .8rem; font-size: var(--fs-sm); line-height: 1.4; }
  .author-line img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .author-line a { color: var(--green); font-weight: 600; }
  .author-line small { color: var(--muted); font-size: var(--fs-xs); letter-spacing: .06em; }

  .advice-body { max-width: 52rem; }
  .advice-intro { margin-top: 1.4rem; font-size: var(--fs-md); line-height: 1.7; }
  .qa { padding: clamp(1.4rem, 3vw, 2rem) 0; border-top: 1px solid var(--line); }
  .qa h2 { font-size: var(--fs-lg); }
  .qa p { margin-top: .75rem; font-size: var(--fs-base); line-height: 1.75; }
  .qa__answer { font-weight: 600; color: var(--green); }
  .checklist { border: 1px solid var(--line); background: var(--paper); padding: clamp(1.25rem, 2.6vw, 2rem); }
  .checklist h2 { font-size: var(--fs-lg); margin-bottom: .9rem; }
  .checklist ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
  .checklist li { position: relative; padding-left: 1.7rem; font-size: var(--fs-sm); line-height: 1.6; }
  .checklist li::before { content: ""; position: absolute; left: 0; top: .3em; width: .95rem; height: .95rem; border: 1px solid var(--gold); }
  .dl-inline { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; min-height: 44px; font-weight: 600; color: var(--green); border-bottom: 1px solid var(--gold); }
  .dl-inline small { font-size: var(--fs-xs); color: var(--gold-2); letter-spacing: .1em; }
}

/* Header with seven destinations: desktop nav from 1180px, header button from 1400px,
   Home is reached through the logo on desktop and stays in the mobile menu */
@layer components {
  .nav__list { flex-wrap: nowrap; white-space: nowrap; gap: clamp(.85rem, 1.35vw, 1.7rem); }
  @media (min-width: 1000px) and (max-width: 1179px) {
    .nav { display: none; }
    .burger { display: inline-flex; }
    .menu { display: grid; }
  }
  @media (min-width: 1180px) and (max-width: 1399px) { .header__cta { display: none; } }
  @media (min-width: 1180px) { .nav__list > .nav__item:first-child { display: none; } }
}