/* =============================================================
   ESPIRITU CREATIVE
   Product-landing structure on a warm dark ground.
   Centered medium-weight headline → rounded photo stage with a
   floating card → two-tone statement → staggered photo cards →
   cream feature panel with hairline list → pill CTA bar.
   ============================================================= */

:root {
  --ground:   #0E0F10;   /* sampled off the reference: page #0E0F10, card #252628 */
  --ground-2: #252628;
  --cream:    #F4F5F6;
  --cream-2:  #E6E7EA;
  /* One blue, in two values — the pair swaps with --cream/--ink below, so
     --accent is always the one that reads on the page and --accent-ink the
     one that reads on the contrast surface, in either theme. */
  --accent:     #7BA4FF;
  --accent-ink: #1D4ED8;
  --blue-block: #2E52D4;   /* the colour-blocked tile */
  --blue-deep:  #131F3B;   /* the quiet navy tile */
  --blue-mid:   #93A3C4;   /* secondary text on it — cool, so it doesn't clash */
  --card-hover: #2C2D30;   /* cards carry no outline, so hover lifts the surface */
  --mint:       #A7F0E0;   /* the secondary accent — marks and small fills only */
  --mint-ink:   #00493F;   /* type on it */
  --focus:      var(--accent);

  --fg:       #F4F5F6;   /* on ground */
  --fg-mid:   #A6A7AC;
  --line:     rgba(237,238,240,.11);

  --ink:      #141519;   /* on cream */
  --ink-mid:  #5C5E64;
  --ink-line: rgba(20,21,25,.14);

  --danger:   #D2685C;
  /* the contact form sits on the contrast surface (cream here, dark in light
     mode) — its fields and its error colour have to flip with it */
  --field:       rgba(255,255,255,.6);
  --field-focus: #fff;
  --danger-ink:  #A83A2C;   /* on cream */
  --nav-bg:   rgba(23, 25, 28, .76);   /* the floating nav capsule */
  --stage-ring: none;                  /* the card needs an edge on a light page */

  --sans:  'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --fs-h1:   clamp(2.5rem, 6vw, 4.6rem);
  --fs-h2:   clamp(2rem, 4.4vw, 3.5rem);
  --fs-say:  clamp(1.9rem, 4.6vw, 3.8rem);
  --fs-body: 1rem;
  --fs-sm:   .9rem;
  --fs-xs:   .75rem;

  --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem;
  --s5: 2rem;  --s6: 3rem;   --s7: 4.5rem; --s8: 6.5rem;
  --sec-y: clamp(4rem, 8vw, 7rem);        /* was 10rem: 141px of section padding
                                             against an 18px card gap read broken */
  --card-pad: clamp(1.75rem, 3.6vw, 3.25rem);
  --tile-gap: clamp(.85rem, 1.3vw, 1.15rem);   /* deck tiles sit close together */
  --r-tile: clamp(10px, 1.1vw, 16px);
  --wrap: 1180px;
  --side: clamp(1rem, 3.5vw, 2.25rem);

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
}

/* Light mode. --ground/--fg are the page; --cream/--ink are the *contrast*
   surface (buttons, the process panel, the CTA bar), so both pairs swap —
   a filled button stays dark-on-light instead of vanishing into the page. */
:root[data-theme="light"] {
  --ground:   #FBFBFC;   /* near-white, a hair cool — the warm cream read as "off" */
  --ground-2: #F2F3F5;
  --fg:       #141519;
  --fg-mid:   #63656C;   /* neutral, so secondary text doesn't warm the white */
  --line:     rgba(20, 21, 25, .12);

  --cream:    #141519;
  --cream-2:  #212328;
  --ink:      #F6F7F8;
  --ink-mid:  #A2A4AA;
  --ink-line: rgba(246, 247, 248, .16);

  --accent:     #1D4ED8;
  --accent-ink: #7BA4FF;
  --blue-deep:  #E9EDFA;
  --card-hover: #F1F2F4;
  --mint:       #0E7A68;
  --mint-ink:   #EAFBF6;
  --blue-mid:   #5A6785;

  --danger:   #A83A2C;
  --field:       rgba(255,255,255,.08);
  --field-focus: rgba(255,255,255,.14);
  --danger-ink:  #F09A8A;   /* on the dark panel */
  --nav-bg:   rgba(255, 255, 255, .8);
  --stage-ring: 0 0 0 1px rgba(27, 25, 22, .10), 0 26px 60px -32px rgba(27, 25, 22, .5);
}

/* only the surfaces that change; the demo mock keeps its own palette */
body, .nav__in, .panel, .tile, .pill, .f input, .f textarea,
.foot__in, .idx li, .stage, .theme-btn {
  transition: background-color .35s ease, color .35s ease,
              border-color .35s ease, box-shadow .35s ease;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground); color: var(--fg);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* ---------- the field ----------
   One fixed element behind everything. Deliberately not a pattern: radial
   blooms read as decoration and column rules read as stripes. What is left
   is what actually gives a surface texture — a fine grain that lifts it off
   flat black, a broad wash from the top edge, and a corner fall-off. Felt
   rather than seen.

   Fixed, so it holds still while content travels past it and composites
   once instead of repainting per frame. No backdrop-filter: the hero card
   moves every frame and a blur behind it would be re-computed with it. */
.field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* one wide band off the top edge — a horizon, not a light source */
    linear-gradient(180deg, rgba(123,164,255,.075), rgba(123,164,255,.014) 28%, transparent 54%),
    /* vignette: the corners fall away, so the centre column carries the eye */
    radial-gradient(138% 104% at 50% 0%, transparent 46%, rgba(0,0,0,.62));
}
/* fractal noise generated inline — no image request, and it tiles seamlessly */
.field::after {
  content: ''; position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .field {
  background:
    linear-gradient(180deg, rgba(29,78,216,.055), rgba(29,78,216,.012) 28%, transparent 54%),
    /* .12 here measured the footer's secondary text at 4.21:1 — the vignette
       is fixed, so the footer sits under its darkest point. .07 keeps the
       corner fall-off and puts it back over AA. */
    radial-gradient(138% 104% at 50% 0%, transparent 46%, rgba(27,25,22,.07));
}
:root[data-theme="light"] .field::after { opacity: .04; }
@media print { .field { display: none; } }
@media (max-width: 400px) {
  /* brand + CTA + toggle don't fit one capsule here; the hero repeats the CTA just below */
  .nav .btn { display: none; }
  .nav__in { padding-right: 1rem; }
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: fixed; top: var(--s2); left: var(--s2); z-index: 40;
  background: var(--cream); color: var(--ink);
  padding: var(--s2) var(--s3); border-radius: 999px; font-weight: 600;
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--side); }


/* ---------- type ---------- */
h1, h2 { font-weight: 600; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }

h2 { font-size: var(--fs-h2); }
h3 { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.eyebrow {
  font-family: var(--serif); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--fg-mid);
}

/* photo treatment — the references use warm, slightly muted photography */
.tile__media img {
  filter: saturate(.86) sepia(.06) contrast(1.03);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  border-radius: 999px; padding: .85rem 1.45rem;
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: opacity .18s ease, background .18s ease;
}
.btn:hover { opacity: .85; }
.btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }
.btn--xs { padding: .5rem .95rem; font-size: .8rem; }
.btn--lg { padding: 1.1rem 1.9rem; font-size: 1.05rem; font-weight: 600; }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--dark  { background: var(--ink); color: var(--cream); }
.btn--ghost { background: transparent; color: var(--fg); border-color: rgba(240,235,225,.32); }
:root[data-theme="light"] .btn--ghost { border-color: rgba(27,25,22,.3); }   /* the cream hairline vanishes on white */
.btn--ghost:hover { border-color: var(--fg); opacity: 1; }

/* ---------- nav: one detached pill, same shape as the buttons ---------- */
.nav {
  position: sticky; top: 0; z-index: 30;
  /* the same box as .wrap, so the row spans exactly the hero card's initial
     width and the pill's left edge lines up with the card's */
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--side);
  display: flex; align-items: center;
  gap: var(--s2); padding-block: var(--s3);
  /* the bar itself is only a positioner — pointer-events off so the space
     either side of the pill doesn't swallow clicks meant for the hero */
  pointer-events: none;
}
.nav__in {
  pointer-events: auto;
  /* fills the row: brand at the left edge, links between, CTA at the right,
     with the theme toggle taking the remainder out to the card's right edge */
  flex: 1 1 auto; min-width: 0; justify-content: space-between;
  display: flex; align-items: center; gap: clamp(var(--s4), 3.2vw, var(--s6));
  padding: .5rem .5rem .5rem 1.6rem;
  /* the capsule also keeps the nav legible once the white stage expands
     and scrolls underneath it */
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 999px;
}

.brand {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap;
}
.brand svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.nav__links { display: flex; gap: var(--s4); }
.nav__links a {
  font-size: var(--fs-sm); color: var(--fg-mid); text-decoration: none; white-space: nowrap;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--fg); }

/* theme toggle — its own capsule, right of the nav pill */
.theme-btn {
  pointer-events: auto; flex: none;
  width: 46px; height: 46px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--nav-bg); color: var(--fg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  display: grid; place-items: center;
}
.theme-btn svg { width: 19px; height: 19px; grid-area: 1 / 1; }
.theme-btn:hover { color: var(--accent); }
/* the icon shows the action: sun = go light, moon = go back to dark */
.theme-btn .ico-moon { display: none; }
:root[data-theme="light"] .theme-btn .ico-sun { display: none; }
:root[data-theme="light"] .theme-btn .ico-moon { display: block; }

/* ---------- hero ---------- */
.hero { padding-top: clamp(3rem, 8vw, 6rem); }
/* the eyebrow as a badge capsule, the way the reference sets its rating pill */
.eyebrow--badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem 1rem .42rem .8rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--ground-2);
  letter-spacing: .12em;
}
.eyebrow--badge svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.hero__text { text-align: center; display: grid; justify-items: center; gap: var(--s3); margin-bottom: clamp(2rem, 4vw, 3rem); }
.hero .sub { color: var(--fg-mid); max-width: 52ch; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s1); }

.stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 21 / 10; background: var(--ground-2);
}
.stage > img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.stage--demo { aspect-ratio: 16 / 9; }

/* scroll-driven settle: main.js sets --p (0→1) and --g (the px the card may
   grow on each side — capped small, so this is a settle rather than the old
   near-full-bleed expansion). --g defaults to 0, so a no-js or reduced-motion
   visitor gets the card at its natural width. Never pinned — the card scrolls
   with the page throughout, and the corner radius is held the whole way. */
.expand { position: relative; }
.expand__stick { position: relative; z-index: 1; }
.hero-rail {
  --p: 0; --g: 0px;
  position: relative;
  width: calc(100% + var(--g) * 2 * var(--p));
  margin-left: calc(-1 * var(--g) * var(--p));
}
/* the sizer alone holds the rail's height; the card fills it absolutely */
/* matches the 1440×854 design space, so cover-fit at zoom 1 crops nothing —
   with 16/9 the window chrome and the Send row were sliced off */
.rail-sizer { width: 100%; aspect-ratio: 1440 / 854; pointer-events: none; }

.stage--demo {
  position: absolute; inset: 0; width: auto; aspect-ratio: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--stage-ring);
}

.stage__pill {
  /* bottom-left: the top-left corner belongs to the window's traffic lights */
  position: absolute; bottom: var(--s4); left: var(--s4); z-index: 6;
  display: inline-flex; align-items: center; gap: .5rem;
  /* fixed colours: the chip sits on the wave, whose palette does not follow
     the page theme — var(--fg) would flip it dark-on-dark */
  /* solid, no backdrop-filter: the card resizes on every scroll frame and a
     blur here would be re-computed on every one of them */
  background: rgba(15,14,12,.82); color: #F0EBE1;
  border-radius: 999px; padding: .5rem .95rem; font-size: .8rem; font-weight: 500;
}
.stage__pill i { width: 8px; height: 8px; border-radius: 50%; background: #7BA4FF; }

/* pause / play for the walkthrough (WCAG 2.2.2: moving content > 5s) */
.stage__ctl {
  /* top-right: the top-left corner belongs to the window's traffic lights */
  position: absolute; right: var(--s4); top: var(--s4); z-index: 6;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(15,14,12,.82); color: #F0EBE1;   /* also on the demo card; no blur, see .stage__pill */
  display: grid; place-items: center;
}
.stage__ctl[hidden] { display: none; }   /* the class sets display:grid, which outranks [hidden] */
.stage__ctl svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.stage__ctl .ico-play { display: none; }
.stage__ctl[aria-pressed="true"] .ico-pause { display: none; }
.stage__ctl[aria-pressed="true"] .ico-play { display: block; }
.stage__ctl:hover { background: rgba(15,14,12,.9); }



/* =============================================================
   DEMO STAGE — the shared rig layers under every interface walkthrough
   (assets/js/demo-rig.js): the fit/cam transform pair, the window chrome,
   the scripted cursor and the kinetic type cards. Everything inside
   .screen is laid out in a fixed 1440×854 design space (44px of chrome +
   810px of page); the camera scales the whole thing. The mocks
   themselves live in their own blocks: NOOK below, PILLAR in
   demos/pillar/pillar.css.
   ============================================================= */
.demo { position: absolute; inset: 0; overflow: hidden; background: #F5F7FA; }
/* two layers: .fit carries the stage-size scale (updated instantly on
   resize/expansion), .cam carries the eased framing in design units */
.fit, .cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.screen {
  position: relative; width: 1440px; height: 854px;   /* 810 page + 44 chrome */
  font-family: var(--sans); font-weight: 600; line-height: 1.15;
  color: #0B2545; background: #F5F7FA; overflow: hidden;
}

.chrome {
  position: absolute; left: 0; right: 0; top: 0; height: 44px;
  background: #E9E9E6; border-bottom: 1px solid rgba(0,0,0,.09);
  display: flex; align-items: center; gap: 9px; padding-left: 19px;
}
.dot { width: 13px; height: 13px; border-radius: 50%; display: block; }
.dot--r { background: #FF5F57; } .dot--y { background: #FEBC2E; } .dot--g { background: #28C840; }

/* =============================================================
   CNAW2 — the program view, rebuilt as DOM and driven by
   assets/js/demo-cnaw.js. Laid out from a screenshot of the real thing:
   icon rail | radar map with its transport bar | a right column split
   between the program monitor and the catalog. Palette and radii are the
   product's own (bg #000, panels #131315/#242427, ink #f5f5f7, muted
   #98989f, hairline rgba(255,255,255,.09), accent #F5C518), and the
   reflectivity ramp is NEXRAD N0Q — the ramp the product itself picked
   over q2, because q2 renders light returns blue and buries storm cores.
   None of it is part of the site system.
   ============================================================= */
.cw {
  --panel: #131315; --panel2: #242427; --ink: #f5f5f7; --muted: #98989f;
  --cline: rgba(255,255,255,.09); --acc: #F5C518; --red: #E11900; --warn: #FF6A2B;
  --gold: #F0B429; --folder: #4C8DF6;
  position: absolute; inset: 44px 0 0 0; background: #000; color: var(--ink);
  font-family: var(--sans); font-weight: 500; line-height: 1.2;
  display: grid; grid-template-columns: 56px 1fr 680px;
}
.cw b { font-weight: 700; }

/* ---- icon rail ---- */
.cw__rail { background: #0d0d0f; border-right: 1px solid var(--cline);
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0; }
.cw__logo { width: 30px; height: 30px; border-radius: 9px; background: var(--acc); color: #000;
  display: grid; place-items: center; margin-bottom: 8px; }
.cw__logo svg { width: 15px; height: 15px; fill: currentColor; }
.cw__ico { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  color: #6b6b72; transition: background .2s ease, color .2s ease; }
.cw__ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cw__ico.is-on { background: rgba(245,197,24,.14); color: var(--acc); }
.cw__rail-b { margin-top: auto; display: grid; gap: 3px; justify-items: center; }
.cw__mute { width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: #000; display: grid; place-items: center; margin-top: 8px; }
.cw__mute svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the radar map ---- */
.cw__map { position: relative; background: #000; overflow: hidden; }
.cw__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw__age { position: absolute; top: 10px; left: 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; color: var(--muted); }
.cw__3d { position: absolute; right: 14px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(30,30,34,.9); display: grid; place-items: center; font-size: 11px; font-weight: 800; }

/* the transport bar */
.cw__trans { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; background: rgba(20,20,23,.94);
  border-radius: 999px; padding: 9px 14px; }
.cw__tbtn { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink); }
.cw__tbtn svg { width: 14px; height: 14px; fill: currentColor; }
.cw__scrub { position: relative; width: 190px; height: 4px; border-radius: 2px; background: #3a3a3f; }
.cw__handle { position: absolute; top: 50%; left: 62%; width: 13px; height: 13px; border-radius: 50%;
  background: var(--acc); transform: translate(-50%, -50%); }
.cw__time { text-align: center; line-height: 1.05; }
.cw__time b { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cw__time span { display: block; font-size: 10px; color: var(--muted); }
.cw__pill { font-size: 12px; font-weight: 700; background: #2a2a2e; border-radius: 8px; padding: 6px 12px; }
.cw__pill.is-live { background: #2a2a2e; }

/* ---- right column ---- */
.cw__right { display: grid; grid-template-rows: 448px 1fr; border-left: 1px solid var(--cline); background: #0d0d0f; }

/* the program monitor */
.cw__prog { display: grid; grid-template-rows: 34px 1fr; background: #0d0d0f; }
.cw__onair { display: flex; align-items: center; padding: 0 14px; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.cw__onair i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 8px; font-style: normal;
  animation: cwPulse 1.5s ease-in-out infinite; }
.cw__onair em { margin-left: auto; font-style: normal; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
@keyframes cwPulse { 50% { opacity: .2; } }

/* the graphic being built, on a sky plate */
.cw__gfx { position: relative; margin: 10px 14px 14px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #8FC3E8 0%, #B9D9EE 42%, #DDEAF3 72%, #C9D8E4 100%); }
.cw__gfx::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(52% 34% at 22% 74%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
              radial-gradient(40% 26% at 74% 22%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%); }
.cw__card { position: absolute; inset: 8% 6%; display: grid; grid-template-rows: auto auto 1fr;
  opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.cw.is-gfx .cw__card { opacity: 1; transform: none; }
.cw__band { background: #fff; display: flex; align-items: center; gap: 14px; padding: 7px 12px; }
.cw__band-logo { font-size: 15px; font-weight: 800; font-style: italic; letter-spacing: -.04em; color: #111; }
.cw__band-t { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #111; }
.cw__mkt { background: var(--gold); color: #111; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 5px 12px; width: 62%; }
.cw__body { position: relative; display: grid; grid-template-columns: 30% 1fr; }
.cw__key { background: #00E000; }
.cw__plate { background: linear-gradient(170deg, #D9AE79 0%, #9FB98C 38%, #6E8F63 100%); position: relative; }
.cw__plate::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(90,120,80,.5), rgba(70,100,70,.2) 40%, rgba(120,140,110,.35));
}
.cw__days { position: absolute; left: 34%; right: 6%; top: 12%; bottom: 12%; display: flex; align-items: center; justify-content: center; gap: 5px; }
.cw__day {
  flex: 1; max-width: 62px; background: linear-gradient(180deg, #2E7FD4, #1F5FB0); color: #fff;
  border-radius: 2px; padding: 8px 4px; text-align: center;
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.cw__day.is-in { opacity: 1; transform: none; }
.cw__day.is-hero { transform: scale(1.14); z-index: 2; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.cw__day.is-in.is-hero { transform: scale(1.14); }
.cw__hi { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cw__lo { font-size: 11px; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; }
.cw__sun { width: 20px; height: 20px; margin: 5px auto 3px; }
.cw__sun svg { width: 100%; height: 100%; fill: none; stroke: var(--acc); stroke-width: 2.2; stroke-linecap: round; }
.cw__cond { font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.cw__abbr { font-size: 10px; font-weight: 800; background: rgba(255,255,255,.16); border-radius: 2px; margin-top: 4px; padding: 2px 0; }
.cw__tag { position: absolute; right: 0; bottom: 0; background: #111; color: #fff; font-size: 11px; font-weight: 800; font-style: italic; letter-spacing: -.03em; padding: 4px 10px; }

/* ---- the catalog ---- */
.cw__cat { border-top: 1px solid var(--cline); display: grid; grid-template-rows: 34px 1fr; background: #141416; }
.cw__cat-hd { display: flex; align-items: center; padding: 0 14px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.cw__cat-hd span { margin-left: auto; display: flex; gap: 8px; color: #6b6b72; }
.cw__cat-hd svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cw__cat-in { display: grid; grid-template-columns: 118px 1fr; overflow: hidden; }
.cw__lib { padding: 4px 10px; border-right: 1px solid var(--cline); }
.cw__lib-h { font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #6b6b72; margin: 6px 4px; }
.cw__lib li { display: flex; align-items: center; gap: 7px; padding: 5px 6px; border-radius: 6px; font-size: 11px; color: #c9c9cf; white-space: nowrap; }
.cw__lib li.is-on { background: var(--panel2); color: var(--ink); }
.cw__lib i { width: 12px; height: 9px; border-radius: 2px; background: var(--folder); font-style: normal; flex: none; }
.cw__files { padding: 8px 14px; overflow: hidden; }
.cw__files h4 { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.cw__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cw__f { text-align: center; border-radius: 7px; padding: 5px 2px; transition: background .2s ease; }
.cw__f.is-on { background: rgba(76,141,246,.16); }
.cw__f-ic { width: 42px; height: 32px; margin: 0 auto 5px; border-radius: 4px 4px 5px 5px;
  background: linear-gradient(180deg, #5D9BF8, #3F7FE6); position: relative; }
.cw__f-ic::before { content: ''; position: absolute; left: 3px; top: -4px; width: 16px; height: 5px; border-radius: 2px 2px 0 0; background: #5D9BF8; }
.cw__f--new .cw__f-ic { background: linear-gradient(180deg, #2C4E86, #24406E); }
.cw__f--new .cw__f-ic::before { background: #2C4E86; }
.cw__f b { display: block; font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw__f span { font-size: 9px; color: var(--folder); }

@media (prefers-reduced-motion: reduce) {
  .cw__onair i { animation: none; }
  .cw *, .cw__card, .cw__day { transition: none !important; }
}

/* the mouse cursor and the HUD chip get out of the way while the camera
   follows the caret */
.demo.is-typing .cursor { opacity: 0; }
.demo.is-typing ~ .stage__pill { opacity: 0; }
.stage__pill { transition: opacity .3s ease; }

/* --- kinetic type cards --- */
.kt { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; visibility: hidden; }
.kt.is-in { opacity: 1; visibility: visible; }
.kt__scrim { position: absolute; inset: 0; background: rgba(246,248,251,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .28s ease; }
.kt.is-in .kt__scrim { opacity: 1; }
.kt.is-out .kt__scrim { opacity: 0; transition-delay: .08s; }
.kt__body { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 0 120px; color: #0B2545; }
.kt__t { font-size: 104px; font-weight: 800; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.kt__t span { display: inline-block; opacity: 0; transform: translateY(30px) scale(.94); }
.kt__t em { font-style: normal; color: #1A73E8; }
.kt.is-in  .kt__t span { animation: ktIn .55s cubic-bezier(.16,1,.3,1) forwards; }
.kt.is-out .kt__t span { animation: ktOut .26s cubic-bezier(.4,0,.8,.6) forwards; animation-delay: 0ms !important; }
.kt__num { opacity: 0; transform: scale(.9); }
.kt.is-in  .kt__num { animation: ktIn .5s cubic-bezier(.16,1,.3,1) forwards; }
.kt.is-out .kt__num { animation: ktOut .26s cubic-bezier(.4,0,.8,.6) forwards; }
.kt__n { font-size: 220px; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: #1A73E8; font-variant-numeric: tabular-nums; }
.kt__c { font-size: 34px; font-weight: 600; color: #5B6B7C; margin-top: 8px; }
@keyframes ktIn  { to { opacity: 1; transform: none; } }
@keyframes ktOut { to { opacity: 0; transform: translateY(-16px) scale(1.04); } }
/* the Glide-style card: aurora bands over a blue field, thin arcs, grain, white type */
.kt__aur, .kt__lines, .kt__grain { display: none; }
.kt--glide .kt__scrim {
  background:
    radial-gradient(60% 55% at 22% 72%, rgba(244,114,182,.78), rgba(244,114,182,0) 62%),
    radial-gradient(48% 42% at 78% 30%, rgba(103,232,249,.75), rgba(103,232,249,0) 62%),
    radial-gradient(42% 38% at 62% 88%, rgba(74,222,128,.55), rgba(74,222,128,0) 62%),
    radial-gradient(70% 60% at 42% 18%, rgba(147,197,253,.85), rgba(147,197,253,0) 66%),
    linear-gradient(118deg, #0B3FBF 0%, #1E63FF 46%, #2F7DF7 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.kt--glide .kt__aur {
  display: block; position: absolute; inset: -12%; opacity: 0; transition: opacity .28s ease;
  background:
    radial-gradient(38% 30% at 30% 62%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(30% 26% at 70% 40%, rgba(236,72,153,.55), rgba(236,72,153,0) 60%),
    radial-gradient(34% 28% at 55% 78%, rgba(34,211,238,.6), rgba(34,211,238,0) 60%);
  /* no filter, no blend mode, no drift animation: the gradients are already
     soft, and a blurred, screen-blended, transform-animated layer was
     re-composited at ~25ms a frame over the dashboard */
}
.kt--glide .kt__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .28s ease; }
.kt--glide .kt__lines path { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1.4; }
.kt--glide .kt__grain {
  display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .28s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.kt--glide .kt__t { color: #fff; text-shadow: 0 2px 10px rgba(11,63,191,.35); }   /* the 44px glow cost a frame every ~7 */
.kt--glide .kt__t em { color: #E6FBFF; }
.kt.is-in .kt__aur, .kt.is-in .kt__lines { opacity: 1; }
.kt.is-in .kt__grain { opacity: .28; }
/* must follow the is-in rules: equal specificity, source order decides */
.kt.is-out .kt__aur, .kt.is-out .kt__lines, .kt.is-out .kt__grain { opacity: 0; transition-delay: .08s; }

/* the CNAW card: the product's own black and yellow, with a faint sweep
   behind it rather than the aurora, which belongs to a different product */
.kt--cnaw .kt__scrim {
  background:
    radial-gradient(58% 70% at 50% 52%, rgba(245,197,24,.14), rgba(245,197,24,0) 68%),
    #08080a;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.kt--cnaw .kt__aur {
  display: block; position: absolute; inset: -10%; opacity: 0; transition: opacity .28s ease;
  background:
    conic-gradient(from 200deg at 50% 50%, rgba(245,197,24,.22), rgba(245,197,24,0) 22%),
    radial-gradient(40% 40% at 50% 50%, rgba(255,45,26,.16), rgba(255,45,26,0) 70%);
  animation: cnawSweep 6s linear infinite;
}
@keyframes cnawSweep { to { transform: rotate(360deg); } }
.kt--cnaw .kt__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .28s ease; }
.kt--cnaw .kt__lines path { fill: none; stroke: rgba(245,197,24,.22); stroke-width: 1.2; }
.kt--cnaw .kt__grain { display: none; }
.kt--cnaw .kt__t { color: #f5f5f7; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.kt--cnaw .kt__t em { color: #F5C518; }

/* a tall stage sees a 683px-wide column of the 1440px screen: keep the type inside it */
.demo.is-portrait .kt__body { padding: 0 420px; }
.demo.is-portrait .kt__t { font-size: 72px; }
.demo.is-portrait .kt__n { font-size: 170px; }
.demo.is-portrait .kt__c { font-size: 28px; }
/* the cursor ducks under the type cards */
.kt.is-in ~ .cursor { opacity: 0; }

/* --- the cursor --- */
.cursor {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px;
  transform: translate(760px, 514px); will-change: transform;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  z-index: 7; pointer-events: none;
  transition: opacity .2s ease;   /* position is driven per-frame by the rig, never transitioned */
}
.cursor svg { width: 100%; height: 100%; }
.cursor::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px;
  border-radius: 50%; border: 2px solid rgba(26,115,232,.7); opacity: 0; transform: scale(.4);
}
.cursor.is-click::after { animation: ripple .55s cubic-bezier(.16,1,.3,1) forwards; }
.cursor.is-click svg { animation: press .22s ease; }
@keyframes ripple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes press  { 50% { transform: scale(.85); } }

/* --- lifecycle --- */
.demo.is-static .cursor, .demo.is-static .kt { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cursor, .kt { display: none; }
  .kt__aur { animation: none !important; }
}

/* =============================================================
   BELOW THE HERO — a deck of rounded panels and bento tiles on the same
   tokens. Big padding, big radius, big type; the rhythm is --sec-y.
   ============================================================= */

/* ---------- logos: products & clients, monochrome, right under the card ----------
   Every mark ships in its native colours; CSS makes them monochrome so the row
   reads as one set. --ink marks (dark artwork on transparent) go white on the
   dark page and black on the light one; --grey marks (multi-colour badges)
   desaturate. Bethesda ships two files because inverting it would erase the
   cross inside its circle. */
.logos { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.logos__title { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.logos__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.25rem, 3.5vw, 2.5rem) clamp(2rem, 5vw, 4.5rem);
}
.logos__row li { display: flex; align-items: center; gap: .6rem; opacity: .68; transition: opacity .25s ease; }
.logos__row li:hover { opacity: 1; }
.logo { height: var(--h, 30px); width: auto; display: block; }
.logo--ink { filter: brightness(0) invert(1); }
:root[data-theme="light"] .logo--ink { filter: brightness(0); }
.logo--grey { filter: grayscale(1) brightness(1.35); }
:root[data-theme="light"] .logo--grey { filter: grayscale(1) brightness(.55); }
.logo--light-only { display: none; }
:root[data-theme="light"] .logo--dark-only { display: none; }
:root[data-theme="light"] .logo--light-only { display: block; }
.logos__lockup span { font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
/* LMJ has no logo file: a typeset wordmark in the same voice */
.logos__lmj { display: grid; line-height: 1; gap: .2rem; }
.logos__lmj b { font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; }
.logos__lmj small { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mid); font-weight: 600; }

/* ---------- statement ---------- */
.statement { padding-block: var(--sec-y); }
.statement p {
  max-width: 24ch; margin-inline: auto; text-align: center;
  font-size: var(--fs-say); font-weight: 600; letter-spacing: -.035em; line-height: 1.08;
}
.statement .dim { color: var(--fg-mid); font-weight: 500; }

/* ---------- section scaffolding ---------- */
.section { padding-block: var(--sec-y); }
.sec-head { display: grid; gap: var(--s3); max-width: 46rem; margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
.sec-head h2 { max-width: 20ch; }   /* ch of the h2 itself, so ~2 lines at any size */
.lede { color: var(--fg-mid); font-size: 1.05rem; max-width: 40ch; }

/* =============================================================
   DECK SYSTEM — rounded panels, bento tiles, pill rows, big index
   numbers. Two surfaces: the page default (dark) and --cream, which
   the light theme swaps back automatically.
   ============================================================= */

/* the slide-like container */
.panel {
  background: var(--ground-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--card-pad);
  position: relative;
}
.panel--cream { background: var(--cream); color: var(--ink); border-color: transparent; }
.panel--cream .eyebrow, .panel--cream .lede, .panel--cream p { color: var(--ink-mid); }
.panel__head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end; gap: var(--s5); margin-bottom: clamp(1.75rem, 3.4vw, 3rem);
}
.panel__head .eyebrow { display: block; margin-bottom: var(--s3); }

/* the small breadcrumb line that closes a panel, as on a deck slide */
.meta {
  display: flex; align-items: center; gap: .55rem; margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mid);
}
.meta span { color: var(--accent); font-weight: 600; }
.meta i { font-style: normal; opacity: .5; }
.panel--cream .meta { color: var(--ink-mid); }
.panel--cream .meta span, .tile--cream .meta span { color: var(--accent-ink); }

/* pills */
.pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  border: 1px solid var(--line); color: var(--fg-mid);
  border-radius: 999px; padding: .4rem .9rem; font-size: .78rem; font-weight: 500; white-space: nowrap;
}
.pill--on { background: var(--ink); border-color: transparent; color: var(--cream); }
.pillrow { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.pillrow li { display: flex; }

/* ---------- connected: an artwork bento ----------
   The reference's shape: a two-column head (heading left, one short line of
   copy right), then cards that are half artwork. The art is the point — each
   panel is an inline SVG of gradients and flat shapes, so it scales, themes
   nothing, weighs almost nothing and needs no image request. Its palette is
   deliberately outside the site's tokens the way the hero photograph is:
   artwork, not chrome. */
.section--conn { padding-block: var(--sec-y); }
.conn__head {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--tile-gap); align-items: start;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}
.conn__head h2 { grid-column: span 3; }
.conn__head .lede { grid-column: 4 / -1; }
.conn__head h2 { font-size: var(--fs-h2); }
.conn__head .lede { color: var(--fg-mid); max-width: 34ch; }

/* six tracks so one grid gives three rhythms: the lead card full width,
   two artwork cards at a half each, three compact cards at a third */
.conn__bento { --conn-pad: clamp(1.25rem, 2.1vw, 1.7rem);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tile-gap); }
.conn__card { grid-column: span 3; }        /* the two artwork cards */
.conn__card--sm { grid-column: span 3; }   /* two remain, so they split the row */
.conn__card {
  display: flex; flex-direction: column; overflow: hidden;
  /* no outline — the surface alone separates the card from the page, at the
     reference's own two tones (page #0E0F10, card #252628) */
  background: var(--ground-2); border-radius: var(--r-tile);
  transition: background-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.conn__card:hover { transform: translateY(-3px); background: var(--card-hover); }
.conn__body { display: flex; flex-direction: column; gap: .5rem; padding: var(--conn-pad); }
.conn__tag { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--fg-mid); }
.conn__card h3 { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.14; }
.conn__card p { color: var(--fg-mid); font-size: var(--fs-sm); }

/* the artwork panel: full-bleed to the card's edges on its own side */
.conn__art { position: relative; overflow: hidden; background: var(--ground); }
.conn__art svg { display: block; width: 100%; height: 100%; }

/* the lead card runs the art down one half and the copy down the other */
.conn__card--wide {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: calc(50% - var(--tile-gap) / 2) minmax(0, 1fr);
  align-items: stretch;
}
.conn__card--wide .conn__art { min-width: 0; aspect-ratio: 5 / 4; }
.conn__card--wide .conn__body {
  min-width: 0; justify-content: center; gap: .6rem;
  padding: var(--conn-pad); padding-left: calc(var(--conn-pad) + var(--tile-gap));
}
.conn__card--wide h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
/* the two beside it stack art over copy */
.conn__card:not(.conn__card--wide):not(.conn__card--sm) .conn__art { aspect-ratio: 16 / 9; }
/* the copy half of those two runs longer than its content needs, so the art
   sits on a deep base rather than a caption strip */
.conn__card:not(.conn__card--wide):not(.conn__card--sm) .conn__body {
  min-height: clamp(150px, 12vw, 190px);
}

/* the remaining three are compact: an icon chip instead of an art panel */
.conn__card--sm { padding: var(--conn-pad); gap: .85rem; }
.conn__card--sm .conn__body { padding: 0; gap: .4rem; }
.conn__card--sm h3 { font-size: clamp(1.02rem, 1.35vw, 1.15rem); }
.conn__ico {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(167,240,224,.12); color: var(--mint);
}
.conn__ico svg { width: 18px; height: 18px; }

/* ---------- bento ----------
   No photography here: every tile carries type, a spec list or a colour
   block. Photos of churches and storms illustrated the words rather than
   showing the work, so they were pulling the section toward stock. */
.bento {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--tile-gap);
}
.tile {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--ground-2); border: 1px solid var(--line);
  border-radius: var(--r-tile); padding: clamp(1.5rem, 2.6vw, 2.25rem);
  min-height: clamp(170px, 15vw, 200px);   /* a floor, not a height — tiles with a
                                              spec list grow past it on their own */
  transition: border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.tile:hover { transform: translateY(-3px); border-color: rgba(240,235,225,.26); }
.tile h3 { font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; }
.tile p { color: var(--fg-mid); font-size: var(--fs-sm); }
.tile__copy { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }

/* a spec sheet reads as evidence where a stock photo read as decoration */
.spec { display: grid; align-content: start; margin-top: auto; }
.spec li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: .6rem; border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.spec li:last-child { border-bottom: 1px solid var(--line); }
.spec b { font-weight: 500; }
.spec span { color: var(--fg-mid); text-align: right; }

.tile--wide { grid-column: span 2; flex-direction: row; align-items: stretch; gap: clamp(1.5rem, 3.4vw, 3rem); }
.tile--wide > * { flex: 1 1 0; min-width: 0; }
.tile--wide .tile__copy { justify-content: center; }
.tile--wide h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
.tile--wide .spec { align-content: center; margin-top: 0; }
.tile--span2 { grid-column: span 2; }

.tile--cream { background: var(--cream); color: var(--ink); border-color: transparent; }
.tile--cream p, .tile--cream .spec span { color: var(--ink-mid); }
.tile--cream .pill { border-color: var(--ink-line); color: var(--ink-mid); }
.tile--cream .spec li { border-color: var(--ink-line); }
.tile--cream:hover { border-color: transparent; }

/* the colour-blocked tile */
.tile--accent {
  background: var(--blue-block); border-color: transparent; color: #F2F5FF;
  justify-content: space-between;
}
.tile--accent h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.tile--accent .pill--on { background: rgba(255,255,255,.14); color: #FFF; }
/* the label pill on a colour block: solid, so it doesn't read as one more tag */
.tile--accent .pill--lead { background: #FFF; color: var(--blue-block); border-color: transparent; font-weight: 600; }
.tile--accent:hover { border-color: transparent; }

/* the quiet navy: the same blue three steps down, so the section reads as
   one hue at two depths rather than an accent dropped onto neutral cards */
.tile--blue { background: var(--blue-deep); border-color: rgba(123,164,255,.22); }
.tile--blue:hover { border-color: rgba(123,164,255,.42); }
.tile--blue .spec li { border-color: rgba(123,164,255,.2); }
.tile--blue p, .tile--blue .spec span, .tile--blue .pill { color: var(--blue-mid); }
.tile--blue .pill { border-color: rgba(123,164,255,.3); }

/* ---------- big index rows ---------- */
.idx { display: grid; }
.idx li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.2vw, 1.75rem); border-top: 1px solid var(--line);
}
.idx li:last-child { border-bottom: 1px solid var(--line); }
.idx__n {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums; min-width: 2.2ch;
}
.idx__body h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; }
.idx__body p { color: var(--fg-mid); font-size: var(--fs-sm); margin-top: .35rem; max-width: 52ch; }
.idx__tag { align-self: center; }

/* ---------- services grid ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tile-gap); }
.tile__k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; color: var(--accent); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__side { display: grid; gap: var(--s3); align-content: start; }
.contact__side h2 { max-width: 14ch; }
.contact__mail { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--accent-ink); justify-self: start; }
.form { display: grid; gap: var(--s3); }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.f { display: grid; gap: .45rem; }
.f label { font-size: var(--fs-xs); color: var(--ink-mid); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.f input, .f textarea {
  background: var(--field); color: var(--ink);
  border: 1px solid var(--ink-line); border-radius: var(--r-sm);
  padding: .9rem 1.05rem; resize: vertical; font-size: 1rem;
}
.f input:focus, .f textarea:focus { border-color: var(--ink); outline: none; background: var(--field-focus); }
.f input:user-invalid, .f textarea:user-invalid { border-color: var(--danger-ink); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.note { font-size: var(--fs-sm); color: var(--ink-mid); }
.note.err { color: var(--danger-ink); font-weight: 600; }
.note.ok { color: var(--ink); font-weight: 600; }
.contact .meta { grid-column: 1 / -1; }

/* ---------- footer ---------- */
.foot__in {
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--fg-mid);
}
.foot__links { display: flex; gap: var(--s4); }
.foot__links a { text-decoration: none; color: var(--fg-mid); }
.foot__links a:hover { color: var(--fg); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .panel__head { grid-template-columns: 1fr; align-items: start; }
  .conn__head { grid-template-columns: 1fr; gap: var(--s3); }
  .conn__head h2, .conn__head .lede { grid-column: 1 / -1; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--wide { grid-column: 1 / -1; flex-direction: column; }
  .tile--wide .spec { align-content: start; }
  .tile--span2 { grid-column: 1 / -1; }
  .idx li { grid-template-columns: auto minmax(0, 1fr); }
  .idx__tag { display: none; }          /* the row is the story; the tag is a desktop grace note */
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav__links { display: none; }
  /* the toggle is a sibling of the pill: budget it into the row so the pair
     can never exceed the viewport */
  /* with the links hidden a full-width pill would just be a lone brand, so
     below 640 the capsule goes back to hugging its content, centred */
  .nav { justify-content: center; }
  .nav__in { flex: 0 1 auto; min-width: 0; padding-left: 1rem; gap: var(--s3); }
  .brand { min-width: 0; }
  .brand span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .nav .btn { flex: none; }
  /* a tall stage on phones: the camera fills the height and crops the sides
     of the screen, so the zoomed shots stay legible. The aspect goes on the
     SIZER — it alone gives .hero-rail its height; the card is absolutely
     positioned (inset:0) and would otherwise grow past the rail and cover
     the section below it. */
  .rail-sizer { aspect-ratio: 4 / 5; }
  /* a tall stage leaves less room above the screen: tighten the frame */
  /* on the tall stage the top-left pill would sit over the menu the cursor is
     heading for; park it at the bottom instead */
  .stage__pill { bottom: var(--s3); left: var(--s3); font-size: .72rem; padding: .38rem .7rem; }
  .stage__ctl { right: var(--s3); top: var(--s3); width: 34px; height: 34px; }
  /* one card per row, and the split lead card has no room for two columns */
  .conn__card, .conn__card--sm { grid-column: 1 / -1; }
  .conn__card--wide { grid-template-columns: 1fr; }
  /* flex-basis:0 governs HEIGHT once the card stacks, which collapsed the art
     panel to nothing — the aspect-ratio only gets a say if flex lets go */
  .conn__card--wide .conn__art { flex: none; aspect-ratio: 16 / 10; }
  .bento { grid-template-columns: 1fr; }
  .tile--wide, .tile--span2 { grid-column: auto; }
  .tile { min-height: 0; }
  .grid2 { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .idx__n { font-size: 2rem; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
@media print {
  .nav, .form, .demo { display: none; }
  body { background: #fff; color: #000; }
}