/* ===== V2 LAB — shared structure + interactive effects. Colour comes from per-theme CSS vars. ===== */
:root{
  --serif:"Spectral","Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  /* palette vars are set per theme; sensible fallbacks below */
  --bg:#0d0f14; --bg-alt:#12151c; --bg-deep:#090b10; --ink:#e7e9ee; --ink-soft:#aab0be;
  --muted:#6b7280; --rule:rgba(255,255,255,.12); --rule-soft:rgba(255,255,255,.06);
  --accent:#5b8cff; --accent-2:#7be0d6; --ivory:#e7e9ee; --glow:rgba(91,140,255,.35);
  --rule-inv:rgba(255,255,255,.14); /* hairlines inside always-dark sections */
  --ease:cubic-bezier(0.22,1,0.36,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
body{ font-family:var(--sans); }
/* V2 fixed-1440 canvas, scaled down on smaller viewports (matches the original) */
@media (max-width:1440px){ html{ zoom:calc(100vw / 1440); } }
@supports not (zoom:1){ html{ zoom:unset; } body{ transform-origin:top left; width:1440px; } }
a{ color:inherit; text-decoration:none; }

/* typography atoms */
.label{ font-family:var(--mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); font-weight:400; }
.h1{ font-family:var(--serif); font-weight:300; font-size:96px; line-height:1.02; letter-spacing:-2.2px; color:var(--ink); margin:0; }
.h2{ font-family:var(--serif); font-weight:300; font-size:64px; line-height:1.05; letter-spacing:-1.4px; color:var(--ink); margin:0; }
.h3{ font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.2; letter-spacing:-.4px; color:var(--ink); margin:0; }
.body{ font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0; }
.small{ font-family:var(--sans); font-weight:400; font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0; }
.accent{ color:var(--accent); }
i.accent{ font-weight:300; font-style:italic; }
.serif{ font-family:var(--serif); } .mono{ font-family:var(--mono); }

/* nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:26px 64px; border-bottom:1px solid transparent; transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s; }
.nav.scrolled{ background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:blur(14px) saturate(1.2); border-color:var(--rule-soft); padding-top:18px; padding-bottom:18px; }
.brand{ display:inline-flex; align-items:baseline; }
.brand .wm{ font-family:var(--serif); font-weight:700; font-size:22px; letter-spacing:-.9px; color:var(--ink); white-space:nowrap; }
.brand .wm .dot{ color:var(--accent); }
.navlinks{ display:flex; gap:40px; }
.navlinks a{ font-size:14px; font-weight:500; color:var(--ink-soft); letter-spacing:.2px; position:relative; padding-bottom:3px; transition:color .3s; }
.navlinks a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .4s var(--ease); }
.navlinks a:hover{ color:var(--ink); } .navlinks a:hover::after{ right:0; }
.navcta{ font-size:13px; font-weight:500; letter-spacing:.4px; text-transform:uppercase; color:var(--ink); padding-bottom:3px; position:relative; }
.navcta::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transition:transform .4s var(--ease); transform-origin:right; }
.navcta:hover::after{ transform:scaleX(0); transform-origin:left; }
.navcta .ar{ display:inline-block; transition:transform .35s var(--ease); }
.navcta:hover .ar{ transform:translateX(5px); }

/* section paddings */
.sec{ padding:0 64px; }
.hero{ padding:150px 64px 80px; position:relative; overflow:hidden; }
.who{ padding:180px 64px 140px; }
.pillars{ padding:140px 64px 160px; background:var(--bg-alt); border-top:1px solid var(--rule); }
.quote{ padding:160px 64px; text-align:center; }
.focus{ padding:160px 64px; background:var(--bg-deep); color:var(--ivory); }
.hubs{ padding:120px 64px; }
.ribbon{ padding:120px 64px; background:var(--bg-alt); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.foot{ background:var(--bg-deep); color:var(--ivory); padding:80px 64px 48px; }

/* hero grid */
.hgrid{ display:grid; grid-template-columns:120px 1fr 120px; align-items:start; }
.hero .est,.hero .loc{ font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.7; }
.hero .est{ margin-top:240px; }
.loc{ text-align:right; }
.hsub{ display:grid; grid-template-columns:1fr 1fr; gap:96px; margin-top:56px; }
.hcta{ display:flex; flex-direction:column; gap:12px; padding-top:6px; }
.linkline{ font-size:14px; font-weight:500; letter-spacing:.4px; text-transform:uppercase; padding:18px 0; width:240px; border-bottom:1px solid var(--rule); color:var(--ink-soft); position:relative; overflow:hidden; }
.linkline.strong{ color:var(--ink); border-color:var(--ink); }
.linkline .ar{ display:inline-block; transition:transform .35s var(--ease); }
.linkline:hover .ar{ transform:translateX(6px); }
.linkline::before{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.linkline:hover::before{ transform:scaleX(1); }
.linkline:hover{ color:var(--ink); }

/* plates — real photography, theme-duotoned, with a tech grid/sheen overlay */
.plate{ position:relative; overflow:hidden; background:var(--bg-deep); border:1px solid var(--rule); }
.plate .plate-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.9); transition:transform 1.4s var(--ease), filter .6s; }
.plate:hover .plate-img{ transform:scale(1.045); }
.plate .plate-tint{ position:absolute; inset:0; background:linear-gradient(140deg, color-mix(in srgb,var(--accent) 30%, transparent), transparent 52%), radial-gradient(70% 60% at 78% 20%, var(--glow), transparent 70%), linear-gradient(0deg, var(--bg-deep) 4%, transparent 55%); mix-blend-mode:normal; opacity:.9; }
.plate .grid-fx{ position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:56px 56px; opacity:.16; }
.plate .sheen{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.14) 50%, transparent 64%); transform:translateX(-120%); transition:transform 1.1s var(--ease); mix-blend-mode:screen; }
.plate:hover .sheen{ transform:translateX(120%); }
.plate .cap{ position:absolute; bottom:14px; left:16px; z-index:2; font-family:var(--mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:#fff; opacity:.82; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.plate .cap b{ margin-right:8px; opacity:.6; font-weight:400; }

/* figure caption row */
.figrow{ display:flex; justify-content:space-between; margin-top:14px; }
.figrow .m{ font-family:var(--mono); font-size:11px; color:var(--muted); }

/* who stats */
.stats{ display:flex; gap:32px; margin-top:16px; padding-top:24px; border-top:1px solid var(--rule); }
.stat .v{ font-family:var(--serif); font-size:44px; font-weight:300; color:var(--ink); letter-spacing:-1px; line-height:1; }
.stat .l{ margin-top:6px; }

/* pillars grid */
.pgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; margin-top:96px; border-top:1px solid var(--rule); }
.cell{ padding:40px 32px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); position:relative; transition:background .4s var(--ease); }
.cell::before{ content:""; position:absolute; top:-1px; left:0; height:2px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.cell:hover{ background:color-mix(in srgb, var(--accent) 7%, transparent); }
.cell:hover::before{ transform:scaleX(1); }
.pgrid .cell:nth-child(3n){ border-right:none; }
.pgrid .cell:nth-child(n+4){ border-bottom:none; }
.cell .n{ font-family:var(--mono); font-size:11px; color:var(--accent-text); letter-spacing:1.4px; }
.cell h3{ margin-top:24px; }
.cell p{ margin-top:16px; }

/* focus (dark) */
.frow{ display:grid; grid-template-columns:180px 1fr; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--rule-inv); transition:padding-left .4s var(--ease); }
.frow:hover{ padding-left:12px; }
.frow .v{ font-family:var(--serif); font-size:26px; color:var(--ivory); letter-spacing:-.5px; }
.frow .l{ font-size:15px; color:color-mix(in srgb,var(--ivory) 70%, transparent); }

/* hubs */
.hgrid3{ display:grid; grid-template-columns:1fr 1fr 1fr; border-top:1px solid var(--rule); }
.hub{ padding:40px 32px 0 0; border-right:1px solid var(--rule); transition:transform .4s var(--ease); }
.hgrid3 .hub:nth-child(3){ border-right:none; }
.hub:hover{ transform:translateY(-4px); }
.hub .city{ font-family:var(--serif); font-size:44px; font-weight:300; letter-spacing:-1px; color:var(--ink); }
.hub .r{ margin-top:4px; color:var(--muted); }
.hub .a{ margin-top:28px; font-family:var(--mono); font-size:12px; color:var(--ink-soft); line-height:1.7; }

/* buttons */
.btn{ font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.4px; text-transform:uppercase; padding:18px 32px; display:inline-flex; align-items:center; gap:10px; transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; }
.btn.solid{ background:var(--ink); color:var(--bg); }
.btn.solid:hover{ box-shadow:0 12px 30px -10px var(--glow); }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.ghost:hover{ background:var(--ink); color:var(--bg); }
.btn .ar{ display:inline-block; transition:transform .35s var(--ease); } .btn:hover .ar{ transform:translateX(5px); }

/* footer */
.fbrand{ font-family:var(--serif); font-weight:700; font-size:26px; letter-spacing:-1px; color:var(--ivory); }
.fbrand .dot{ color:var(--accent-2); }
.fgrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:64px; align-items:start; }
.fcol a{ display:block; }
.fcol a:hover{ color:var(--accent); }

/* reveal — hidden only when JS is live (body.fx); visible otherwise */
body.fx .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
body.fx .reveal.in{ opacity:1; transform:none; }
.d1{ transition-delay:.06s;} .d2{ transition-delay:.12s;} .d3{ transition-delay:.18s;} .d4{ transition-delay:.24s;} .d5{ transition-delay:.3s;}

/* cursor spotlight (dark themes) */
.spot{ position:fixed; width:520px; height:520px; border-radius:50%; pointer-events:none; z-index:1; left:0; top:0; transform:translate(-50%,-50%); background:radial-gradient(circle, var(--glow), transparent 62%); opacity:0; transition:opacity .5s; mix-blend-mode:screen; will-change:transform; }
body[data-cursor="on"] .spot{ opacity:.55; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1!important; transform:none!important; transition:none; }
  .plate .glowfx{ animation:none; } .spot{ display:none; }
  .plate .plate-img, .plate .sheen{ transition:none !important; transform:none !important; }
  *{ scroll-behavior:auto; }
}