:root{
    --paper:#EAE8E2; --ink:#16211E; --teal:#0B5C58; --teal-deep:#07403D;
    --white:#FFFFFF; --line:#D6D3CA;
    --sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
    --mono:"Fragment Mono",ui-monospace,SFMono-Regular,monospace;
    --e-out:cubic-bezier(.23,1,.32,1); --e-inout:cubic-bezier(.77,0,.175,1);
  }
  *{box-sizing:border-box; margin:0}
  ::selection{background:var(--teal); color:var(--paper)}
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--paper); border:1px solid var(--teal); border-radius:10px}
  html{scroll-behavior:smooth}
  html.lenis, html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  html,body{overflow-x:clip}
  body:not(.loaded){overflow:hidden}
  body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased}
  .mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
  .ref{color:var(--teal)}
  section{padding:0 clamp(1rem,3vw,2.5rem)}

  /* preloader — the gun-barrel sequence: the sight tracks across, a figure walks in and aims, the shot
     lands, green floods the frame, and the sight settles where the hero mark lives */
  #loader{position:fixed; inset:0; z-index:50; pointer-events:none; color:var(--paper); background:#000}
  #loader #lcv{position:absolute; inset:0; width:100%; height:100%; display:block}
  #loader #lvid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  #loader.gone{display:none}

  /* header — pill · two link columns with hanging lines · WA square · menu button (hidden until scroll, OCI pattern) */
  .site-head{position:fixed; inset:0 0 auto 0; z-index:45; pointer-events:none; display:grid; grid-template-columns:1fr auto; gap:1.6rem; align-items:start; padding:.9rem clamp(1rem,3vw,2.5rem)}
  .site-head :is(a,button,input){pointer-events:auto}
  .chip{position:relative; overflow:hidden; border:none; color:var(--paper); text-decoration:none; width:3.9rem; height:3.9rem; padding:0; display:flex; align-items:center; justify-content:center; z-index:1; font-size:.8rem}
  .chip-bg{position:absolute; inset:0; z-index:-1; background:var(--teal-deep)}
  .chip .mark{width:100%; height:100%; display:block}
  .site-head .chip{opacity:0}
  body.chip-ready .site-head .chip{opacity:1; transition:opacity .3s ease}
  .hcol li:nth-child(1) a{transition-delay:.6s}
  .hcol li:nth-child(2) a{transition-delay:.68s}
  .hcol li:nth-child(3) a{transition-delay:.76s}
  .mbox{grid-column:3}
  #menuBtn{background:var(--white); color:var(--teal); border:none; padding:0 1.7rem; cursor:pointer; height:3.4rem; transform:translateX(101%); transition:transform .6s var(--e-out), background .3s}
  #menuBtn:hover{background:var(--paper)}
  body.nav-compact #menuBtn, body.menu-open #menuBtn{transform:translateX(0)}
  #contactBtn{width:3.4rem; height:3.4rem; background:var(--teal); color:var(--paper); display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.3rem; position:relative; overflow:hidden; z-index:1}
  #contactBtn::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--teal-deep); transform:translateY(101%) scaleY(.5); transform-origin:50% 100%; transition:transform .45s var(--e-out)}
  #contactBtn:hover::before{transform:translateY(0) scaleY(1)}
  .hcols{display:flex; gap:2.4rem; justify-content:flex-end; grid-column:2}
  .hcol{display:flex; gap:.9rem; align-items:flex-start}
  .hcol .hline{width:1px; height:14rem; background:var(--paper); opacity:.5; transform-origin:top center; transition:transform .6s var(--e-out) .2s; margin-top:-.9rem}
  .hcol ul{list-style:none; padding:.2rem 0 0; margin:0; display:flex; flex-direction:column; gap:.55rem}
  .hcol li{overflow:hidden}
  .hcol a{display:block; color:var(--paper); text-decoration:none; font-size:clamp(1.35rem,2.2vw,2rem); letter-spacing:.02em; line-height:1.25; transition:transform .7s var(--e-out), opacity .25s, letter-spacing .3s var(--e-out)}
  .hcol a:hover{opacity:.55; letter-spacing:.06em}
  body:not(.loaded) .hcol a{transform:translateY(112%)}
  body:not(.loaded) .hcol .hline{transform:scaleY(0)}
  .hcol li:nth-child(1) a{transition-delay:.6s}
  .hcol li:nth-child(2) a{transition-delay:.68s}
  .hcol li:nth-child(3) a{transition-delay:.76s}
  body.loaded .hcol a{transition-delay:0s}
  body.nav-compact .hcol a{transform:translateY(-112%)}
  body.nav-compact .hcol .hline{transform:scaleY(0); transition-delay:0s}
  body.nav-ink .hcol a{color:var(--ink)}
  body.nav-ink .hcol .hline{background:var(--ink); opacity:.35}
  @media (max-width:639px){ .hcols{display:none} }
  .mbox{grid-column:3; display:flex; align-items:stretch; transition:opacity .4s var(--e-out)}
  body.at-foot:not(.menu-open) .mbox{opacity:0; pointer-events:none}
  .mwrap{overflow:hidden; display:flex}
  @media (max-width:639px){
    .site-head{display:flex; justify-content:space-between; gap:.7rem}
    .site-head > span:empty{display:none}
    .chip{width:3.2rem; height:3.2rem}
    .hcols{display:none}
    #menuBtn{transform:translateX(0); white-space:nowrap; padding:0 1rem}
    .chip{width:3.2rem; height:3.2rem}
  }
  @media (max-width:479px){ .chip{width:3rem; height:3rem} }

  /* menu — half-screen white panel from the right (OCI), full-screen on mobile */
  #menu{position:fixed; inset:0; z-index:40; visibility:hidden; pointer-events:none; transition:visibility 0s .8s}
  #menu::before{content:""; position:absolute; inset:0; background:#0000004d; opacity:0; transition:opacity .5s ease-in-out}
  body.menu-open #menu{visibility:visible; pointer-events:auto; transition-delay:0s}
  body.menu-open #menu::before{opacity:1}
  .mpanel{position:absolute; top:0; right:0; bottom:0; width:min(58rem,100%); background:var(--white); color:var(--ink); transform:translateX(101%); transition:transform 1s var(--e-inout); padding:6rem clamp(1.5rem,4vw,3.5rem) 2.5rem; display:flex; flex-direction:column; justify-content:center; gap:1.4rem; overflow-y:auto}
  body.menu-open .mpanel{transform:translateX(0)}
  .mpanel .m-ref{align-self:flex-start}
  .m-mask{overflow:hidden}
  .m-link{display:flex; align-items:center; gap:1.2rem; color:var(--ink); text-decoration:none; font-size:clamp(2.8rem,7vw,6rem); font-weight:500; letter-spacing:-.025em; line-height:1.08; transform:translateY(110%); transition:transform .45s var(--e-out) 0s, opacity .3s, letter-spacing .3s}
  body.menu-open .m-link{transform:none; transition-delay:.5s}
  body.menu-open .m-mask:nth-of-type(2) .m-link{transition-delay:.55s}
  body.menu-open .m-mask:nth-of-type(3) .m-link{transition-delay:.6s}
  body.menu-open .m-mask:nth-of-type(4) .m-link{transition-delay:.65s}
  body.menu-open .m-mask:nth-of-type(5) .m-link{transition-delay:.7s}
  .m-dot{width:.5rem; height:.5rem; border-radius:50%; background:var(--teal); opacity:0; transform:scale(0); transition:opacity .3s, transform .3s var(--e-out)}
  .m-link:hover .m-dot{opacity:.6; transform:scale(1)}
  .mpanel hr{border:0; border-top:1px solid var(--line); margin:1rem 0; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--e-out)}
  body.menu-open .mpanel hr{transform:scaleX(1)}
  body.menu-open .mpanel hr:nth-of-type(1){transition-delay:.5s}
  body.menu-open .mpanel hr:nth-of-type(2){transition-delay:.7s}
  .m-news,.m-contact,.m-label{opacity:0; transform:translateY(14px); transition:opacity .5s var(--e-out), transform .5s var(--e-out)}
  body.menu-open .m-news, body.menu-open .m-contact, body.menu-open .m-label{opacity:1; transform:none; transition-delay:.6s}
  .m-label{color:#79837D}
  .m-contact{display:flex; flex-direction:column; gap:.4rem}
  .m-contact a{color:var(--ink); font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-decoration:underline; text-underline-offset:3px}
  .m-news{display:flex; border:1px solid var(--ink); margin-top:.6rem}
  .m-news input{flex:1; border:0; background:transparent; padding:.7rem .8rem; font-family:var(--mono); font-size:.75rem; color:var(--ink); outline:none}
  .m-news button{border:0; background:var(--ink); color:var(--paper); padding:0 1rem; cursor:pointer; font-family:var(--mono)}

  /* hero */
  /* Hero — four pieces over one dithered field. The canvas covers the whole hero; two cells are left open so it
     shows through, the other two carry the name and the panels. The hero is sticky so the next section rides
     over it on scroll. */
  .hero{position:sticky; top:0; height:100svh; min-height:600px; background:#0C6B65; color:var(--paper); overflow:hidden; z-index:0}
  .hero-grid{position:absolute; inset:0; z-index:2; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr}
  .hcell{position:relative; min-width:0; min-height:0}
  .hcell--open{background:none}
  /* a short scrim under the navigation only, so white nav text stays readable over the dither */
  .hero-grid::before{content:""; position:absolute; inset:0 0 auto 0; height:11rem; background:linear-gradient(to bottom, rgba(12,107,101,.72), rgba(12,107,101,0)); pointer-events:none; z-index:1}
  .hcell{z-index:1}
  .hcell--name, .hcell--panels{z-index:2}
  .hcell--name{background:var(--paper); color:var(--ink); display:flex; align-items:flex-end; padding:clamp(1rem,3vw,2.5rem)}
  .hero-inner{position:relative; z-index:2; width:100%}
  .hero h1{font-size:clamp(3.6rem,14.5vw,14rem); font-weight:500; letter-spacing:-.035em; line-height:.88; text-wrap:nowrap}
  .hcell--panels{display:grid; grid-template-columns:1fr 1fr}
  .hpanel{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:1rem;
          padding:clamp(1.1rem,2vw,1.7rem); min-width:0; overflow:hidden}
  .hp-top{position:relative; z-index:1; opacity:.6; line-height:1.65; max-width:30ch}
  .hpanel--cta{background:var(--ink); color:var(--paper); text-decoration:none}
  /* the fill rises from the floor on hover instead of switching colour */
  .hp-fill{position:absolute; inset:auto 0 0 0; height:100%; background:var(--teal); transform:scaleY(0);
           transform-origin:50% 100%; transition:transform .72s var(--e-out)}
  a.hpanel:hover .hp-fill, a.hpanel:focus-visible .hp-fill{transform:scaleY(1)}
  .hpanel--cta:hover .hp-top{opacity:.85}
  .hp-foot{position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem}
  .hpanel--cta .hp-lead{font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.15; font-weight:500; max-width:11ch}
  .hpanel--cta .hp-go{font-size:1.3rem; line-height:1; transition:transform .6s var(--e-out)}
  .hpanel--cta:hover .hp-go{transform:translateX(.45rem)}
  /* second panel: a live preview of the strongest insight, built like the cards further down the page */
  .hpanel--insight{background:var(--teal-deep); color:var(--paper); text-decoration:none}
  .hpanel--insight .hp-fill{background:var(--ink)}
  .hp-meta{position:relative; z-index:1; display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
  .hp-date{font-size:1.15rem; font-weight:500; letter-spacing:-.01em}
  .hp-meta .mono{opacity:.6}
  .hp-body{position:relative; z-index:1; display:flex; flex-direction:column; gap:.75rem}
  .hpanel--insight .hp-lead{font-size:clamp(1.05rem,1.7vw,1.5rem); line-height:1.2; font-weight:500}
  .hp-hook{opacity:.62; line-height:1.65; max-width:36ch}
  /* one opaque layer holding every section below the hero; it slides over the pinned hero on scroll */
  .after-hero{position:relative; z-index:3; background:var(--paper)}
  #dither,#dither2d{position:absolute; inset:0; width:100%; height:100%; display:block}
  #dither2d{image-rendering:pixelated}
  .guides{position:absolute; inset:0; z-index:1; pointer-events:none}
  .guides i{position:absolute; top:0; bottom:0; width:1px; background:var(--paper); opacity:.14}
  .guides i:nth-child(1){left:25%} .guides i:nth-child(2){left:50%} .guides i:nth-child(3){left:75%}
  .line{display:block; overflow:hidden}
  .line-in{display:block; transform:translateY(112%); transition:transform 1s var(--e-out)}
  body.loaded .line-in{transform:none}
  body.loaded .line:nth-child(2) .line-in{transition-delay:.1s}
  body.gsap .line-in{transition:none; transform:none}
  .hero .promise{opacity:0; transition:opacity .7s var(--e-out) .55s}
  body.loaded .hero .promise{opacity:1}
  body.gsap .hero .promise{opacity:1; transition:none}

  /* marquee */
  .marquee{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap; padding:.55rem 0}
  .marquee span{display:inline-block; padding-right:3rem; animation:slide 28s linear infinite}
  @keyframes slide{to{transform:translateX(-50%)}}

  /* intro — indented lead, two mono columns, staircase silhouette */
  .intro{position:relative; background:var(--teal); color:var(--white); min-height:115svh; display:flex; flex-direction:column; justify-content:flex-start; padding-top:8rem; padding-bottom:clamp(16rem,48vh,30rem)}
  .intro p.lead{font-size:clamp(1.6rem,3.2vw,2.875rem); font-weight:400; letter-spacing:-.01em; width:min(84%,60ch); line-height:1.06}
  .intro .lead .indent{display:inline-block; width:3.5em}
  .intro .statements{display:grid; gap:2.5rem; grid-template-columns:1fr 1fr; margin-top:5rem; width:min(46rem,100%); margin-left:auto}
  @media (max-width:700px){ .intro .statements{grid-template-columns:1fr} }
  .intro .statements .mono{font-size:.78rem; line-height:1.7; opacity:.92}
  .stairsdiv{position:absolute; bottom:-1px; left:0; width:min(62%,900px); height:clamp(260px,52vh,560px); pointer-events:none}
  .stairsdiv i{position:absolute; left:0; background:var(--paper); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--e-out)}
  .stairsdiv.in i{transform:scaleX(1)}
  .stairsdiv.scrub i{transition:none; transform:none}
  .stairsdiv i:nth-child(1){bottom:0; height:100%; width:33.4%}
  .stairsdiv i:nth-child(2){bottom:0; height:66.7%; width:66.7%}
  .stairsdiv i:nth-child(3){bottom:0; height:33.4%; width:100%}
  @media (max-width:639px){ .stairsdiv{width:70%; height:160px} }

  /* section heads */
  .shead{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:.6rem; margin:5rem 0 2.5rem}
  .eyebrow{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:.6rem; margin:5rem 0 2.5rem}
  h2{font-size:clamp(2rem,5.5vw,4rem); font-weight:500; letter-spacing:-.03em; line-height:1}

  #services{min-height:125svh; display:flex; flex-direction:column; justify-content:center; padding-bottom:6rem}
  /* services — split headline + accordion (OCI pattern) */
  #services{padding-left:0; padding-right:0}
  #services .svc-left h2{padding-left:clamp(1rem,3vw,2.5rem)}
  #services .svc-right{padding-right:clamp(1rem,3vw,2.5rem)}
  #services .svc-media{margin-left:0}
  .svc-split{display:grid; grid-template-columns:1fr; gap:2.5rem; padding-bottom:0}
  @media (max-width:1023px){
    .svc-split{display:flex; flex-direction:column; gap:0}
    .svc-left, .svc-right{display:contents}
    .svc-left > h2{order:1}
    .svc-right > h2{order:2; margin-top:-1rem}
    .acc{order:3; margin-top:1.5rem}
    .svc-media{order:4; flex:none; width:calc(100% + 2 * clamp(1rem,3vw,2.5rem)); margin:2rem calc(-1 * clamp(1rem,3vw,2.5rem)) 0; aspect-ratio:3/2; min-height:0}
    .ins-faq{display:none}
  }
  @media (min-width:1024px){
    .svc-split{grid-template-columns:5fr 7fr; gap:4rem}
    .svc-left{position:relative; display:flex; flex-direction:column}
    .svc-left .svc-media{margin-right:-1.5rem}
    .svc-left::after{content:""; position:absolute; right:-1.5rem; top:.4rem; bottom:0; width:1px; background:var(--line)}
  }
  .svc-left h2,.svc-right h2{font-size:clamp(3.2rem,10.5vw,10rem); line-height:.95; letter-spacing:-.02em}
  .svc-media{position:relative; flex:1; min-height:300px; margin:2.2rem 0 0 calc(-1 * clamp(1rem,3vw,2.5rem)); overflow:hidden}
  .svc-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .26s var(--e-out)}
  .svc-media img.fade{opacity:0}
  .acc{border-bottom:1px solid var(--line)}
  .acc-item{border-top:1px solid var(--line)}
  .acc-head{display:flex; justify-content:space-between; align-items:center; gap:1rem; width:100%; padding:1.5rem 0; cursor:pointer; background:none; border:0; font-family:var(--sans); font-size:clamp(1.5rem,2.8vw,2.4rem); font-weight:500; letter-spacing:-.015em; color:var(--ink); text-align:left}
  .acc-plus{font-family:var(--mono); font-size:1.1rem; transition:transform .4s var(--e-out)}
  .acc-item.open .acc-plus{transform:rotate(135deg)}
  .acc-item:not(.open) .acc-head:hover .acc-plus{transform:rotate(60deg)}
  .acc-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s var(--e-inout)}
  .acc-item.open .acc-body{grid-template-rows:1fr}
  .acc-body > div{overflow:hidden}
  .acc-body p{font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.8; max-width:52ch; padding-bottom:.6rem}
  .acc-body a{display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); text-decoration:none; padding-bottom:1.2rem; transition:letter-spacing .3s var(--e-out), color .3s}
  .acc-body a:hover{color:var(--ink); letter-spacing:.16em}
  .wide-btn{display:block; width:100%; background:var(--teal); color:var(--white); text-align:center; padding:1.15rem; text-decoration:none; margin-top:2.4rem; transition:background .3s}
  .wide-btn:hover{background:var(--teal-deep)}

  /* process — cream bg, scattered rotated card deck with spine (OCI pattern) */
  .process{position:relative; background:var(--paper); color:var(--ink); min-height:122svh; padding-top:2rem; padding-bottom:9rem}
  .process .ph2{max-width:12ch; font-size:clamp(2.6rem,6.5vw,5rem)}
  .psplit{display:grid; grid-template-columns:1fr; gap:3rem; margin-top:2.5rem}
  @media (min-width:1024px){ .psplit{grid-template-columns:5fr 7fr} }
  .psticky{position:sticky; top:7rem}
  .psticky p{margin-top:2.2rem; max-width:34ch; line-height:1.8; color:#5c655f; font-size:.78rem}
  .deck{position:relative; display:flex; flex-direction:column; gap:3.5rem; padding:2rem 0 5rem; overflow-x:clip}
  .deck::before{content:""; position:absolute; left:50%; top:-3rem; bottom:0; width:1px; background:color-mix(in srgb, var(--ink) 22%, transparent)}
  .pcard{position:relative; background:var(--white); width:min(88%,560px); padding:1rem 1.4rem 1.4rem; box-shadow:0 16px 40px rgba(22,33,30,.10); display:flex; flex-direction:column; gap:.9rem}
  .pcard:nth-child(1){align-self:flex-end; transform:rotate(-2.2deg)}
  .pcard:nth-child(2){align-self:flex-start; margin-left:6%; transform:rotate(1.9deg)}
  .pcard:nth-child(3){align-self:flex-end; margin-right:3%; transform:rotate(-1.4deg)}
  .pcard:nth-child(4){align-self:center; transform:rotate(2.4deg)}
  .pcard .pc-top{display:flex; justify-content:space-between; align-items:baseline; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500; color:var(--teal)}
  .pcard .pc-num{font-weight:500}
  .pcard hr{border:0; border-top:1px solid var(--teal); opacity:.5; margin:0}
  .pcard p{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.8; color:#1d3a35; padding:.4rem 0 .6rem}
  /* machine — teal band, oversized numbers (their project-stat pattern) */
  .machine{background:var(--teal-deep); color:var(--paper); min-height:88svh; display:flex; flex-direction:column; justify-content:center; padding-top:3rem; padding-bottom:5rem}
  .machine .eyebrow{border-top-color:color-mix(in srgb, var(--paper) 55%, transparent)}
  .mstats{display:grid; grid-template-columns:1fr; gap:2.5rem 0; margin-top:2rem}
  @media (min-width:820px){ .mstats{grid-template-columns:repeat(4,1fr)} }
  .mstat{border-left:1px solid color-mix(in srgb, var(--paper) 35%, transparent); padding:0 1.4rem}
  .mstat b{display:block; font-family:var(--sans); font-size:clamp(4rem,8.5vw,8.5rem); font-weight:500; line-height:.95; font-variant-numeric:tabular-nums}
  .mstat span{display:block; margin-top:1.2rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.7; opacity:.85; max-width:22ch}

  /* work — 3 columns, counter-parallax, dither-to-photo hover */
  /* Selected impacts, as a register rather than a catalogue. Equal bordered cards in three columns with a
     display figure over a colour tile read as products; labelled columns under a header row read as a record. */
  .work{background:var(--paper); min-height:0; padding-top:5rem; padding-bottom:4.5rem; overflow:visible}
  .wtitle{text-align:left; font-size:clamp(2.6rem,6.5vw,6rem); line-height:.92; letter-spacing:-.03em; margin:0 0 3.5rem}
  .wreg{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
  .wreg-head,.wrow{display:grid; grid-template-columns:1fr; gap:.4rem; padding:1.5rem 0; border-bottom:1px solid var(--line)}
  .wreg-head{display:none}
  .wrow{position:relative; transition:background-color .45s var(--e-out)}
  .wrow:hover{background:rgba(11,92,88,.06)}
  .wr-hit{position:absolute; inset:0; z-index:1}
  .wr-ref{color:var(--teal); opacity:.65}
  .wr-name{font-size:clamp(1.05rem,1.5vw,1.35rem); font-weight:500; color:var(--teal); line-height:1.2; letter-spacing:-.01em}
  .wr-filed{opacity:.5}
  .wr-find{font-size:.98rem; line-height:1.45; max-width:40ch}
  .wr-metric{color:var(--teal); font-variant-numeric:tabular-nums; line-height:1.4; opacity:.85}
  .wr-metric b{font-weight:400; display:block; font-size:.95rem; letter-spacing:0; opacity:1}
  @media (min-width:1024px){
    .wreg-head{display:grid}
    .wreg-head,.wrow{grid-template-columns:3rem minmax(11rem,.9fr) 14rem minmax(15rem,1.25fr) 11rem; column-gap:2.2rem; gap:0; align-items:baseline; padding:1.25rem 0}
    .wreg-head{padding:.55rem 0; color:var(--teal); opacity:.8; border-bottom-color:var(--ink)}
    .wr-metric{justify-self:end; text-align:right}
  }
  .wreg-more{display:inline-block; margin-top:2.6rem; color:var(--teal); text-decoration:none; transition:letter-spacing .3s var(--e-out)}
  .wreg-more:hover{letter-spacing:.12em}

  /* insights — image left, 2x2 cards right, active block + image swap on hover */
  .insights{background:var(--paper); padding-top:5rem; padding-bottom:7rem}
  .ins-head{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--ink); padding-top:.6rem; margin-bottom:2.5rem}
  .ins-head a{text-decoration:none}
  .ins-grid{display:grid; grid-template-columns:1fr; gap:1.5rem}
  @media (min-width:1024px){ .ins-grid{grid-template-columns:1fr 1fr; gap:2rem} }
  .ins-img canvas{display:block; width:100%; aspect-ratio:1/1; height:auto; image-rendering:pixelated; transition:opacity .3s ease}
  .ins-img canvas.fade{opacity:0}
  .ins-cards{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-rows:1fr; background:var(--line); gap:1px; border:1px solid var(--line)}
  .ins-card{background:var(--paper); color:var(--teal); padding:1.4rem; display:flex; flex-direction:column; justify-content:space-between; gap:4rem; cursor:pointer; transition:background-color .5s ease, color .5s ease}
  .ins-card > div{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
  .ins-card .d{font-size:1.15rem; font-weight:500}
  .ins-card h3{font-size:clamp(1rem,1.5vw,1.3rem); font-weight:500; line-height:1.3}
  .ins-card.active{background:var(--teal); color:var(--paper)}
  /* footer — full-bleed teal, giant outline mark, nav columns, newsletter (OCI pattern) */
  .bigfoot{background:var(--teal-deep); color:var(--paper); min-height:76svh; display:flex; flex-direction:column; justify-content:space-between; gap:3.5rem; padding:6rem clamp(1rem,3vw,2.5rem) 1.4rem}
  .foot-grid{display:grid; gap:2rem 3rem; grid-template-columns:1fr 1fr; align-items:start}
  @media (min-width:1024px){ .foot-grid{grid-template-columns:1.2fr 1fr 1.4fr} }
  .foot-top{display:grid; grid-template-columns:1fr; gap:3rem; align-items:end}
  @media (min-width:1024px){ .foot-top{grid-template-columns:auto 1fr} }
  .fvideo{position:relative; justify-self:end; width:min(100%,44rem); aspect-ratio:16/9; overflow:hidden; cursor:pointer; border:1px solid color-mix(in srgb, var(--paper) 35%, transparent)}
  .fvideo canvas{position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated}
  .fv-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:4.2rem; height:4.2rem; border:1px solid var(--paper); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; transition:transform .4s var(--e-out), background .3s}
  .fvideo:hover .fv-play{transform:translate(-50%,-50%) scale(1.15); background:var(--teal)}
  .fv-label{position:absolute; left:1rem; bottom:.8rem; color:var(--paper)}
  .fmark{width:min(38vw,500px); height:auto; color:var(--paper); opacity:.95; margin-bottom:.5rem}
  .flabel{display:block; margin-bottom:.9rem; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 62%, transparent)}
  .fcol ul{list-style:none; padding:.1rem 0 0 1.1rem; margin:0; display:flex; flex-direction:column; gap:.6rem; border-left:1px solid color-mix(in srgb, var(--paper) 30%, transparent)}
  .fcol a, .fplain{color:var(--paper); font-family:var(--sans); font-weight:500; font-size:clamp(1.02rem,1.3vw,1.25rem); line-height:1.25; letter-spacing:.005em; text-decoration:none; display:inline-block; position:relative; transition:transform .4s var(--e-out), opacity .2s}
  .fplain{font-weight:400; opacity:.85}
  .fcol a::before{content:"→"; position:absolute; left:-1.4rem; top:0; opacity:0; transform:translateX(-.5rem); transition:opacity .25s, transform .4s var(--e-out)}
  .fcol a:hover{transform:translateX(1.4rem)}
  .fcol a:hover::before{opacity:1; transform:none}
  .foot-legal{display:flex; justify-content:flex-end; align-items:center; gap:.9rem; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.7; border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); padding-top:1rem; margin-top:.5rem}
  .foot-legal a{color:var(--paper); text-decoration:none}
  .foot-legal a:hover{opacity:.6}
  @media (max-width:639px){
    .bigfoot{min-height:auto; padding:3.5rem 1rem 1rem; gap:2.2rem}
    .foot-grid{gap:1.6rem 1.2rem}
    .fcontact{grid-column:1/-1}
    .fcol a, .fplain{font-size:1rem}
    .fmark{width:28vw}
    .fvideo{display:none}
    .foot-legal{justify-content:flex-start}
  }

  /* double-layer button hover */
  .bl{position:relative; overflow:hidden}
  .bl .bl-b{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}

  /* reveals — their fadeUp preset */
  .rv{opacity:0; transform:translateY(30px); transition:opacity 1s var(--e-out),transform 1s var(--e-out)}
  .rv.in{opacity:1; transform:none}
  .acc-item.rv:nth-child(2),.stat.rv:nth-child(2),.pcard.rv:nth-child(2){transition-delay:.1s}
  .acc-item.rv:nth-child(3),.stat.rv:nth-child(3),.pcard.rv:nth-child(3){transition-delay:.2s}
  .acc-item.rv:nth-child(4),.stat.rv:nth-child(4),.pcard.rv:nth-child(4){transition-delay:.3s}

  @media (prefers-reduced-motion:reduce){
    .rv,.line-in,.hero .promise,.site-head .chip,.mbox{opacity:1; transform:none; transition:none}
    .marquee span{animation:none}
    #loader{display:none}
    #menuBtn{transform:none; transition:none}
    .mpanel,.m-link{transition:none}
    html{scroll-behavior:auto}
  }
  /* page transitions — exit covers with stairs (~1.15s), entrance uncovers (~1s) */
  html.pt-in body::after{content:""; position:fixed; inset:0; background:var(--teal-deep); z-index:61; pointer-events:none}
  #pt{position:fixed; inset:0; z-index:60; pointer-events:none; display:grid; grid-template-columns:repeat(5,1fr)}
  #pt i{background:var(--teal-deep); width:calc(100% + 1.5px); transform:scaleY(0); transform-origin:bottom; transition:transform .9s var(--e-inout)}
  #pt i:nth-child(2){transition-delay:.06s} #pt i:nth-child(3){transition-delay:.12s}
  #pt i:nth-child(4){transition-delay:.18s} #pt i:nth-child(5){transition-delay:.24s}
  body.pt-active #pt i{transform:scaleY(1)}
  body.pt-in #pt i{transform:scaleY(1); transition:none; transform-origin:top}
  body.pt-in.pt-reveal #pt i{transform:scaleY(0); transition:transform .9s var(--e-inout)}
  body.pt-in.pt-reveal #pt i:nth-child(2){transition-delay:.06s}
  body.pt-in.pt-reveal #pt i:nth-child(3){transition-delay:.12s}
  body.pt-in.pt-reveal #pt i:nth-child(4){transition-delay:.18s}
  body.pt-in.pt-reveal #pt i:nth-child(5){transition-delay:.24s}

  /* testimonials — crossfading quotes + circular controls */
  .testi{background:var(--white); min-height:72svh; display:flex; flex-direction:column; justify-content:center; padding-top:3rem; padding-bottom:4rem}
  .tq-wrap{display:grid; margin-top:2rem}
  .tq{grid-area:1/1; margin:0; opacity:0; transition:opacity .35s ease; pointer-events:none}
  .tq.active{opacity:1; pointer-events:auto; transition-delay:.3s}
  .tq p{font-size:clamp(1.6rem,3.4vw,2.875rem); font-weight:500; color:var(--teal); line-height:1.15; max-width:28ch}
  .tq footer{margin-top:1.6rem; color:#5c655f}
  .tq-ctrl{display:flex; align-items:center; gap:1.2rem; margin-top:3.5rem}
  .tq-btn{width:3.4rem; height:3.4rem; border:1px solid var(--teal); border-radius:50%; background:none; color:var(--teal); cursor:pointer; font-size:1.05rem; position:relative; overflow:hidden; z-index:1; transition:color .3s}
  .tq-btn::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--teal); transform:scale(0); transform-origin:center bottom; transition:transform .45s var(--e-out)}
  .tq-btn:hover{color:var(--white)}
  .tq-btn:hover::before{transform:scale(1)}
  .tq-count{color:#5c655f; font-variant-numeric:tabular-nums}
  /* services full list + project pills (subpages) */
  .svcfull{margin-top:3rem; border-top:1px solid var(--line)}
  .svcfull article{display:grid; grid-template-columns:auto 1fr; gap:2.2rem; padding:2.6rem 0; border-bottom:1px solid var(--line)}
  .svcfull .num{font-size:clamp(1.8rem,3vw,2.4rem); font-weight:500; color:var(--teal); line-height:1}
  .svcfull h3{font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:500; color:var(--teal)}
  .svcfull p{font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; line-height:1.8; max-width:60ch; margin:.9rem 0 1.1rem}
  .svcfull a{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); text-decoration:none; transition:letter-spacing .3s var(--e-out)}
  .svcfull a:hover{letter-spacing:.16em}
  .pills{display:flex; gap:.6rem; flex-wrap:wrap; margin:2.5rem 0 1rem}
  .pill{border:1px solid var(--teal); color:var(--teal); padding:.45rem 1.1rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; border-radius:999px; text-decoration:none}
  .pill.active{background:var(--teal); color:var(--white)}

  /* living gradient — brand darks drifting on their own, nudged by the mouse (--gx/--gy from app.js) */
  .living{position:relative; isolation:isolate}
  .living::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(60% 80% at calc(28% + var(--gx,0)*1%) calc(18% + var(--gy,0)*1%), #106F68 0%, transparent 62%),
      radial-gradient(55% 70% at calc(82% - var(--gx,0)*.7%) calc(84% - var(--gy,0)*.7%), #03261F 0%, transparent 66%),
      radial-gradient(70% 60% at calc(50% + var(--gx,0)*.3%) 112%, #0B5C58 0%, transparent 70%),
      var(--teal-deep);
    animation:drift 22s ease-in-out infinite alternate}
  @keyframes drift{0%{filter:hue-rotate(0deg) saturate(1)} 50%{filter:hue-rotate(-5deg) saturate(1.12)} 100%{filter:hue-rotate(4deg) saturate(.94)}}
  @media (prefers-reduced-motion:reduce){ .living::before{animation:none} }

  /* clone-page heroes: text sits over the dither, so dim the plate and veil it (text blocks are siblings, never covered) */
  .hero-plate, .vl-hero-img, .aid-img, .bd-hero-img{position:relative; background:var(--teal-deep); overflow:hidden}
  /* supplied artwork arrives already dithered, so nothing is laid over it */
  .hero-plate img, .sv-hero-img img, .aid-img img, .vl-hero-img img, .bd-hero-img img, .me-hero-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
  .hero-plate:has(img)::after, .sv-hero-img::after, .aid-img:has(img)::after,
  .vl-hero-img:has(img)::after, .bd-hero-img:has(img)::after{content:none}
  .aid-img, .vl-hero-img, .bd-hero-img{overflow:hidden}
  .me-hero{position:relative}
  .me-hero-img{position:absolute; inset:0; margin:0; overflow:hidden; z-index:0}
  .me-hero > *:not(.me-hero-img){position:relative; z-index:1}
  .sv-hero-img{position:absolute; inset:0; margin:0; overflow:hidden; z-index:0}
  .sv-hero{position:relative}
  .sv-hero > *:not(.sv-hero-img){position:relative; z-index:1}
  .hero-plate canvas[data-dither], .vl-hero-img canvas[data-dither], .aid-img canvas[data-dither], .bd-hero-img canvas[data-dither]{opacity:.55}
  .hero-plate::after, .vl-hero-img::after, .aid-img::after, .bd-hero-img::after{content:""; position:absolute; inset:0; background:rgba(7,64,61,.5); pointer-events:none}
  canvas[data-dither]{image-rendering:pixelated}

  /* service pages — each a different structure */
  .chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 2.5rem}
  .chip2{border:1px solid var(--teal); color:var(--teal); padding:.4rem .9rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase}
  .file{display:grid; grid-template-columns:1fr; gap:2rem; margin-top:3rem}
  @media (min-width:1024px){ .file{grid-template-columns:14rem 1fr} }
  .file-index{position:sticky; top:7rem; align-self:start; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem}
  .file-index li{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f; padding-left:1rem; border-left:1px solid var(--line)}
  .file-index li b{color:var(--teal); font-weight:400; margin-right:.5rem}
  .fpanel{display:grid; grid-template-columns:4.5rem 1fr; gap:1.5rem; padding:2.2rem 0; border-top:1px solid var(--line)}
  .fpanel:nth-child(even){margin-left:6%}
  .fpanel .fn{font-size:clamp(2.2rem,4vw,3.4rem); font-weight:500; color:var(--teal); line-height:1}
  .fpanel h3{font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:500; color:var(--teal)}
  .fpanel p{max-width:58ch; margin-top:.6rem}
  .fpanel .out{display:block; margin-top:.9rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f}
  .cmp{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:3rem 0 1.5rem}
  @media (min-width:800px){ .cmp{grid-template-columns:1fr 1fr} }
  .cmp > div{background:var(--paper); padding:1.6rem}
  .cmp h4{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:.8rem; font-weight:400}
  .cmp b{display:block; font-size:1.35rem; font-weight:500; color:var(--teal); margin-bottom:.5rem}
  .rulebox{background:var(--teal-deep); color:var(--paper); padding:2.4rem; margin:2.5rem 0; font-size:clamp(1.2rem,2vw,1.7rem); font-weight:500; line-height:1.3; max-width:44ch}
  .cta-line{display:inline-block; margin-top:2.5rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--white); background:var(--teal); padding:1rem 1.8rem; text-decoration:none; transition:background .3s}
  .cta-line:hover{background:var(--teal-deep)}
  .vmap{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:2.5rem}
  @media (min-width:800px){ .vmap{grid-template-columns:1fr 1fr} }
  @media (min-width:1200px){ .vmap{grid-template-columns:1fr 1fr 1fr} }
  .vcard{background:var(--paper); padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; min-height:17rem}
  .vcard .gate{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#5c655f}
  .vcard b{font-size:1.3rem; font-weight:500; color:var(--teal); line-height:1.15}
  .vcard p{font-size:.93rem}
  .vcard dl{display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; margin:auto 0 0; font-size:.8rem}
  .vcard dt{font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f; padding-top:.15rem}
  .vcard dd{margin:0}
  .explain{display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2.5rem}
  @media (min-width:900px){ .explain{grid-template-columns:1fr 1fr} }
  .explain p{font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.3}
  .rail{display:flex; gap:1px; overflow-x:auto; scroll-snap-type:x mandatory; background:var(--line); border:1px solid var(--line); margin-top:3rem}
  .station{flex:0 0 min(22rem,80vw); scroll-snap-align:start; background:var(--paper); padding:1.6rem; min-height:15rem; display:flex; flex-direction:column; gap:.8rem}
  .station .sn{font-family:var(--mono); color:var(--teal); font-size:.8rem}
  .station b{font-size:1.5rem; font-weight:500; color:var(--teal)}
  .matrix{margin-top:3rem; border-top:1px solid var(--teal)}
  .matrix > div{display:grid; grid-template-columns:3rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); font-size:.95rem}
  .matrix span{font-family:var(--mono); color:var(--teal); font-size:.75rem; padding-top:.2rem}
  .screens{display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem}
  @media (min-width:900px){ .screens{grid-template-columns:repeat(3,1fr)} }
  .screen{position:relative; border:1px solid var(--line); background:var(--paper)}
  .screen canvas{display:block; width:100%; aspect-ratio:4/3; height:auto; image-rendering:pixelated}
  .screen .cap{padding:1rem 1.1rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); border-top:1px solid var(--line)}
  .screen .ph{position:absolute; top:.8rem; left:.8rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); background:var(--teal-deep); padding:.25rem .5rem}
  .bignums{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:3rem}
  .bignums > div{background:var(--paper); padding:1.4rem}
  .bignums b{display:block; font-size:clamp(2.4rem,5vw,4rem); font-weight:500; color:var(--teal); line-height:1}
  .bignums span{display:block; margin-top:.5rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#5c655f}
  .list2{list-style:none; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem 2rem}
  .list2 li{border-top:1px solid var(--line); padding:.8rem 0; font-size:1.05rem}

  /* ---- revision 3: contact button, menu sizing, CTA band, insight links ---- */
  #contactBtn{width:auto; min-width:3.4rem; padding:0 1.1rem; gap:.6rem; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
  #contactBtn .cb-a{font-size:1.05rem; line-height:1; transition:transform .4s var(--e-out)}
  #contactBtn:hover .cb-a{transform:translate(.15rem,-.15rem)}
  @media (max-width:479px){ #contactBtn{padding:0 .9rem} #contactBtn .cb-t{display:none} }
  .mpanel{overflow-y:auto; overscroll-behavior:contain}
  .m-mask{flex-shrink:0}
  .m-link{font-size:clamp(2.4rem,5.6vw,5rem)}
  .ins-card h3 a{color:inherit; text-decoration:none}
  .ins-card h3 a:hover{text-decoration:underline; text-underline-offset:.15em; text-decoration-thickness:1px}
  .cta-band{min-height:74vh; display:flex; align-items:center; padding:6rem clamp(1rem,3vw,2.5rem); color:var(--paper); background:var(--teal-deep)}
  .cta-band h2{font-size:clamp(2.2rem,5vw,4.6rem); font-weight:500; letter-spacing:-.02em; line-height:1.05; max-width:20ch; margin:1.6rem 0 2.6rem}
  .cta-row{display:flex; gap:.9rem; flex-wrap:wrap}
  .cta-btn{display:inline-flex; align-items:center; height:3.4rem; padding:0 1.6rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; background:var(--paper); color:var(--teal-deep); transition:background .3s, color .3s, transform .4s var(--e-out)}
  .cta-btn:hover{background:var(--white); transform:translateY(-2px)}
  .cta-btn.ghost{background:transparent; color:var(--paper); border:1px solid color-mix(in srgb, var(--paper) 50%, transparent)}
  .cta-btn.ghost:hover{background:color-mix(in srgb, var(--paper) 12%, transparent)}
  @media (max-width:639px){ .cta-band{padding:5rem 1rem 4.5rem} }

  /* ---- testimonials: vertical, top to bottom ---- */
  .testi{min-height:auto; padding-bottom:5rem}
  .tv{display:grid; margin-top:2.2rem; border-top:1px solid var(--line)}
  .tv-item{margin:0; padding:2.4rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr; gap:1rem}
  @media (min-width:1024px){ .tv-item{grid-template-columns:minmax(0,1fr) 20rem; gap:3rem; align-items:end} }
  .tv-item p{margin:0; font-size:clamp(1.5rem,2.8vw,2.5rem); font-weight:500; color:var(--teal); line-height:1.15; max-width:30ch}
  .tv-item footer{color:#5c655f; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase}

  .wname a{color:inherit; text-decoration:none}

  /* Hero at phone — same four pieces, restacked: name + open, open across, then the two panels. */
  @media (max-width:720px){
    .hero-grid{grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr 15rem}
    .hcell--name{grid-column:1 / -1; grid-row:1; padding:5.5rem 1.15rem 1.9rem}
    .hcell--open{grid-column:1; grid-row:2}
    .hcell--open2{grid-column:2; grid-row:2}
    .hcell--panels{grid-column:1 / -1; grid-row:3; grid-template-columns:1fr 1fr}
    .hero h1{font-size:clamp(3.6rem,23vw,7rem); line-height:.9}
    .hpanel{padding:1.05rem .95rem; gap:.7rem}
    .hp-top{font-size:.72rem; line-height:1.5}
    .hpanel--cta .hp-lead{font-size:.98rem; max-width:9ch}
    .hp-meta{flex-direction:column; align-items:flex-start; gap:.3rem}
    .hp-meta .mono{font-size:.5rem}
    .hp-date{font-size:.95rem}
    .hp-body{gap:.5rem}
    .hpanel--insight .hp-lead{font-size:.9rem; line-height:1.25}
    .hp-hook{font-size:.72rem; line-height:1.5}
  }

  /* ---- Impact index: a numbered case list, not a catalogue of tiles ---- */
  .ik-grid{grid-column:1 / -1; display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border-top:1px solid var(--ink); border-bottom:1px solid var(--line)}
  @media (min-width:760px){ .ik-grid{grid-template-columns:1fr 1fr} }
  @media (min-width:1180px){ .ik-grid{grid-template-columns:repeat(3,1fr)} }
  .ik-card{position:relative; background:var(--paper); padding:1.8rem 1.6rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; min-height:17rem; transition:background-color .45s var(--e-out)}
  .ik-card:hover{background:#E3E1DA}
  .ik-num{color:var(--teal); opacity:.65}
  .ik-title{font-size:clamp(1.2rem,1.8vw,1.55rem); font-weight:500; letter-spacing:-.015em; line-height:1.15; color:var(--teal); max-width:18ch}
  .ik-meta{opacity:.5; line-height:1.5}
  .ik-figs{display:flex; gap:2.2rem; margin-top:auto; padding-top:1.2rem}
  .ik-figs > div{display:flex; flex-direction:column; gap:.25rem}
  .ik-figs dt{font-size:.6rem; letter-spacing:.07em; opacity:.55}
  .ik-figs dd{margin:0; font-size:1.35rem; font-weight:500; letter-spacing:-.02em; color:var(--teal); font-variant-numeric:tabular-nums}
  .ik-go{margin-top:1.1rem; color:var(--teal); transition:letter-spacing .3s var(--e-out)}
  .ik-card:hover .ik-go{letter-spacing:.1em}
  .ik-hit{position:absolute; inset:0; z-index:1}

  /* ---- Impact study: one column, plain rules, three prose sections ---- */
  .im-hero{padding:6.5rem clamp(1rem,3vw,2.5rem) 2.5rem; max-width:60rem}
  .im-crumb{display:inline-block; color:var(--teal); text-decoration:none; opacity:.7; margin-bottom:2.2rem}
  .im-crumb:hover{opacity:1}
  .im-h1{font-size:clamp(2.2rem,5.5vw,4.4rem); font-weight:500; letter-spacing:-.03em; line-height:1; margin:0}
  .im-lede{margin-top:1.4rem; font-size:clamp(1.1rem,1.9vw,1.5rem); line-height:1.35; color:var(--teal); max-width:26ch}
  .im-sec{padding:0 clamp(1rem,3vw,2.5rem) 3.5rem; max-width:60rem}
  .im-h2{font-size:.72rem; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; font-weight:400; color:var(--teal); opacity:.75; margin:0 0 1rem; padding-top:2.2rem; border-top:1px solid var(--line)}
  .im-body{font-size:1.02rem; line-height:1.6; max-width:58ch}
  .im-figs{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:0}
  @media (min-width:640px){ .im-figs{grid-template-columns:repeat(3,1fr)} }
  .im-figs > div{background:var(--paper); padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.5rem}
  .im-figs dt{font-size:.6rem; letter-spacing:.07em; opacity:.55}
  .im-figs dd{margin:0; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:500; letter-spacing:-.025em; line-height:1; color:var(--teal); font-variant-numeric:tabular-nums}
  .im-list{list-style:none; padding:0; margin:0; max-width:58ch}
  .im-list li{padding:.85rem 0 .85rem 1.4rem; border-bottom:1px solid var(--line); position:relative; font-size:1rem; line-height:1.5}
  .im-list li::before{content:"—"; position:absolute; left:0; color:var(--teal); opacity:.6}
  .im-svc{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.4rem}
  .im-svc a,.im-svc span{font-family:var(--mono); font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color:var(--teal); border:1px solid var(--line); padding:.4rem .75rem; text-decoration:none}
  .im-svc a:hover{border-color:var(--teal)}
  .im-rec{margin:0; max-width:38rem}
  .im-rec > div{display:grid; grid-template-columns:8rem 1fr; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--line)}
  .im-rec dt{color:var(--teal); opacity:.7}
  .im-rec dd{margin:0}
  .im-anon{display:block; margin-top:1.2rem; opacity:.45; line-height:1.6}
  .im-relgrid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
  @media (min-width:760px){ .im-relgrid{grid-template-columns:repeat(3,1fr)} }
  .im-relcard{background:var(--paper); padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.6rem; text-decoration:none; color:var(--ink); transition:background-color .45s var(--e-out)}
  .im-relcard:hover{background:#E3E1DA}
  .im-rc-sector{opacity:.5}
  .im-rc-head{font-size:1rem; font-weight:500; line-height:1.3; color:var(--teal)}
  .im-rc-go{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-top:auto; padding-top:.8rem; opacity:.7}
  .im-cta{background:var(--teal-deep); color:var(--paper); padding:6rem clamp(1rem,3vw,2.5rem)}
  .im-cta-in{max-width:60rem}
  .im-cta-h{font-size:clamp(1.6rem,3.4vw,2.8rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin:0 0 2rem; max-width:24ch}
  .im-btn{display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:.95rem 1.9rem; border:1px solid currentColor}
  .im-cta-btn{color:var(--paper)}
  .im-cta-btn:hover{background:var(--paper); color:var(--teal-deep)}

  /* the briefings block: questions on the left where the picture used to be */
  .ins-faq{display:flex; flex-direction:column; gap:.2rem; border-top:1px solid var(--line); padding-top:1.1rem}
  .ins-faq-h{opacity:.5; margin-bottom:.8rem}
  .ins-faq-list{list-style:none; margin:0; padding:0}
  .ins-faq-list li{border-bottom:1px solid var(--line)}
  .ins-faq-list a{display:block; padding:.95rem 0; color:var(--teal); text-decoration:none; font-size:1rem; line-height:1.35; transition:padding-left .35s var(--e-out)}
  .ins-faq-list a:hover{padding-left:.5rem}
  .ins-faq-go{margin-top:1.3rem; color:var(--teal); text-decoration:none; transition:letter-spacing .3s var(--e-out)}
  .ins-faq-go:hover{letter-spacing:.1em}

  /* Other services — boxes: the picture on top, the name under it, nothing else */
  .osvc{padding:5rem clamp(1rem,3vw,2.5rem) 5.5rem; background:var(--paper); color:var(--ink)}
  .osvc-lab{opacity:.55; margin-bottom:1.6rem}
  .osvc-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem}
  @media (min-width:1024px){ .osvc-grid{grid-template-columns:repeat(4,1fr); gap:2rem} }
  .osvc-grid a{display:block; color:var(--ink); text-decoration:none}
  .osvc-img{display:block; position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--teal-deep)}
  .osvc-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--e-out)}
  .osvc-grid a:hover .osvc-img img{transform:scale(1.04)}
  .osvc-t{display:block; margin-top:.8rem; font-size:1.02rem; font-weight:500; color:var(--teal)}

  /* The application — the site's one door. Black band, paper text. */
  .cta-band{padding:7.5rem clamp(1rem,3vw,2.5rem) 8rem; color:var(--paper); background:#0A100E}
  .app{max-width:46rem}
  .app-kicker{opacity:.55}
  .app-h{font-size:clamp(2.4rem,5.5vw,4.8rem); font-weight:500; letter-spacing:-.02em; line-height:1.02; margin:1.4rem 0 1.6rem}
  .app-sub{font-size:1.05rem; line-height:1.55; max-width:44ch; opacity:.85}
  .app-start{display:inline-block; margin-top:2.4rem; background:var(--paper); color:#0A100E; border:0; padding:1.15rem 2rem; cursor:pointer; font-size:.78rem; letter-spacing:.06em; transition:letter-spacing .3s var(--e-out)}
  .app-start:hover{letter-spacing:.14em}
  .app-note{margin-top:1.1rem; opacity:.5}
  .app-prog{opacity:.5}
  .app-q{font-size:clamp(1.5rem,3vw,2.4rem); font-weight:500; letter-spacing:-.015em; line-height:1.15; margin:1.2rem 0 2rem; max-width:26ch}
  .app-opts{display:flex; flex-direction:column; gap:.6rem}
  .app-opt{display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; text-align:left; background:none; border:1px solid rgba(234,232,226,.28); color:var(--paper); padding:1.05rem 1.2rem; cursor:pointer; font-size:1rem; transition:background .3s var(--e-out), border-color .3s}
  .app-opt:hover, .app-opt:focus-visible{background:var(--teal); border-color:var(--teal)}
  .app-opt b{font-weight:500}
  .app-opt .mono{opacity:.6}
  .app-form{display:flex; flex-direction:column; gap:1.3rem; max-width:26rem}
  .app-form label{display:flex; flex-direction:column; gap:.45rem}
  .app-form label .mono{opacity:.6}
  .app-form input{background:none; border:0; border-bottom:1px solid rgba(234,232,226,.4); color:var(--paper); font-size:1.1rem; padding:.45rem 0; outline:none; border-radius:0}
  .app-form input:focus{border-bottom-color:var(--paper)}
  .app-form.app-err input:invalid{border-bottom-color:#C96F4A}
  .app-back{margin-top:2.2rem; background:none; border:0; color:var(--paper); opacity:.55; cursor:pointer; transition:opacity .3s}
  .app-back:hover{opacity:1}
  .app-end{max-width:52ch}

  /* mobile audit fixes */
  @media (max-width:768px){
    .pcard, .pcard:nth-child(1), .pcard:nth-child(2), .pcard:nth-child(3){
      position:static; width:100%; margin:0 0 1rem; transform:none !important; align-self:stretch}
    section{overflow-x:clip}
  }
  @media (max-width:640px){
    .fcol a, .m-contact a, .wreg-more, .ins-faq-go{padding-block:.55rem}
  }

  /* the film — appears only once video/film.mp4 exists */
  .film{padding:5rem clamp(1rem,3vw,2.5rem); background:var(--paper)}
  .film-lab{opacity:.55; margin-bottom:1.2rem}
  .film-v{display:block; width:100%; aspect-ratio:16/9; background:#0A100E}

  /* the dither halo: the cursor re-inks whatever ground it crosses into brand-green Bayer cells.
     Fixed over the whole page, multiply-blended so ink text always reads through it as if the halo
     were behind the copy, and pointer-events:none so every link and button behaves as if it were
     not there. Sits under the fixed header (41) and the menu. */
  #halo{position:fixed; inset:0; width:100%; height:100%; z-index:39; pointer-events:none; mix-blend-mode:difference}
  /* everything a reader reads or clicks rides ABOVE the halo, so the smoke can be truly black on any
     ground and the copy never drowns. 40 sits over the halo (39) and under the fixed header (41). */
  main :is(h1,h2,h3,h4,p,li,dt,dd,blockquote,figcaption,legend,summary,td,th),
  main :is(a,button,input,textarea,select,label),
  main .mono,
  footer.bigfoot :is(a,p,li,h2,h3,span){position:relative; z-index:40}

  /* ---- the mission panel: the intake lifted over a blurred page ---- */
  .mv{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
      padding:1rem; background:rgba(6,20,19,.55); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
      opacity:0; pointer-events:none; transition:opacity .35s var(--e-out)}
  .mv.on{opacity:1; pointer-events:auto}
  html.m-lock{overflow:hidden}
  .mission{width:min(680px,100%); max-height:min(86vh,760px); overflow:auto; background:var(--ink); color:var(--paper);
           padding:clamp(1.2rem,3vw,2.2rem); transform:translateY(14px) scale(.985); transition:transform .35s var(--e-out)}
  .mv.on .mission{transform:none}
  .m-head{display:flex; align-items:baseline; gap:1rem}
  .m-title{opacity:.6}
  .m-prog{margin-left:auto; color:var(--paper); opacity:.7; font-variant-numeric:tabular-nums}
  .m-close{background:none; border:0; color:var(--paper); opacity:.55; cursor:pointer; padding:0}
  .m-close:hover{opacity:1}
  .m-bar{height:2px; background:rgba(234,232,226,.14); margin:.9rem 0 1.6rem}
  .m-bar i{display:block; height:100%; width:0; background:var(--paper); transition:width .5s var(--e-out)}
  .m-body{opacity:1}
  .m-body.m-in{animation:mIn .4s var(--e-out)}
  @keyframes mIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  .m-q{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:500; letter-spacing:-.02em; line-height:1.15; margin-bottom:1rem}
  .m-ctx{color:#4AB3AA; margin-bottom:.5rem}
  .m-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.6rem}
  .m-chip{position:relative; text-align:left; background:none; border:1px solid rgba(234,232,226,.22); color:var(--paper);
          padding:.85rem .9rem .8rem 2.1rem; cursor:pointer; display:flex; flex-direction:column; gap:.25rem;
          transition:border-color .25s, background-color .25s, transform .15s var(--e-out)}
  .m-chip b{font-weight:500; font-size:1rem}
  .m-chip .mono{opacity:.55; font-size:.58rem}
  .m-chip:hover{border-color:rgba(234,232,226,.55)}
  .m-chip:active{transform:scale(.985)}
  .m-tick{position:absolute; left:.7rem; top:.95rem; width:.85rem; height:.85rem; border:1px solid rgba(234,232,226,.4)}
  .m-chip.on{border-color:var(--paper); background:rgba(234,232,226,.06)}
  .m-chip.on .m-tick{border-color:var(--paper)}
  .m-chip.on .m-tick::after{content:""; position:absolute; inset:2px; background:var(--paper)}
  .m-opts{display:flex; flex-direction:column; gap:.55rem}
  .m-opt{position:relative; overflow:hidden; text-align:left; background:none; border:1px solid rgba(234,232,226,.22);
         color:var(--paper); padding:.9rem 1rem; cursor:pointer; font-size:.98rem;
         transition:border-color .25s, transform .12s var(--e-out)}
  .m-opt:hover{border-color:rgba(234,232,226,.6)}
  .m-opt.hit{border-color:var(--paper); color:var(--ink)}
  .m-opt::before{content:""; position:absolute; inset:0; background:var(--paper); transform:scaleX(0);
                 transform-origin:0 50%; transition:transform .22s var(--e-out); z-index:-1}
  .m-opt.hit::before{transform:scaleX(1)}
  .m-go{display:inline-block; margin-top:1.4rem; background:var(--paper); color:var(--ink); border:0;
        padding:1rem 1.6rem; cursor:pointer; transition:letter-spacing .3s var(--e-out), opacity .2s}
  .m-go:hover{letter-spacing:.1em}
  .m-go:disabled{opacity:.35; cursor:default; letter-spacing:0}
  .m-back{display:inline-block; margin-top:1.2rem; background:none; border:0; color:var(--paper); opacity:.5; cursor:pointer; padding:0}
  .m-back:hover{opacity:1}
  .m-form{display:flex; flex-direction:column; gap:1rem}
  .m-form label{display:flex; flex-direction:column; gap:.35rem}
  .m-form .mono{opacity:.55}
  .m-form input{background:none; border:0; border-bottom:1px solid rgba(234,232,226,.35); color:var(--paper);
                font-size:1.05rem; padding:.35rem 0; outline:none}
  .m-form input:focus{border-bottom-color:var(--paper)}
  .m-err input:invalid{border-bottom-color:#c96}
  .m-end{font-size:1.02rem; line-height:1.5; opacity:.85; max-width:40ch}

  /* the on-page band: the first question living on the page */
  .mission-band{width:100%}
  .mb-h{font-size:clamp(2.2rem,5vw,4.2rem); font-weight:500; letter-spacing:-.02em; margin-bottom:.6rem}
  .mb-sub{opacity:.5; margin-bottom:1.6rem}
  .mb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.8rem}
  .mb-chip{min-height:9.5rem; justify-content:space-between; text-align:left; background:#22322D; border:1px solid rgba(234,232,226,.28); border-radius:12px; color:var(--paper);
           padding:1.05rem 1.1rem; cursor:pointer; display:flex; flex-direction:column; gap:.3rem;
           transition:border-color .25s, background-color .25s, transform .15s var(--e-out)}
  .mb-chip b{font-weight:500; font-size:1.05rem}
  .mb-chip .mono{opacity:.65; font-size:.68rem}
  .mb-chip:hover{border-color:rgba(234,232,226,.6); background:#20312C; transform:translateY(-2px)}
  .mb-chip:active{transform:scale(.985)}

  /* explore: the three engines */
  .x-row{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:1.4rem}
  .x-eng{display:flex; align-items:center; justify-content:center; border:1px solid rgba(234,232,226,.25);
         color:var(--paper); text-decoration:none; padding:1.1rem .5rem; transition:border-color .25s, background-color .25s}
  .x-eng:hover{border-color:#4AB3AA; background:rgba(74,179,170,.08)}
  .x-eng b{font-weight:500}
  .x-box{border:1px solid rgba(234,232,226,.2); padding:1rem}
  .x-prompt{opacity:.7; line-height:1.7; font-size:.66rem; margin-bottom:1rem; user-select:all}
  @media (max-width:639px){ .x-row{grid-template-columns:1fr} .mission{max-height:92vh} }

  /* ---- impact, as cards: a dark band, generous boxes, the figures doing the talking ---- */
  .impx{background:var(--ink); color:var(--paper); padding-top:5rem; padding-bottom:5rem}
  .impx-h{font-size:clamp(2.6rem,6.5vw,6rem); font-weight:500; letter-spacing:-.03em; margin-bottom:2.6rem}
  .impx-grid{display:grid; grid-template-columns:1fr; gap:1rem}
  @media (min-width:900px){ .impx-grid{grid-template-columns:1fr 1fr} }
  .impx-card{position:relative; display:block; background:#1B2925; border:1px solid rgba(234,232,226,.07);
             border-radius:12px; padding:clamp(1.4rem,2.6vw,2.2rem); min-height:250px;
             color:var(--paper); text-decoration:none;
             transition:background-color .3s var(--e-out), border-color .3s var(--e-out), transform .25s var(--e-out)}
  .impx-card:hover{background:#20312C; border-color:rgba(234,232,226,.16); transform:translateY(-2px)}
  .impx-t{font-size:clamp(1.25rem,2vw,1.7rem); font-weight:500; letter-spacing:-.015em; line-height:1.15; max-width:18ch}
  .impx-stats{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2rem}
  .impx-stat{display:flex; flex-direction:column; gap:.55rem}
  .impx-stat .mono{opacity:.45; font-size:.6rem}
  .impx-stat b{font-weight:500; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
  .impx-go{position:absolute; right:1.5rem; bottom:1.2rem; opacity:.4; font-size:1.1rem;
           transition:opacity .25s, transform .35s var(--e-out)}
  .impx-card:hover .impx-go{opacity:.9; transform:translateX(.3rem)}
  .impx-more{display:flex; flex-direction:column; justify-content:space-between}
  .impx-more > .mono{opacity:.45}
  .impx-see{font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:500; letter-spacing:-.015em}
  .impx-see i{font-style:normal; display:inline-block; margin-left:.4rem; transition:transform .35s var(--e-out)}
  .impx-more:hover .impx-see i{transform:translateX(.35rem)}

  /* the brief band, same card language, and it explains itself */
  .mb-sub2{max-width:44ch; line-height:1.5; opacity:.75; margin-bottom:1.8rem}

  /* every printed figure links to where it was written */
  .src-a{color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}
  .src-a:hover{text-decoration-style:solid}

  /* questions we actually get: native accordions, hairline, operator */
  .sfaq{padding:5rem 0}
  .sfaq-h,.sfaq-list{margin-inline:clamp(1rem,3vw,2.5rem)}
  .sfaq-h{font-size:clamp(1.9rem,4vw,3.4rem); font-weight:500; letter-spacing:-.025em; margin-bottom:2rem}
  .sfaq-list{border-top:1px solid var(--line); max-width:860px}
  .sfaq-i{border-bottom:1px solid var(--line)}
  .sfaq-i summary{display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; cursor:pointer;
    list-style:none; padding:1.15rem 0; font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:500; letter-spacing:-.01em}
  .sfaq-i summary::-webkit-details-marker{display:none}
  .sfaq-x{font-family:var(--mono); transition:transform .35s var(--e-out); flex:none}
  .sfaq-i[open] .sfaq-x{transform:rotate(45deg)}
  .sfaq-a{padding:0 0 1.4rem; max-width:62ch}
  .sfaq-a p{font-size:.98rem; line-height:1.55}
  .sfaq-src{margin-top:.6rem; opacity:.6}

/* ---- mobile homepage: less copy, one screen per idea (owner directive 2026-08-31) ---- */
@media (max-width:639px){
  /* the lead paragraph carries the intro alone; the three statements are desktop copy */
  .intro .statements{display:none}
  /* the process section is desktop-only; its nav entries go with it */
  .process{display:none}
  #menu .m-mask:has(a[href="#process"]){display:none}
  footer li:has(> a[href="#process"]){display:none}
  /* services: one title and the accordion, no photo, no split headline */
  #services .svc-left{display:none}
  #services .svc-right h2{font-size:clamp(2.6rem,12vw,3.4rem); margin-bottom:1.1rem}
  /* impact: compact rows with one stat each so the section reads in one screen */
  .impx-card{padding:1rem 1.1rem; min-height:0}
  .impx-t{font-size:1.05rem; margin-bottom:.35rem}
  .impx-stats .impx-stat + .impx-stat{display:none}
  .impx-stat b{font-size:1.15rem}
  .impx-more{padding:1rem 1.1rem}
  /* briefings: two cards is enough on a phone */
  .ins-cards .ins-card:nth-child(n+3){display:none}
}