/* ══════════════════════════════════════════════════════════════════════════
   GM REUSE  ·  "Material Archive"
   Charcoal, bone and deep forest green. An editorial system of hairline rules,
   marginal numbering, serif narrative against a tight grotesque, and monospace
   for anything factual.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* Bone */
  --paper:#EDE8DF;
  --paper-2:#E3DDD1;
  --paper-3:#D7D0C1;
  --paper-rgb:237,232,223;

  /* Charcoal */
  --ink:#1F2421;
  --ink-deep:#141814;
  --ink-rgb:31,36,33;
  --ink-deep-rgb:20,24,20;

  /* Forest green in three weights, so the accent reads on either ground */
  --green:#2C5F4A;       /* on bone */
  --green-mid:#4F8A6E;   /* legible on both */
  --green-soft:#8FB49F;  /* on charcoal */
  --green-deep:#234C3B;  /* impact strip ground */

  /* Brand gold, from the logo. Used only in the mark, never in the page.
     The light-ground version is deepened: #C9A24B sits at 1.97:1 on bone and
     the stars all but disappear when the masthead turns paper. */
  --gold:#C9A24B;
  --gold-deep:#8F6B23;

  --text:#262B27;
  --muted:#565C57;
  --muted-light:rgba(var(--paper-rgb),.66);

  --line:rgba(var(--ink-rgb),.15);
  --line-strong:rgba(var(--ink-rgb),.3);
  --line-light:rgba(var(--paper-rgb),.17);
  --line-light-strong:rgba(var(--paper-rgb),.34);

  --sans:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Pulls the blue out of the stock photography so it sits on warm charcoal */
  --photo-tone:grayscale(.72) sepia(.18) contrast(1.06) brightness(.88);

  --gut:clamp(20px,5vw,64px);
  --sec-y:clamp(78px,10.5vw,168px);
  --ease:cubic-bezier(.19,.86,.28,1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
h1,h2,h3,p,dl,dd,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

:focus-visible{outline:2px solid var(--green-mid);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:12px;left:12px;z-index:200;
  transform:translateY(-160%);
  padding:12px 18px;background:var(--ink);color:var(--paper);
  font:500 13px/1 var(--sans);
  transition:transform .3s var(--ease);
}
.skip:focus{transform:none}

/* ── Layout primitives ───────────────────────────────────────────────────── */
.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
.wrap--tight{max-width:860px}

.sec{position:relative;padding-block:var(--sec-y)}
.sec--paper{background:var(--paper);color:var(--text)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--deep{background:var(--ink-deep);color:var(--paper)}
.sec--paper + .sec--paper{padding-top:0}

/* aside / main editorial split */
.cols{display:grid;gap:clamp(20px,3vw,44px)}
@media (min-width:900px){
  .cols{grid-template-columns:190px minmax(0,1fr);gap:clamp(40px,5vw,80px)}
  .cols__aside{position:sticky;top:118px;align-self:start}
}

/* ── Type ────────────────────────────────────────────────────────────────── */
.tag{
  font:400 11px/1.4 var(--mono);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
}
.tag b{font-weight:500;color:var(--green)}
.tag i{font-style:normal;opacity:.5}
.tag--light{color:var(--muted-light)}
.tag--light b{color:var(--green-soft)}

.h2{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(2.05rem,5.1vw,4rem);
  line-height:1.03;
  letter-spacing:-.035em;
  color:var(--ink);
  text-wrap:balance;
}
.h2--light{color:var(--paper)}
.h2--xl{font-size:clamp(2.2rem,5.6vw,4.4rem)}

.msk{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.msk > span{display:block;will-change:transform}

.lede{
  margin-top:clamp(22px,2.6vw,34px);
  max-width:44ch;
  font-family:var(--serif);
  font-size:clamp(1.14rem,1.6vw,1.42rem);
  font-weight:300;
  line-height:1.55;
  color:var(--muted);
}
.lede--light{color:var(--muted-light)}

.prose{margin-top:clamp(26px,3vw,40px);display:grid;gap:1.15em;max-width:64ch}
.prose p{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.05rem,1.28vw,1.22rem);
  line-height:1.68;
  color:var(--muted);
}
.prose--light p{color:var(--muted-light)}
.prose--lg p{font-size:clamp(1.12rem,1.5vw,1.34rem);line-height:1.66}

.punch{
  margin-top:clamp(40px,5vw,72px);
  max-width:24ch;
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(1.35rem,2.9vw,2.3rem);
  line-height:1.22;
  letter-spacing:-.028em;
  color:var(--ink);
  text-wrap:balance;
}
.punch--light{color:var(--paper);max-width:26ch}

.closer{
  margin-top:clamp(40px,5vw,68px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line);
  max-width:78ch;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.02rem,1.22vw,1.16rem);
  line-height:1.66;
  color:var(--muted);
}

/* ── Buttons & links ─────────────────────────────────────────────────────── */
.btn{
  --bg:transparent;
  position:relative;
  display:inline-flex;align-items:center;gap:1.1em;
  padding:1.05em 1.6em;
  border:1px solid currentColor;
  font:500 clamp(.86rem,1.05vw,.95rem)/1 var(--sans);
  letter-spacing:.005em;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--paper);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--ink)}
.btn svg{width:18px;height:10px;flex:none;fill:none;stroke:var(--green-soft);stroke-width:1.3;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}

.btn--dark{border-color:var(--ink);color:var(--ink)}
.btn--dark::before{background:var(--ink)}
.btn--dark:hover,.btn--dark:focus-visible{color:var(--paper)}

.lnk{
  display:inline-flex;align-items:center;gap:.7em;
  font:500 13px/1 var(--sans);
}
.lnk svg{width:16px;height:9px;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .4s var(--ease)}
.lnk:hover svg{transform:translateX(4px)}

/* ── Masthead ────────────────────────────────────────────────────────────── */
.mast{
  position:fixed;inset:0 0 auto;z-index:90;
  color:var(--paper);
  transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
.mast::after{
  content:'';position:absolute;inset:auto 0 0;height:1px;
  background:var(--line);
  opacity:0;transition:opacity .5s var(--ease);
}
.mast.is-stuck{background:rgba(var(--paper-rgb),.92);color:var(--text);backdrop-filter:saturate(1.4) blur(14px)}
.mast.is-stuck::after{opacity:1}
.mast.is-hidden{transform:translateY(-100%);transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease)}
body.is-locked .mast{background:transparent;color:var(--paper);backdrop-filter:none}
body.is-locked .mast::after{opacity:0}

.mast__in{
  max-width:1320px;margin-inline:auto;padding:clamp(16px,2vw,22px) var(--gut);
  display:flex;align-items:center;gap:clamp(20px,4vw,56px);
}

/* Brand lockup. The primary logo is a stacked square (media/logo-primary.svg);
   this is the horizontal cut of it, so the mark stays legible at masthead size.
   Ring, wireframe and GM all ride on currentColor so the lockup reverses itself
   on charcoal without needing a second asset. */
.mark{display:flex;align-items:center;gap:.6em;margin-right:auto}
.mark__logo{
  width:auto;flex:none;
  height:clamp(42px,4.6vw,52px);
  overflow:visible;
}
/* The wireframe is masked out behind the GM. A knockout keeps the letters clean
   on any ground, including the transparent masthead over the hero photograph,
   where a solid-colour stroke would have nothing to match. */
.mark__wire{
  fill:none;stroke:currentColor;stroke-width:3;
  opacity:.42;
  mask:url(#markKnockout);
}
.mark__ring{fill:none;stroke:currentColor;stroke-width:5}
.mark__stars{fill:var(--gold)}
.mark__gm{
  font:700 58px/1 var(--sans);
  letter-spacing:-.02em;
  fill:currentColor;
  text-anchor:middle;
}
.mark__knock{
  font:700 58px/1 var(--sans);
  letter-spacing:-.02em;text-anchor:middle;
  fill:#000;stroke:#000;stroke-width:9;stroke-linejoin:round;
}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.mark__word{
  font:700 clamp(1.2rem,1.55vw,1.44rem)/1 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);
  margin-right:-.2em; /* absorb the trailing tracking space */
}
/* The footer has room the masthead does not, so the lockup runs larger there. */
.mark--foot .mark__logo{height:clamp(56px,6.4vw,74px)}
.mark--foot .mark__word{font-size:clamp(1.42rem,2vw,1.8rem)}
/* Forest green goes muddy on charcoal, so the reversed lockup uses the soft weight */
.mast .mark__word{color:var(--green-soft)}
.mast.is-stuck .mark__word{color:var(--green)}
.mast.is-stuck .mark__stars{fill:var(--gold-deep)}
.foot .mark__word{color:var(--green-soft)}
/* Sheet open: the masthead sits on charcoal again even while is-stuck */
body.is-locked .mast .mark__word{color:var(--green-soft)}
body.is-locked .mast .mark__stars{fill:var(--gold)}

.mast__nav{display:none;gap:clamp(18px,2.4vw,34px)}
.mast__nav a{position:relative;font:400 13.5px/1 var(--sans);opacity:.78;transition:opacity .3s}
.mast__nav a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.mast__nav a:hover{opacity:1}
.mast__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.lnk--mast{display:none}

@media (min-width:1040px){
  .mast__nav{display:flex}
  .lnk--mast{display:inline-flex}
  .tog{display:none}
}

/* burger */
.tog{display:grid;gap:5px;width:26px;padding:6px 0}
.tog span{display:block;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.tog span:nth-child(2){width:64%;margin-left:auto}
.tog[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(15deg)}
.tog[aria-expanded="true"] span:nth-child(2){width:100%;transform:translateY(-3.25px) rotate(-15deg)}

/* ── Mobile sheet ────────────────────────────────────────────────────────── */
.sheet{
  position:fixed;inset:0;z-index:80;
  background:var(--ink);color:var(--paper);
  padding:clamp(96px,18vh,150px) var(--gut) clamp(32px,6vh,56px);
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transition:opacity .4s var(--ease);
}
.sheet[hidden]{display:none}
.sheet.is-open{opacity:1}
.sheet__nav{display:grid}
.sheet__nav a{
  display:flex;align-items:baseline;gap:1.1em;
  padding:clamp(13px,2.2vh,20px) 0;
  border-top:1px solid var(--line-light);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 45ms + 60ms);
}
.sheet__nav a:last-child{border-bottom:1px solid var(--line-light)}
.sheet.is-open .sheet__nav a{opacity:1;transform:none}
.sheet__nav i{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--green-soft);font-style:normal}
.sheet__nav span{font:500 clamp(1.5rem,7vw,2.1rem)/1 var(--sans);letter-spacing:-.03em}
.sheet__foot{font:400 12px/1.7 var(--mono);letter-spacing:.08em;color:var(--muted-light)}
.sheet__foot a{border-bottom:1px solid var(--line-light-strong);padding-bottom:2px}

/* ── Section index rail ──────────────────────────────────────────────────── */
.rail{display:none}
@media (min-width:1500px){
  .rail{
    display:block;position:fixed;z-index:70;
    right:24px;top:50%;transform:translateY(-50%);
    opacity:0;pointer-events:none;
    transition:opacity .6s var(--ease);
  }
  .rail.is-on{opacity:1;pointer-events:auto}
  .rail ol{display:grid;gap:2px}
  .rail a{
    display:flex;align-items:center;justify-content:flex-end;gap:8px;
    padding:5px 0;
    font:400 10px/1 var(--mono);letter-spacing:.16em;
    color:var(--muted);opacity:.45;
    transition:opacity .35s var(--ease),color .35s var(--ease);
  }
  .rail em{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .rail a::after{content:'';width:12px;height:1px;background:currentColor;flex:none;transition:width .4s var(--ease)}
  .rail a:hover{opacity:1}
  .rail a.is-on{opacity:1;color:var(--green)}
  .rail a.is-on::after{width:24px;background:var(--green-soft)}
  .rail.on-dark a{color:var(--paper)}
  .rail.on-dark a.is-on{color:var(--green-soft)}
}

/* ══════════════════════════════ HERO ══════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(110px,16vh,180px) 0 clamp(22px,3.5vh,38px);
  background:var(--ink-deep);
  color:var(--paper);
  overflow:hidden;
}
.hero__media{position:absolute;inset:-6% 0;z-index:0;background:#161B18}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.4s var(--ease),transform 1.8s var(--ease);
}
.hero__media img.is-ready{opacity:.72;transform:none}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(var(--ink-deep-rgb),.86) 0%,rgba(var(--ink-deep-rgb),.34) 34%,rgba(var(--ink-deep-rgb),.72) 74%,rgba(var(--ink-deep-rgb),.94) 100%),
    linear-gradient(94deg,rgba(var(--ink-deep-rgb),.8) 0%,rgba(var(--ink-deep-rgb),.12) 62%);
}
.hero__in{position:relative;z-index:2;width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}

.hero__h1{
  margin-top:clamp(20px,3vh,34px);
  /* no eyebrow above it any more */
  font-weight:500;
  font-size:clamp(2.3rem,6.6vw,5.4rem);
  line-height:1.02;
  letter-spacing:-.04em;
  max-width:17ch;
}
.hero__h1:first-child{margin-top:0}
.hero__sub{
  margin-top:clamp(22px,3vh,34px);
  max-width:56ch;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.05rem,1.45vw,1.3rem);
  line-height:1.62;
  color:rgba(var(--paper-rgb),.8);
}
.hero__cta{margin-top:clamp(30px,4vh,46px)}

.hero__base{
  position:relative;z-index:2;
  width:100%;max-width:1320px;margin:clamp(44px,7vh,88px) auto 0;
  padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.triad{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
.triad li{
  position:relative;
  font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.7);
}
.triad li + li::before{
  content:'';position:absolute;left:calc(-1 * clamp(14px,2.4vw,30px) / 2);top:50%;
  width:1px;height:9px;transform:translate(-50%,-50%);
  background:var(--line-light-strong);
}
.hero__hint{
  font:400 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.56);
  display:flex;align-items:center;gap:9px;
}
.hero__hint::after{
  content:'';width:34px;height:1px;background:currentColor;
  transform-origin:left;animation:sweep 2.6s var(--ease) infinite;
}
@keyframes sweep{0%,100%{transform:scaleX(.3)}50%{transform:scaleX(1)}}
@media (max-width:560px){
  .hero__hint{display:none}
  .hero .tag{font-size:10px;letter-spacing:.14em}
}

/* entrance */
[data-in]{opacity:0;transform:translateY(20px)}
.hero__h1 .msk[data-in]{opacity:1;transform:none}
.hero__h1 .msk > span{transform:translateY(105%)}
.is-loaded [data-in]{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease),transform 1.1s var(--ease);
  transition-delay:calc(var(--in,0) * 110ms + 140ms);
}
.is-loaded .hero__h1 .msk > span{
  transform:none;
  transition:transform 1.15s var(--ease);
  transition-delay:calc(var(--in,0) * 110ms + 180ms);
}

/* ══════════════════════════════ 01 · WHAT WE DO ══════════════════════════════ */
.pillars{
  margin-top:clamp(58px,7.5vw,110px);
  display:grid;gap:0;
  border-top:1px solid var(--line);
}
.pillar{padding:clamp(26px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.pillar__n{
  display:block;
  font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);
}
.pillar h3{
  margin-top:clamp(14px,1.6vw,22px);
  font-weight:500;font-size:clamp(1.18rem,1.75vw,1.5rem);
  letter-spacing:-.024em;line-height:1.2;color:var(--ink);
}
.pillar p{
  margin-top:.7em;max-width:38ch;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--muted);
}
@media (min-width:820px){
  .pillars{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .pillar{border-bottom:0;padding:clamp(30px,3vw,44px) clamp(24px,2.6vw,40px) clamp(34px,3.6vw,52px) 0}
  .pillar + .pillar{border-left:1px solid var(--line);padding-left:clamp(24px,2.6vw,40px)}
}

/* full-bleed figure */
.plate{margin-top:clamp(64px,8vw,120px)}
.plate__img{overflow:hidden;background:var(--paper-3)}
.plate__img img{width:100%;aspect-ratio:21/8;object-fit:cover;will-change:transform}
.plate figcaption{
  max-width:1320px;margin:16px auto 0;padding-inline:var(--gut);
  display:flex;gap:1.1em;flex-wrap:wrap;
  font:400 11px/1.5 var(--mono);letter-spacing:.09em;color:var(--muted);
}
.plate figcaption i{font-style:normal;color:var(--green);letter-spacing:.16em;text-transform:uppercase}
@media (max-width:640px){.plate__img img{aspect-ratio:4/3}}

/* ══════════════════════════════ 02 · WHY PAKISTAN ══════════════════════════════ */
.why__body{
  margin-top:clamp(40px,5vw,64px);
  display:grid;gap:clamp(34px,4.5vw,68px);
}
@media (min-width:940px){
  .why__body{grid-template-columns:1.08fr .92fr;align-items:start}
  .why__copy{margin-top:0}
}
.why__copy{max-width:none}
.why__fig{overflow:hidden;position:relative}
.why__fig::before{
  content:'';position:absolute;inset:0 0 auto 0;aspect-ratio:4/3.2;z-index:1;
  background:var(--ink);opacity:.26;pointer-events:none;
}
.why__fig img{
  width:100%;aspect-ratio:4/3.2;object-fit:cover;background:#141814;will-change:transform;
  filter:var(--photo-tone);
}
.why__fig figcaption{
  margin-top:14px;display:flex;gap:1.1em;flex-wrap:wrap;
  font:400 11px/1.5 var(--mono);letter-spacing:.09em;color:var(--muted-light);
}
.why__fig figcaption i{font-style:normal;color:var(--green-soft);letter-spacing:.16em;text-transform:uppercase}

.ledger{margin-top:clamp(52px,6.5vw,96px)}
.ledger__cap{
  font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-light);
  padding-bottom:14px;border-bottom:1px solid var(--line-light-strong);
}
.ledger__rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(15px,1.9vw,24px) 0;
  border-bottom:1px solid var(--line-light);
}
.ledger__rows span{
  font-weight:400;font-size:clamp(1rem,1.5vw,1.28rem);
  letter-spacing:-.015em;color:rgba(var(--paper-rgb),.9);
}
.ledger__rows em{
  font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  font-style:normal;color:var(--muted-light);flex:none;
}
.ledger__rows .is-gap{border-bottom-color:var(--line-light-strong)}
.ledger__rows .is-gap span{color:var(--paper);font-weight:500}
.ledger__rows .is-gap em{color:var(--green-soft)}

/* ══════════════════════════════ 03 · OUR MATERIAL ══════════════════════════════ */
.specs{
  margin-top:clamp(52px,6.5vw,96px);
  display:grid;gap:clamp(34px,4vw,52px);
}
@media (min-width:800px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec__img{overflow:hidden;background:var(--paper-3)}
.spec__img img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  /* Light touch only: these are material swatches, so real colour must survive */
  filter:saturate(.78) sepia(.08);
  transition:transform 1.1s var(--ease);
}
.spec:hover .spec__img img{transform:scale(1.035)}
.spec__id{
  margin-top:clamp(18px,2vw,26px);padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--green);
}
.spec h3{
  margin-top:clamp(16px,1.8vw,22px);
  font-weight:500;font-size:clamp(1.18rem,1.7vw,1.44rem);
  letter-spacing:-.024em;line-height:1.18;color:var(--ink);
}
.spec__txt{
  margin-top:.65em;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;color:var(--muted);
}
.grades{margin-top:clamp(20px,2.2vw,28px);display:flex;gap:1px}
.grades li{flex:1;display:grid;gap:9px}
.grades li::before{content:'';height:34px;background:var(--c);border:1px solid var(--line)}
.grades span{
  font:400 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-align:center;
}

/* ══════════════════════════════ 04 · OUR STANDARDS ══════════════════════════════ */
.std__grid{
  margin-top:clamp(52px,6.5vw,92px);
  display:grid;gap:clamp(42px,5vw,80px);
}
@media (min-width:960px){.std__grid{grid-template-columns:1.05fr .95fr;align-items:start}}

.std__list{border-top:1px solid var(--line-light-strong)}
.std__list li{
  display:flex;align-items:baseline;gap:clamp(18px,2.4vw,34px);
  padding:clamp(18px,2.2vw,28px) 0;
  border-bottom:1px solid var(--line-light);
}
.std__list i{
  font:400 11px/1 var(--mono);letter-spacing:.14em;font-style:normal;
  color:var(--green-soft);flex:none;
}
.std__list p{
  font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.5;
  letter-spacing:-.012em;color:rgba(var(--paper-rgb),.88);
}

.record{border:1px solid var(--line-light-strong);padding:clamp(22px,2.6vw,34px)}
.record__top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:clamp(16px,1.8vw,22px);
  border-bottom:1px solid var(--line-light-strong);
  font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper);
}
.record__seal{
  padding:6px 10px;border:1px solid var(--green-soft);color:var(--green-soft);
  letter-spacing:.14em;
}
.record__body{margin-top:clamp(6px,1vw,12px)}
.record__body > div{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;gap:18px;
  padding:clamp(11px,1.3vw,15px) 0;
  border-bottom:1px solid var(--line-light);
}
.record__body dt{
  font:400 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-light);
}
.record__body dd{margin:0}
.fill{height:7px;background:repeating-linear-gradient(90deg,var(--line-light-strong) 0 5px,transparent 5px 10px)}
.fill--m{width:62%}
.fill--s{width:34%}
.record__foot{
  margin-top:clamp(16px,1.8vw,22px);
  font:400 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-soft);
}
.record__note{
  margin-top:14px;
  font:400 11px/1.6 var(--mono);letter-spacing:.05em;
  color:rgba(var(--paper-rgb),.58);
}

/* ══════════════════════════════ IMPACT ══════════════════════════════ */
.impact{background:var(--green-deep);color:var(--paper);padding-block:clamp(58px,7vw,104px)}
.impact__row{display:grid;gap:0;border-top:1px solid rgba(var(--paper-rgb),.22)}
.impact__row li{padding:clamp(24px,2.8vw,38px) 0;border-bottom:1px solid rgba(var(--paper-rgb),.13)}
.impact__row h3{
  font-weight:500;font-size:clamp(1.1rem,1.5vw,1.3rem);
  letter-spacing:-.02em;color:var(--paper);
}
.impact__row p{
  margin-top:.65em;max-width:36ch;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.58;
  color:rgba(var(--paper-rgb),.76);
}
@media (min-width:820px){
  .impact__row{grid-template-columns:repeat(3,1fr);border-bottom:1px solid rgba(var(--paper-rgb),.13)}
  .impact__row li{border-bottom:0;padding-right:clamp(22px,2.4vw,40px)}
  .impact__row li + li{border-left:1px solid rgba(var(--paper-rgb),.13);padding-left:clamp(22px,2.4vw,40px)}
}

/* ══════════════════════════════ 05 · PURPOSE ══════════════════════════════ */
.purpose__lead{
  margin-top:clamp(30px,3.6vw,50px);
  font-family:var(--sans);font-weight:500;
  font-size:clamp(1.55rem,3.6vw,2.75rem);
  line-height:1.15;letter-spacing:-.032em;color:var(--ink);
  text-wrap:balance;
}
.purpose .prose{max-width:none}
.purpose__close{
  margin-top:clamp(34px,4vw,54px);
  padding-top:clamp(24px,2.8vw,34px);
  border-top:1px solid var(--line);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.6;color:var(--muted);
}
.purpose__close b{
  display:block;margin-bottom:.4em;
  font-family:var(--sans);font-weight:500;
  font-size:clamp(1.15rem,1.6vw,1.42rem);letter-spacing:-.022em;color:var(--ink);
}

/* ══════════════════════════════ 06 · HERITAGE ══════════════════════════════ */
.heritage{overflow:hidden}
.heritage__bg{position:absolute;inset:-8% 0;z-index:0;margin:0}
.heritage__bg img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:var(--photo-tone);will-change:transform}
.heritage::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(var(--ink-rgb),.7) 40%,rgba(var(--ink-rgb),.86) 100%);
}
.heritage .wrap{position:relative;z-index:2}

.heritage__grid{
  margin-top:clamp(40px,5vw,64px);
  display:grid;gap:clamp(40px,5vw,72px);
}
@media (min-width:940px){.heritage__grid{grid-template-columns:1.1fr .9fr;align-items:start}}
.heritage__grid .prose{margin-top:0}

.seal{
  display:grid;gap:12px;justify-items:center;text-align:center;
  padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,32px);
  border:1px solid var(--line-light-strong);
}
.seal__rule{width:38px;height:1px;background:var(--green-soft)}
.seal__a{
  font-weight:500;font-size:clamp(1.15rem,1.7vw,1.4rem);
  letter-spacing:-.02em;color:var(--paper);
}
.seal__b{
  font:400 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-light);
}

.facts{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line-light)}
.facts > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:clamp(13px,1.5vw,18px) 0;border-bottom:1px solid var(--line-light);
}
.facts dt{font-weight:500;font-size:clamp(1rem,1.3vw,1.15rem);letter-spacing:-.018em;color:var(--paper)}
.facts dd{
  margin:0;font:400 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted-light);text-align:right;
}

.span{
  margin-top:clamp(48px,6vw,84px);
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--muted-light);
}
.span i{flex:1;height:1px;background:var(--line-light-strong);transform-origin:left}

/* ══════════════════════════════ 07 · CONTACT ══════════════════════════════ */
.contact__grid{display:grid;gap:clamp(44px,5.5vw,80px)}
@media (min-width:940px){.contact__grid{grid-template-columns:1.25fr .75fr;align-items:end}}
.contact__sub{
  margin-top:clamp(24px,2.8vw,36px);max-width:46ch;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.62;color:var(--muted);
}
.contact .btn{margin-top:clamp(30px,3.4vw,44px)}
.contact .h2{margin-top:clamp(20px,2.4vw,32px)}

.contact__list{border-top:1px solid var(--line-strong)}
.contact__list > div{
  display:grid;gap:6px;
  padding:clamp(16px,1.9vw,22px) 0;border-bottom:1px solid var(--line);
}
.contact__list dt{
  font:400 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.contact__list dd{
  margin:0;font-size:clamp(1rem,1.25vw,1.12rem);letter-spacing:-.015em;color:var(--ink);
}
.contact__list a{border-bottom:1px solid var(--line-strong);padding-bottom:2px;transition:border-color .3s}
.contact__list a:hover{border-color:var(--ink)}

/* ══════════════════════════════ FOOTER ══════════════════════════════ */
.foot{background:var(--ink-deep);color:var(--paper);padding-block:clamp(44px,5vw,72px)}
.foot__top{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:clamp(26px,3vw,40px);border-bottom:1px solid var(--line-light);
}
.triad--foot li{color:rgba(var(--paper-rgb),.6)}
.foot__bot{
  margin-top:clamp(20px,2.4vw,30px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:400 11px/1.7 var(--mono);letter-spacing:.07em;color:rgba(var(--paper-rgb),.5);
}

/* ══════════════════════════════ SCROLL REVEAL ══════════════════════════════ */
[data-rv]{
  opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--ease),transform 1.05s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-rv].is-in{opacity:1;transform:none}

[data-rv] .msk > span{
  transform:translateY(105%);
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--i,0) * 85ms);
}
[data-rv].is-in .msk > span{transform:none}
/* headline masks carry their own motion, so do not double it up */
[data-rv]:has(> .msk){opacity:1;transform:none}

.span i{transform:scaleX(0);transition:transform 1.3s var(--ease) .15s}
[data-rv].is-in.span i,.span[data-rv].is-in i{transform:scaleX(1)}

/* ══════════════════════════════ REDUCED MOTION ══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  [data-rv],[data-in]{opacity:1 !important;transform:none !important}
  .msk > span{transform:none !important}
  .hero__media img{opacity:.72 !important;transform:none !important}
  .span i{transform:scaleX(1) !important}
  [data-par]{transform:none !important}
}