:root{
    /* CORE palette: black, white, grey (CORE Grid). --paper-rgb drives every
       scrim and halo, so a section can opt out by redefining it locally —
       the project hero does exactly that to keep its warm wash. */
    --paper:#FFFFFF;
    --paper-rgb:255,255,255;
    --paper-2:#F3F3F3;
    --ink:#1F1F1F;
    --ink-soft:#5E5E5E;
    --sage:#767676;
    --deep:#000000;
    --moss:#BDBDBD;
    --clay:#000000;
    --clay-soft:#CFCFCF;
    --line:rgba(0,0,0,.16);
    --shadow:0 18px 50px -28px rgba(0,0,0,.35);
    --serif:"Cormorant Garamond",Georgia,"Iowan Old Style","Times New Roman",serif;
    --script:"Pinyon Script","Cormorant Garamond",Georgia,cursive;
    --sans:"Jost",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
    --header-h:86px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:17px;line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  .grain{
    /* width/height are explicit: a fixed SVG with inset:0 alone falls back to
       its 300x150 default size and the grain only covers the top-left corner. */
    position:fixed;inset:0;width:100%;height:100%;
    pointer-events:none;z-index:1;opacity:.35;mix-blend-mode:multiply;
  }
  .wrap{max-width:1140px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
  h1,h2,h3,.display{font-family:var(--serif);font-weight:400;margin:0}
  h2{font-size:clamp(2.3rem,4.9vw,3.5rem);line-height:1.08;color:var(--deep);font-weight:300}
  h3{font-size:1.6rem;line-height:1.25;color:var(--deep);font-weight:400}
  p{margin:0 0 1.1em}
  .label{font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--sage)}
  .lede{font-size:1.14rem;line-height:1.8;color:var(--ink-soft);font-weight:300}
  .rule{width:64px;height:1px;background:var(--clay);margin:22px 0 26px}

  /* ---------- site header ---------- */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:50;height:var(--header-h);
    display:flex;align-items:center;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
    border-bottom:1px solid transparent;
  }
  .site-header.stuck{background:rgba(var(--paper-rgb),.93);backdrop-filter:blur(8px);border-bottom-color:var(--line);box-shadow:0 10px 30px -26px rgba(0,0,0,.6)}
  .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
  .brand{display:flex;align-items:center}
  .brand a{color:var(--ink)}
  /* PNG with alpha — supported by every current browser; height drives the
     size and the 900px source keeps it sharp on retina screens. */
  .brand-logo{display:block;height:25px;width:auto;max-width:100%}
  .nav-area{display:flex;align-items:center;gap:30px}
  .site-nav{display:flex;align-items:center;gap:36px}
  .nav-btn{
    border:0;background:none;padding:6px 0;cursor:pointer;position:relative;
    font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.24em;
    text-transform:uppercase;color:var(--deep);transition:color .2s ease;
  }
  .nav-btn::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--clay);
    transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
  }
  .nav-btn:hover{color:var(--clay)}
  .nav-btn:hover::after,.nav-btn[aria-current]::after{transform:scaleX(1)}
  .nav-btn:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
  /* Nav items that route to another page are links, not buttons. */
  a.nav-btn{display:inline-block;text-decoration:none}
  a.explore{text-decoration:none}

  /* Project menu: hover (or focus, or click) reveals the project to open. */
  .nav-item{position:relative;display:inline-block}
  .nav-drop{
    position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
    padding-top:14px;  /* keeps the pointer inside the item while it travels */
    opacity:0;visibility:hidden;z-index:70;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav-drop-inner{
    display:block;min-width:230px;background:var(--paper);
    border:1px solid var(--line);box-shadow:0 22px 44px -30px rgba(0,0,0,.75);padding:5px;
  }
  .nav-drop-item{
    display:block;padding:13px 16px;text-decoration:none;
    font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.2em;
    text-transform:uppercase;color:var(--deep);white-space:nowrap;
    transition:background .2s ease,color .2s ease;
  }
  .nav-drop-item:hover{background:var(--paper-2);color:var(--clay)}
  .nav-drop-item:focus-visible{outline:2px solid var(--clay);outline-offset:-2px}
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop,
  .nav-item.open .nav-drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
  /* Boxed call to action in the header — same treatment as the hero button. */
  .nav-cta{
    border:1px solid var(--deep);background:none;color:var(--deep);cursor:pointer;
    padding:12px 22px;font-family:var(--sans);font-size:.66rem;font-weight:500;
    letter-spacing:.22em;text-transform:uppercase;transition:background .3s ease,color .3s ease;
  }
  .nav-cta:hover{background:var(--deep);color:var(--paper)}
  .nav-cta:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  .menu-cta{align-self:flex-start;margin-top:22px;padding:14px 26px}
  /* Tablet and phone only — on desktop the inline nav carries everything. */
  .menu-toggle{
    position:relative;width:44px;height:44px;display:none;
    border:0;background:none;cursor:pointer;color:var(--deep);margin-left:8px;
  }
  /* Bars are placed absolutely at fixed offsets so the open state folds into
     an exact X — flow layout left the two strokes slightly out of register. */
  .menu-toggle span{
    position:absolute;left:9px;width:26px;height:1.5px;background:currentColor;
    transition:transform .3s ease,opacity .2s ease;
  }
  .menu-toggle span:nth-child(1){top:15px}
  .menu-toggle span:nth-child(2){top:21.5px}
  .menu-toggle span:nth-child(3){top:28px}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .menu-toggle:focus-visible{outline:2px solid var(--clay);outline-offset:2px}
  .menu-panel{
    position:fixed;top:var(--header-h);left:0;right:0;z-index:49;
    background:rgba(var(--paper-rgb),.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
    padding:14px 0 26px;display:none;box-shadow:0 24px 50px -36px rgba(0,0,0,.7);
  }
  .menu-panel.open{display:block}
  .menu-panel .wrap{display:flex;flex-direction:column}
  .menu-panel .nav-btn{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);font-size:.74rem}
  .menu-panel .nav-btn::after{display:none}

  /* In the panel the project menu expands in place rather than floating. */
  .menu-panel .nav-item{display:block;position:static}
  .menu-panel .nav-item > .nav-btn{width:100%;display:flex;align-items:center;justify-content:space-between}
  .menu-panel .nav-item > .nav-btn::after{
    display:block;content:"";width:7px;height:7px;margin-right:4px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s ease;
    background:none;position:static;
  }
  .menu-panel .nav-item.open > .nav-btn::after{transform:rotate(225deg) translate(-2px,-2px)}
  .menu-panel .nav-drop{
    position:static;left:auto;transform:none;padding-top:0;opacity:1;visibility:visible;display:none;
  }
  /* Must match .nav-item.open .nav-drop specificity, or the floating
     translate(-50%) from the header menu shifts this off-screen. */
  .menu-panel .nav-item.open .nav-drop{display:block;transform:none}
  .menu-panel .nav-drop-inner{background:none;border:0;box-shadow:none;min-width:0;padding:0}
  .menu-panel .nav-drop-item{
    padding:15px 0 15px 20px;border-bottom:1px solid var(--line);
    color:var(--sage);white-space:normal;
  }
  .menu-panel .nav-drop-item:hover{background:none;color:var(--clay)}

  /* ---------- hero ---------- */
  header.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
  /* Second exception, by request: the landing artwork and the text set into
     it keep the original warm palette, like the project render. Redefining
     the tokens here carries through to the scrim, the halo, the rule, the
     body line and the button without touching the rest of the site. */
  header.hero{
    --paper-rgb:245,242,232;
    --paper:#F5F2E8;
    --ink-soft:#5A6A5C;
    --deep:#34503B;
    --moss:#90A68C;
    --clay:#BC8B78;
  }
  .hero-art{position:absolute;inset:0;z-index:0}
  .hero-art picture{display:block;width:100%;height:100%}
  .hero-art img{width:100%;height:100%;object-fit:cover;object-position:62% 60%;display:block}
  .hero-art::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(100deg,rgba(var(--paper-rgb),.97) 0%,rgba(var(--paper-rgb),.9) 32%,rgba(var(--paper-rgb),.35) 58%,rgba(var(--paper-rgb),.06) 80%),
      linear-gradient(to top,rgba(var(--paper-rgb),.85),rgba(var(--paper-rgb),0) 42%);
  }
  /* min-width:0 keeps a long title word (COLLECTION) from stretching this
     flex item past the viewport and clipping the hero text. */
  .hero-inner{position:relative;z-index:2;width:100%;min-width:0;padding:calc(var(--header-h) + 54px) 0 92px}
  /* One size for both hero lines — the script line inherits it, so they can't
     drift apart. The 2.05rem floor keeps COLLECTION inside a 375px screen. */
  /* Two capital lines break where the copy does; the size is held down so the
     longest line stays left of the tree in the artwork. */
  .hero h1{
    font-size:clamp(1.45rem,2.9vw,2.6rem);font-weight:300;line-height:1.14;margin:0;
    color:var(--deep);letter-spacing:.07em;text-transform:uppercase;
  }
  /* Script has a small x-height, so it runs larger to read alongside the caps. */
  .hero h1 .script{
    display:block;font-family:var(--script);font-weight:400;font-size:1.8em;
    line-height:1.1;letter-spacing:.01em;text-transform:none;color:var(--deep);margin-top:.04em;
  }
  .hero-rule{width:48px;height:1px;background:var(--moss);margin:34px 0 26px}
  .hero .sub{
    max-width:44ch;margin:0;font-size:.98rem;font-weight:300;line-height:1.95;
    letter-spacing:.015em;color:var(--ink-soft);
  }
  .explore{
    display:inline-flex;align-items:center;gap:18px;margin-top:40px;padding:17px 32px;
    border:1px solid var(--deep);background:none;color:var(--deep);cursor:pointer;
    font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
    transition:background .3s ease,color .3s ease;
  }
  .explore:hover{background:var(--deep);color:var(--paper)}
  .explore:focus-visible{outline:2px solid var(--clay);outline-offset:4px}
  .explore svg{transition:transform .3s ease}
  .explore:hover svg{transform:translateX(5px)}


  /* ---------- sections ---------- */
  section{padding:clamp(70px,9.5vw,128px) 0;position:relative;z-index:2;scroll-margin-top:var(--header-h)}
  .alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,76px);align-items:center}
  .art-frame{border:1px solid var(--line);background:var(--paper);padding:22px;box-shadow:var(--shadow)}
  .art-frame svg{display:block;width:100%;height:auto}
  .cap{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-top:16px;text-align:center}

  /* ---------- project page ---------- */
  /* Framed like the landing hero: full-bleed, one screen tall, the render
     covering the area with the header floating over it. */
  .page-hero{
    position:relative;z-index:2;min-height:100svh;display:flex;align-items:flex-end;
    overflow:hidden;background:var(--paper);
  }
  .page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
  /* Header strip only: the nav measured 1:1 against parts of the render. */
  .page-hero::after{
    content:"";position:absolute;left:0;right:0;top:0;height:22%;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(var(--paper-rgb),.94) 0%,rgba(var(--paper-rgb),.8) 34%,
      rgba(var(--paper-rgb),.35) 68%,rgba(var(--paper-rgb),0) 100%);
  }
  /* Small caption-scale title set into the bottom-left of the render, over
     the pale paving where it stays legible without a scrim. */
  /* Deep green on mottled paving measured 3.9:1 (1.6:1 on the dark pavers),
     so a soft paper glow sits under the corner only — the rest of the render
     is untouched. */
  .page-hero-text{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding-bottom:clamp(14px,2.4vw,32px);padding-top:clamp(46px,7vw,100px);
    background:radial-gradient(95% 150% at 0% 100%,
      rgba(var(--paper-rgb),.94) 0%,rgba(var(--paper-rgb),.86) 30%,
      rgba(var(--paper-rgb),.45) 55%,rgba(var(--paper-rgb),0) 78%);
  }
  /* The paving under the text is mottled, so both lines carry a soft paper
     halo — it lifts them off the stone without tinting the render. */
  .page-hero .label,
  .page-hero h1{text-shadow:0 0 12px rgba(var(--paper-rgb),.95),0 0 4px rgba(var(--paper-rgb),.95),0 1px 1px rgba(var(--paper-rgb),.9)}
  .page-hero .label{display:block;font-size:.58rem;font-weight:600;letter-spacing:.28em;margin-bottom:5px}
  .page-hero h1{
    font-family:var(--serif);font-weight:500;margin:0;line-height:1.2;
    font-size:clamp(1rem,1.6vw,1.45rem);letter-spacing:.13em;text-transform:uppercase;color:var(--deep);
  }
  .page-hero h1 .at{font-family:var(--script);font-size:1.15em;text-transform:none;letter-spacing:0;color:var(--clay)}
  /* Exception, by request: the render and the text set into it keep the
     original warm palette — the CORE black/white/grey runs everywhere else.
     Redefining --paper-rgb here keeps this hero's scrim and halo cream. */
  .page-hero{--paper-rgb:245,242,232}
  .page-hero .label{color:#5C7A5E}
  .page-hero h1{color:#34503B}
  .page-hero h1 .at{color:#BC8B78}
  /* The moved section carries the page, so it runs at a larger scale. */
  .page-hero + .feature{padding-top:clamp(44px,5.5vw,76px)}

  /* Label with a leading rule, as on the experience board. */
  .label-rule{display:inline-flex;align-items:center;gap:18px}
  .label-rule::before{content:"";width:54px;height:1px;background:var(--clay)}
  .exp-head h2{margin-top:20px;max-width:18ch}

  /* Eight numbered cards; the 1px grid gap paints the dividers. */
  .exp-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    margin-top:clamp(40px,5vw,68px);border-bottom:1px solid var(--line);
  }
  .exp-item{background:var(--paper-2);padding:30px 26px 38px}
  .exp-num{display:flex;align-items:center;gap:14px;margin-bottom:24px}
  .exp-num span{font-size:.7rem;font-weight:500;letter-spacing:.16em;color:var(--sage)}
  .exp-num i{display:block;width:42px;height:1px;background:var(--line)}
  .exp-item h3{font-size:clamp(1.4rem,1.95vw,1.9rem);line-height:1.14;font-weight:400;margin-bottom:16px}
  .exp-item p{margin:0;font-size:.94rem;line-height:1.7;color:var(--ink-soft)}
  .feature .label{font-size:.78rem;letter-spacing:.34em}
  .feature h2{font-size:clamp(2.5rem,5.4vw,4.2rem);line-height:1.04}
  .feature .lede{font-size:clamp(1.2rem,1.7vw,1.42rem);line-height:1.75}
  .feature p{font-size:1.04rem;line-height:1.85}
  .feature .fact{padding:36px 30px}
  .feature .fact .n{font-size:clamp(1.9rem,3vw,2.9rem)}
  .feature .fact .t{font-size:.72rem}


  /* ---------- a different way of thinking (home) ---------- */
  /* Centred block under the hero that opens the philosophy page. */
  .thinking{text-align:center}
  .thinking-inner{max-width:940px}
  .thinking h2{margin-top:20px;font-size:clamp(2.3rem,5vw,4rem);line-height:1.08}
  .thinking h2 em{font-style:italic}
  .thinking-lede{
    margin:clamp(18px,2vw,26px) auto 0;max-width:48ch;font-family:var(--serif);
    font-size:clamp(1.14rem,1.55vw,1.42rem);line-height:1.5;color:var(--deep);
  }
  .thinking-body{
    margin:clamp(14px,1.6vw,22px) auto 0;max-width:64ch;font-family:var(--serif);
    font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.62;color:var(--ink-soft);
  }
  /* Three pillars, hairlines floating in the gaps so the columns stay equal. */
  .pillars{--col-gap:clamp(24px,3.2vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin-top:clamp(40px,5vw,68px)}
  .pillar{position:relative}
  .pillar + .pillar::before{content:"";position:absolute;top:6px;bottom:6px;left:calc(var(--col-gap) / -2);width:1px;background:var(--line)}
  .pillar-ico{display:block;color:var(--deep)}
  /* The three marks are cut from the reference sheet, so they are sized by
     height to keep the same optical weight across all three. */
  .pillar-ico img{display:block;margin:0 auto;height:clamp(44px,3.7vw,54px);width:auto}
  .pillar h3{
    margin-top:clamp(16px,1.8vw,22px);font-family:var(--sans);font-size:.72rem;font-weight:500;
    letter-spacing:.24em;text-transform:uppercase;color:var(--deep);
  }
  .pillar p{margin:14px auto 0;max-width:24ch;font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:var(--ink-soft)}
  .thinking-cta{margin-top:clamp(38px,4.5vw,62px)}

  /* ---------- philosophy ---------- */
  /* Laid out to the reference: copy on the page grid with the art running
     off the edge, two inverted bands, and a full-width plate between them.
     Body copy here runs in the display serif, as on the reference. */
  .feature.phil p{font-family:var(--serif);font-size:1.06rem;line-height:1.72;color:var(--ink-soft)}
  .phil h2{margin-top:18px}
  .phil h2 + p,.phil h2 + .values-lede{margin-top:clamp(22px,2.4vw,34px)}

  /* 01 — copy stays on the page grid; the art bleeds off the right edge. */
  .belief{padding:0;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center}
  .belief-copy{
    padding:clamp(64px,8vw,116px) clamp(26px,3.4vw,54px) clamp(64px,8vw,116px)
            max(28px,calc((100vw - 1140px) / 2 + 28px));
  }
  .belief-copy h2{max-width:17ch}
  .belief-copy p{max-width:46ch}
  .belief-art{margin:0;align-self:stretch;overflow:hidden;min-height:clamp(380px,44vw,660px)}
  .belief-art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
  /* Desktop: the band is one screen tall and the art column is exactly that
     height x the photograph’s 5:6 ratio, so the art fills the band edge to
     edge and still shows the whole frame without cropping. */
  @media (min-width:901px){
    .belief{
      --band:calc(100svh - var(--header-h));
      min-height:var(--band);align-items:stretch;
      grid-template-columns:minmax(0,1fr) calc(var(--band) * 0.8333);
    }
    .belief-copy{align-self:center;padding-top:clamp(34px,3.2vw,52px);padding-bottom:clamp(34px,3.2vw,52px)}
    .belief-copy p{max-width:58ch}
    .belief-art{min-height:0;height:auto;align-self:stretch;aspect-ratio:auto}
  }
  /* Short laptop screens: the copy is what pushes the band past one screen,
     and a taller band is what makes cover crop the photograph. A tighter
     measure and leading keep the text inside the band instead. */
  @media (min-width:901px) and (max-height:830px){
    .belief-copy{padding-top:26px;padding-bottom:26px}
    .belief-copy h2{font-size:clamp(2.1rem,3.4vw,2.9rem)}
    .feature.phil .belief-copy p{font-size:1rem;line-height:1.6;max-width:66ch}
  }
  /* On its own page there is no hero for the header to float over, so it is
     opaque from the top and the first section has to clear it. */
  .page-top{padding-top:var(--header-h)}

  /* The inverted bands are built from the same black/white/grey palette. */
  .dark{background:#0B0B0B;color:#EDEDED}
  .dark h2,.dark h3{color:#fff}
  .dark .label{color:rgba(255,255,255,.52)}
  .feature.phil.dark p{color:rgba(255,255,255,.7)}

  /* Texture behind the heading only, fading into the band: the source is a
     short, wide frame, so covering the whole band would blow it up. */
  .defines{position:relative;isolation:isolate}
  .defines::before{
    content:"";position:absolute;left:0;right:0;top:0;z-index:-1;
    height:clamp(260px,34vw,440px);pointer-events:none;
    background:
      linear-gradient(to bottom,rgba(11,11,11,.82) 0%,rgba(11,11,11,.9) 58%,#0B0B0B 100%),
      url("texture-bark.jpg") center/cover no-repeat;
  }
  .defines-title{max-width:20ch}
  .def-grid{--col-gap:clamp(26px,3.2vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin-top:clamp(40px,5vw,72px)}
  .def-item{position:relative}
  .def-item + .def-item::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--col-gap) / -2);width:1px;background:rgba(255,255,255,.16)}
  .def-item h3{font-size:clamp(1.3rem,1.8vw,1.7rem);font-weight:400;margin-bottom:10px}
  .feature.phil.dark .def-lead{font-size:1.12rem;line-height:1.45;margin-bottom:18px;color:#fff}
  .feature.phil .def-item p{font-size:.98rem;line-height:1.68}
  .def-item p:last-child{margin-bottom:0}
  /* Card photography: the frames are portrait, like the source images. */
  .def-art{margin:0 0 24px;aspect-ratio:3/4;overflow:hidden;background:#161616}
  .def-art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}

  .feature.phil .values-lede{font-size:clamp(1.08rem,1.4vw,1.22rem);line-height:1.75;max-width:56ch;margin-top:20px}
  .value-grid{--col-gap:clamp(26px,3.2vw,48px);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin-top:clamp(34px,4vw,58px)}
  .value-item{position:relative}
  .value-item + .value-item::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--col-gap) / -2);width:1px;background:var(--line)}
  .value-item h3{font-size:clamp(1.2rem,1.6vw,1.5rem);font-weight:400;margin-bottom:12px}
  .feature.phil .value-item p{font-size:.98rem;line-height:1.72;margin-bottom:0}

  /* Full-width plate between the values and the commitment. */
  .band{margin:0;position:relative;z-index:2;height:clamp(200px,30vw,420px);overflow:hidden;background:var(--paper-2)}
  .band img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block;filter:grayscale(1)}
  /* A panorama: holding its own ratio shows the whole sweep at every width,
     rather than cropping it to a fixed strip on a phone. */
  .band-wide{height:auto;aspect-ratio:1024 / 342}

  /* The commitment band carries the water frame, darkened hardest on the
     left where the text sits and opening up on the right, as on the board. */
  .commitment{position:relative;isolation:isolate}
  .commitment::before{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      linear-gradient(to right,rgba(11,11,11,.96) 0%,rgba(11,11,11,.92) 45%,rgba(11,11,11,.7) 100%),
      url("plate-water.jpg") center/cover no-repeat;
  }
  .commit{max-width:60ch}
  .commit h2{max-width:16ch}
  .commit p:last-of-type{margin-bottom:0}
  .feature.phil.dark .sign{
    margin-top:clamp(28px,3vw,40px);padding-top:20px;border-top:1px solid rgba(255,255,255,.18);
    font-size:1.15rem;letter-spacing:.03em;color:#fff;margin-bottom:0;
  }
  .feature.phil.dark .sign span{color:rgba(255,255,255,.6)}

  .fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:54px}
  .fact{background:var(--paper);padding:30px 26px}
  /* clamp + nowrap so a wide value like 550–1,000 stays on one line */
  .fact .n{font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.05;color:var(--deep);white-space:nowrap}
  .fact .t{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-top:10px}

  .feature-list{list-style:none;margin:34px 0 0;padding:0}
  .feature-list li{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
  .feature-list li:first-child{border-top:1px solid var(--line)}
  .feature-list .ico{flex:0 0 30px;color:var(--sage)}
  .feature-list b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--deep)}
  .feature-list span{font-size:.95rem;color:var(--ink-soft);line-height:1.65}

  .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:54px}
  .card{background:var(--paper);border:1px solid var(--line);padding:30px 28px 32px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
  .card .plan{margin:0 0 20px;color:var(--moss)}
  .card .plan svg{display:block;width:100%;height:auto}
  .card h3 em{font-style:italic;color:var(--clay)}
  .card .area{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin:10px 0 16px}
  .card ul{list-style:none;margin:0 0 20px;padding:0;font-size:.93rem;color:var(--ink-soft)}
  .card ul li{padding:7px 0;border-bottom:1px dotted var(--line);display:flex;justify-content:space-between;gap:14px}
  .card ul li b{font-weight:600;color:var(--ink)}
  .card .status{margin-top:auto;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--clay)}

  .palette{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:46px}
  /* A darker hairline than --line: the palest swatch would otherwise sit
     at the same value as its own border and lose its edge on white. */
  .sw i{display:block;height:88px;border:1px solid rgba(0,0,0,.32)}
  .sw b{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:400;margin-top:14px;color:var(--deep)}
  .sw span{font-size:.7rem;color:var(--ink-soft);line-height:1.5}

  .timeline{margin-top:52px;border-top:1px solid var(--line)}
  .phase{display:grid;grid-template-columns:210px 1fr 170px;gap:28px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .phase .when{font-family:var(--serif);font-size:1.45rem;color:var(--deep)}
  .phase .what b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:400;color:var(--deep);margin-bottom:4px}
  .phase .what span{font-size:.95rem;color:var(--ink-soft)}
  .phase .state{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;text-align:right;color:var(--sage)}
  .phase .state.now{color:var(--clay)}
  .phase .state.done{color:var(--moss)}

  .quote{max-width:780px;margin:0 auto;text-align:center}
  .quote p{font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.4;font-style:italic;color:var(--deep)}
  .quote .who{font-size:.7rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--sage)}

  .visit{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
  .visit div{background:var(--paper);padding:30px 26px}
  .visit b{display:block;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);margin-bottom:12px}
  /* All three cells are contact detail, so the block runs in the UI sans:
     the serif has old-style figures that slant every digit in an address,
     a phone number or a time. The line-height stays at the serif setting
     (1.2rem x 1.55) so the rhythm is unchanged. */
  .visit p{margin:0;font-family:var(--sans);font-size:1.05rem;line-height:1.86rem;letter-spacing:.01em;color:var(--ink-soft)}
  .visit strong{font-weight:600;color:var(--ink)}
  .visit a{
    color:inherit;text-decoration:none;border-bottom:1px solid transparent;
    transition:color .2s ease,border-color .2s ease;
  }
  .visit a:hover{color:var(--clay);border-bottom-color:var(--clay)}
  .visit a:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-bottom-color:transparent}

  /* ---------- enquiry ---------- */
  .enquiry{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,76px);align-items:start}
  .form-card{background:var(--paper);border:1px solid var(--line);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow)}
  .form-card .sprig{display:block;margin:0 auto 20px;color:var(--moss)}
  .form-card h3{text-align:center}
  .form-card .intro{text-align:center;font-size:.93rem;color:var(--ink-soft);margin:10px 0 28px}
  .field{margin-bottom:22px}
  .field label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);margin-bottom:9px}
  .field label .opt{font-weight:400;letter-spacing:.12em;opacity:.75}
  /* Pill fields, as in the reference. */
  .field input,
  .field select{
    width:100%;padding:14px 18px;font-family:var(--sans);font-size:1rem;color:var(--ink);
    background-color:#FAFAFA;border:1px solid var(--line);border-radius:999px;
    transition:border-color .2s ease,box-shadow .2s ease;
  }
  .field input::placeholder{color:#949494}
  .field select{
    appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:46px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none' stroke='%231F1F1F' stroke-width='1.3'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 18px center;background-size:13px 8px;
  }
  /* Nothing chosen yet reads as a placeholder. */
  .field select:invalid{color:#949494}
  .field input:focus,
  .field select:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(0,0,0,.12)}
  .field .err{display:none;margin-top:7px;font-size:.8rem;color:#1A1A1A}
  .field.invalid input,.field.invalid select{border-color:#1A1A1A;background-color:#EDEDED}
  .field.invalid input:focus,.field.invalid select:focus{box-shadow:0 0 0 3px rgba(158,75,56,.15)}
  .field.invalid .err{display:block}
  .submit{
    width:100%;padding:15px 24px;border:1px solid var(--deep);background:var(--deep);color:var(--paper);
    display:inline-flex;align-items:center;justify-content:center;gap:14px;
    font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
    border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease;
  }
  .submit:hover{background:#333333}
  .submit svg{transition:transform .3s ease}
  .submit:hover svg{transform:translateX(4px)}
  .submit:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  .form-note{margin:18px 0 0;font-size:.78rem;line-height:1.65;color:var(--ink-soft);text-align:center}
  /* Honeypot: off-screen rather than display:none, which some bots skip. */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .submit[disabled]{opacity:.62;cursor:progress}
  .submit[disabled] svg{opacity:0}
  .form-error{margin:16px 0 0;font-size:.84rem;line-height:1.6;color:#1A1A1A;text-align:center}
  .thanks{display:none;text-align:center;padding:14px 0 6px}
  .thanks .tick{color:var(--sage);margin-bottom:16px}
  .thanks h3{margin-bottom:12px}
  .thanks p{font-size:.97rem;color:var(--ink-soft);margin:0 auto;max-width:36ch}
  .form-card.sent form{display:none}
  .form-card.sent .thanks{display:block}

  footer{padding:58px 0 70px;border-top:1px solid var(--line);position:relative;z-index:2;background:var(--paper-2)}
  .foot-top{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,72px);align-items:start}
  .foot-logo{height:32px}
  /* fit-content takes its width from the tagline, so the values row below
     centres against that line rather than the whole column. */
  .foot-lede{width:fit-content;margin-top:28px}
  .foot-tag{
    font-family:var(--serif);font-weight:400;color:var(--deep);margin:0;line-height:1.2;
    font-size:clamp(1.35rem,2.3vw,1.95rem);white-space:nowrap;
  }
  /* Spaced naturally rather than stretched to the tagline's width — the
     justified version left uneven gaps between the words. */
  /* Sized off the tagline above it: --vsize is 0.45 of the tagline’s size,
     which lands the row one letter short of it at each end. Gaps and dots
     scale with it so the proportion holds at every width. */
  .foot-values{--vsize:clamp(.604rem,1.03vw,.873rem);display:flex;align-items:center;justify-content:center;gap:calc(var(--vsize) * 1.15);margin-top:14px}
  .foot-values span{font-size:var(--vsize);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
  /* Drawn as a circle rather than a glyph: the bullet character sits low
     against capitals, and its sidebearings made the gaps look uneven. */
  .foot-values i{
    font-size:0;line-height:0;width:calc(var(--vsize) * .23);height:calc(var(--vsize) * .23);border-radius:50%;
    background:var(--clay);flex:none;align-self:center;
    /* caps sit above the line box centre; this lands the dot on the
       cap-height midpoint (em is useless here — font-size is 0) */
    position:relative;top:-0.5px;
  }

  /* Connect runs a step smaller than the brand block. */
  .foot-connect{border-left:1px solid var(--line);padding-left:clamp(24px,3.5vw,54px);min-width:210px}
  .foot-connect .label{display:block;font-size:.58rem;letter-spacing:.26em;margin-bottom:16px}
  .foot-connect ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
  .foot-connect li{display:flex;align-items:center;gap:12px}
  .foot-connect svg{flex:none;color:var(--deep);opacity:.85}
  /* The UI sans, like the rest of the footer: the serif’s old-style figures
     made the phone number look italic and unevenly set. */
  .foot-connect a{
    font-family:var(--sans);font-style:normal;font-size:.82rem;font-weight:400;letter-spacing:.02em;
    color:var(--deep);text-decoration:none;
    border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
  }
  .foot-connect a:hover{color:var(--clay);border-bottom-color:var(--clay)}
  /* Outbound link carries the corner arrow from the reference. */
  .ext-link{display:inline-flex;align-items:center;gap:10px}
  .ext-arrow{flex:none;transition:transform .25s ease}
  .ext-link:hover .ext-arrow{transform:translate(2px,-2px)}
  .foot-connect a:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

  .foot-bottom{
    display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
    margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid var(--line);
    font-size:.7rem;letter-spacing:.06em;color:var(--ink-soft);
  }
  .foot-links{display:flex;align-items:center;gap:13px}
  .foot-links i{font-style:normal;color:var(--line)}
  .foot-links a{
    color:inherit;text-decoration:none;border-bottom:1px solid transparent;
    transition:color .2s ease,border-color .2s ease;
  }
  .foot-links a:hover{color:var(--clay);border-bottom-color:var(--clay)}
  .foot-links a:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
  .foot-links .ext-arrow{margin-left:6px;vertical-align:-1px}

  /* ---------- privacy / terms pages ---------- */
  .legal{padding:calc(var(--header-h) + clamp(44px,6vw,80px)) 0 clamp(60px,7vw,96px);position:relative;z-index:2}
  .legal .wrap{max-width:780px}
  .legal h1{
    font-family:var(--serif);font-weight:300;line-height:1.08;margin:18px 0 0;
    font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:.04em;text-transform:uppercase;color:var(--deep);
  }
  .legal h2{font-size:clamp(1.3rem,2vw,1.7rem);margin:clamp(34px,4vw,48px) 0 12px}
  .legal p,.legal li{font-size:.98rem;line-height:1.85;color:var(--ink-soft)}
  /* Prose links were falling through to the browser blue — the only hue
     left on the site once the palette went neutral. */
  .legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px;text-decoration-color:var(--moss)}
  .legal a:hover{color:var(--deep);text-decoration-color:var(--deep)}
  .legal ul{margin:0 0 1.1em;padding-left:20px}
  .legal li{margin-bottom:6px}
  .legal .updated{margin-top:34px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage)}
  .legal .draft{
    margin:26px 0 0;padding:16px 20px;border:1px solid var(--line);background:var(--paper-2);
    font-size:.84rem;line-height:1.7;color:var(--ink-soft);
  }

  /* Hidden only once JS has taken over the reveal; without the .js class the
     content renders normally, so nothing depends on the observer running. */
  /* Available to assistive tech, not shown on screen. */
  .sr-only{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }

  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}

  @media (max-width:900px){
    .site-nav{display:none}
    .menu-toggle{display:block}
    .exp-grid{grid-template-columns:repeat(2,1fr)}
    .exp-head h2{max-width:none}
    .foot-top{grid-template-columns:1fr}
    .foot-connect{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:28px}
    /* Narrow screens: a full-height crop would show only the middle of the
       render, so it reverts to its natural aspect below the header. */
    .page-hero{min-height:0;display:block;padding-top:var(--header-h)}
    .page-hero img{position:static;width:100%;height:auto;object-fit:fill}
    .page-hero::after{display:none}

    /* Mobile: the illustration fills the hero as a washed backdrop with the
       text over it, the way the reference shows it — not a whole picture with
       the copy on a solid panel below. */
    header.hero{min-height:100svh;display:flex;align-items:center}
    .hero-art{position:absolute;inset:0;padding-top:0;background:var(--paper)}
    .hero-art picture{height:100%}
    .hero-art img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:62% 58%}
    .hero-art::after{
      display:block;
      background:linear-gradient(to bottom,
        rgba(var(--paper-rgb),.84) 0%,rgba(var(--paper-rgb),.74) 38%,
        rgba(var(--paper-rgb),.76) 72%,rgba(var(--paper-rgb),.86) 100%);
    }
    .hero-inner{
      position:relative;z-index:2;margin-top:0;background:none;
      padding:calc(var(--header-h) + 48px) 0 clamp(54px,9vw,86px);
    }
    /* a soft halo as well, so the wash can stay light over the artwork */
    .hero h1{text-shadow:0 0 10px rgba(var(--paper-rgb),.85),0 0 3px rgba(var(--paper-rgb),.9)}
    /* Over the artwork the lighter body green measured 2.99:1 against the
       darkest foliage; the deep green clears 4.5:1, with the same halo. */
    .hero .sub{color:var(--deep);text-shadow:0 0 10px rgba(var(--paper-rgb),.85),0 0 3px rgba(var(--paper-rgb),.9)}
    .hero-rule{margin-top:26px}
    .split,.enquiry{grid-template-columns:1fr}
    .fact-grid,.cards,.palette,.visit{grid-template-columns:1fr 1fr}
    /* Three cells in two columns leaves an empty quarter, which shows as a
       grey panel because the grid gap paints the dividers; let the last one
       run the full width instead. */
    .visit div:last-child{grid-column:1 / -1}
    .def-grid,.value-grid{grid-template-columns:1fr}
    .def-item + .def-item::before,.value-item + .value-item::before{display:none}
    .def-item + .def-item,.value-item + .value-item{padding-top:26px}
    .def-item + .def-item{border-top:1px solid rgba(255,255,255,.16)}
    .value-item + .value-item{border-top:1px solid var(--line)}
    /* Stacked, the text runs the full width, so the sideways fade would
       leave the label over the bright right-hand side; even it out. */
    .commitment::before{background:
      linear-gradient(to bottom,rgba(11,11,11,.95),rgba(11,11,11,.9)),
      url("plate-water.jpg") center/cover no-repeat;}
    .belief{grid-template-columns:1fr}
    .belief-copy{padding:clamp(58px,9vw,84px) 28px clamp(34px,5vw,48px)}
    .belief-art{min-height:clamp(260px,54vw,420px)}
    .phase{grid-template-columns:1fr;gap:6px}
    .phase .state{text-align:left}
  }
  @media (max-width:560px){
    :root{--header-h:72px}
    .wrap{padding:0 18px}
    .brand-logo{height:19px}
    .exp-grid{grid-template-columns:1fr}
    .label-rule::before{width:32px}
    .fact-grid,.cards,.palette,.visit{grid-template-columns:1fr}
    .pillars{grid-template-columns:1fr;gap:clamp(30px,6vw,44px)}
    .pillar + .pillar::before{display:none}
    .def-grid,.value-grid{grid-template-columns:1fr}
    .hero-art img{object-position:66% 58%}
    .hero .sub{max-width:none}
    .hero-meta{gap:22px}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
  }