/* =============================================================
   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 hero gradient ----------
   A mesh rather than a wash: six colour fields laid over a diagonal base,
   each one very large and very soft, and all of them overlapping so no
   single field is legible on its own. That overlap is what keeps it reading
   as a photograph of light instead of the discrete orbs an earlier pass
   produced — the orb look comes from small, high-alpha, well-separated
   blobs, so these are the opposite of all three.

   Its height is --glow-h, measured in main.js, because where the card sits
   depends on how the headline wraps. The mask fades the whole stack out by
   the card's midpoint, so it dissolves instead of ending on a seam. */
.glow {
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--glow-h, 68vh);
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 8% -14%,  rgba(124,92,255,.60), rgba(124,92,255,0) 62%),
    radial-gradient(110% 80% at 88% -8%,  rgba(58,142,255,.55), rgba(58,142,255,0) 60%),
    radial-gradient(95%  85% at 62% 26%,  rgba(46,196,224,.34), rgba(46,196,224,0) 62%),
    radial-gradient(105% 95% at 24% 46%,  rgba(150,72,220,.36), rgba(150,72,220,0) 66%),
    radial-gradient(120% 70% at 96% 58%,  rgba(232,104,168,.24), rgba(232,104,168,0) 64%),
    radial-gradient(140% 110% at 50% 4%,  rgba(30,40,140,.55),  rgba(30,40,140,0) 72%),
    linear-gradient(168deg, #2A2470 0%, #1E2B6E 34%, #16204A 62%, #0E0F10 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
/* the same field, dialled back for a near-white page */
:root[data-theme="light"] .glow {
  background:
    radial-gradient(120% 90% at 8% -14%,  rgba(124,92,255,.30), rgba(124,92,255,0) 62%),
    radial-gradient(110% 80% at 88% -8%,  rgba(58,142,255,.28), rgba(58,142,255,0) 60%),
    radial-gradient(95%  85% at 62% 26%,  rgba(46,196,224,.18), rgba(46,196,224,0) 62%),
    radial-gradient(105% 95% at 24% 46%,  rgba(150,72,220,.16), rgba(150,72,220,0) 66%),
    radial-gradient(120% 70% at 96% 58%,  rgba(232,104,168,.14), rgba(232,104,168,0) 64%),
    linear-gradient(168deg, #C7CBF2 0%, #D4DCF4 40%, #E7ECF7 70%, rgba(251,251,252,0) 100%);
}
/* grain over the mesh: without it the blends band on 8-bit displays, and the
   tooth is most of what sells it as an image rather than a CSS gradient */
.glow::after {
  content: ''; position: absolute; inset: 0; opacity: .11;
  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='.85' 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");
}

/* ---------- 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 */
    /* 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:
    /* .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); }
/* the mesh is far brighter than the flat ground --fg-mid was tuned against:
   the sub measured 3.16:1 on it in dark and 3.51:1 in light. On the gradient
   the hero copy gets its own value; the rest of the page keeps the token. */
.hero .sub { color: rgba(255,255,255,.88); max-width: 52ch; }
:root[data-theme="light"] .hero .sub { color: rgba(20,21,25,.78); }
.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; }

/* ---------- the hero box: pitch an idea ----------
   One surface, not three. It used to be a slab holding a bordered textarea
   holding bordered pill inputs — a box inside a box inside a box, and it
   punched a hole in the gradient behind it. Now the panel is translucent so
   the mesh reads through, the textarea is the panel (no fill, no border of
   its own), and the two inputs carry a faint tint instead of an outline.
   No ring on the panel either: the tone difference alone separates it. */
:root {
  --pitch-bg:    rgba(10, 11, 20, .62);
  --pitch-field: rgba(255, 255, 255, .07);
  --pitch-focus: rgba(255, 255, 255, .13);
}
:root[data-theme="light"] {
  --pitch-bg:    rgba(255, 255, 255, .78);
  --pitch-field: rgba(20, 21, 25, .055);
  --pitch-focus: rgba(20, 21, 25, .1);
}

.pitch {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  gap: clamp(.9rem, 2vw, 1.4rem);
  background: var(--pitch-bg); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.6vw, 3rem);
}
.pitch__lab {
  font-size: clamp(1.05rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -.025em;
}
.pitch__area {
  flex: 1; min-height: 0; resize: none;
  background: none; border: 0; padding: 0; color: var(--fg);
  font: inherit; font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.5;
}
.pitch__area::placeholder { color: var(--fg-mid); }
.pitch__area:focus { outline: none; }
.pitch__row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; }
.pitch__f { flex: 1 1 190px; min-width: 0; display: flex; }
.pitch__f input {
  flex: 1; min-width: 0;
  background: var(--pitch-field); color: var(--fg);
  border: 0; border-radius: 999px;
  padding: 1rem 1.35rem; font: inherit; font-size: var(--fs-sm);
  transition: background-color .2s ease;
}
.pitch__f input::placeholder { color: var(--fg-mid); }
.pitch__f input:focus { outline: none; background: var(--pitch-focus); }
.pitch__f input:user-invalid { box-shadow: inset 0 0 0 1.5px var(--danger); }
.pitch__go { flex: 0 0 auto; justify-content: center; }
.pitch__note { font-size: var(--fs-sm); color: var(--fg-mid); }
.pitch__note.ok  { color: var(--fg); font-weight: 600; }
.pitch__note.err { color: var(--danger); font-weight: 600; }

@media (max-width: 640px) {
  .pitch { position: static; inset: auto; }
  .pitch__area { min-height: 180px; }
  .pitch__go { flex: 1 1 100%; }
}

/* 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 / 780; 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; }

/* 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. */
  /* on a phone the box sizes itself from its content instead of the rail */
  .rail-sizer { display: none; }
  /* 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; }
}