:root { --logo: url("logo-mark.png"); --logo-sm: url("logo-mark-96.png"); }
/* Right-sized WebP marks wherever image-set() is supported (every engine that
   supports it also decodes WebP). The 760px PNG stays as the fallback. */
@supports (background-image: image-set(url("logo-mark-480.webp") 1x)) {
  :root {
    --logo: image-set(url("logo-mark-480.webp") 1x, url("logo-mark-760.webp") 2x);
    --logo-sm: url("logo-mark-96.webp");
  }
}
/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Design tokens ────────────────────────────────────────────────────────
   WCAG contrast ratios (bg = #0A0B14, relative luminance ≈ 0.00142)
   #E2DFF2 lum≈0.2120 → (0.2120+0.05)/(0.00142+0.05) = 15.0:1  ✓ AA+AAA
   #A8A3C8 lum≈0.1055 → (0.1055+0.05)/(0.00142+0.05) = 8.16:1  ✓ AA+AAA
   2026-10-15 lift for small grey copy: text-secondary #B4AFD3 9.35:1,
   text-muted #B7B3D2 9.70:1, text-footer #AAA6C6 8.38:1           ✓ AA+AAA
   #B9B4D6 lum≈0.1444 → (0.1444+0.05)/(0.00142+0.05) = 9.87:1  ✓ AA+AAA
   #9894B0 lum≈0.0840 → (0.0840+0.05)/(0.00142+0.05) = 6.72:1  ✓ AA
   #9E9ABD lum≈0.0897 → (0.0897+0.05)/(0.00142+0.05) = 7.29:1  ✓ AA
   #B7A8FF lum≈0.1669 → (0.1669+0.05)/(0.00142+0.05) = 9.39:1  ✓ AA+AAA
   #46B8FF lum≈0.1741 → (0.1741+0.05)/(0.00142+0.05) = 9.77:1  ✓ AA+AAA
   #A9E8FF lum≈0.5432 → (0.5432+0.05)/(0.00142+0.05) = 23.1:1  ✓ AA+AAA
   #F0C09C (ember text) lum≈0.1980 → ~13.0:1                    ✓ AA+AAA
   #C4B0E8 (specced) lum≈0.1476 → ~10.1:1                       ✓ AA+AAA
   #B9B4D6 (product) → same as text-micro above                  ✓ AA+AAA
   ─────────────────────────────────────────────────────────────────────── */
:root {
  /* Ground */
  --ground:          #0A0B14;
  --ground-2:        #0D0E1A;
  --ground-card:     #10111C;

  /* Group accent — Nethric purple */
  --accent:          #6D5AE0;
  --accent-hi:       #B7A8FF;

  /* Text — all ≥4.5:1 on #0A0B14 */
  --text:            #E2DFF2;
  --text-secondary:  #B4AFD3;
  --text-micro:      #B9B4D6;
  --text-muted:      #B7B3D2;
  --text-footer:     #AAA6C6;

  /* Cortex lane */
  --cortex-blue:     #46B8FF;
  --cortex-ice:      #A9E8FF;

  /* Ember lane */
  --ember:           #E8A87C;
  --ember-hi:        #F0C09C;
  --ember-dim:       #C4885A;

  /* Glass */
  --glass-bg:        rgba(255,255,255,0.04);
  --glass-bg-hover:  rgba(109,90,224,0.10);
  --glass-border:    rgba(183,168,255,0.16);
  --glass-border-hi: rgba(183,168,255,0.32);

  /* Mark */
  --mark-bright:     #B7A8FF;
  --mark-fade:       #6D5AE0;
  --mark-node:       #E8E6F2;
}

html, body {
  /* min-height (not height:100%) lets <body> grow to the full document height,
     so the absolute aurora layer can span the entire scroll as one piece. */
  min-height: 100%;
  position: relative;
  /* BG03 trial: the tall aurora is one continuous backdrop spanning the whole
     document, scrolling 1:1 with the page (see .bg-photo). */
  background: #07080F;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100svh; }

/* Text links share the palette on every route, including visited links.
   Component styles can keep their own glass, card or navigation treatment. */
:where(a[href]) {
  color: var(--link-color, var(--accent-hi));
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
:where(a[href]:hover) { color: var(--link-hover-color, var(--text)); }

/* Keep document content above decorative layers, even before scroll reveals. */
main { position: relative; z-index: 1; }

/* ─── Skip link ─── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
}
.skip-link:focus {
  left: 0;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
}

/* ─── Tall aurora parallax backdrop ───
   A fixed layer holding the tall aurora at `cover`. JS pans background-position-y
   from 0%→100% across the full page scroll, so you travel down through the whole
   aurora and it trails behind the content. Falls back to a static mid-frame when
   JS is off or reduced-motion is requested. */
.bg-photo {
  /* absolute (not fixed): the flat landscape aurora is anchored to the top of
     the document and scrolls UP and away with the page, revealing calm deep
     space below. Masked at the bottom so it dissolves with no hard edge. */
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 116vh;
  max-height: 100%;
  z-index: 0;
  pointer-events: none;
  background: url('aurora.jpg') center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
}
/* The aurora is the LCP image: WebP where supported, and a full-height centre
   crop for portrait screens, which only ever show the middle of the frame.
   Pages preload the same files (link rel=preload, matching media queries). */
@supports (background-image: image-set(url("aurora.webp") 1x)) {
  .bg-photo { background-image: url('aurora.webp'); }
}
@media (max-aspect-ratio: 3/4) {
  .bg-photo { background-image: url('aurora-portrait.jpg'); }
  @supports (background-image: image-set(url("aurora-portrait.webp") 1x)) {
    .bg-photo { background-image: url('aurora-portrait.webp'); }
  }
}
/* Readability wash: keeps the centre channel calm and darkens the lower page so
   copy stays legible regardless of where the aurora has panned to. */
.bg-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 8%, transparent 0%, rgba(7,8,15,0.20) 70%, rgba(7,8,15,0.42) 100%),
    linear-gradient(to bottom, rgba(7,8,15,0.18) 0%, rgba(7,8,15,0.40) 55%, rgba(7,8,15,0.66) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .bg-photo { will-change: auto; }
}

/* ─── Starfield ─── */
/* ─── Living cosmos background: canvas starfield + drifting nebula, hero-focused,
       masked to dissolve into the page gradient below the fold ─── */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* fade the whole field out toward the bottom so it concentrates on the hero */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%);
}
.cosmos-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.cosmos-neb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
  will-change: transform;
}
.neb-a {
  width: 62vw; height: 62vw; top: -18vh; left: -8vw;
  background: radial-gradient(circle, rgba(109,90,224,0.11) 0%, rgba(109,90,224,0) 68%);
  animation: neb-a 46s ease-in-out infinite alternate;
}
.neb-b {
  width: 52vw; height: 52vw; top: -10vh; right: -8vw;
  background: radial-gradient(circle, rgba(70,184,255,0.07) 0%, rgba(70,184,255,0) 68%);
  animation: neb-b 58s ease-in-out infinite alternate;
}
.neb-c {
  width: 44vw; height: 44vw; top: 24vh; left: 28vw;
  background: radial-gradient(circle, rgba(122,108,224,0.06) 0%, rgba(122,108,224,0) 70%);
  animation: neb-c 70s ease-in-out infinite alternate;
}
@keyframes neb-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vh,0) scale(1.08); } }
@keyframes neb-b { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5vw,5vh,0) scale(1.10); } }
@keyframes neb-c { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw,-3vh,0) scale(0.94); } }

/* ─────────────────────────────────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────────────────────────────────── */
header nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px,2vw,20px) clamp(20px,5vw,60px);
  /* extra bottom padding gives the feathered backdrop room to dissolve */
  padding-bottom: clamp(20px,2.6vw,28px);
}
/* Backdrop + blur live on a feathered pseudo so they dissolve with NO hard
   edge or hairline. The blur's rectangular boundary is hidden by the mask. */
header nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(10,11,20,0.92) 0%, rgba(10,11,20,0.55) 50%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%);
  pointer-events: none;
  transition: background-color 0.25s ease;
}
header nav { transition: padding 0.25s ease; }
/* Once scrolled (site.js), the feathered fade becomes a full translucent
   ground-coloured bar so copy never runs under the wordmark or burger. */
header nav.is-scrolled { padding-bottom: clamp(14px,2vw,20px); }
header nav.is-scrolled::before {
  background: rgba(10,11,20,0.78);
  box-shadow: inset 0 -1px 0 rgba(183,168,255,0.12);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  -webkit-mask-image: none;
  mask-image: none;
}
@media (prefers-reduced-motion: reduce) {
  header nav, header nav::before { transition: none; }
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.nav-mark { flex-shrink: 0; width: 26px; height: 26px; background: var(--logo-sm) center/contain no-repeat; }

.nav-wordmark {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(16px,2.8vw,34px);
  list-style: none;
}

.nav-links a {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.25s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--accent-hi); }
/* Extend each link's hit area to 44px tall without growing the nav bar. */
.nav-links a::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--accent-hi);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(183,168,255,0.10), 0 1px 3px rgba(0,0,0,0.35);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.nav-cta:hover, .nav-cta:focus-visible {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hi);
  color: #fff;
}

/* ─── Glass button (shared) ─── */
.glass-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(10px,1.5vmin,14px) clamp(24px,3.2vw,36px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--accent-hi);
  font-size: clamp(0.75rem,1.4vw,0.875rem);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(183,168,255,0.10),
    0 1px 4px rgba(0,0,0,0.40),
    0 4px 16px rgba(0,0,0,0.22);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.glass-btn:hover, .glass-btn:focus-visible {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hi);
  color: #fff;
}
.glass-btn:focus-visible {
  box-shadow: inset 0 1px 0 rgba(183,168,255,0.10), 0 0 0 2px rgba(109,90,224,0.5);
}
.btn-arrow { opacity: 0.6; }

/* ─────────────────────────────────────────────────────────────────────────
   HERO (verbatim from nethric.html — operator-approved hA direction)
   ───────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: clamp(100px,14vh,160px) clamp(20px,6vw,80px) clamp(70px,10vh,120px);
  text-align: center;
}

.hero-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: clamp(320px,68vmin,680px);
  height: clamp(320px,68vmin,680px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(109,90,224,0.17) 0%,
    rgba(109,90,224,0.07) 40%,
    transparent 70%
  );
  filter: blur(36px);
  z-index: 1;
  animation: hero-glow-pulse 14s ease-in-out infinite alternate;
}

@keyframes hero-glow-pulse {
  0%   { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 1.0; transform: translate(-50%,-50%) scale(1.10); }
}

.hero-mark-wrap {
  position: relative;
  z-index: 2;
  width:  clamp(200px,40vmin,420px);
  height: clamp(200px,40vmin,420px);
  flex-shrink: 0;
  animation: mark-drift 9s ease-in-out infinite;
}

@keyframes mark-drift {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

.hero-mark-img {
  width: 100%;
  height: 100%;
  background: var(--logo) center/contain no-repeat;
}

.hero-mark-svg { width: 100%; height: 100%; overflow: visible; }

.h-stroke-bright {
  stroke: var(--mark-bright); fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.h-stroke-fade {
  stroke: var(--mark-fade); fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.42;
}

@keyframes shimmer-bright {
  0%   { stroke-dashoffset:  500; }
  100% { stroke-dashoffset: -500; }
}
@keyframes shimmer-fade {
  0%   { stroke-dashoffset:  360; }
  100% { stroke-dashoffset: -360; }
}

.h-shimmer-bright {
  stroke: #DACCFF; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 55 500; stroke-dashoffset: 500;
  opacity: 0.65;
  animation: shimmer-bright 22s ease-in-out infinite;
}
.h-shimmer-fade {
  stroke: rgba(183,168,255,0.50); fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 38 360; stroke-dashoffset: 360;
  opacity: 0.45;
  animation: shimmer-fade 28s ease-in-out infinite;
}

.hero-type {
  position: relative;
  z-index: 2;
  margin-top: clamp(30px,5vmin,58px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px,1.8vmin,20px);
  max-width: 680px;
  /* no box — keep the copy readable over the glow with a soft text shadow,
     the same calm approach the Cortex hero uses. */
  text-shadow: 0 1px 16px rgba(4,5,12,0.65), 0 1px 3px rgba(4,5,12,0.55);
}

.hero-wordmark {
  font-size: clamp(1.75rem,5.5vw,3.6rem);
  font-weight: 500;
  letter-spacing: clamp(0.30em,1.3vw,0.48em);
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
  line-height: 1;
}

.hero-tagline {
  font-size: clamp(0.75rem,1.7vw,0.9375rem);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-hi);
  text-wrap: balance;
}

.hero-oneliner {
  font-size: clamp(0.875rem,1.9vw,1.0625rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.68;
  color: var(--text-secondary);
  max-width: 560px;
  text-wrap: balance;
  margin-top: clamp(4px,0.6vmin,8px);
}

.hero-bip {
  position: relative;
  display: inline-block;
  isolation: isolate; /* own stacking context so the soft fill sits behind only this line */
  padding: 5px 18px;
  font-size: clamp(0.75rem,1.35vw,0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-micro);
  text-wrap: balance;
}
/* very soft, feathered translucent fill behind ONLY the "Building in public" line —
   blurred edges so there is no hard rectangle and no hard shadow */
.hero-bip::before {
  content: "";
  position: absolute;
  inset: -2px -4px;
  z-index: -1;
  background: rgba(10,11,22,0.55);
  border-radius: 999px;
  filter: blur(9px);
  pointer-events: none;
}

.hero-cta-wrap { margin-top: clamp(20px,3vmin,34px); }

/* ─────────────────────────────────────────────────────────────────────────
   CHASSIS (s1 comp)
   Horizontal violet→blue dawn — faint purple constellation from left edge,
   fine blue lattice glow at right edge; NO vertical seam lines.
   Logo lockup: small hourglass-N mark + NETHRIC, centered, above headline.
   ───────────────────────────────────────────────────────────────────────── */
.chassis {
  position: relative;
  z-index: 1;
  padding: clamp(72px,10vh,112px) clamp(20px,6vw,80px);
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgba(109,90,224,0.07) 0%,
    rgba(10,11,20,0.0)    44%,
    rgba(70,184,255,0.06) 100%
  );
  border-top: 1px solid rgba(183,168,255,0.06);
  border-bottom: 1px solid rgba(70,184,255,0.07);
}

/* Purple constellation glow — left third only */
.chassis-aurora-left {
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(
    ellipse at 0% 50%,
    rgba(109,90,224,0.13) 0%,
    rgba(109,90,224,0.04) 45%,
    transparent 70%
  );
  pointer-events: none;
}

/* Blue lattice glow — right third only */
.chassis-lattice-right {
  position: absolute;
  top: 0; right: 0;
  width: 42%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.chassis-lattice-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(70,184,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,184,255,0.055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 100% 50%, black 20%, transparent 70%);
}

.chassis-lattice-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 100% 50%,
    rgba(70,184,255,0.10) 0%,
    rgba(70,184,255,0.03) 40%,
    transparent 65%
  );
}

.chassis-inner {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px,3.5vmin,34px);
}

/* S1 approved logo lockup — small hourglass-N + NETHRIC, letterspaced, centered */
.chassis-logo-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0.72;
}

.chassis-logo-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--logo-sm) center/contain no-repeat;
}

.chassis-logo-wordmark {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--accent-hi);
}

.chassis-headline {
  font-size: clamp(1.5rem,3.8vw,2.6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
  max-width: 780px;
  line-height: 1.22;
}

.chassis-headline .cortex-word { color: var(--cortex-blue); }

.chassis-subline {
  font-size: clamp(0.875rem,1.8vw,1.0625rem);
  font-weight: 400;
  color: var(--text-secondary);
  text-wrap: balance;
  max-width: 560px;
  line-height: 1.6;
}

/* Qualitative mono row */
.chassis-mono-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: clamp(0.6875rem,1.3vw,0.8125rem);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: clamp(6px,1.2vmin,14px);
}

.chassis-mono-item {
  white-space: nowrap;
  padding: 0 clamp(10px,1.8vw,18px);
}

.chassis-mono-sep {
  color: rgba(183,168,255,0.25);
  user-select: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   WHAT WE BUILD (s2 comp)
   "Five lanes. One substrate." top-left
   Asymmetric grid: CORTEX flagship large (left ~55%), four smaller cards right
   ───────────────────────────────────────────────────────────────────────── */
.lanes-section {
  position: relative;
  z-index: 1;
  padding: clamp(64px,10vh,100px) clamp(20px,6vw,80px);
  border-top: 1px solid rgba(183,168,255,0.05);
  overflow: hidden;
}

/* Faint purple ambient right-edge per comp */
.lanes-ambient {
  position: absolute;
  top: 0; right: 0;
  width: 38%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 100% 40%,
    rgba(109,90,224,0.07) 0%,
    transparent 60%
  );
}

.lanes-header {
  max-width: 1160px;
  margin: 0 auto clamp(32px,5vmin,52px);
}

.lanes-title {
  font-size: clamp(1.3rem,3.2vw,2.1rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

/* Asymmetric grid: left ~col 1-7 (flagship), right col 8-12 (2×2 smaller) */
.lanes-grid {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(10px,1.6vw,16px);
  align-items: stretch;
}

/* Flagship card — left column, full height (spans 2 rows) */
.lcard-flagship { grid-column: 1; grid-row: 1 / 3; }

/* Smaller cards — right column, 2×2 */
.lcard-sm-1 { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr; gap: clamp(10px,1.6vw,16px); }
.lcard-sm-2 { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr; gap: clamp(10px,1.6vw,16px); }

/* ── Card base ─── */
.lcard {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ground-card);
  border: 1px solid rgba(183,168,255,0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lcard:hover {
  border-color: rgba(183,168,255,0.16);
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
}

/* Lane top accent lines */
.lcard-cortex    { --link-color: var(--cortex-ice); --link-hover-color: var(--cortex-blue); border-top: 2px solid rgba(70,184,255,0.42); }
.lcard-services  { border-top: 2px solid rgba(183,168,255,0.20); }
.lcard-witchbyte {
  border-top: 2px solid rgba(140,100,180,0.30);
  /* Subtle green-tinged inner glow per comp */
  box-shadow: inset 0 0 40px rgba(80,160,100,0.04);
}
.lcard-kits      { border-top: 2px solid rgba(160,155,190,0.22); }
.lcard-kingdom   { border-top: 2px solid rgba(109,90,224,0.48); }
.lcard-dungeon   {
  --link-color: var(--ember-hi);
  --link-hover-color: var(--ember);
  border-top: 2px solid rgba(232,168,124,0.40);
}

/* ── Flagship inner layout ─── */
.lcard-flagship-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 380px;
}

/* Flagship body */
.lcard-flagship-body {
  padding: clamp(28px,4vmin,44px) clamp(24px,3.5vw,40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: clamp(20px,3vmin,32px);
}

/* Blue corner light-leak on flagship */
.lcard-cortex::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 42%;
  height: 42%;
  background: radial-gradient(
    ellipse at 100% 0%,
    rgba(70,184,255,0.10) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* Flagship node constellation (visual right area, inside the card) */
.flagship-constellation {
  position: absolute;
  top: 0; right: 0;
  width: 45%;
  height: 100%;
  pointer-events: none;
  opacity: 0.45;
}

/* ── Secondary card body ─── */
.lcard-body {
  padding: clamp(18px,2.8vmin,28px) clamp(16px,2.4vw,24px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}

.lcard-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.lcard-footer {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
}

/* Title rows */
.lcard-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lcard-node { width: 26px; height: 26px; flex-shrink: 0; }
.lcard-flagship .lcard-node { width: 34px; height: 34px; }

.lcard-lane-name {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lcard-cortex    .lcard-lane-name { color: rgba(70,184,255,0.72); }
.lcard-witchbyte .lcard-lane-name { color: rgba(183,168,255,0.62); }
.lcard-dungeon   .lcard-lane-name { color: rgba(232,168,124,0.72); }

.lcard-name {
  font-size: clamp(0.9375rem,2vw,1.3rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.1;
}
.lcard-flagship .lcard-name {
  font-size: clamp(1.5rem,2.8vw,2.1rem);
}

.lcard-name .name-pending {
  display: block;
  margin-top: 4px;
  font-size: 0.55em;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lcard-promise {
  font-size: clamp(0.8rem,1.5vw,0.9rem);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.58;
  text-wrap: balance;
}

/* Status badges */
.lcard-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 4px;
  width: fit-content;
}

.lstatus-active {
  background: rgba(70,184,255,0.10);
  border: 1px solid rgba(70,184,255,0.24);
  color: var(--cortex-ice);
}
.lstatus-sellable {
  background: rgba(183,168,255,0.08);
  border: 1px solid rgba(183,168,255,0.18);
  color: var(--text-micro);
}
.lstatus-specced {
  background: rgba(150,100,200,0.08);
  border: 1px solid rgba(150,100,200,0.18);
  color: #C4B0E8;
}
.lstatus-product {
  background: rgba(160,155,190,0.08);
  border: 1px solid rgba(160,155,190,0.16);
  color: var(--text-micro);
}
.lstatus-ember {
  background: rgba(232,168,124,0.10);
  border: 1px solid rgba(232,168,124,0.24);
  color: var(--ember-hi);
}

.lstatus-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}
.lstatus-active   .lstatus-dot { background: var(--cortex-blue); }
.lstatus-sellable .lstatus-dot { background: var(--accent-hi); opacity: 0.70; }
.lstatus-specced  .lstatus-dot { background: #B47FD8; opacity: 0.80; }
.lstatus-product  .lstatus-dot { background: var(--text-micro); opacity: 0.70; }
.lstatus-ember    .lstatus-dot { background: var(--ember); }

/* Descend link */
.lcard-link {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--link-color, var(--accent-hi));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.25s ease;
  margin-top: 6px;
}
.lcard-link:hover, .lcard-link:focus-visible {
  color: var(--link-hover-color, var(--text));
  text-decoration: underline;
}

/* Dungeon Inn ember doorway glow — CSS-only approximation of the comp's lit doorway */
.dungeon-ember-glow {
  position: absolute;
  bottom: 0; left: 50%; right: 0;
  transform: translateX(-20%);
  width: 80%;
  height: 55%;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(232,140,60,0.22) 0%,
      rgba(200,100,30,0.10) 35%,
      transparent 65%
    );
}

/* ─────────────────────────────────────────────────────────────────────────
   BUILD LOG (s3 comp)
   Two-column layout: left ~⅓ (label + heading + caption), right ~⅔ (ledger)
   Faint purple aurora behind left caption only
   ───────────────────────────────────────────────────────────────────────── */
.buildlog-section {
  position: relative;
  z-index: 1;
  padding: clamp(64px,10vh,100px) clamp(20px,6vw,80px);
  border-top: 1px solid rgba(183,168,255,0.05);
  overflow: hidden;
}

/* Faint purple aurora left-side only */
.buildlog-aurora {
  position: absolute;
  top: 0; left: 0;
  width: 32%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 0% 55%,
    rgba(109,90,224,0.14) 0%,
    rgba(109,90,224,0.04) 40%,
    transparent 65%
  );
}

.buildlog-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px,5vw,72px);
  align-items: start;
}

/* Left column */
.buildlog-left { position: relative; }

.buildlog-eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: clamp(14px,2.4vmin,22px);
}

.buildlog-heading {
  font-size: clamp(1.6rem,3.8vw,2.8rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.08;
  margin-bottom: clamp(12px,2vmin,20px);
}

.buildlog-caption {
  font-size: clamp(0.8125rem,1.6vw,0.9375rem);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.60;
  text-wrap: balance;
}

/* Right column — ledger */
.buildlog-ledger {
  display: flex;
  flex-direction: column;
}

.log-entry {
  display: grid;
  grid-template-columns: 72px 16px 1fr;
  gap: clamp(10px,1.8vw,20px);
  padding: clamp(18px,2.8vmin,26px) 0;
  border-bottom: 1px solid rgba(183,168,255,0.06);
  align-items: baseline;
}

.log-entry:last-child { border-bottom: none; }

.log-date {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.log-dash {
  color: rgba(183,168,255,0.28);
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  align-self: baseline;
  padding-top: 1px;
}

.log-text {
  font-size: clamp(0.8125rem,1.55vw,0.9375rem);
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
  text-wrap: balance;
}

/* ─────────────────────────────────────────────────────────────────────────
   LOCAL FIRST (replaces house rules — mini-minimalist)
   Vast negative space, one calm large statement. s4 visual register.
   ───────────────────────────────────────────────────────────────────────── */
.local-section {
  position: relative;
  z-index: 1;
  padding: clamp(96px,16vh,160px) clamp(20px,6vw,80px);
  border-top: 1px solid rgba(183,168,255,0.04);
  text-align: center;
  overflow: hidden;
}

/* Whisper purple ambient — very subtle center glow */
.local-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(109,90,224,0.06) 0%,
    transparent 58%
  );
}

.local-statement {
  position: relative;
  font-size: clamp(2.0rem,5.5vw,4.0rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
  line-height: 1.1;
}

/* ─────────────────────────────────────────────────────────────────────────
   LAUNCH NOTES (s5 comp)
   Centered; soft radial purple dawn vignette from bottom edge.
   ───────────────────────────────────────────────────────────────────────── */
.launch-section {
  position: relative;
  z-index: 1;
  padding: clamp(80px,14vh,140px) clamp(20px,6vw,80px) clamp(64px,10vh,100px);
  border-top: 1px solid rgba(183,168,255,0.05);
  text-align: center;
  overflow: hidden;
}

/* Radial purple dawn rising from bottom — matches comp vignette */
.launch-dawn {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 70%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 110%,
    rgba(109,90,224,0.20) 0%,
    rgba(90,70,200,0.08) 35%,
    transparent 65%
  );
}

/* Very faint starfield density bump in this section */
.launch-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(183,168,255,0.40) 1px, transparent 1px),
    radial-gradient(circle, rgba(183,168,255,0.22) 1px, transparent 1px);
  background-size: 73px 73px, 41px 41px;
  background-position: 17px 23px, 37px 11px;
  opacity: 0.18;
}

.launch-inner {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px,3vmin,26px);
}

.launch-headline {
  font-size: clamp(1.2rem,2.8vw,1.9rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
  line-height: 1.2;
}

.launch-sub {
  font-size: clamp(0.8125rem,1.6vw,0.9375rem);
  color: var(--text-secondary);
  line-height: 1.62;
  text-wrap: balance;
  max-width: 480px;
}

.launch-form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  flex-wrap: wrap;
  margin-top: clamp(6px,1.2vmin,12px);
}

.launch-input {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(183,168,255,0.16);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.25s ease;
  cursor: not-allowed;
}
.launch-input::placeholder { color: var(--text-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────── */
footer {
  position: relative;
  z-index: 1;
  padding: clamp(24px,4vmin,40px) clamp(20px,6vw,80px);
  border-top: 1px solid rgba(183,168,255,0.06);
  text-align: center;
}

.footer-line {
  font-size: 0.8125rem;
  color: var(--text-footer);
  letter-spacing: 0.06em;
}
/* 44px-tall tap targets. font-size:0 collapses the " · " text separators so
   a wrapped row never ends on a stray dot; link padding provides the spacing. */
.footer-links { margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 0; }
footer a { color: var(--text-secondary); display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
.footer-links a { font-size: 0.8125rem; }
footer a:hover, footer a[aria-current="page"] { color: var(--accent-hi); }

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL REVEAL (enhance, never gate). Content rests fully visible. site.js
   adds html.js-reveal only after marking on-screen items .visible, and only
   when IntersectionObserver exists and reduced motion is not requested.
   ───────────────────────────────────────────────────────────────────────── */
html.js-reveal .reveal {
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
html.js-reveal .reveal:not(.visible) {
  opacity: 0.6;
  transform: translateY(12px);
}

/* ─────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-glow         { animation: none; }
  .hero-mark-wrap    { animation: none; }
  .cosmos-neb        { animation: none; }
  .cosmos-stars      { display: none; }
  .h-shimmer-bright,
  .h-shimmer-fade    { animation: none; opacity: 0; }
  html.js-reveal .reveal,
  html.js-reveal .reveal:not(.visible) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .lanes-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lcard-flagship { grid-column: 1 / -1; grid-row: 1; }
  .lcard-sm-1     { grid-column: 1 / -1; grid-row: 2; }
  .lcard-sm-2     { grid-column: 1 / -1; grid-row: 3; }
  .lcard-sm-1 .lcard,
  .lcard-sm-2 .lcard { min-height: 96px; }
  .buildlog-inner {
    grid-template-columns: 1fr;
    gap: clamp(28px,4vmin,44px);
  }
}

@media (max-width: 700px) {
  .lcard-sm-1,
  .lcard-sm-2 {
    grid-template-columns: 1fr;
  }
  .lcard-flagship-inner { min-height: unset; }
  .flagship-constellation { display: none; }
  .nav-links li:not(:last-child) { display: none; }
  .chassis-mono-row { flex-direction: column; gap: 8px; }
  .chassis-mono-sep { display: none; }
}

@media (max-width: 460px) {
  .hero {
    min-height: 92svh;
    padding-top: clamp(82px,11vh,108px);
    padding-bottom: clamp(42px,7vh,62px);
  }
  .hero-mark-wrap {
    width: clamp(180px,54vmin,240px);
    height: clamp(180px,54vmin,240px);
  }
  .launch-form { flex-direction: column; }
  .log-entry {
    grid-template-columns: 60px 12px 1fr;
    gap: 8px;
  }
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--link-color, var(--accent-hi)); outline-offset: 4px; }

/* ── Multi-page nav additions ─────────────────────────────────────────── */
.nav-links a.nav-active,
.nav-links a[aria-current="page"] {
  color: var(--accent-hi);
  border-bottom: 1.5px solid var(--accent-hi);
  padding-bottom: 2px;
}
.nav-links a.nav-cta { padding: 7px 16px; font-size: 0.75rem; color: var(--accent-hi); }
.nav-links a.nav-cta[aria-current="page"] { border-color: var(--accent-hi); border-bottom-width: 1px; }

/* Hamburger button — hidden on desktop */
.nav-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}
.nav-burger {
  display: block;
  width: 22px; height: 2px;
  background: var(--accent-hi);
  border-radius: 2px;
  position: relative;
  transition: background 0.2s;
}
.nav-burger::before, .nav-burger::after {
  content: '';
  display: block;
  width: 22px; height: 2px;
  background: var(--accent-hi);
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: transform 0.22s ease, top 0.22s ease;
}
.nav-burger::before { top: -7px; }
.nav-burger::after  { top:  7px; }

/* Mobile sheet */
.nav-mobile-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10,11,20,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px,6vw,48px);
  padding-top: clamp(64px,10vh,96px);
}
.nav-mobile-sheet:not([hidden]) { display: flex; }
.nav-mobile-sheet ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 4px;
  width: 100%;
}
.nav-mobile-sheet li a {
  display: block;
  font-size: clamp(1.25rem,5vw,1.75rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text);
  text-decoration: none;
  padding: 14px 0;
  min-height: 44px;
  border-bottom: 1px solid rgba(183,168,255,0.08);
  transition: color 0.2s;
}
.nav-mobile-sheet li a:hover,
.nav-mobile-sheet li a[aria-current="page"] {
  color: var(--accent-hi);
}
.nav-close-btn {
  position: absolute;
  top: clamp(16px,3vh,28px);
  right: clamp(20px,5vw,40px);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 1.25rem;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  transition: color 0.2s;
}
.nav-close-btn:hover { color: var(--text); }

@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }
}

/* Mobile nav keyboard trap + body scroll lock when sheet is open */
body.nav-open { overflow: hidden; }

/* Current homepage: retain the aurora, mark, colour system and glass controls. */
.home-page .hero { min-height: 90svh; padding-bottom: clamp(56px, 8vh, 88px); }
.home-page .hero-mark-wrap { width: clamp(180px, 30vmin, 300px); height: clamp(180px, 30vmin, 300px); }
.home-page .hero-type { margin-top: clamp(24px, 4vmin, 40px); max-width: 720px; }
.home-page .hero-tagline { letter-spacing: .13em; line-height: 1.65; }
.home-page .hero-oneliner { max-width: 540px; }
.home-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; }
.home-actions .glass-btn { min-height: 46px; }
.glass-btn-primary { background: rgba(109, 90, 224, .23); border-color: rgba(183, 168, 255, .4); }
.glass-btn-primary:hover { background: rgba(109, 90, 224, .35); }
.hero-project-note { display: inline-block; padding: 12px 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; text-decoration: none; margin-top: 2px; }
.hero-project-note:hover { color: var(--accent-hi); }
.home-page .lanes-section { scroll-margin-top: 60px; }
.home-project-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.home-project-heading .buildlog-eyebrow { margin-bottom: 14px; }
.home-section-note { font-size: .875rem; line-height: 1.65; color: var(--text-secondary); }
/* Four projects: a 2×2 grid on wide screens, one column under 850px. */
.home-project-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-project { display: flex; flex-direction: column; }
.project-art { height: clamp(220px, 21vw, 270px); position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(183, 168, 255, .08); }
.cortex-art { background: radial-gradient(ellipse at center, rgba(70, 184, 255, .09), transparent 70%); }
.cortex-art svg { width: 260px; height: 195px; }
.deck-art { background: radial-gradient(ellipse at center, rgba(109, 90, 224, .13), transparent 70%); }
/* Deck card shows the Nethric outline mark (shared cached asset), not the
   app's old filled-N icon. */
.deck-mark { position: relative; width: 104px; height: 104px; background: var(--logo) center/contain no-repeat; }
.deck-mark-orbit { position: absolute; width: 152px; height: 152px; border: 1px solid rgba(183, 168, 255, .18); border-radius: 24px; }
.deck-mark-orbit::after { content: ''; position: absolute; inset: -25px; border: 1px solid rgba(183, 168, 255, .08); border-radius: 36px; }
.underveil-art { background: #151822; }
.underveil-art picture { display: block; width: 100%; height: 100%; }
.underveil-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.deck-shot-art { background: #0A0B14; }
.deck-shot-art picture { display: block; width: 100%; height: 100%; }
.deck-shot-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kingdom-shot-art { background: #3a4a22; }
.kingdom-shot-art picture { display: block; width: 100%; height: 100%; }
.kingdom-shot-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.cortex-shot-art { background: #0d1622; }
.cortex-shot-art picture { display: block; width: 100%; height: 100%; }
.cortex-shot-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.home-project-body { padding: clamp(20px, 2.2vw, 28px); display: flex; flex: 1; flex-direction: column; gap: 12px; }
.project-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); }
.home-project .lcard-name { font-size: 1.5rem; font-weight: 450; }
.home-project .lcard-promise { text-wrap: pretty; line-height: 1.7; }
.home-project .lcard-footer { padding-top: 14px; gap: 12px; }
.home-project .lcard-link { min-height: 44px; margin-top: 0; font-size: .8125rem; }
.home-project-footnote { max-width: 1160px; margin: 28px auto 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.8; }
.home-project-footnote a, .home-text-link { text-underline-offset: 5px; }
.home-project-footnote a { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; }
.home-approach { padding-top: clamp(64px, 9vh, 100px); padding-bottom: clamp(64px, 9vh, 100px); }
.home-approach .buildlog-heading { line-height: 1.25; }
.home-approach .buildlog-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.home-approach .buildlog-heading { font-size: clamp(1.6rem, 3vw, 2.375rem); }
.home-method { list-style: none; padding: 0; margin: 0; }
.home-method li { display: grid; grid-template-columns: 28px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid rgba(183, 168, 255, .12); }
.home-method .log-date { padding-top: 3px; }
.home-method h3 { font-weight: 450; font-size: 1rem; margin-bottom: 10px; color: var(--text); }
.home-method p { color: var(--text-secondary); font-size: .875rem; line-height: 1.75; max-width: 54ch; }
.home-contact { padding-top: clamp(64px, 9vh, 100px); padding-bottom: clamp(64px, 9vh, 100px); }
.home-contact .launch-headline { font-size: clamp(1.75rem, 4vw, 2.8rem); }
.home-contact .launch-sub { max-width: 550px; font-size: .9375rem; line-height: 1.8; }
.home-text-link { padding: 14px 0; font-size: .8125rem; }

@media (max-width: 1024px) {
  .home-approach .buildlog-inner { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  .home-project-grid { grid-template-columns: 1fr; max-width: 600px; }
  .home-project-heading { flex-direction: column; align-items: start; max-width: 600px; gap: 16px; }
  .home-project-footnote { max-width: 600px; }
  .project-art { height: 220px; }
  .underveil-art img { object-fit: contain; }
}
@media (max-width: 460px) {
  .home-page .hero { padding-top: 94px; }
  .home-page .hero-type { gap: 14px; }
  .home-page .hero-cta-wrap { width: 100%; margin-top: 14px; }
  .home-actions .glass-btn { justify-content: center; }
  .home-project-footnote a { margin-left: 0; display: block; }
}
/* Services-first homepage (2026-10 refresh). */
.home-page .hero-question { font-size: clamp(2.1rem, 6.4vw, 4.25rem); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; color: var(--text); text-wrap: balance; }
.home-page .hero-question span { color: var(--accent-hi); }
.hero-offer { font-size: clamp(.7rem, 1.5vw, .8125rem); letter-spacing: .2em; text-transform: uppercase; color: var(--text-micro); line-height: 1.9; text-wrap: balance; }
.hero-project-note a { color: var(--accent-hi); text-underline-offset: 4px; }
.home-services { padding-bottom: 0; }
.service-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1160px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-tile a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px 22px 20px; border-radius: 8px; border: 1px solid var(--glass-border, rgba(183,168,255,.16)); background: rgba(255,255,255,.04); color: inherit; text-decoration: none; transition: background .2s, border-color .2s; }
.service-tile a:hover, .service-tile a:focus-visible { background: rgba(109,90,224,.10); border-color: rgba(183,168,255,.32); }
.service-tile h3 { font-size: 1.0625rem; font-weight: 450; color: var(--text); letter-spacing: .01em; }
.service-tile p { font-size: .875rem; line-height: 1.65; color: var(--text-secondary); flex: 1; }
.service-proof { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-hi); }
.squadron-shot-art { background: #0A0B14; }
.squadron-shot-art picture, .video-pair-art picture { display: block; width: 100%; height: 100%; }
.squadron-shot-art img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.video-pair-art { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #0A0B14; }
.video-pair-art img { width: 100%; height: 100%; object-fit: cover; }
.video-pair-art picture:first-child img { object-position: left center; }
.home-systems { padding-top: 0; }
.system-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1160px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.system-grid li { padding: 18px 0; border-top: 1px solid rgba(183,168,255,.12); }
.system-grid h3 { font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-hi); margin-bottom: 8px; }
.system-grid p { font-size: .875rem; line-height: 1.65; color: var(--text-secondary); }
.system-grid a { white-space: nowrap; }
.home-craft a { margin-left: 8px; }
@media (max-width: 850px) {
  .service-grid, .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; }
}
@media (max-width: 560px) {
  .service-grid, .system-grid { grid-template-columns: 1fr; }
  .service-tile a { padding: 18px; }
}
/* Comfortable tap targets for inline CTAs: the hit area grows, the line box does not. */
.b-alt a, .hero-project-note a, .system-grid a, .wk-cta-alt a, .note-capture figcaption a, .wk-lane-proof a { display: inline-block; padding: 12px 2px; margin: -12px 0; }
.wk-lane-proof a { margin: -12px 0 -12px -2px; }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin: -8px 0 24px; }
.contact-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; text-underline-offset: 4px; }
/* Navigation remains usable when JavaScript is unavailable. */
@media (max-width: 700px) {
  html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
  html:not(.js) .nav-links li { display: block; }
  html:not(.js) .nav-menu-btn { display: none; }
  html:not(.js) header nav { flex-wrap: wrap; }
}

/* ── Reduced-motion: disable mobile sheet transitions ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-sheet { transition: none; }
  .nav-burger, .nav-burger::before, .nav-burger::after { transition: none; }
}