/* ---------------------------------------------------------------------
       Tokens
       --------------------------------------------------------------------- */
    :root{
      --oyster:#F2EEE6;
      --oyster-2:#E8E0D2;
      --ink:#11130E;
      --ink-soft:#18160F;
      --forest:#2A4636;
      --forest-2:#193125;
      --muted:#615847;          /* darkened for AA contrast on oyster */
      --muted-dark:#A59D8E;
      --gold:#C8AA72;
      /* Gold reads at only 1.92:1 on oyster. This deeper tone keeps the warmth
         and clears AA for text (4.67:1), for the oyster sections. */
      --gold-deep:#856527;
      /* Focus ring colour, flipped per section so the indicator is always
         visible: gold on ink, forest on the light sections. */
      --focus:rgba(200,170,114,.9);
      --line:rgba(242,238,230,.16);
      --line-dark:rgba(24,22,15,.13);
      /* Fine print sits at .56 alpha, not .42: below that the medical
         disclaimer and the research citations fail WCAG AA on ink. */
      --fine-on-ink:rgba(242,238,230,.56);
      --serif: "Fraunces", Georgia, "Times New Roman", serif;
      --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      --gutter: clamp(1.35rem, 5vw, 5.5rem);
      /* Three rhythm steps. Every section used the same padding, which is the
         single strongest "template" tell on a long page. Art direction shows
         itself through variation, not evenness. */
      --pad-sm: clamp(3.5rem, 7vw, 6rem);
      --pad-md: clamp(5rem, 11vw, 9rem);
      --pad-xl: clamp(7rem, 15vw, 13rem);
      --max: 1160px;
      --ease: cubic-bezier(.22,1,.36,1);
      --shadow-soft: 0 28px 90px rgba(0,0,0,.28);
      --shadow-light: 0 26px 70px rgba(24,22,15,.08);
    }

    /* ---------------------------------------------------------------------
       Base
       --------------------------------------------------------------------- */
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    body{
      min-height:100vh;
      background:var(--ink);
      color:var(--oyster);
      font-family:var(--sans);
      font-optical-sizing:auto;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    a{color:inherit}
    ::selection{background:rgba(200,170,114,.28)}

    .grain{
      position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.038; mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    }
    body:before{
      content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
      background:
        radial-gradient(circle at 16% 18%, rgba(242,238,230,.028), transparent 30%),
        linear-gradient(90deg, rgba(242,238,230,.018) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242,238,230,.014) 1px, transparent 1px);
      background-size:auto, 96px 96px, 96px 96px;
      mask-image:linear-gradient(to bottom, black 0%, transparent 72%);
      opacity:.72;
    }

    .skip-link{
      position:absolute; left:.75rem; top:-100%; z-index:100;
      background:var(--oyster); color:var(--ink); text-decoration:none;
      padding:.85rem 1.1rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
      border-radius:999px;
    }
    .skip-link:focus{top:.75rem}

    /* ---------------------------------------------------------------------
       Navigation
       --------------------------------------------------------------------- */
    nav{
      position:fixed; top:0; left:0; right:0; z-index:20;
      height:76px; display:flex; align-items:center; justify-content:space-between;
      padding:0 var(--gutter);
      border-bottom:1px solid rgba(242,238,230,.08);
      background:linear-gradient(180deg, rgba(17,19,14,.72), rgba(17,19,14,.46));
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transition:height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
    }
    nav.is-scrolled{
      height:66px;
      background:rgba(17,19,14,.84);
      border-bottom-color:rgba(242,238,230,.12);
    }
    .brand{
      text-decoration:none; font-family:var(--serif); letter-spacing:.38em;
      font-size:1.04rem; text-transform:uppercase; font-weight:400;
      display:inline-flex; align-items:center; min-height:44px;
    }
    .nav-right{display:flex; align-items:center; gap:1.5rem}
    .nav-links{display:flex; align-items:center; gap:1.5rem}
    /* 14px-tall links fail WCAG 2.5.8 (24px minimum) and do not qualify for
       the inline-in-a-sentence exception. Padding fixes the target without
       moving the optical baseline of the bar. nowrap stops "How it works"
       breaking across lines when the bar gets tight. */
    .nav-link{display:inline-flex; align-items:center; min-height:24px; padding-block:.35rem}
    .nav-link{
      text-decoration:none; font-size:.71rem; letter-spacing:.22em; text-transform:uppercase;
      color:rgba(242,238,230,.72);
      transition:color .25s ease;
      white-space:nowrap;
    }
    @media (hover:hover){.nav-link:hover{color:var(--oyster)}}
    .pill{
      display:inline-flex; align-items:center; justify-content:center; min-height:42px;
      border:1px solid rgba(242,238,230,.22); border-radius:999px;
      padding:.86rem 1.15rem .82rem; text-decoration:none;
      font-size:.69rem; letter-spacing:.2em; text-transform:uppercase;
      white-space:nowrap;
    }
    .pill:hover{transform:translateY(-1px); background:rgba(242,238,230,.08); border-color:rgba(242,238,230,.4)}
    .nav-cta .short{display:none}

    /* Menu button. Replaces the links below 900px, where they previously
       vanished with nothing taking their place. */
    .nav-toggle{
      display:none; align-items:center; justify-content:center;
      width:46px; height:46px; flex:0 0 auto;
      background:transparent; border:1px solid rgba(242,238,230,.22); border-radius:999px;
      cursor:pointer; color:inherit; margin:0; padding:0; min-height:0;
    }
    .nav-toggle__bars{display:block; width:17px; height:11px; position:relative}
    .nav-toggle__bars span{
      position:absolute; left:0; right:0; height:1.5px; background:var(--oyster);
      transition:transform .3s var(--ease), opacity .2s ease;
    }
    .nav-toggle__bars span:first-child{top:0}
    .nav-toggle__bars span:last-child{bottom:0}
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child{transform:translateY(4.75px) rotate(45deg)}
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child{transform:translateY(-4.75px) rotate(-45deg)}

    /* ---------------------------------------------------------------------
       Hero
       --------------------------------------------------------------------- */
    .hero{
      position:relative; min-height:100svh; padding:124px var(--gutter) 72px; overflow:hidden;
      display:flex; align-items:center; isolation:isolate;
      background:
        radial-gradient(circle at 72% 35%, rgba(110,156,129,.28), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(200,170,114,.12), transparent 35%),
        linear-gradient(135deg, #10120D 0%, #11130E 44%, #1B2B22 100%);
    }
    .hero:before{
      content:""; position:absolute; inset:-15%;
      background:
        linear-gradient(110deg, transparent 0 35%, rgba(242,238,230,.045) 45%, transparent 57%),
        radial-gradient(circle at 30% 75%, rgba(242,238,230,.08), transparent 25%);
      animation: drift 12s ease-in-out infinite alternate;
    }
    .hero:after{
      content:""; position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;
      background:linear-gradient(180deg, transparent, rgba(17,19,14,.44));
      z-index:1;
    }
    @keyframes drift{from{transform:translate3d(-1.5%,0,0) rotate(0deg)}to{transform:translate3d(1.5%,-1%,0) rotate(1deg)}}

    .hero-inner{
      position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto;
      display:grid; grid-template-columns:minmax(0,.96fr) minmax(330px,.74fr);
      gap:clamp(2.2rem, 7vw, 7rem); align-items:center;
    }
    /* Sentence case, no tracking. Wide-tracked uppercase micro-labels were the
       most repeated tic on the page, and this matches how the same lines are
       already set in the share card. */
    .eyebrow{
      font-size:.82rem; letter-spacing:0; color:var(--gold);
      margin-bottom:1.45rem; font-weight:600;
    }
    /* Gold on oyster measures 1.92:1, far below AA. Light sections take the
       forest tone the FAQ eyebrow already used (8.95:1). */
    .light .eyebrow, .enquiry .eyebrow{color:var(--forest)}
    h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:-.025em}
    /* Optical left alignment. Fraunces caps carry uneven left side bearing, so a
       flush margin reads as indented. Values are the glyphs' measured lsb at
       opsz 144 / wght 340: T = .018em, I = .037em. Every other cap that starts a
       heading here measures under .006em and needs no correction. */
    .oa-T{margin-left:-.018em}
    .oa-I{margin-left:-.037em}
    h1{
      font-size:clamp(3.6rem, 10.2vw, 9.4rem); line-height:.9; font-weight:340;
      max-width:8.5ch;
    }
    .hero-copy{
      margin-top:1.8rem; max-width:39rem; color:rgba(242,238,230,.78);
      font-size:clamp(1rem, 1.45vw, 1.18rem); line-height:1.75;
    }
    .hero-actions{margin-top:2.15rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center}
    .primary{
      background:var(--oyster); color:var(--ink); border-color:var(--oyster);
      font-weight:700;
    }
    .primary:hover{background:#fff9ed}
    .micro-line{margin-top:2rem; display:flex; gap:.75rem; flex-wrap:wrap; color:rgba(242,238,230,.62); font-size:.82rem; letter-spacing:0}

    .visual{
      position:relative; min-height:460px; display:grid; place-items:center;
      filter:drop-shadow(0 34px 80px rgba(0,0,0,.22));
    }
    .orb{
      width:min(72vw, 430px); aspect-ratio:1; border-radius:50%; position:relative;
      background:
        radial-gradient(circle at 50% 50%, rgba(242,238,230,.18), transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(200,170,114,.10), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(42,70,54,.62), transparent 56%);
      box-shadow:0 0 90px rgba(110,156,129,.18);
    }
    .orb:before,.orb:after{
      content:""; position:absolute; inset:7%; border-radius:50%;
      border:1px solid rgba(242,238,230,.18);
    }
    .orb:before{box-shadow:inset 0 0 48px rgba(242,238,230,.03)}
    .orb:after{inset:22%; border-color:rgba(200,170,114,.22); animation:pulse 4.5s ease-in-out infinite}
    @keyframes pulse{50%{transform:scale(1.035); opacity:.52}}
    .ring{
      position:absolute; inset:0; border-radius:50%;
      border:1px solid rgba(242,238,230,.18);
      transform:rotateX(68deg) rotateZ(-18deg);
    }
    .ring.r2{inset:8%; transform:rotateX(72deg) rotateZ(32deg); border-color:rgba(110,156,129,.26)}
    .ring.r3{inset:15%; transform:rotateX(64deg) rotateZ(82deg); border-color:rgba(200,170,114,.22)}
    .dot{
      width:10px; height:10px; border-radius:50%; background:var(--gold);
      position:absolute; top:49%; left:50%; transform-origin:0 0;
      box-shadow:0 0 22px rgba(200,170,114,.85);
      animation:orbit 8s linear infinite;
    }
    .dot.d2{background:var(--oyster); animation-duration:11s; animation-delay:-3s}
    @keyframes orbit{
      from{transform:rotate(0deg) translateX(180px)}
      to{transform:rotate(360deg) translateX(180px)}
    }

    /* The heartbeat belongs to the hero message, not to the decorative orb:
       it sits in content flow and runs toward the sphere at every size. */
    .pulse{
      display:block; position:relative; z-index:5;
      width:min(75vw, 1080px); height:60px;
      margin:1.25rem 0 1.15rem; opacity:.82;
      transform:translateX(.15rem);
      -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 48%,transparent 88%);
      mask-image:linear-gradient(90deg,#000 0%,#000 48%,transparent 88%);
    }
    .pulse path{
      fill:none; stroke:rgba(242,238,230,.95); stroke-width:2; stroke-linecap:round;
      stroke-dasharray:920;
      /* Deliberately no static stroke-dashoffset. The keyframes supply the 920
         start value, so whenever the animation does not run (reduced motion,
         or any engine that drops it) the line renders fully drawn rather than
         disappearing into its own dash gap. */
      animation:draw 4.8s ease-in-out infinite;
    }
    @keyframes draw{0%{stroke-dashoffset:920}45%,100%{stroke-dashoffset:0}}

    /* ---------------------------------------------------------------------
       Sections
       --------------------------------------------------------------------- */
    section{padding:var(--pad-md) var(--gutter); position:relative}
    [id]{scroll-margin-top:90px}
    .light{background:linear-gradient(180deg,#F4F0E8 0%, var(--oyster) 72%); color:var(--ink)}
    .light, .enquiry, .zn-faq{--focus:var(--forest)}
    .dark{background:var(--ink); color:var(--oyster)}
    .wrap{max-width:var(--max); margin:0 auto}
    .section-head{max-width:760px}
    h2{font-size:clamp(2.4rem,5.8vw,5.4rem); line-height:.98}
    .lead{margin-top:1.35rem; color:var(--muted); font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.72; max-width:45rem}
    .dark .lead{color:var(--muted-dark)}

    /* Ruled, not panelled. Hairlines and space carry the structure, the way
       the How-it-Works table already does, with no fills, borders or shadows. */
    .grid-3{
      display:grid; grid-template-columns:repeat(3,1fr);
      column-gap:clamp(2rem,4.5vw,4rem); row-gap:0;
      margin-top:clamp(2.5rem,5vw,4.4rem);
    }
    .card{
      background:transparent; padding:clamp(1.5rem,2.6vw,2.1rem) 0 0;
      border-top:1px solid var(--line-dark);
      display:flex; flex-direction:column;
    }
    .dark .card{border-top-color:var(--line)}
    .num{font-size:.75rem; color:var(--gold); letter-spacing:.22em}
    .light .num, .enquiry .num{color:var(--gold-deep)}
    h3{font-size:clamp(1.55rem,2.5vw,2.35rem); line-height:1.05; margin-top:1.6rem}
    .card p{margin-top:1rem; color:var(--muted); line-height:1.65; font-size:1rem}
    .dark .card p{color:var(--muted-dark)}

    /* ---- Evidence / statistics ---- */
    .evidence{
      background:
        radial-gradient(circle at 82% 12%, rgba(42,70,54,.30), transparent 34%),
        radial-gradient(circle at 8% 88%, rgba(200,170,114,.07), transparent 30%),
        linear-gradient(180deg, var(--ink), #0E100B);
    }
    .evidence .lead{color:rgba(242,238,230,.82)}
    .evidence .lead em{font-style:normal; color:var(--oyster); border-bottom:1px solid rgba(200,170,114,.4); padding-bottom:1px}
    .stat-grid{
      display:grid; grid-template-columns:repeat(2,1fr);
      column-gap:clamp(2rem,5vw,4.5rem); row-gap:0;
      margin-top:clamp(2.6rem,5vw,3.8rem);
      border-top:1px solid var(--line);
    }
    .stat{
      background:transparent; padding:clamp(1.9rem,3.4vw,2.6rem) 0;
      border-bottom:1px solid var(--line);
      display:flex; flex-direction:column; gap:.9rem;
    }
    .figure{
      font-family:var(--serif); font-weight:340; font-size:clamp(3.1rem,5.6vw,4.9rem);
      line-height:.92; letter-spacing:-.03em; color:var(--oyster);
      font-variant-numeric: lining-nums;
    }
    .figure .unit{font-size:.34em; letter-spacing:.04em; color:var(--gold); margin-left:.32em; vertical-align:.2em; font-weight:600; font-family:var(--sans); text-transform:uppercase}
    .stat p{color:var(--muted-dark); line-height:1.62; font-size:1rem; max-width:34rem}
    .stat .src{
      margin-top:auto; font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
      color:var(--fine-on-ink); padding-top:.4rem; font-weight:700;
    }
    .stat .src a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(200,170,114,.28)}
    @media (hover:hover){.stat .src a:hover{color:var(--gold)}}
    .evidence-note{
      margin-top:clamp(2rem,4vw,2.7rem); padding-top:1.5rem; border-top:1px solid var(--line);
      max-width:62rem; font-size:.82rem; line-height:1.7; color:rgba(242,238,230,.56);
    }

    .statement{
      background:
        radial-gradient(circle at 50% 15%, rgba(200,170,114,.12), transparent 29%),
        radial-gradient(circle at 23% 48%, rgba(42,70,54,.34), transparent 32%),
        linear-gradient(180deg, var(--forest-2), var(--ink));
      text-align:center;
    }
    /* The positioning line is the full stop of the page, so give it the most air. */
    .statement{padding-top:var(--pad-xl); padding-bottom:var(--pad-xl)}
    .statement .wrap{max-width:980px}
    .statement h2{font-size:clamp(2.7rem,6.5vw,6.3rem)}
    .statement p{margin:1.5rem auto 0}

    /* ---- Full-bleed plate ----
       The scrim at both edges fades the image into the ink sections above and
       below, so the seam reads as a transition rather than the hard horizontal
       cut every other section boundary currently makes. */
    .plate{
      position:relative; padding:0; overflow:hidden;
      height:clamp(300px, 44vh, 540px);
      background:var(--ink);
    }
    .plate__img{
      width:100%; height:100%; object-fit:cover; display:block;
      opacity:.9;
    }
    .plate:before,.plate:after{
      content:""; position:absolute; left:0; right:0; height:36%;
      pointer-events:none; z-index:1;
    }
    .plate:before{top:0; background:linear-gradient(180deg, var(--ink), transparent)}
    .plate:after{bottom:0; background:linear-gradient(0deg, var(--ink), transparent)}
    /* Second plate bridges a dark section into the oyster FAQ, so its lower
       scrim resolves to oyster instead of ink. Slightly shorter than the first
       so the two are a pair rather than a repeat. */
    .plate--to-light{height:clamp(300px, 42vh, 520px)}
    /* This image carries its own dark-to-light gradient, so it needs far less
       scrim than the first plate. At 36% each end the artwork was almost
       entirely covered and read as a plain gradient band. */
    .plate--to-light:before{height:16%}
    .plate--to-light:after{height:24%; background:linear-gradient(0deg, var(--oyster), transparent)}

    .steps{margin-top:4rem; border-top:1px solid var(--line); max-width:1040px}
    .step{
      display:grid; grid-template-columns:96px minmax(230px,.78fr) minmax(0,440px); gap:2rem;
      padding:2rem 0; border-bottom:1px solid var(--line); align-items:start;
    }
    .step-title{
      font-family:var(--serif); font-size:clamp(1.45rem,2.2vw,2rem);
      font-weight:400; line-height:normal; letter-spacing:normal; margin:0;
    }
    .step p{color:var(--muted-dark); line-height:1.65; font-size:1rem}

    /* A short supporting section: a quick beat rather than a full movement. */
    .tight{padding-top:var(--pad-sm); padding-bottom:var(--pad-sm)}
    .audience{
      display:grid; grid-template-columns:.85fr 1fr; gap:clamp(2rem,7vw,6rem); align-items:start;
    }
    .audience .lead{margin-top:0}
    /* A typeset list, not filter chips. These are spans, not controls, so the
       hover affordance goes with them. */
    .tags{
      display:grid; grid-template-columns:1fr 1fr;
      column-gap:clamp(1.5rem,3vw,3rem); row-gap:0;
      margin-top:2rem; border-top:1px solid var(--line-dark);
    }
    .tag{
      border:0; border-bottom:1px solid var(--line-dark); border-radius:0;
      background:transparent; padding:.95rem 0;
      font-family:var(--serif); font-size:1.12rem; letter-spacing:-.01em;
      color:var(--ink);
    }

    .why-grid{
      display:grid; grid-template-columns:1fr 1fr;
      column-gap:clamp(2rem,5vw,4.5rem); row-gap:0;
      margin-top:3.2rem; border-top:1px solid var(--line);
    }
    .why{background:transparent; padding:clamp(1.7rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line)}
    .why-title{
      font-family:var(--serif); font-size:1.6rem; font-weight:400;
      line-height:normal; letter-spacing:normal; margin:0;
    }
    .why p{margin-top:1rem; color:var(--muted-dark); line-height:1.65; font-size:1rem}

    /* ---------------------------------------------------------------------
       FAQ
       --------------------------------------------------------------------- */
    .zn-faq{
      background:var(--oyster); color:var(--ink);
      padding:clamp(4rem,10vw,8rem) var(--gutter);
    }
    .zn-faq__inner{max-width:46rem; margin:0 auto}
    .zn-faq__eyebrow{
      font-family:var(--sans); font-size:.82rem; font-weight:600;
      letter-spacing:0; color:var(--forest);
      margin:0 0 1.25rem;
    }
    .zn-faq__heading{
      font-family:var(--serif); font-size:clamp(1.75rem,4vw,2.75rem);
      font-weight:400; line-height:1.15; letter-spacing:-.015em;
      margin:0 0 3rem; max-width:20ch;
    }
    .zn-faq__list{border-top:1px solid var(--line-dark)}
    .zn-faq__item{border-bottom:1px solid var(--line-dark)}
    .zn-faq__q{
      font-family:var(--sans); font-size:clamp(1rem,2vw,1.125rem);
      font-weight:500; line-height:1.4; letter-spacing:-.005em;
      cursor:pointer; list-style:none; padding:1.5rem 3rem 1.5rem 0;
      position:relative; transition:color .25s ease;
    }
    .zn-faq__q::-webkit-details-marker{display:none}
    @media (hover:hover){.zn-faq__q:hover{color:var(--forest)}}
    .zn-faq__q:focus-visible{outline:2px solid var(--focus); outline-offset:4px}
    .zn-faq__q::before,.zn-faq__q::after{
      content:""; position:absolute; right:.375rem; top:50%;
      width:.875rem; height:1px; background:var(--gold-deep);
      transition:transform .3s cubic-bezier(.4,0,.2,1);
    }
    .zn-faq__q::after{transform:rotate(90deg)}
    .zn-faq__item[open] .zn-faq__q::after{transform:rotate(0deg)}
    .zn-faq__a{
      font-family:var(--sans); font-size:clamp(.9375rem,1.8vw,1rem);
      font-weight:400; line-height:1.7; color:var(--ink); opacity:.82;
      margin:0; padding:0 3rem 1.75rem 0; max-width:62ch;
    }

    /* ---------------------------------------------------------------------
       Enquiry
       --------------------------------------------------------------------- */
    .enquiry{
      background:
        radial-gradient(circle at 78% 20%, rgba(42,70,54,.16), transparent 28%),
        var(--oyster);
      color:var(--ink);
    }
    .form-wrap{
      /* Top-aligned, not centred: the form is roughly twice the height of the
         copy beside it, so centring pushed the heading ~130px down the page and
         left it floating against the middle of the fields. */
      display:grid; grid-template-columns:.85fr 1fr; gap:clamp(2rem,7vw,6rem); align-items:start;
    }
    .membership-note{
      margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line-dark);
      font-size:.82rem; letter-spacing:.04em; line-height:1.7; color:var(--muted); max-width:34rem;
    }
    .membership-note strong{color:var(--ink); font-weight:600}
    form{
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1.9rem 2.2rem;
      padding:0; background:transparent; border:0; box-shadow:none;
    }
    form .hidden, form .field-full, form button{grid-column:1/-1}
    .hidden{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    label{
      display:block; font-size:.82rem; letter-spacing:0; text-transform:none;
      color:var(--muted); margin-bottom:.5rem; font-weight:500;
    }
    input,select,textarea{
      width:100%; min-height:48px;
      /* .5 alpha, not the lighter hairline used for decorative rules: with the
         field fills removed this underline is the only thing identifying the
         control, so it has to clear WCAG 1.4.11's 3:1 (it measures 3.41:1). */
      border:0; border-bottom:1px solid rgba(24,22,15,.5);
      background:transparent; border-radius:0;
      padding:.7rem 0; color:var(--ink); font:inherit; font-size:1.02rem; outline:none;
      transition:border-color .25s var(--ease);
    }
    select{
      appearance:none; -webkit-appearance:none; padding-right:1.6rem;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23615847' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right .1rem center; background-size:12px 8px;
    }
    textarea{resize:vertical; min-height:104px}
    input:focus,select:focus,textarea:focus{border-bottom-color:var(--forest)}
    button{
      cursor:pointer; background:var(--ink); color:var(--oyster); border:1px solid var(--ink);
      border-radius:999px; justify-self:start;
      padding:1rem 2.2rem; min-height:52px; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
      margin-top:.9rem;
    }
    button:hover{background:var(--forest)}
    .fine{color:var(--muted); line-height:1.65; font-size:.92rem; margin-top:1.4rem}
    .fine a{color:var(--forest); text-decoration:none; border-bottom:1px solid rgba(42,70,54,.25)}
    .form-privacy-note{
      margin:.65rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.55;
      letter-spacing:0; text-transform:none;
    }
    .consent label{
      display:flex; align-items:flex-start; gap:.68rem; margin:0;
      font-size:.86rem; letter-spacing:0; text-transform:none; font-weight:500;
      color:var(--muted); line-height:1.55;
    }
    .consent input{
      /* 24px: the WCAG 2.5.8 minimum target. The wrapping label already gives a
         larger effective hit area, but the control itself should clear it too. */
      width:1.5rem; height:1.5rem; min-height:0; margin-top:.02rem; flex:0 0 auto;
      accent-color:var(--forest); padding:0; border:0; background:transparent;
    }
    .consent a{color:var(--forest); text-decoration:none; border-bottom:1px solid rgba(42,70,54,.25)}

    /* ---------------------------------------------------------------------
       Footer
       --------------------------------------------------------------------- */
    footer{background:linear-gradient(180deg,#0D0F0B,var(--ink)); color:rgba(242,238,230,.7); padding:3rem var(--gutter); border-top:1px solid var(--line)}
    .footer-inner{max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; gap:1.2rem; align-items:end; flex-wrap:wrap}
    .footer-brand{font-family:var(--serif); color:var(--oyster); letter-spacing:.38em; text-transform:uppercase}
    .footer-small{font-size:.76rem; letter-spacing:.08em; margin-top:.7rem}
    /* Footer links sat at 16px tall with a 16px gap, so neither the size nor
       the spacing exception of WCAG 2.5.8 was met. */
    .footer-nav{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center}
    .footer-nav a{padding:.32rem 0}
    .footer-gov{max-width:42rem; font-size:.72rem; line-height:1.65; color:var(--fine-on-ink); margin-top:1.6rem; letter-spacing:.02em}

    /* ---------------------------------------------------------------------
       Motion / focus
       --------------------------------------------------------------------- */
    .reveal{opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease}
    .reveal.in{opacity:1; transform:none}

    /* Display headings rise line by line out of their own baseline instead of
       sharing the generic fade. Split is done in JS; the block itself stops
       fading so only the mask animates. */
    .reveal.split{opacity:1; transform:none}
    /* The clip box needs vertical breathing room. Display headings run at
       line-height .9-.98, so the line box is SHORTER than the font's natural
       ascent+descent, so overflow:hidden was slicing every descender (g, y, p, q)
       and the commas flat. Padding enlarges the clip box; the matching negative
       margin means layout is unchanged. */
    .reveal.split .ln{
      display:block; overflow:hidden;
      padding:.24em 0 .3em;
      margin:-.24em 0 -.3em;
    }
    .reveal.split .ln__i{
      display:block;
      /* Must clear the taller clip box, not just its own height, or the line
         above peeks through before it animates in. */
      transform:translateY(calc(100% + .35em));
      transition:transform .9s var(--ease);
    }
    .reveal.split.in .ln__i{transform:none}
    .pill,button{transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease)}
    .pill:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus); outline-offset:4px}

    /* ---------------------------------------------------------------------
       Breakpoints
       --------------------------------------------------------------------- */
    /* Order matters: the max-width blocks come first so that the min-width:701px
       desktop-hero block below wins inside the 701–900 overlap, exactly as the
       original's final patch layer did. */

    /* ---------------------------------------------------------------------
       Navigation breakpoint
       Six destinations plus the CTA no longer fit between the wordmark and the
       right edge below ~1320px: "How it works" broke onto three lines at 901px
       and the CTA was clipped at the viewport edge. Matches the hospitality
       page exactly, so the bar does not change form when moving between them.
       --------------------------------------------------------------------- */
    @media (max-width:1320px){
      nav{height:66px}
      .nav-toggle{display:inline-flex}
      .nav-right{gap:.75rem}
      .pill{min-height:44px; padding:.78rem .82rem; font-size:.62rem}
      .nav-links{
        position:absolute; top:100%; left:0; right:0;
        flex-direction:column; align-items:stretch; gap:0;
        background:var(--ink);
        border-bottom:1px solid rgba(242,238,230,.12);
        padding:.35rem 0 .75rem;
        opacity:0; visibility:hidden; transform:translateY(-8px);
        transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
      }
      .nav-links.is-open{opacity:1; visibility:visible; transform:none}
      .nav-link{
        display:flex; align-items:center; min-height:52px;
        padding:0 var(--gutter); font-size:.78rem; letter-spacing:.2em;
        color:rgba(242,238,230,.86);
      }
    }

    @media (max-width:900px){
      nav{height:66px}
      .nav-toggle{display:inline-flex}
      .nav-right{gap:.75rem}
      /* was min-height:38px, below the 44px touch target */
      .pill{min-height:44px; padding:.78rem .82rem; font-size:.62rem}
      .nav-links{
        position:absolute; top:100%; left:0; right:0;
        flex-direction:column; align-items:stretch; gap:0;
        /* Opaque rather than translucent: backdrop-filter is not universal, and
           without it the hero headline reads straight through the menu. */
        background:var(--ink);
        border-bottom:1px solid rgba(242,238,230,.12);
        padding:.35rem 0 .75rem;
        opacity:0; visibility:hidden; transform:translateY(-8px);
        transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
      }
      .nav-links.is-open{opacity:1; visibility:visible; transform:none}
      .nav-link{
        display:flex; align-items:center; min-height:52px;
        padding:0 var(--gutter); font-size:.78rem; letter-spacing:.2em;
        color:rgba(242,238,230,.86);
      }
      .hero{min-height:auto; padding-top:102px; padding-bottom:4rem; align-items:start}
      h1{max-width:9ch}
      .visual{min-height:335px; margin-top:.3rem}
      .orb{width:min(86vw,350px)}
      @keyframes orbit{from{transform:rotate(0deg) translateX(145px)}to{transform:rotate(360deg) translateX(145px)}}
      .grid-3,.audience,.form-wrap,.why-grid,.stat-grid{grid-template-columns:1fr}
      .step{grid-template-columns:1fr; gap:.75rem}
      .audience .lead{margin-top:1.05rem}
      form{grid-template-columns:1fr}
      .brand{font-size:.92rem}
    }

    @media (max-width:700px){
      /* Rescale the rhythm for phones. The class-based .statement / .tight rules
         outrank the bare `section` selector, so the steps have to be redefined
         here or the tall desktop values would carry straight onto mobile. */
      :root{--pad-sm:2.75rem; --pad-md:4rem; --pad-xl:5.5rem}
      body:before{background-size:auto, 64px 64px, 64px 64px; opacity:.52}
      nav{height:60px; padding:0 1.05rem}
      nav.is-scrolled{height:58px}
      .brand{font-size:.86rem}
      .nav-cta .long{display:none}
      .nav-cta .short{display:inline}
      /* was min-height:34px, the only nav control on phones and well under 44px */
      .nav-right .pill{min-height:44px; padding:.64rem .72rem .6rem; font-size:.56rem; letter-spacing:.14em}
      .nav-link{padding:0 1.05rem}

      .hero{
        min-height:100svh;
        padding:max(82px, calc(70px + env(safe-area-inset-top))) 1.12rem max(3.45rem, calc(2.9rem + env(safe-area-inset-bottom)));
        display:flex; align-items:center; overflow:hidden;
        background:
          radial-gradient(circle at 88% 68%, rgba(110,156,129,.18), transparent 34%),
          radial-gradient(circle at 55% 6%, rgba(200,170,114,.07), transparent 31%),
          linear-gradient(180deg, #11130E 0%, #132017 55%, #10120D 100%);
      }
      .hero:before{opacity:.30}
      .hero:after{height:42%; background:linear-gradient(180deg, transparent, rgba(17,19,14,.60))}
      .hero-inner{
        position:relative; display:flex; align-items:center;
        min-height:calc(100svh - 132px);
      }
      .hero-inner > div:first-child{position:relative; z-index:3; max-width:24.5rem}
      .eyebrow{font-size:.74rem; margin-bottom:1.05rem}
      h1{font-size:clamp(3rem, 15.8vw, 4.25rem); line-height:.94; max-width:100%; letter-spacing:-.035em}
      .hero-copy{
        margin-top:1.2rem; max-width:22.6rem; padding-right:.9rem;
        font-size:.98rem; line-height:1.62; color:rgba(242,238,230,.8);
        text-shadow:0 1px 22px rgba(0,0,0,.24);
      }
      .pulse{
        width:min(88vw, 360px); height:42px;
        margin:1.05rem 0; opacity:.50; z-index:4;
        transform:translateX(.1rem);
        -webkit-mask-image:none; mask-image:none;
      }
      .pulse path{stroke:rgba(242,238,230,.64); stroke-width:1.85}
      .hero-actions{margin-top:.15rem; gap:.75rem; max-width:22.6rem; position:relative; z-index:4}
      .hero-actions .pill{width:100%; min-height:46px; font-size:.64rem; letter-spacing:.16em}
      .micro-line{
        margin-top:1.25rem; font-size:.74rem;
        position:relative; z-index:4; max-width:22.6rem;
      }

      /* On phone the orb is atmosphere only. */
      .visual{
        position:absolute; z-index:1;
        right:-43vw; top:50%; bottom:auto;
        width:96vw; height:96vw; min-height:0; margin:0;
        display:grid; place-items:center;
        opacity:.32; overflow:visible; pointer-events:none;
        transform:translateY(-10%);
        filter:drop-shadow(0 24px 62px rgba(0,0,0,.22));
      }
      .orb{
        width:min(82vw, 324px);
        box-shadow:0 0 78px rgba(110,156,129,.16);
        background:
          radial-gradient(circle at 50% 50%, rgba(242,238,230,.20), transparent 17%),
          radial-gradient(circle at 50% 50%, rgba(200,170,114,.10), transparent 31%),
          radial-gradient(circle at 50% 50%, rgba(42,70,54,.58), transparent 57%);
      }
      .ring{opacity:.48}
      .dot{width:6px; height:6px; opacity:.66}

      section{padding:var(--pad-md) 1.12rem}
      .plate,.plate--to-light{height:260px; min-height:0}
      h2{font-size:clamp(2.15rem, 12vw, 3.45rem); line-height:1}
      .lead{font-size:.98rem; line-height:1.62; margin-top:1.05rem}
      .grid-3{display:block; margin-top:2rem}
      .card{padding:1.35rem 0}
      .card:last-child{border-bottom:1px solid var(--line-dark)}
      .dark .card:last-child{border-bottom:1px solid var(--line)}
      h3{font-size:1.75rem; margin-top:1rem}
      .card p{margin-top:.75rem; line-height:1.58}

      .stat-grid{display:block; margin-top:2rem}
      .stat{padding:1.5rem 0; gap:.7rem}
      .stat p{font-size:.95rem}
      .figure{font-size:clamp(2.9rem,16vw,3.7rem)}
      .src{font-size:.6rem}
      .evidence-note{font-size:.78rem}

      .statement{text-align:left}
      .statement h2{font-size:clamp(2.25rem, 13vw, 3.7rem)}

      .steps{margin-top:2.2rem}
      .step{padding:1.35rem 0}
      .step-title{font-size:1.65rem}

      .audience{gap:1.1rem}
      .tags{grid-template-columns:1fr; margin-top:1.5rem}
      .tag{padding:.8rem 0; font-size:1.02rem}

      .why-grid{display:block; margin-top:2rem}
      .why{padding:1.25rem 0}
      .why-title{font-size:1.4rem}

      .enquiry{background:var(--oyster)}
      .membership-note{margin-top:1.3rem}
      form{gap:1.5rem}
      input,select,textarea{padding:.65rem 0; font-size:16px}
      button{min-height:50px; width:100%; justify-self:stretch; padding:1rem}
      footer{padding:2.3rem 1.12rem}
    }

    @media (max-width:520px){
      .hero-actions{align-items:stretch}
      .footer-inner{align-items:flex-start}
      .zn-faq{padding:4rem 1.12rem}
      .zn-faq__heading{margin-bottom:2rem}
      .zn-faq__q{padding-right:2.25rem}
      .zn-faq__a{padding-right:.5rem}
    }

    @media (max-width:420px){
      .pulse{width:min(91vw, 340px); height:40px; margin:.95rem 0; opacity:.48}
      .visual{top:51%; right:-51vw; width:102vw; height:102vw; opacity:.29; transform:translateY(-8%)}
      .orb{width:min(88vw, 312px)}
    }

    @media (max-width:380px) and (max-height:780px){
      .hero{align-items:flex-start; padding-top:78px}
      .hero-inner{min-height:auto}
      .pulse{width:min(88vw, 305px); height:34px; margin:.7rem 0 .72rem; opacity:.44}
      .hero-actions{margin-top:.05rem}
      .hero-copy{padding-right:.25rem}
      .visual{top:55%; right:-60vw; opacity:.24}
    }

    @media (max-width:360px){
      .hero{align-items:flex-start}
    }

    /* Desktop hero: the orb leaves the grid, is enlarged and bled off the right
       edge, and the content-flow heartbeat runs into its body. Placed after the
       max-width blocks so it governs the 701–900 band. */
    @media (min-width:701px){
      .hero-inner{display:block; position:relative}
      .hero-inner > div:first-child{position:relative; z-index:3}
      .visual{
        position:absolute; z-index:1;
        top:50%; right:-8vw;
        transform:translateY(-24%);
        width:60vw; height:60vw;
        max-width:780px; max-height:780px;
        min-height:0; margin:0;
        opacity:.5; pointer-events:none; overflow:visible;
        place-items:center;
      }
      .orb{width:min(54vw,720px); box-shadow:0 0 130px rgba(110,156,129,.16)}
      .hero-actions{margin-top:.35rem}
    }

    @media (min-width:901px){
      .pulse{margin:1.35rem 0 1.2rem}
    }
    @media (min-width:1100px){ .visual{right:-6vw} }
    @media (min-width:1500px){ .visual{right:-3vw} }

    
    /* ---------------------------------------------------------------------
       The sleep section. Same component set as .evidence — .stat, .figure,
       .src — so the two pages state the same standard in the same voice. Dark
       by argument as much as by rhythm: the subject is night. It follows the
       dark "How it Works" the way .statement follows .evidence above.
       --------------------------------------------------------------------- */
    .sleep{
      background:
        radial-gradient(ellipse at 18% 8%, rgba(42,70,54,.34), transparent 42%),
        radial-gradient(ellipse at 88% 78%, rgba(200,170,114,.09), transparent 38%),
        linear-gradient(180deg, #0C0E0A, #11130E 62%, #0E100B);
      border-top:1px solid rgba(242,238,230,.07);
    }
    .sleep .lead{color:rgba(242,238,230,.82)}
    /* Three figures here, not the four in .evidence. */
    .sleep .stat-grid{grid-template-columns:repeat(3,1fr)}
    .sleep .figure{font-size:clamp(2.9rem,5vw,4.4rem)}
    .sleep .figure .unit{font-size:.26em}
    .sleep .stat p{max-width:30rem}
    .sleep .section-head{max-width:900px}
    .sleep .section-head .lead{max-width:760px}
    .sleep__close{
      margin-top:clamp(2.4rem,5vw,3.4rem);
      border-left:1px solid rgba(200,170,114,.42);
      padding-left:clamp(1.1rem,2vw,1.6rem);
      max-width:54rem; color:var(--muted-dark); line-height:1.8;
    }
    .sleep__close strong{color:var(--oyster); font-weight:500}
    @media(max-width:900px){ .sleep .stat-grid{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:700px){ .sleep .stat-grid{display:block} }

    
    /* ---------------------------------------------------------------------
       Ported from the hospitality page so both pages hold the same standard.
       --------------------------------------------------------------------- */

    /* Open mobile menu: lock the page behind it. body{overflow:hidden} alone
       does not hold — in Chrome the scrolling box is <html>. scrollbar-gutter
       stops the desktop layout jumping by the scrollbar width when it locks. */
    html{scrollbar-gutter:stable}
    html.nav-open,body.nav-open{overflow:hidden; overscroll-behavior:none; touch-action:none}

    /* Form validation. The fields carry `required`, but nothing showed which
       one failed beyond the browser's own bubble — and this is the membership
       enquiry, the conversion point of the whole site. :user-invalid only
       matches after interaction, so untouched fields stay quiet. */
    .field input:user-invalid,
    .field select:user-invalid,
    .field textarea:user-invalid{
      /* Underline, not a ring: these controls are drawn with a bottom rule
         only, so a box would read as a different component appearing. */
      border-bottom-color:#8C3A2B;
      border-bottom-width:2px;
      padding-bottom:calc(.65rem - 1px);
    }
    .field input:user-invalid ~ .field__hint,
    .field select:user-invalid ~ .field__hint,
    .field textarea:user-invalid ~ .field__hint{max-height:3rem; opacity:1; margin-top:.45rem}
    .field__hint{
      display:block; max-height:0; opacity:0; overflow:hidden;
      font-size:.76rem; letter-spacing:.02em; color:#8C3A2B; font-weight:500;
      transition:max-height .28s var(--ease), opacity .28s var(--ease), margin-top .28s var(--ease);
    }
    .consent input:user-invalid{outline:2px solid #8C3A2B; outline-offset:2px}
    .form-status{
      grid-column:1/-1; margin:0 0 .2rem; font-size:.84rem; line-height:1.6;
      color:#8C3A2B; font-weight:500;
    }

    /* FAQ disclosure gets a short, quiet motion of its own. */
    .zn-faq__item[open] .zn-faq__a{animation:faqIn .34s var(--ease) both}
    @keyframes faqIn{from{opacity:0; transform:translateY(-4px)} to{opacity:.82; transform:none}}

    /* The sleep heading balances like its hospitality counterpart. */
    .sleep .section-head h2{text-wrap:balance}

    /* Windows High Contrast. This page is drawn almost entirely in colour —
       gradients, hairline borders, the orb — so in forced colours the
       structure would otherwise disappear. */
    @media (forced-colors: active){
      .pill,.stat,.step,.why,.tag,.zn-faq__item,.card,
      .field input,.field select,.field textarea{border:1px solid CanvasText}
      .visual,.pulse,.grain,.plate,.orb{display:none}
      .zn-faq__q::before,.zn-faq__q::after{background:CanvasText; forced-color-adjust:none}
      a{color:LinkText}
    }

    /* Print. Members and their assistants do print this, and a 20-page
       ink-black document is not the impression to leave. */
    @media print{
      @page{margin:16mm 14mm}
      details:not([open]) > .zn-faq__a{display:block!important}
      *,*:before,*:after{background:transparent!important; color:#111!important;
        box-shadow:none!important; text-shadow:none!important; animation:none!important; transition:none!important}
      html,body{background:#fff!important}
      nav,.nav-toggle,.grain,.visual,.pulse,.plate,.skip-link,.hero-actions,
      form,.micro-line,.orb{display:none!important}
      section,header,footer{padding:0 0 14mm!important; min-height:0!important; break-inside:avoid}
      .hero{min-height:0!important; padding-top:0!important}
      h1{font-size:30pt!important; max-width:none!important; margin:0 0 6pt}
      h2{font-size:17pt!important; break-after:avoid}
      h3,.why-title,.step-title{font-size:12pt!important; break-after:avoid}
      p,li,.zn-faq__a{font-size:10pt!important; line-height:1.5!important; opacity:1!important}
      .eyebrow{font-size:8pt!important; letter-spacing:.12em}
      .figure{font-size:20pt!important}
      .stat-grid,.grid-3,.why-grid,.steps,.audience{
        display:grid!important; grid-template-columns:1fr 1fr!important; gap:6mm!important}
      .zn-faq__item{break-inside:avoid; border-bottom:1px solid #bbb!important}
      .stat .src a[href^="http"]::after{content:" (" attr(href) ")"; font-size:7pt; word-break:break-all; font-weight:400}
      .footer-gov,.evidence-note,.form-privacy-note{border-top:1px solid #bbb!important; padding-top:4mm!important; font-size:8pt!important}
    }

    @media (prefers-reduced-motion:reduce){
      *,*:before,*:after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
      .reveal{opacity:1; transform:none}
      .reveal.split .ln__i{transform:none}
      /* Without the draw animation the dash offset would never return to zero,
         leaving the heartbeat entirely invisible. */
      .pulse path{stroke-dashoffset:0}
    }
  
    .home-hospitality{padding:var(--pad-sm) var(--gutter);background:linear-gradient(135deg,var(--forest-2),#11130E);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .home-hospitality__inner{max-width:var(--max);margin:auto;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(2rem,6vw,6rem);align-items:end}.home-hospitality h2{font-size:clamp(2.2rem,4.8vw,4.8rem);max-width:11ch}.home-hospitality p{color:rgba(242,238,230,.73);line-height:1.75;max-width:45rem}.home-hospitality .pill{margin-top:1.6rem}
    @media(max-width:900px){.home-hospitality__inner{grid-template-columns:1fr}}