/* ---------------------------------------------------------------------
       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. */
    .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. The hospitality page switches to it before the full desktop
       navigation would be forced to wrap. */
    .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}
    /* Three figures here rather than the homepage's four, so the grid is 3-up
       and the numerals step down a little to hold the same line. */
    .evidence .stat-grid{grid-template-columns:repeat(3,1fr)}
    .evidence .figure{font-size:clamp(2.7rem,4.6vw,4.1rem)}
    .evidence .figure .unit{font-size:.30em}
    .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;
      /* Not --fine-on-ink (.56): that alpha was calibrated against flat ink and
         measures 4.23:1 over the warm part of this section's gold gradient. */
      color:rgba(242,238,230,.74); 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}

    /* ---------------------------------------------------------------------
       Navigation breakpoint
       The hospitality navigation carries more destinations than the private
       office. Switch to the compact menu before labels are forced to wrap or
       the CTA is clipped on 1024–1280px laptops and tablets.
       --------------------------------------------------------------------- */
    @media (max-width:1320px){
      nav{height:66px}
      .nav-toggle{display:inline-flex}
      .nav-right{gap:.75rem}
      .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);
      }
    }

    /* ---------------------------------------------------------------------
       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. */
    @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:.5rem 1.05rem; min-height:44px}

      .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}

      /* The hospitality hero keeps a two-column grid, so the mark stays in its
         own column instead of bleeding off the right edge as it does on the
         single-column homepage hero. */
      .h-hero .visual{
        position:relative; inset:auto; top:auto; right:auto;
        transform:none; width:auto; height:auto;
        max-width:none; max-height:none; min-height:460px;
        opacity:1; display:grid; place-items:center;
        filter:drop-shadow(0 34px 80px rgba(0,0,0,.22));
      }
      .h-hero .orb{width:min(32vw,430px); box-shadow:0 0 90px rgba(110,156,129,.18)}
    }

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

    
    /* ---------------------------------------------------------------------
       Open mobile menu: lock the page behind it. Without this the page scrolls
       under the panel while the panel stays fixed, which is the single most
       "unfinished" interaction on a phone. scrollbar-gutter keeps the desktop
       layout from jumping by the scrollbar width when overflow is hidden.
       --------------------------------------------------------------------- */
    html{scrollbar-gutter:stable}
    /* Both elements: in Chrome the scrolling box is <html>, so locking only
       <body> leaves the page scrolling behind the open panel. */
    html.nav-open,body.nav-open{overflow:hidden; overscroll-behavior:none; touch-action:none}

    /* ---------------------------------------------------------------------
       Form validation. The fields carry `required`, but nothing showed the user
       which one failed beyond the browser's own bubble. :user-invalid only
       matches after the user has interacted, so untouched fields stay quiet.
       --------------------------------------------------------------------- */
    .field input:user-invalid,
    .field textarea:user-invalid{
      /* Underline, not a ring: these fields are drawn with a bottom rule only,
         and a 1px spread shadow painted a full box around them, which read as a
         different component appearing on error. */
      border-bottom-color:#8C3A2B;
      border-bottom-width:2px;
      padding-bottom:calc(.65rem - 1px);   /* base is .65rem; keeps the field from shifting 1px on error */
    }
    .field input: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; font-size:.84rem; line-height:1.6;
      color:#8C3A2B; font-weight:500; min-height:0;
    }

    /* ---------------------------------------------------------------------
       FAQ disclosure. `transition:all` inherited from a parent meant the answer
       had no deliberate motion of its own; this gives it a short, quiet one.
       --------------------------------------------------------------------- */
    .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}}

    /* ---------------------------------------------------------------------
       Windows High Contrast / forced-colors. Everything here is drawn with
       colour alone — gradients, hairline borders, the hero mark — so in forced
       colours the structure would otherwise vanish entirely.
       --------------------------------------------------------------------- */
    @media (forced-colors: active){
      .pill,.h-cap,.h-node,.h-piece,.h-outcome,.h-partner,.h-scale__card,.h-gov,
      .stat,.zn-faq__item,.field input,.field textarea{border:1px solid CanvasText}
      .visual,.pulse,.grain,.plate{display:none}
      .zn-faq__q::before,.zn-faq__q::after{background:CanvasText; forced-color-adjust:none}
      a{color:LinkText}
      .h-core{outline:2px solid CanvasText}
    }

    /* ---------------------------------------------------------------------
       Print. An owner or their EA will put this in front of a board, and a
       21-page ink-black document is not the impression to leave. Reset to
       ink-on-white, drop the furniture, and print citation URLs so the
       market figures stay checkable on paper.
       --------------------------------------------------------------------- */
    @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,.h-orbit,.micro-line{display:none!important}
      section,header,footer{padding:0 0 14mm!important; min-height:0!important; break-inside:avoid}
      .h-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{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}
      .h-cap-grid,.stat-grid,.h-gov-grid,.h-partners,.h-scale,.h-flow{
        display:grid!important; grid-template-columns:1fr 1fr!important; gap:6mm!important}
      .zn-faq__item{break-inside:avoid; border-bottom:1px solid #bbb!important}
      .zn-faq__item .zn-faq__a{display:block!important; max-height:none!important; opacity:1!important; animation:none!important}
      .stat .src a[href^="http"]::after{content:" (" attr(href) ")"; font-size:7pt; word-break:break-all; font-weight:400}
      .footer-gov,.evidence-note{border-top:1px solid #bbb!important; padding-top:4mm!important; font-size:8pt!important}
    }

    
    /* ---------------------------------------------------------------------
       The sleep section. Dark by argument as much as by rhythm: the subject is
       night. It follows the aviation section, which is also dark, the way
       .evidence follows .light and .statement follows .evidence elsewhere on
       this page — a second dark ground distinguished by its own gradient.
       --------------------------------------------------------------------- */
    .h-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);
    }
    .h-sleep .lead{color:rgba(242,238,230,.82)}
    /* The sleep heading is deliberately given a wider measure than the default
       section head so the editorial line breaks stay balanced on desktop. */
    .h-sleep .section-head{max-width:900px}
    .h-sleep .section-head h2{text-wrap:balance}
    .h-sleep .section-head .lead{max-width:760px}
    .h-sleep .stat-grid{grid-template-columns:repeat(3,1fr)}
    .h-sleep .figure{font-size:clamp(2.9rem,5vw,4.4rem)}
    .h-sleep .figure .unit{font-size:.26em}
    .h-sleep .stat p{max-width:30rem}
    .h-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;
    }
    .h-sleep__close strong{color:var(--oyster); font-weight:500}

    @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}
    }
  

    .h-hero{min-height:92svh;padding:132px var(--gutter) 86px;display:flex;align-items:center;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 72% 34%,rgba(110,156,129,.27),transparent 31%),radial-gradient(circle at 45% 54%,rgba(200,170,114,.11),transparent 34%),linear-gradient(135deg,#10120D 0%,#11130E 45%,#1B2B22 100%)}
    .h-hero:before{content:"";position:absolute;inset:-18%;background:linear-gradient(112deg,transparent 0 36%,rgba(242,238,230,.042) 46%,transparent 58%),radial-gradient(circle at 29% 76%,rgba(242,238,230,.075),transparent 23%);animation:drift 12s ease-in-out infinite alternate}
    .h-hero:after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(180deg,transparent,rgba(17,19,14,.5));z-index:1}
    .h-hero__inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin:auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(300px,.64fr);gap:clamp(2rem,7vw,7rem);align-items:center}
    .h-hero h1{
      /* Min raised from 3.45rem to 5.1rem to match the phone rule's ceiling.
         Below this the curve was non-monotonic: 81.6px at 560px, then 55.2px at
         561px, so a small tablet showed a smaller headline than a phone. */
      font-size:clamp(5.1rem,8.8vw,8.25rem);
      /* Measured, not guessed: "Longevity, made" is 10.54ch and "operational."
         is 7.59ch in Fraunces, so a 9ch ceiling forces the same three-line
         stack at every width. At 13ch the headline sat on two lines between
         560 and 1280 and three everywhere else. */
      max-width:9ch}
    .h-kicker{max-width:45rem;margin-top:1.7rem;color:rgba(242,238,230,.78);font-size:clamp(1.02rem,1.45vw,1.2rem);line-height:1.75}
    .h-problem{padding:var(--pad-xl) var(--gutter)}
    .h-pieces{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark);margin-top:3.2rem}
    .h-piece{padding:1.4rem 1.3rem;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
    .h-outcomes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);margin-top:3rem;border:1px solid var(--line)}
    .h-outcome{background:var(--ink);padding:clamp(1.45rem,3vw,2.5rem);font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.1;color:var(--oyster)}
    .h-model{display:grid;grid-template-columns:1fr minmax(220px,.75fr) 1fr;gap:clamp(1rem,3vw,2.2rem);align-items:stretch;margin-top:3.2rem}
    .h-stack{display:grid;gap:.8rem}
    .h-node{border:1px solid var(--line);padding:1.15rem 1.25rem;color:rgba(242,238,230,.76);font-size:.88rem;line-height:1.55;background:rgba(242,238,230,.025)}
    .h-node strong{display:block;color:var(--oyster);font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.35rem}
    .h-core{border:1px solid rgba(200,170,114,.38);display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;background:radial-gradient(circle at 50% 45%,rgba(200,170,114,.12),transparent 58%)}
    .h-core strong{font-family:var(--serif);display:block;font-size:clamp(2rem,4vw,3.8rem);font-weight:400;letter-spacing:.18em}
    .h-core span{display:block;margin-top:.9rem;font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
    .h-cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:3.1rem}
    .h-cap{background:var(--oyster);padding:clamp(1.5rem,3.2vw,2.7rem);min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
    .h-cap .num{margin-bottom:2.2rem}.h-cap h3{font-size:clamp(1.45rem,2vw,2rem);margin-bottom:.8rem}.h-cap p{color:var(--muted);line-height:1.7;font-size:.94rem}
    .h-travel{position:relative;overflow:hidden}.h-travel:before{content:"";position:absolute;right:-12%;top:-10%;width:48vw;aspect-ratio:1;border:1px solid rgba(200,170,114,.12);border-radius:50%}.h-travel .wrap{position:relative;z-index:1}
    .h-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3.2rem}.h-flow__item{padding:1.4rem 1rem;background:var(--ink);text-align:center}.h-flow__item b{display:block;font-family:var(--serif);font-weight:400;font-size:1.25rem}.h-flow__item span{display:block;margin-top:.5rem;color:var(--muted-dark);font-size:.72rem;line-height:1.45}
    .h-place{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,6rem);align-items:start}.h-quote{font-family:var(--serif);font-size:clamp(2.25rem,4.8vw,4.7rem);line-height:1.03;letter-spacing:-.03em}.h-place p{color:var(--muted);line-height:1.8;font-size:1rem}.h-place p+p{margin-top:1.1rem}
    .h-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}.h-scale__card{padding:clamp(1.4rem,3vw,2.5rem);background:var(--ink)}.h-scale__card small{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.h-scale__card h3{font-size:1.7rem;margin:.9rem 0}.h-scale__card p{color:var(--muted-dark);line-height:1.65;font-size:.91rem}
    .h-partners{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);margin-top:3rem}.h-partner{background:var(--oyster);padding:clamp(1.7rem,4vw,3.2rem)}.h-partner__label{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}.h-partner h3{font-size:clamp(1.8rem,3vw,2.7rem);margin:1rem 0}.h-partner p{color:var(--muted);line-height:1.75}.h-partner ul{list-style:none;margin-top:1.4rem;display:grid;gap:.55rem;color:var(--muted);font-size:.9rem}.h-partner li:before{content:"—";margin-right:.65rem;color:var(--gold-deep)}
    .h-governance{border-left:1px solid var(--gold);padding-left:clamp(1.25rem,3vw,2.2rem);max-width:58rem}.h-governance p{color:var(--muted-dark);line-height:1.8}
    /* Governance is three parallel boundaries now — clinical, data and
       commercial — so the single gold rule becomes three, and the section
       carries the discretion argument instead of only the medical one. */
    .h-gov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3.4rem);margin-top:clamp(2.4rem,5vw,3.4rem)}
    .h-gov{border-left:1px solid rgba(200,170,114,.42);padding-left:clamp(1.1rem,2vw,1.6rem)}
    .h-gov h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.25;margin:0 0 .75rem;color:var(--oyster)}
    .h-gov p{color:var(--muted-dark);line-height:1.72;font-size:.94rem;margin:0}
    .h-enquiry .form-wrap{grid-template-columns:minmax(0,.9fr) minmax(360px,1fr)}
    .h-enquiry textarea{min-height:130px}
    .h-bridge{max-width:48rem;margin-top:2rem;color:var(--muted-dark);line-height:1.8;font-size:.95rem}
    .h-programmes{margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line-dark);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start}
    .h-programmes__intro h3{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,3.2rem);font-weight:400;line-height:1.05;letter-spacing:-.025em;margin:.7rem 0 1rem}.h-programmes__intro p:last-child{color:var(--muted);line-height:1.7}
    .h-programmes__list{display:grid;border-top:1px solid var(--line-dark)}.h-programmes__list span{padding:1.05rem 0;border-bottom:1px solid var(--line-dark);font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
    .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){.h-hero__inner,.h-place,.home-hospitality__inner,.h-programmes{grid-template-columns:1fr}.h-pieces{grid-template-columns:repeat(2,1fr)}.h-cap-grid,.h-scale{grid-template-columns:1fr}.evidence .stat-grid,.h-sleep .stat-grid{grid-template-columns:repeat(2,1fr)}.h-model{grid-template-columns:1fr}.h-core{min-height:240px}.h-flow{grid-template-columns:1fr}.h-partners{grid-template-columns:1fr}.h-gov-grid{grid-template-columns:1fr;gap:1.8rem}.h-enquiry .form-wrap{grid-template-columns:1fr}}
    @media(max-width:560px){.h-outcomes{grid-template-columns:1fr}.h-pieces{grid-template-columns:1fr}.h-hero{min-height:auto;padding:112px var(--gutter) 82px}.h-hero h1{font-size:clamp(3.2rem,16vw,5.1rem)}}