@charset "UTF-8";
/* ==========================================================================
   IGUAKO CAPITAL — design system
   Institutional structure in the manner of a global bank: strict grid,
   generous whitespace, light display type, chevron affordances, alternating
   white / bone / forest bands. Rendered in the IGUAKO forest palette taken
   from the monogram (#064730), with the three wheat bars of the mark used
   as the recurring graphic device.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------ */
:root{
  --forest:#04301F;
  --forest-2:#052E1E;
  --green:#064730;
  --green-6:#0A5A3C;
  --jade:#1F9D64;
  --brass:#C0A972;

  --paper:#FFFFFF;
  --bone:#F5F4EF;
  --bone-2:#EFEEE7;

  --ink:#0F1F17;
  --body:#43514B;
  --muted:#6E7C74;

  --line:#E2E6E1;
  --line-soft:#EDF0EC;
  --on-dark:#F2F5F0;
  --on-dark-mute:rgba(242,245,240,.66);
  --line-dark:rgba(242,245,240,.16);

  --gut:clamp(20px,4vw,40px);
  --max:1320px;
  --nav-h:76px;
  --util-h:38px;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.6s;

  /* the K-arm angle, reused for every diagonal in the system */
  --cut:26px;
}

/* ---------- reset ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  color:var(--body);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1,"cv05" 1;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--jade);outline-offset:3px;border-radius:2px}
::selection{background:var(--green);color:#fff}

/* ---------- type -------------------------------------------------------- */
h1,h2,h3,h4{color:var(--ink);font-weight:300;letter-spacing:-.022em;line-height:1.1}
.display{font-size:clamp(40px,6.1vw,80px);font-weight:250;letter-spacing:-.035em;line-height:1.03}
.h1{font-size:clamp(33px,4.3vw,56px);font-weight:275;letter-spacing:-.03em;line-height:1.07}
.h2{font-size:clamp(26px,3vw,40px);font-weight:300;letter-spacing:-.025em;line-height:1.12}
.h3{font-size:clamp(20px,1.6vw,24px);font-weight:400;letter-spacing:-.015em;line-height:1.25}
.h4{font-size:18px;font-weight:500;letter-spacing:-.01em;line-height:1.35}

.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green-6);display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none;opacity:.55}
.eyebrow.is-plain::before{display:none}
.lede{font-size:clamp(18px,1.55vw,21px);line-height:1.6;color:var(--body);font-weight:350}
.small{font-size:14px;line-height:1.6}
.tiny{font-size:12.5px;line-height:1.55;color:var(--muted)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* geometric face echoing the IGUAKO wordmark — used only for the logotype
   and for figures, never for running text */
.geo{font-family:Jost,Futura,"Century Gothic",Inter,sans-serif;letter-spacing:.02em}

/* ---------- layout ------------------------------------------------------ */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:900px}
.section{padding-block:clamp(64px,8vw,124px)}
.section-sm{padding-block:clamp(48px,5vw,76px)}
.grid{display:grid;gap:clamp(24px,3vw,44px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(32px,6vw,90px);align-items:start}
.stack-sm>*+*{margin-top:14px}
.stack>*+*{margin-top:22px}
.stack-lg>*+*{margin-top:34px}

.band-bone{background:var(--bone)}
.band-dark{background:var(--forest);color:var(--on-dark-mute)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4,.band-dark .h1,.band-dark .h2,.band-dark .h3,.band-dark .h4{color:var(--on-dark)}
.band-dark .eyebrow{color:var(--brass)}
.band-dark .lede{color:var(--on-dark-mute)}
.band-dark hr,.band-dark .rule{border-color:var(--line-dark);background:var(--line-dark)}

hr,.rule{border:0;height:1px;background:var(--line);width:100%}

/* ---------- wheat-bar motif (from the monogram) -------------------------- */
.bars{display:flex;gap:5px;align-items:flex-end}
.bars i{display:block;width:7px;height:20px;background:currentColor;
  transform:skewX(-18deg);transform-origin:bottom;opacity:.9}
.bars i:nth-child(2){height:26px}
.bars i:nth-child(3){height:32px}
.bars.is-sm i{width:5px;height:13px}
.bars.is-sm i:nth-child(2){height:17px}
.bars.is-sm i:nth-child(3){height:21px}

/* ---------- links & buttons --------------------------------------------- */
.chev{
  display:inline-flex;align-items:center;gap:11px;
  font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--green-6);
  padding-block:4px;position:relative;
}
.chev svg{width:14px;height:14px;flex:none;transition:transform .45s var(--ease)}
.chev::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);opacity:.5;
}
.chev:hover svg{transform:translateX(6px)}
.chev:hover::after{transform:scaleX(1);transform-origin:left}
.band-dark .chev{color:var(--brass)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  height:52px;padding-inline:30px;position:relative;overflow:hidden;
  font-size:14.5px;font-weight:500;letter-spacing:.015em;
  background:var(--green);color:#fff;isolation:isolate;
  transition:color .4s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--forest);
  transform:translateY(101%);transition:transform .52s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn svg{width:14px;height:14px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:#fff;border-color:var(--ink)}
.band-dark .btn-ghost,.hero .btn-ghost{color:var(--on-dark);border-color:rgba(242,245,240,.34)}
.band-dark .btn-ghost::before,.hero .btn-ghost::before{background:var(--on-dark)}
.band-dark .btn-ghost:hover,.hero .btn-ghost:hover{color:var(--forest);border-color:var(--on-dark)}

/* ---------- utility bar + nav ------------------------------------------- */
.util{
  height:var(--util-h);background:var(--forest);color:var(--on-dark-mute);
  font-size:12px;letter-spacing:.05em;position:relative;z-index:60;
}
.util .wrap{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:26px}
.util a{transition:color .3s}
.util a:hover{color:var(--on-dark)}
.util .util-loc{margin-right:auto;display:flex;align-items:center;gap:9px;color:var(--on-dark-mute)}
.util .util-loc svg{width:13px;height:13px;opacity:.8}

.nav{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease),background .4s var(--ease);
}
.nav.is-stuck{box-shadow:0 1px 26px rgba(4,48,31,.09)}
/* direct child only — the mega menu nests its own .wrap and must not inherit
   the bar's fixed height or flex alignment */
.nav>.wrap{height:var(--nav-h);display:flex;align-items:center;gap:clamp(20px,3vw,46px);transition:height .4s var(--ease)}
.nav.is-stuck>.wrap{height:64px}

.brand{display:flex;align-items:center;gap:13px;color:var(--green);flex:none}
.brand .brand-mark{height:38px;width:auto;transition:height .4s var(--ease)}
.brand .brand-word{height:14px;width:auto}
.nav.is-stuck .brand .brand-mark{height:32px}
.brand-sub{
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);margin-top:5px;
}
.brand-lock{display:flex;flex-direction:column;justify-content:center}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,32px);margin-left:auto}
.nav-links>li>a{
  font-size:14.5px;font-weight:450;color:var(--ink);position:relative;
  padding-block:26px;display:inline-flex;align-items:center;gap:7px;
  transition:color .3s;
}
.nav-links>li>a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);
}
.nav-links>li>a:hover,.nav-links>li>a[aria-current=page]{color:var(--green)}
.nav-links>li>a:hover::after,.nav-links>li>a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.nav-links .caret{width:9px;height:9px;opacity:.5;transition:transform .35s var(--ease)}
.nav-item.is-open .caret{transform:rotate(180deg)}
.nav-cta{margin-left:8px}
.nav-cta .btn{height:42px;padding-inline:22px;font-size:13.5px}

/* mega menu */
.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(4,48,31,.10);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.nav-item.is-open .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{display:grid;grid-template-columns:1.25fr 2.4fr;gap:clamp(30px,5vw,72px);padding-block:44px 48px}
.mega-lead .h3{margin-bottom:12px}
.mega-list{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 30px}
.mega-list a{
  display:block;padding:13px 14px 13px 0;border-top:1px solid var(--line-soft);
  font-size:14.5px;color:var(--ink);position:relative;transition:color .3s,padding-left .35s var(--ease);
}
.mega-list a span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.mega-list a::before{
  content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;background:var(--green);
  transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease);
}
.mega-list a:hover{color:var(--green);padding-left:14px}
.mega-list a:hover::before{transform:scaleY(1);transform-origin:top}

/* mobile nav */
.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;position:relative;flex:none}
.nav-toggle span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
.nav-toggle span:nth-child(1){top:17px}
.nav-toggle span:nth-child(2){top:23px}
.nav-toggle span:nth-child(3){top:29px}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0 0 0 auto;width:min(420px,88vw);background:var(--paper);
  z-index:70;transform:translateX(101%);transition:transform .55s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto;padding:26px var(--gut) 40px;
}
.drawer.is-open{transform:none}
.drawer-scrim{position:fixed;inset:0;background:rgba(4,48,31,.42);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;z-index:65}
.drawer-scrim.is-open{opacity:1;visibility:visible}
.drawer nav a{display:block;padding:16px 0;border-bottom:1px solid var(--line-soft);
  font-size:19px;font-weight:300;color:var(--ink);letter-spacing:-.01em}
.drawer nav a.sub{font-size:15px;padding:11px 0 11px 18px;color:var(--body);border-bottom-color:transparent}

/* ---------- hero -------------------------------------------------------- */
.hero{position:relative;background:var(--forest);color:var(--on-dark);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(4,48,31,.94) 0%,rgba(4,48,31,.80) 34%,rgba(4,48,31,.34) 68%,rgba(4,48,31,.52) 100%),
    linear-gradient(0deg,rgba(3,26,17,.72),transparent 46%);
}
.hero-inner{position:relative;padding-block:clamp(88px,15vh,168px) clamp(72px,12vh,132px);max-width:900px}
.hero .display{color:#fff;text-wrap:balance}
.hero .lede{color:rgba(255,255,255,.80);max-width:600px}
.hero .eyebrow{color:var(--brass)}

/* thin metric rail under a hero, like a bank's key figures */
.rail{border-top:1px solid var(--line-dark);position:relative}
.rail-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.rail-item{padding:26px 30px 28px 0;border-right:1px solid var(--line-dark)}
.rail-item:last-child{border-right:0}
.rail-item dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:9px}
.rail-item dd{font-size:clamp(26px,2.6vw,38px);font-weight:250;letter-spacing:-.03em;color:#fff;line-height:1}
.rail-item dd small{font-size:.5em;font-weight:400;letter-spacing:0;opacity:.7;margin-left:4px}

/* ---------- media & cards ----------------------------------------------- */
/* the notch echoes the K-arm angle of the monogram */
.notch{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.notch-bl{clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}

.figure{position:relative;overflow:hidden;background:var(--bone-2)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--ease)}
.figure.is-hover:hover img,a:hover>.figure img,.card:hover .figure img{transform:scale(1.055)}
.ratio-16x9{aspect-ratio:16/9}
.ratio-4x3{aspect-ratio:4/3}
.ratio-3x2{aspect-ratio:3/2}
.ratio-1x1{aspect-ratio:1/1}
.ratio-3x4{aspect-ratio:3/4}
.ratio-2x3{aspect-ratio:2/3}

.card{display:flex;flex-direction:column;background:var(--paper);height:100%}
.card .figure{margin-bottom:22px}
.card .h3{margin-bottom:10px;transition:color .3s}
.card p{font-size:15.5px;line-height:1.6;margin-bottom:18px}
.card .chev{margin-top:auto}
.card:hover .h3{color:var(--green)}
.band-dark .card{background:transparent}

/* numbered discipline list — the six businesses */
.disc{
  display:grid;grid-template-columns:auto 1fr;gap:0 26px;
  padding:30px 0;border-top:1px solid var(--line);position:relative;
}
.disc-idx{
  font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--green-6);
  padding-top:7px;font-variant-numeric:tabular-nums;
}
.disc .h3{margin-bottom:8px}
.disc p{font-size:15.5px;max-width:62ch}
.disc::after{
  content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease);
}
.disc:hover::after{transform:scaleX(1);transform-origin:left}
.band-dark .disc{border-top-color:var(--line-dark)}
.band-dark .disc-idx{color:var(--brass)}
.band-dark .disc::after{background:var(--brass)}

/* quote / pull statement */
.pull{
  font-size:clamp(24px,3.1vw,42px);font-weight:250;line-height:1.22;letter-spacing:-.03em;
  color:var(--ink);text-wrap:balance;
}
.band-dark .pull{color:var(--on-dark)}

/* the four-beat philosophy line */
.beats{display:flex;flex-wrap:wrap;gap:0}
.beat{
  flex:1 1 200px;padding:26px 26px 26px 0;border-top:2px solid var(--line);
  position:relative;
}
.beat b{display:block;font-size:19px;font-weight:400;color:var(--ink);letter-spacing:-.015em;margin-bottom:6px}
.beat span{font-size:14px;color:var(--muted);line-height:1.55}
.beat::before{
  content:"";position:absolute;top:-2px;left:0;width:100%;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);
}
.beat.is-in::before{transform:scaleX(1)}
.band-dark .beat{border-top-color:var(--line-dark)}
.band-dark .beat b{color:var(--on-dark)}
.band-dark .beat span{color:var(--on-dark-mute)}
.band-dark .beat::before{background:var(--brass)}

/* sector marquee */
.marquee{overflow:hidden;position:relative;border-block:1px solid var(--line);padding-block:20px}
.marquee-track{display:flex;gap:56px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:56px;white-space:nowrap;
}
.marquee span::after{content:"";width:5px;height:5px;background:var(--jade);transform:rotate(45deg);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
.band-dark .marquee{border-color:var(--line-dark)}
.band-dark .marquee span{color:var(--on-dark-mute)}

/* ---------- capital cycle diagram --------------------------------------- */
.cycle{position:relative;aspect-ratio:1;width:min(100%,520px);margin-inline:auto}
.cycle svg{width:100%;height:100%;overflow:visible}
.cycle-ring{fill:none;stroke:var(--line-dark);stroke-width:1}
.cycle-arc{fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linecap:round}
.cycle-node circle{fill:var(--forest);stroke:var(--line-dark);stroke-width:1;transition:stroke .4s,fill .4s}
.cycle-node text{fill:var(--on-dark-mute);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;transition:fill .4s}
.cycle-node.is-on circle{stroke:var(--brass);fill:#073523}
.cycle-node.is-on text{fill:var(--on-dark)}
.cycle-core{text-anchor:middle;fill:var(--on-dark)}

/* ---------- forms ------------------------------------------------------- */
.field{position:relative;margin-bottom:26px}
.field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;height:52px;padding:0 16px;background:var(--paper);
  border:1px solid var(--line);color:var(--ink);font-size:16px;
  transition:border-color .3s,box-shadow .3s;
}
.field textarea{height:auto;min-height:140px;padding-block:15px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--green);box-shadow:0 0 0 3px rgba(6,71,48,.09)}
.field .err{display:none;font-size:12.5px;color:#A5342A;margin-top:7px}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-color:#A5342A}
.field.is-bad .err{display:block}

/* ---------- footer ------------------------------------------------------ */
.foot{background:var(--forest);color:var(--on-dark-mute);padding-block:clamp(56px,7vw,88px) 34px}
.foot-top{display:grid;grid-template-columns:1.5fr 3fr;gap:clamp(34px,5vw,72px);padding-bottom:52px;border-bottom:1px solid var(--line-dark)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.foot h4{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark);margin-bottom:18px;font-weight:600}
.foot li+li{margin-top:11px}
.foot a{font-size:14px;transition:color .3s}
.foot a:hover{color:var(--on-dark)}
.foot-brand .brand{color:var(--on-dark)}
.foot-legal{padding-top:30px;font-size:12px;line-height:1.7;color:rgba(242,245,240,.48)}
.foot-legal p+p{margin-top:12px}
.foot-meta{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:24px;font-size:12px}
.foot-meta .sep{flex:1}

/* ---------- loader ------------------------------------------------------
   A staged reveal in four acts, ~5.6s: the brand's iguana draws itself in
   line, materialises into machined brass with real extruded depth, catches
   the light as it turns to face you, then sets into the lockup and lifts.
   ------------------------------------------------------------------------ */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--forest);
  display:grid;place-items:center;overflow:hidden;
}
.loader::before,.loader::after{
  content:"";position:absolute;left:0;right:0;height:50.5%;background:var(--forest-2);
  transition:transform 1.15s var(--ease);
}
.loader::before{top:0}
.loader::after{bottom:0}

/* pooled light behind the mark */
.loader-glow{
  position:absolute;z-index:1;width:min(120vh,120vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(192,169,114,.13),rgba(192,169,114,.05) 42%,transparent 68%);
  opacity:0;transform:scale(.65);
}
/* the curtain halves are siblings of the lockup in paint order — the lockup
   must sit above them or the split animation clips it in half */
.loader-fig{position:relative;z-index:2;display:grid;place-items:center;gap:28px;
  transition:opacity .5s ease,transform .8s var(--ease)}

/* --- the dimensional mark --- */
.loader-stage{perspective:1000px;perspective-origin:52% 44%}
.loader-3d{
  position:relative;transform-style:preserve-3d;
  width:clamp(126px,15.5vw,190px);aspect-ratio:45.15/100;
  transform:rotateY(-38deg) rotateX(7deg) scale(1.1);
}
.loader-3d svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* stacked copies -> a solid extruded body once the mark turns */
.ig-ext{color:#5E4820;opacity:0;transform:translateZ(calc(var(--i) * -0.85px))}
.ig-ext:nth-child(-n+4){color:#4A3819}

.loader-iguana{color:var(--brass);transform:translateZ(1px)}
.ig-fill path{fill:url(#ig-metal);fill-opacity:0}
.ig-line path{
  fill:none;stroke:currentColor;stroke-width:.85;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.ig-sweep{opacity:0;transform:rotate(16deg) translateX(0)}

/* --- lockup --- */
.loader-lockup,.loader-fig{--lockw:clamp(160px,20vw,240px)}
.loader-word{width:var(--lockw);color:var(--on-dark);opacity:0}
.loader-word path{opacity:0;transform:translateY(18px)}
.loader-rule{width:0;height:1px;background:var(--brass);opacity:.55}
.loader-sub{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;
  color:rgba(242,245,240,.44);opacity:0;transform:translateY(8px);
}

/* --- act 1: emergence --- */
.loader.is-run .loader-glow{animation:glowin 1.5s var(--ease) .1s forwards}

/* --- act 2: the line draws, then inks in --- */
.loader.is-run .ig-line path{
  animation:draw 2.05s cubic-bezier(.45,.05,.25,1) .3s forwards,
            lineout .9s var(--ease) 2.3s forwards}
.loader.is-run .ig-line #eye{animation-delay:1.85s,2.5s}
.loader.is-run .ig-fill path{animation:fillin 1.05s var(--ease) 2.1s forwards}
.loader.is-run .ig-ext{animation:extin .85s var(--ease) 2.25s forwards}

/* --- act 3: the turn, the light, the lockup --- */
.loader.is-run .loader-3d{animation:turn 2.5s cubic-bezier(.33,.9,.24,1) 2.3s forwards}
.loader.is-run .ig-sweep{animation:sweep 1.5s cubic-bezier(.5,0,.3,1) 2.75s forwards}
.loader.is-run .loader-rule{animation:rulein 1.05s var(--ease) 3.75s forwards}
.loader.is-run .loader-word{animation:fadein .01s linear 3.95s forwards}
.loader.is-run .loader-word path{animation:letter .8s var(--ease) forwards}
.loader.is-run .loader-word path:nth-child(1){animation-delay:3.98s}
.loader.is-run .loader-word path:nth-child(2){animation-delay:4.08s}
.loader.is-run .loader-word path:nth-child(3){animation-delay:4.18s}
.loader.is-run .loader-word path:nth-child(4){animation-delay:4.28s}
.loader.is-run .loader-word path:nth-child(5){animation-delay:4.38s}
.loader.is-run .loader-word path:nth-child(6){animation-delay:4.48s}
.loader.is-run .loader-sub{animation:subin .9s var(--ease) 4.6s forwards}
.loader.is-run .loader-bar i{animation:barfill 5.6s cubic-bezier(.3,.6,.4,1) forwards}

@keyframes glowin{to{opacity:1;transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes lineout{to{stroke-opacity:.2}}
@keyframes fillin{to{fill-opacity:1}}
@keyframes extin{to{opacity:1}}
@keyframes turn{
  60%{transform:rotateY(6deg) rotateX(-1.5deg) scale(1.03)}
  to {transform:rotateY(0) rotateX(0) scale(1)}
}
@keyframes sweep{from{opacity:0;transform:rotate(16deg) translateX(0)}
  18%{opacity:1}82%{opacity:1}
  to{opacity:0;transform:rotate(16deg) translateX(105px)}}
@keyframes fadein{to{opacity:1}}
@keyframes letter{to{opacity:1;transform:none}}
@keyframes subin{to{opacity:1;transform:none}}
@keyframes rulein{to{width:var(--lockw)}}
@keyframes barfill{to{transform:scaleX(1)}}

/* --- act 4: reveal --- */
.loader.is-out .loader-fig{opacity:0;transform:translateY(-20px) scale(.97)}
.loader.is-out .loader-glow{opacity:0;transition:opacity .5s ease}
.loader.is-out::before{transform:translateY(-100%)}
.loader.is-out::after{transform:translateY(100%)}
.loader.is-done{visibility:hidden;pointer-events:none}

.loader-skip{
  /* .loader is a centring grid; an abspos child with one auto offset inherits
     that centred static position, so pin both axes explicitly */
  position:absolute;z-index:4;inset:auto var(--gut) 30px auto;
  justify-self:end;align-self:end;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(242,245,240,.5);padding:10px 16px;
  border:1px solid rgba(242,245,240,.18);transition:color .3s,border-color .3s,background .3s;
}
.loader-skip:hover{color:var(--forest);background:var(--on-dark);border-color:var(--on-dark)}
.loader-bar{position:absolute;z-index:4;left:0;right:0;bottom:0;height:1px;background:rgba(242,245,240,.10)}
.loader-bar i{display:block;height:100%;background:var(--brass);transform:scaleX(0);transform-origin:left}
body.is-loading{overflow:hidden}

@media (max-width:640px){
  .loader-fig{gap:22px}
  .loader-fig{--lockw:min(62vw,220px)}
  .loader-sub{font-size:8.5px;letter-spacing:.3em}
}

/* ---------- scroll reveal ----------------------------------------------- */
[data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
[data-rise].is-in{opacity:1;transform:none}
[data-rise][data-d="1"]{transition-delay:.09s}
[data-rise][data-d="2"]{transition-delay:.18s}
[data-rise][data-d="3"]{transition-delay:.27s}
[data-rise][data-d="4"]{transition-delay:.36s}
[data-rise][data-d="5"]{transition-delay:.45s}

/* The clip lives on the child, never on the observed node: an element whose own
   clip-path collapses it to zero width reports an intersection ratio of 0
   forever, so it could never trigger the observer that reveals it. */
[data-wipe]>*{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease)}
[data-wipe].is-in>*{clip-path:inset(0 0 0 0)}

[data-zoom] img{transform:scale(1.14);transition:transform 1.6s var(--ease)}
[data-zoom].is-in img{transform:scale(1)}

/* headline that reveals line-by-line */
.lines span{display:block;overflow:hidden}
.lines span i{display:block;font-style:inherit;transform:translateY(105%);
  transition:transform 1s var(--ease)}
.lines.is-in span i{transform:none}
.lines span:nth-child(2) i{transition-delay:.10s}
.lines span:nth-child(3) i{transition-delay:.20s}
.lines span:nth-child(4) i{transition-delay:.30s}

/* ---------- page transition --------------------------------------------- */
.veil{position:fixed;inset:0;background:var(--forest);z-index:80;pointer-events:none;
  opacity:0;transition:opacity .42s var(--ease)}
.veil.is-on{opacity:1}

/* ---------- misc -------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;
  padding:12px 20px;z-index:100}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.watermark{
  position:absolute;left:-4%;bottom:-14%;pointer-events:none;color:currentColor;
  opacity:.05;width:clamp(220px,26vw,420px);height:auto;z-index:0;
}
.has-watermark{position:relative;overflow:hidden}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .mega-list{grid-template-columns:repeat(2,1fr)}
  .rail-grid{grid-template-columns:repeat(2,1fr)}
  .rail-item{border-bottom:1px solid var(--line-dark)}
  .rail-item:nth-child(2n){border-right:0}
  .rail-item:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:900px){
  :root{--nav-h:66px}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:block}
  .split{grid-template-columns:1fr;gap:34px}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr;gap:40px}
  .foot-cols{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .util .wrap{justify-content:space-between;gap:14px}
  .util .util-hide{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .rail-grid{grid-template-columns:1fr}
  .rail-item{border-right:0;padding-right:0}
  .rail-item:last-child{border-bottom:0}
  .foot-cols{grid-template-columns:1fr}
  .beat{flex:1 1 100%}
  .marquee-track{gap:34px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rise],[data-wipe]>*,[data-zoom] img,.lines span i{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee-track{animation:none}
}

@media print{
  .util,.nav,.loader,.drawer,.drawer-scrim,.veil{display:none!important}
  body{color:#000;background:#fff}
  .band-dark,.hero{background:#fff!important;color:#000!important}
}

/* ==========================================================================
   Institutional corpus additions (2026-09): frame line, breadcrumbs, document
   cards, registries, key-value blocks, timelines, comparison tables, prose.
   ========================================================================== */
.frame{background:var(--forest-2);color:rgba(242,245,240,.62);font-size:11.5px;letter-spacing:.02em;line-height:1.45;
  border-bottom:1px solid rgba(192,169,114,.22);position:relative;z-index:61}
.frame .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:8px}
.frame a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(192,169,114,.35);transition:border-color .3s}
.frame a:hover{border-color:var(--brass)}
.frame-more{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border-bottom:0!important;flex:none}
.frame-more svg{width:11px;height:11px}

.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:22px}
.crumbs a{color:inherit;transition:color .3s}
.crumbs a:hover{color:var(--green)}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.5}
.crumbs li{display:flex}
.hero .crumbs,.band-dark .crumbs{color:rgba(242,245,240,.55)}
.hero .crumbs a:hover,.band-dark .crumbs a:hover{color:var(--on-dark)}

/* leaf-page header: forest band with kicker, title, lede, meta rail */
.doc-head{background:var(--forest);color:var(--on-dark-mute);padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px)}
.doc-head .h1{color:#fff;max-width:20ch}
.doc-head .lede{color:rgba(255,255,255,.78);max-width:64ch;margin-top:20px}
.doc-head .eyebrow{color:var(--brass)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px 30px;border-top:1px solid var(--line-dark);
  margin-top:34px;padding-top:22px}
.meta dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:6px}
.meta dd{font-size:15px;color:var(--on-dark);font-weight:400}
.meta dd a{color:var(--brass)}

.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 30px}
.kv div{border-top:1px solid var(--line);padding-top:14px}
.kv dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.kv dd{font-size:16px;color:var(--ink)}
.band-dark .kv div{border-top-color:var(--line-dark)}
.band-dark .kv dt{color:var(--on-dark-mute)}
.band-dark .kv dd{color:var(--on-dark)}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px 34px}
.stat-grid div{border-top:2px solid var(--green);padding-top:16px}
.stat-grid dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.stat-grid dd{font-size:clamp(28px,3vw,44px);font-weight:250;letter-spacing:-.03em;color:var(--ink);line-height:1;margin-top:10px}
.stat-grid dd small{font-size:.42em;font-weight:400;letter-spacing:0;color:var(--muted);margin-left:6px}
.band-dark .stat-grid div{border-top-color:var(--brass)}
.band-dark .stat-grid dt{color:var(--on-dark-mute)}
.band-dark .stat-grid dd{color:#fff}

.prose>p+p{margin-top:18px}
.prose p{max-width:70ch}
.prose h2,.prose h3{margin-top:38px;margin-bottom:12px}
.prose ul{margin-top:14px;max-width:70ch}
.prose li{position:relative;padding-left:22px;margin-top:8px;font-size:16px;line-height:1.6}
.prose li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--green)}
.band-dark .prose li::before{background:var(--brass)}

.index-list{columns:3;column-gap:44px;list-style:none}
.index-list li{break-inside:avoid;border-top:1px solid var(--line-soft);padding:11px 0}
.index-list a{display:block;font-size:15px;color:var(--ink);transition:color .3s}
.index-list a:hover{color:var(--green)}
.index-list span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.index-list.is-2{columns:2}
.index-list.is-4{columns:4}

.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{text-align:left;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:0 18px 12px 0;border-bottom:1px solid var(--green);font-weight:600}
.table td{padding:14px 18px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--body)}
.table td:first-child{color:var(--ink)}
.table tr:hover td{background:var(--bone)}
.table-wrap{overflow-x:auto}
.band-dark .table th{color:var(--on-dark-mute);border-bottom-color:var(--brass)}
.band-dark .table td{border-bottom-color:var(--line-dark);color:var(--on-dark-mute)}
.band-dark .table td:first-child{color:var(--on-dark)}
.band-dark .table tr:hover td{background:rgba(242,245,240,.04)}

.compare td:nth-child(2){color:var(--muted)}
.compare td:nth-child(3){color:var(--ink)}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.doc-card{display:flex;gap:16px;padding:20px 22px;border:1px solid var(--line);background:var(--paper);
  transition:border-color .35s var(--ease),transform .45s var(--ease)}
.doc-card:hover{border-color:var(--green);transform:translateY(-2px)}
.doc-card svg{width:22px;height:22px;flex:none;color:var(--brass);margin-top:2px}
.doc-card b{display:block;font-weight:500;color:var(--ink);font-size:15px;line-height:1.35}
.doc-card span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.band-bone .doc-card{background:var(--paper)}
.band-dark .doc-card{background:transparent;border-color:var(--line-dark)}
.band-dark .doc-card b{color:var(--on-dark)}
.band-dark .doc-card:hover{border-color:var(--brass)}

.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl{position:relative;padding:0 0 34px}
.tl::before{content:"";position:absolute;left:-30px;top:8px;width:9px;height:9px;background:var(--paper);border:1px solid var(--green);transform:rotate(45deg)}
.tl.is-now::before{background:var(--green)}
.tl .year{font-size:12px;letter-spacing:.2em;color:var(--green-6);font-weight:600}
.tl .h3{margin-top:6px}
.tl p{margin-top:8px;max-width:64ch}
.band-dark .timeline::before{background:var(--line-dark)}
.band-dark .tl::before{background:var(--forest);border-color:var(--brass)}
.band-dark .tl.is-now::before{background:var(--brass)}
.band-dark .tl .year{color:var(--brass)}

.tag{display:inline-block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-6);
  border:1px solid var(--line);padding:5px 9px;margin:0 6px 6px 0;background:var(--paper)}
.band-dark .tag{color:var(--brass);border-color:var(--line-dark);background:transparent}

.notice-box{border:1px solid var(--line);border-left:3px solid var(--brass);padding:22px 26px;background:var(--bone);max-width:78ch}
.notice-box p+p{margin-top:12px}
.band-dark .notice-box{background:rgba(242,245,240,.04);border-color:var(--line-dark);border-left-color:var(--brass)}

.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.related a{display:block;background:var(--paper);padding:22px 24px;transition:background .3s}
.related a:hover{background:var(--bone)}
.related b{display:block;font-weight:500;color:var(--ink);font-size:15px}
.related span{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}

.cap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cap-card{background:var(--paper);padding:32px;min-height:200px}
.band-bone .cap-card{background:var(--paper)}
.section-dark{background:var(--forest);color:var(--on-dark-mute)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark .h2,.section-dark .h3{color:var(--on-dark)}
.section-dark .eyebrow{color:var(--brass)}
.section-tint{background:var(--bone)}
.btn-light{background:transparent;color:var(--on-dark);border:1px solid rgba(242,245,240,.34)}
.btn-light::before{background:var(--on-dark)}
.btn-light:hover{color:var(--forest)}

.network-sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}
.network-sites a{display:block;padding:34px 30px;background:var(--forest);color:var(--on-dark-mute);transition:background .35s}
.network-sites a:hover{background:#073523}
.network-sites .h3{color:var(--on-dark)}
.network-sites small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.network-sites p{font-size:14.5px;margin-top:10px}
.network-sites .chev{margin-top:18px;color:var(--brass)}

@media (max-width:900px){
  .index-list,.index-list.is-4{columns:2}
  .frame .wrap{flex-direction:column;align-items:flex-start;gap:6px}
  .cap-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .index-list,.index-list.is-2,.index-list.is-4{columns:1}
  .table{font-size:14px}
}