/* ============================================================
   ACG 2026 — "GLASS AT DUSK"
   A commercial-glazing site that behaves like the product:
   a curtain wall at dusk — dark canvas, frosted panels,
   daylight refracting across a mullion grid.
   Palette: void ink #070B14 · daylight #BFD4EF · heritage red #E11320
   Type: Playfair Display (editorial serif, the thesis)
         Archivo (industrial grotesque, the structure)
         Inter (body) · JetBrains Mono (spec data)
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Inter';src:url('../fonts/inter-variable-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-variable.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-variable-latin.woff2') format('woff2');font-weight:400 900;font-display:swap;font-style:normal}
@font-face{font-family:'Playfair Display';src:url('../fonts/playfair-display-italic-variable-latin.woff2') format('woff2');font-weight:400 900;font-display:swap;font-style:italic}
@font-face{font-family:'JetBrains Mono';src:url('../fonts/jetbrains-mono-variable-latin.woff2') format('woff2');font-weight:100 800;font-display:swap;font-style:normal}

/* ---------- Tokens ---------- */
:root{
  --void:#070B14;          /* night behind the glass */
  --void-2:#0A1120;        /* raised surface */
  --void-3:#0E1526;        /* card surface */
  --panel:rgba(150,182,232,.045);   /* frosted glass fill */
  --panel-2:rgba(150,182,232,.075);
  --line:rgba(154,184,230,.13);     /* hairline mullion */
  --line-2:rgba(154,184,230,.24);
  --paper:#EAF0F8;         /* primary text — cool white */
  --soft:#C3CEE0;
  --muted:#9AA8C2;         /* secondary */
  --faint:#5E6C89;
  --red:#E11320;
  --red-2:#F5303C;         /* brighter on dark */
  --day:#BFD4EF;           /* daylight glint */
  --day-2:#7FA8DE;
  --navy:#0E284F;          /* heritage */

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-1:200ms; --dur-2:420ms; --dur-3:820ms;
  --w-max:1300px;
  --gutter:clamp(20px,4.4vw,64px);
  --radius:3px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--void)}
body{font-family:var(--sans);font-size:16px;line-height:1.62;color:var(--soft);background:var(--void);overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--red);color:#fff}
h1,h2,h3,h4{color:var(--paper);line-height:1.05;text-wrap:balance}
p{max-width:66ch}
:focus-visible{outline:2px solid var(--day);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:10px 18px;z-index:2000;font-size:14px}
.skip-link:focus{left:0}

/* ============================================================
   SIGNATURE — the mullion grid.
   A faint curtain-wall grid drawn behind everything, so the
   whole page reads as glazing divided by mullions.
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)) 0 0/min(25vw,320px) 100%,
    radial-gradient(120% 80% at 72% -10%,rgba(60,96,158,.16) 0,transparent 60%);
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
main,.hd,.ft{position:relative;z-index:1}

/* ---------- Utilities ---------- */
.wrap{max-width:var(--w-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.k-label{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--day)}
.k-label--red{color:var(--red-2)}
.k-index{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;color:var(--faint)}
.rule{border:0;border-top:1px solid var(--line)}

/* eyebrow with a lead rule — used above section heads */
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--red)}

/* Reveal system (JS gates the hidden state; content visible without JS) */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv-l{opacity:0;transform:translateX(-34px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.js .rv-l.in{opacity:1;transform:none}
.js [data-stagger]>*{transition-delay:calc(var(--i,0)*80ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv,.js .rv-l{opacity:1;transform:none}
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font-family:var(--disp);font-size:.92rem;font-weight:600;letter-spacing:.01em;border-radius:var(--radius);transition:transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn svg{transition:transform var(--dur-2) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px -8px rgba(225,19,32,.5)}
.btn-red:hover{background:var(--red-2);transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(225,19,32,.62)}
/* glass outline — the default secondary on a dark canvas */
.btn-ghost,.btn-navy,.btn-line{background:var(--panel-2);color:var(--paper);border:1px solid var(--line-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover,.btn-navy:hover,.btn-line:hover{border-color:var(--day-2);background:rgba(150,182,232,.12);color:#fff;transform:translateY(-2px)}

/* ============================================================
   Header
   ============================================================ */
.hd{position:fixed;inset:0 0 auto 0;z-index:1000;transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),backdrop-filter var(--dur-2) var(--ease);background:transparent}
.hd.scrolled{background:rgba(7,11,20,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.hd-in{max-width:var(--w-max);margin:0 auto;padding:0 var(--gutter);height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hd-logo{display:flex;align-items:center;flex-shrink:0}
.hd-logo img{height:34px;width:auto}
/* light logo everywhere (dark canvas); hide the dark-brand lockup */
.hd-logo .logo-dark{display:none}
.hd-nav{display:flex;align-items:center;gap:30px}
.hd-nav>a{font-family:var(--disp);font-size:.9rem;font-weight:500;color:var(--soft);letter-spacing:.01em;transition:color var(--dur-1) var(--ease);position:relative;padding:6px 0}
.hd-nav>a:not(.hd-cta):not(.hd-phone)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--day);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-2) var(--ease)}
.hd-nav>a:not(.hd-cta):not(.hd-phone):hover{color:#fff}
.hd-nav>a:not(.hd-cta):not(.hd-phone):hover::after{transform:scaleX(1);transform-origin:left}
.hd-phone{font-family:var(--mono)!important;font-size:.8rem!important;font-weight:600;color:var(--paper)!important;white-space:nowrap}
.hd-cta{background:var(--red);color:#fff!important;padding:11px 22px!important;border-radius:var(--radius);box-shadow:0 8px 24px -8px rgba(225,19,32,.5);transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.hd-cta:hover{background:var(--red-2);transform:translateY(-1px)}

.hd-burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center}
.hd-burger span{display:block;width:22px;height:2px;background:var(--paper);transition:transform var(--dur-2) var(--ease),opacity var(--dur-1)}
.hd-mobile{display:none}

@media (max-width:940px){
  .hd-nav{display:none}
  .hd-burger{display:flex}
  .hd-mobile{display:flex;flex-direction:column;position:fixed;inset:78px 0 auto 0;background:rgba(7,11,20,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);padding:14px var(--gutter) 26px;gap:2px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);z-index:999}
  .hd-mobile.open{opacity:1;transform:none;pointer-events:auto}
  .hd-mobile a{font-family:var(--disp);font-weight:500;font-size:1.05rem;color:var(--soft);padding:15px 0;border-bottom:1px solid var(--line)}
  .hd-mobile a:last-child{border:0}
  .hd-mobile-cta{color:var(--red-2)!important;font-weight:700!important}
}

/* ============================================================
   Sheet-index rail (kept — architectural sheet sets ARE numbered)
   ============================================================ */
.rail{position:fixed;left:max(14px,calc((100vw - var(--w-max))/2 - 40px));top:50%;transform:translateY(-50%);z-index:800;display:flex;flex-direction:column;gap:15px}
.rail a{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--faint);transition:color var(--dur-1) var(--ease)}
.rail .ln{width:16px;height:1px;background:var(--line-2);transition:width var(--dur-2) var(--ease),background var(--dur-1) var(--ease)}
.rail .tx{opacity:0;transform:translateX(-6px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);white-space:nowrap}
.rail a:hover,.rail a.act{color:var(--day)}
.rail a:hover .ln,.rail a.act .ln{width:30px;background:var(--day)}
.rail a:hover .tx{opacity:1;transform:none}
@media (max-width:1180px){.rail{display:none}}

/* ============================================================
   HERO — the thesis: a curtain wall at dusk
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:heroZoom 22s var(--ease) both}
@keyframes heroZoom{from{transform:scale(1.1)}to{transform:scale(1)}}
/* dusk grade — deepen to void at the base, cool the top */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(7,11,20,.55) 0,rgba(7,11,20,.12) 34%,rgba(7,11,20,.66) 76%,var(--void) 100%),
  linear-gradient(90deg,rgba(7,11,20,.6) 0,transparent 55%)}
/* daylight glint — a slow sheen sweeping across the facade */
.hero::after{content:"";position:absolute;top:-40%;left:-30%;width:60%;height:180%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(191,212,239,.07) 49%,rgba(191,212,239,.15) 50%,rgba(191,212,239,.07) 51%,transparent 58%);
  transform:skewX(-14deg);animation:glint 14s var(--ease-io) 2s infinite}
@keyframes glint{0%{left:-40%;opacity:0}9%{opacity:1}30%,100%{left:130%;opacity:0}}

/* Orchestrated hero load sequence (JS-gated so content shows without JS) */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.js .hero-label,.js .hero h1,.js .hero-sub,.js .hero-ctas,.js .hero-strip{animation:rise .9s var(--ease) both}
.js .hero-label{animation-delay:.15s}
.js .hero h1{animation-delay:.28s}
.js .hero-sub{animation-delay:.46s}
.js .hero-ctas{animation-delay:.6s}
.js .hero-strip{animation-delay:.74s}

.hero-in{width:100%;max-width:var(--w-max);margin:0 auto;padding:150px var(--gutter) 0}
.hero-label{display:inline-flex;align-items:center;gap:11px;margin-bottom:26px}
.hero-label::before{content:"";width:32px;height:1px;background:var(--red)}
.hero-label .k-label{color:var(--day)}
.hero h1{font-family:var(--serif);color:#fff;font-weight:600;font-size:clamp(2.7rem,6.8vw,5.6rem);line-height:1;letter-spacing:-.016em;max-width:15ch;text-shadow:0 2px 44px rgba(7,11,20,.55)}
/* the glass word — transparent fill, frosted mullion stroke, a living sheen */
.hero h1 em{font-style:italic;color:transparent;background:linear-gradient(100deg,rgba(191,212,239,.28),rgba(255,255,255,.95) 50%,rgba(191,212,239,.28));-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:.6px rgba(191,212,239,.55);background-size:230% 100%;animation:sheen 11s var(--ease-io) 1.5s infinite}
@keyframes sheen{0%,72%,100%{background-position:180% 0}36%{background-position:-40% 0}}
.hero-sub{margin-top:26px;font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.55;color:var(--soft);max-width:50ch}
.hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

/* spec strip — the drawing's title block, restrained */
.hero-strip{margin-top:56px;border-top:1px solid var(--line);backdrop-filter:blur(3px)}
.hero-strip-in{max-width:var(--w-max);margin:0 auto;padding:22px var(--gutter) 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hero-strip .cell{position:relative;padding-left:16px}
.hero-strip .cell::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--line-2)}
.hero-strip .v{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.4rem);color:#fff;letter-spacing:.01em}
.hero-strip .l{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media (max-width:680px){.hero-strip-in{grid-template-columns:1fr 1fr;gap:18px 24px}}
.hero-cue{position:absolute;right:var(--gutter);bottom:26px;font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);writing-mode:vertical-rl;display:flex;align-items:center;gap:10px}
.hero-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--day),transparent);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{0%{opacity:0;transform:scaleY(0);transform-origin:top}45%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1);transform-origin:bottom}}

/* Hide the old busy hero furniture if any lingers */
.regmark,.anno,.tblock{display:none!important}

/* Slim "now bidding" bar — replaces the marquee tickers */
.nowbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--void-2)}
.nowbar-in{max-width:var(--w-max);margin:0 auto;padding:15px var(--gutter);display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.nowbar .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(225,19,32,.6);animation:pulse 2.6s var(--ease-io) infinite;flex-shrink:0}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(225,19,32,.5)}70%{box-shadow:0 0 0 9px rgba(225,19,32,0)}100%{box-shadow:0 0 0 0 rgba(225,19,32,0)}}
.nowbar b{color:var(--paper);font-weight:600}
.nowbar .sep{color:var(--faint)}

/* ============================================================
   Section scaffold
   ============================================================ */
.sec{position:relative;padding:clamp(84px,11vw,150px) 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(38px,5vw,62px);flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.012em;max-width:20ch}
.k-wrap{margin-bottom:16px}
.sec-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:600;font-size:.9rem;color:var(--day);white-space:nowrap;transition:gap var(--dur-2) var(--ease),color var(--dur-1)}
.sec-link:hover{gap:14px;color:#fff}

/* faint sheet number ghosted behind a section */
.bignum{position:absolute;top:clamp(30px,5vw,64px);right:var(--gutter);font-family:var(--serif);font-weight:600;font-size:clamp(6rem,15vw,13rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-2);z-index:0;pointer-events:none;user-select:none}

/* ============================================================
   Partners — quiet, static (no marquee)
   ============================================================ */
.partners{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--void-2)}
.partners-in{max-width:var(--w-max);margin:0 auto;padding:40px var(--gutter);display:flex;align-items:center;gap:clamp(22px,4vw,54px);flex-wrap:wrap;justify-content:center}
.partners-in .k-label{flex-shrink:0}
.partners .partners-marquee{overflow:visible}
.partners .partners-track{display:flex;gap:clamp(22px,3.4vw,48px);flex-wrap:wrap;justify-content:center;animation:none!important;transform:none!important}
.partners .pseq:nth-child(2){display:none}
.partners .pseq{display:flex;gap:clamp(22px,3.4vw,48px);flex-wrap:wrap;justify-content:center;align-items:center}
.partners .pseq span{font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.08em;color:var(--faint);transition:color var(--dur-1) var(--ease)}
.partners .pseq span:hover{color:var(--soft)}
.partners .pseq span.auth{color:var(--paper);position:relative}
.partners .pseq span.auth::before{content:"✓ ";color:var(--red-2);font-weight:700}
.partners-note{width:100%;text-align:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--faint);margin-top:6px}

/* ============================================================
   Services — the glazing schedule (a real drawing schedule)
   ============================================================ */
.svc .sched{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.sched-head,.sched-row{display:grid;grid-template-columns:130px 1.1fr 2.4fr 44px;align-items:center;gap:22px;padding:20px clamp(20px,2.6vw,34px)}
.sched-head{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);background:var(--void-2);border-bottom:1px solid var(--line)}
.sched-row{border-bottom:1px solid var(--line);position:relative;transition:background var(--dur-1) var(--ease);overflow:hidden}
.sched-row:last-child{border-bottom:0}
/* glint that wipes across a row on hover */
.sched-row::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(191,212,239,.07) 50%,transparent 70%);transform:translateX(-100%);transition:transform var(--dur-3) var(--ease)}
.sched-row:hover{background:var(--panel-2)}
.sched-row:hover::after{transform:translateX(100%)}
.sched-row .mk{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--day);letter-spacing:.04em}
.sched-row .sy{font-family:var(--disp);font-weight:600;font-size:1.12rem;color:var(--paper)}
.sched-row .sp{color:var(--muted);font-size:.95rem;line-height:1.5;max-width:60ch}
.sched-row .ar{display:flex;justify-content:flex-end;color:var(--faint);transition:color var(--dur-1) var(--ease),transform var(--dur-2) var(--ease)}
.sched-row:hover .ar{color:var(--day);transform:translateX(4px)}
.sched-row:hover .sy{color:#fff}
@media (max-width:760px){
  .sched-head{display:none}
  .sched-row{grid-template-columns:1fr 44px;grid-template-areas:"mk ar" "sy ar" "sp sp";gap:6px 22px;padding:22px}
  .sched-row .mk{grid-area:mk}.sched-row .sy{grid-area:sy}.sched-row .sp{grid-area:sp;margin-top:8px}.sched-row .ar{grid-area:ar;align-self:start}
}

/* ============================================================
   Featured project — cinematic split
   ============================================================ */
.feat{background:var(--void-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feat-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:center}
.feat-media{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-2)}
.feat-media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.2s var(--ease)}
.feat-media:hover img{transform:scale(1.04)}
.feat-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,11,20,.5));pointer-events:none}
.feat-media .tag{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:rgba(7,11,20,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:8px 13px;border:1px solid var(--line-2);border-radius:2px}
.feat-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.6vw,3rem);margin:6px 0 18px}
.feat-copy p{color:var(--muted)}
.feat-specs{margin:26px 0 30px;border-top:1px solid var(--line)}
.feat-specs .row{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.feat-specs .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.feat-specs .d{color:var(--soft);font-size:.95rem}
@media (max-width:840px){.feat-grid{grid-template-columns:1fr}}

/* ============================================================
   General notes — glass pillar cards
   ============================================================ */
.gnotes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gnote{background:var(--void);padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,30px);position:relative;transition:background var(--dur-2) var(--ease)}
.gnote::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)}
.gnote:hover{background:var(--void-3)}
.gnote:hover::before{transform:scaleX(1)}
.gnote h3{font-family:var(--disp);font-weight:700;font-size:1.16rem;color:var(--paper);margin-bottom:12px;letter-spacing:.01em}
.gnote p{color:var(--muted);font-size:.92rem;line-height:1.55}
@media (max-width:900px){.gnotes-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.gnotes-grid{grid-template-columns:1fr}}

/* ============================================================
   Projects strip — horizontal gallery
   ============================================================ */
.strip-wrap{position:relative}
.strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--gutter) 26px;scrollbar-width:none;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.dragging{cursor:grabbing;scroll-snap-type:none}
.proj{position:relative;flex:0 0 min(78vw,440px);scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--void-2)}
.proj img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--ease),filter var(--dur-2)}
.proj::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,11,20,.9));pointer-events:none;transition:opacity var(--dur-2)}
.proj:hover img{transform:scale(1.05)}
.proj .idx{position:absolute;top:13px;left:14px;z-index:3;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--paper);background:rgba(7,11,20,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:5px 9px;border-radius:2px;border:1px solid var(--line-2)}
.proj-cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:3px}
.proj-cap .t{font-family:var(--disp);font-weight:700;font-size:1.06rem;color:#fff}
.proj-cap .s{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.proj-cap .go{position:absolute;right:0;bottom:2px;color:var(--paper);opacity:0;transform:translate(-4px,4px);transition:opacity var(--dur-2),transform var(--dur-2)}
.proj:hover .proj-cap .go{opacity:1;transform:none}
.proj-more{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--navy),var(--void))}
.proj-more::after{display:none}
.proj-more-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px}
.proj-more .t2{font-family:var(--serif);font-weight:500;font-size:1.7rem;color:#fff;line-height:1.1}
.proj-more .go2{color:var(--day)}
.strip-nav{display:flex;gap:8px}
.strip-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:50%;color:var(--soft);transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1)}
.strip-btn:hover{border-color:var(--day);color:#fff;background:var(--panel-2)}
.strip-progress{max-width:var(--w-max);margin:0 auto;padding:0 var(--gutter);height:2px}
.strip-progress i{display:block;height:100%;background:var(--day);width:0;transition:width var(--dur-1) linear}

/* ============================================================
   Leadership
   ============================================================ */
.lead{background:var(--void-2);border-top:1px solid var(--line)}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.lead-copy h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12;margin-bottom:20px}
.lead-copy p{color:var(--muted)}
.lead-badge{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--day);border:1px solid var(--line-2);border-radius:2px;padding:9px 15px;background:var(--panel)}
.lead-cards{display:flex;flex-direction:column;gap:16px}
.lead-card{display:flex;gap:20px;align-items:flex-start;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:border-color var(--dur-2),background var(--dur-2),transform var(--dur-2)}
.lead-card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-2px)}
.lead-card .avatar{flex-shrink:0;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,var(--navy),#16345f);border:1px solid var(--line-2)}
.lead-card .avatar.red{background:linear-gradient(135deg,var(--red),var(--red-press,#b90e19))}
.lead-card .nm{display:block;font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--paper)}
.lead-card .rl{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--day);margin:4px 0 10px}
.lead-card p{color:var(--muted);font-size:.9rem;line-height:1.5}
@media (max-width:840px){.lead-grid{grid-template-columns:1fr}}

/* ============================================================
   CTA band — the closing frame
   ============================================================ */
.cta-band{position:relative;padding:clamp(80px,11vw,150px) 0;overflow:hidden;border-top:1px solid var(--line);background:radial-gradient(120% 130% at 15% 0,rgba(20,44,86,.7),var(--void) 62%)}
.cta-band::after{content:"";position:absolute;top:-30%;left:-20%;width:50%;height:160%;background:linear-gradient(105deg,transparent 42%,rgba(191,212,239,.1) 50%,transparent 58%);transform:skewX(-14deg);animation:glint 11s var(--ease-io) 2s infinite}
.cta-in{position:relative;z-index:2;max-width:var(--w-max);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-in h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.01em;max-width:18ch}
.cta-in p{color:var(--muted);margin-top:16px;max-width:46ch}
.cta-in .btn{background:var(--red);color:#fff;box-shadow:0 12px 34px -8px rgba(225,19,32,.55)}
.cta-in .btn:hover{background:var(--red-2);transform:translateY(-2px)}

/* ============================================================
   Footer
   ============================================================ */
.ft{position:relative;background:var(--void);border-top:1px solid var(--line);overflow:hidden}
.ft-word{overflow:hidden;padding:0 var(--gutter);border-bottom:1px solid var(--line)}
.ft-word span{display:block;max-width:var(--w-max);margin:0 auto;font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,8vw,7rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-2);padding:34px 0;white-space:nowrap;letter-spacing:-.01em}
.ft-main{max-width:var(--w-max);margin:0 auto;padding:clamp(48px,6vw,72px) var(--gutter);display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.ft-brand img{height:34px;width:auto;margin-bottom:18px}
.ft-brand p{color:var(--muted);font-size:.9rem;max-width:34ch}
.ft h4{font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--day);margin-bottom:18px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.ft-main a,.ft-main li{color:var(--muted);font-size:.9rem;transition:color var(--dur-1) var(--ease)}
.ft-main a:hover{color:var(--paper)}
.ft-legal{border-top:1px solid var(--line)}
.ft-legal-in{max-width:var(--w-max);margin:0 auto;padding:22px var(--gutter);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--faint)}
.ft-legal-in a:hover{color:var(--soft)}
@media (max-width:840px){.ft-main{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:480px){.ft-main{grid-template-columns:1fr}}