/* ============================================================================
   305 WEB WORKS — "MIAMI DUSK"
   One consistent deep-dusk navy page, the bay-skyline photo as a cinematic
   hero with a typographic title sequence, teal as the single interactive
   accent, warm amber in small doses, the five builds presented as one reel,
   the Switchboard console, and a text-message motif that carries from the
   demo to the contact composer.

   Honesty rules unchanged: no invented numbers, no fake clients, links only
   where a real site exists.

   One stylesheet, written top to bottom. Change rules in place — never append
   a fix pass below.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:       #0A0D1F;                    /* the page — midnight violet-navy, the hour the signs come on */
  --bg-2:     #0F1430;                    /* cards, consoles */
  --glass:    rgba(255, 255, 255, .035);  /* glass panel fill */
  --text:     #ECF2F8;
  --text-2:   #9AACC0;
  --teal:     #3EF0E4;                    /* Miami neon cyan — the color the signs are, links, labels, live things */
  --teal-fill:#2BE3D6;                    /* button fill */
  --teal-ink: #032A28;                    /* text on teal */
  --neon-core:#F2FFFD;                    /* the white-hot center of a lit tube */
  --neon-hi:  #9CFBF3;                    /* the pale band just outside the core */
  --pink:     #FF4FA0;                    /* flamingo neon — the second voice, used in small doses */
  --pink-ink: #3A0620;                    /* text on pink */
  --warm:     #FFB25C;                    /* amber — timestamps, small warm notes */
  --line:     rgba(255, 255, 255, .08);
  --line-2:   rgba(255, 255, 255, .16);
  /* neon is never one shadow — it's a hot core, a mid halo, a wide bloom, and a
     pool of light thrown down onto whatever sits beneath the sign */
  --glow:      0 0 2px rgba(255, 255, 255, .55),
               0 0 10px rgba(62, 240, 228, .6),
               0 0 26px rgba(62, 240, 228, .34),
               0 0 68px rgba(62, 240, 228, .2),
               0 22px 90px rgba(62, 240, 228, .22);
  --glow-soft: 0 0 14px rgba(62, 240, 228, .30), 0 0 44px rgba(62, 240, 228, .14);
  --glow-pink: 0 0 10px rgba(255, 79, 160, .55), 0 0 30px rgba(255, 79, 160, .28), 0 0 72px rgba(255, 79, 160, .14);

  --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Plex Mono', 'Consolas', monospace;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --spring: cubic-bezier(.34, 1.45, .5, 1);

  --hdr-h: 74px;
  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 48px);
  --r: 16px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 14px);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  color-scheme: dark;
  /* reserve the classic-scrollbar lane even when a page doesn't scroll, so
     short pages (the 404) and long ones center on the same axis */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* film grain — a whisper of photographic texture so the deep navy never reads
   as a flat void. One fixed layer, near-invisible, only where motion is allowed. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 200;
  pointer-events: none;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .038;
  animation: grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
b { font-weight: 680; color: var(--text); }
img, video { max-width: 100%; display: block; }
/* the hidden <defs> svg is an SVGElement — the UA [hidden] rule doesn't apply to it.
   Collapse it to zero size instead of display:none: display:none breaks gradient
   and clip-path resolution inside <use> shadow trees in Chromium. */
svg[hidden] { position: absolute; width: 0; height: 0; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* touch: skip the OS tap flash on controls that answer for themselves with a
   pressed / checked / open state; plain navigation links keep the native flash */
.btn, .lang, .burger, .reel__row, .pp, .faq summary, .sheet__row, .opt--text { -webkit-tap-highlight-color: transparent; }
fieldset { border: 0; min-inline-size: 0; }
legend { padding: 0; }

::selection { background: var(--teal); color: var(--teal-ink); }

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 8px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }
::-webkit-scrollbar-thumb:active { background: rgba(62, 240, 228, .5); }
/* Firefox doesn't do ::-webkit-scrollbar — hand it the palette instead.
   Chromium speaks both and keeps the fully styled one, so gate on that. */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
}

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

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

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--teal); color: var(--teal-ink);
  padding: 12px 18px; border-radius: 8px;
  font: 600 14px/1 var(--body);
  transform: translateY(-64px);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

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

/* ---------- 3. Type grammar ---------- */
.kicker {
  font: 600 13px/1.5 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  text-shadow: 0 0 6px rgba(62, 240, 228, .45), 0 0 20px rgba(62, 240, 228, .18);
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 12.5px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  text-shadow: 0 0 6px rgba(62, 240, 228, .45), 0 0 20px rgba(62, 240, 228, .18);
  margin-bottom: 14px;
}
/* a short rule before the label — the editorial tick that says "section begins" */
.label::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--teal), rgba(62, 240, 228, 0));
  box-shadow: 0 0 8px rgba(62, 240, 228, .5);
  opacity: .9;
}
.sec__head .label { justify-content: center; }
.sec__head .label::before { background: linear-gradient(90deg, rgba(62, 240, 228,0), var(--teal)); }
.sec__head .label::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--teal), rgba(62, 240, 228, 0));
  box-shadow: 0 0 8px rgba(62, 240, 228, .5);
  opacity: .9;
}

.h2 {
  font-weight: 740;
  font-variation-settings: 'wdth' 118;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--text);
  text-wrap: balance;
}
.h2--s { font-size: clamp(26px, 2.8vw, 38px); }

.lede {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 58ch;
  text-wrap: pretty;
}
.lede b { color: var(--text); }

.sec__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto clamp(44px, 7vh, 72px);
}
.sec__head .lede { margin-inline: auto; }

.note {
  margin: clamp(36px, 5vh, 52px) auto 0;
  max-width: 620px;
  text-align: center;
  font-size: 14.5px;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---------- 4. Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 650 15.5px/1 var(--body);
  font-variation-settings: 'wdth' 104;
  letter-spacing: .005em;
  padding: 16px 27px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .25s var(--ease), transform .3s var(--ease), translate .12s var(--ease), scale .12s var(--ease);
}
.btn--small { padding: 11px 19px; font-size: 13.5px; border-radius: 8px; }
/* the primary button is lit glass, not flat plastic: a hot top edge, weight at
   the bottom, and a stepped halo outside — tight ring, short spill, wide whisper.
   Never one big fog; that's what makes glow read cheap. */
.btn--primary {
  background: linear-gradient(180deg, #7CF7EE 0%, var(--teal-fill) 46%, #1FCFC3 100%);
  color: var(--teal-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -8px 16px rgba(3, 37, 29, .22),
    0 0 0 1px rgba(62, 240, 228, .30),
    0 4px 14px rgba(62, 240, 228, .28),
    0 0 34px rgba(62, 240, 228, .16);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #9CFBF3 0%, #3EF0E4 46%, #27DBCE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -8px 16px rgba(3, 37, 29, .20),
    0 0 0 1px rgba(62, 240, 228, .45),
    0 6px 18px rgba(62, 240, 228, .38),
    0 0 52px rgba(62, 240, 228, .24);
}
.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover {
  border-color: rgba(62, 240, 228, .6);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 0 18px rgba(62, 240, 228, .12), inset 0 0 14px rgba(62, 240, 228, .05);
}
.btn[aria-disabled="true"] { opacity: .55; cursor: progress; }
.btn[aria-disabled="true"] .arw { opacity: .35; }
/* the press rides the individual translate/scale properties, not transform:
   the magnetic lean (JS) owns the primary buttons' inline transform, and
   separate properties compose with it instead of being overwritten — same
   trick as the hero zoom riding `scale` beside the parallax transform */
.btn:active { translate: 0 1px; scale: .97; }

.arw { display: inline-block; width: 15px; height: 11px; flex: none; transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* text links — real hit areas, underline that slides in */
.card__link, .reel__go {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 14px/1 var(--body);
  color: var(--teal);
  padding: 10px 12px;
  margin: -6px -12px -10px;
  border-radius: 6px;
  transition: color .18s var(--ease), translate .15s var(--ease);
}
.card__link:hover, .reel__go:hover { color: #8CF7EE; }
.card__link:active, .reel__go:active { translate: 0 1px; }
.card__link:hover .arw, .reel__go:hover .arw { transform: translateX(4px); }

/* ---------- 5. Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--hdr-h);
  display: flex; align-items: center;
  transition: background-color .3s, box-shadow .3s;
}
.hdr.is-scrolled {
  background: rgba(10, 17, 28, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 26px; width: 100%; }

/* the wordmark: "3 5" with the zero as a photographic sun-on-water pulled
   from the hero image itself — same light as the page, seated on the baseline */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__305 {
  display: inline-flex; align-items: baseline;
  font-weight: 800;
  font-variation-settings: 'wdth' 125;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--text);
}
.logo__sun {
  width: 20px; height: 20px;
  margin: 0 1.6px -1px;
  flex: none;
  transition: filter .35s var(--ease);
}
/* home is a lit sign too: the little sun warms when the mark is under the cursor */
.logo:hover .logo__sun { filter: brightness(1.35) drop-shadow(0 0 9px rgba(255, 178, 92, .55)); }
.logo__word {
  font: 700 15.5px/1 var(--body);
  font-variation-settings: 'wdth' 108;
  letter-spacing: .01em;
  color: var(--text);
}

.nav { position: relative; display: flex; margin-left: auto; }
.nav > a {
  position: relative;
  padding: 12px 14px;
  font: 560 14.5px/1 var(--body);
  color: var(--text-2);
  transition: color .2s;
}
.nav > a:hover, .nav > a.is-active { color: var(--text); }
/* press flashes the accent — the color the section earns once you arrive */
.nav > a:active { color: var(--teal); }
.nav__ink {
  position: absolute; bottom: 2px; height: 2px;
  background: var(--teal);
  opacity: 0;
  border-radius: 2px;
  transition: left .4s var(--ease), width .4s var(--ease), opacity .3s;
}

/* the language toggle: a quiet pill at the end of the header row, readable
   on both editions. JS carries the current #section across pages. */
.lang {
  flex: none;
  font: 680 12px/1 var(--body);
  letter-spacing: .09em;
  color: var(--text-2);
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease), scale .15s var(--ease);
}
.lang:hover {
  color: var(--teal);
  border-color: rgba(62, 240, 228, .55);
  background: rgba(255, 255, 255, .04);
}
.lang:active { scale: .93; }

.burger {
  display: none;
  width: 46px; height: 46px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: scale .18s var(--ease);
}
.burger:active { scale: .88; }
.burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--text);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero — the sun goes down, the signs come on ----------
   A pinned scene. The section is a tall scroll track; the frame inside it
   sticks to the viewport while --p (0 → 1, set by site.js) drives the show:
     act one   — the title sequence rises over the sunset photograph;
     act two   — the headline lifts away, the same photograph dissolves to its
                 own night version (a second plate, not a colored fog), the
                 haze goes out, the windows come on;
     act three — a photographic neon sign, "305 WEB WORKS", powers up word by
                 word over the skyline and lights the water below it.
   Every value here is a function of --p so the scene scrubs both ways.
   No JS / reduced motion: no pin, one static dusk frame, no sign. */
.hero {
  position: relative;
  --p: 0;
  --lit: 0;
}
html.js .hero {
  height: 240vh;
  height: 240svh;
}
.hero__pin {
  position: relative;
  min-height: 94svh;
  isolation: isolate;
  display: flex; align-items: center;
  padding: calc(var(--hdr-h) + 8px) 0 clamp(90px, 14vh, 160px);
  overflow: hidden;
  overflow: clip;
}
html.js .hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }

/* the two plates share one box and one parallax transform, so they stay
   registered while the day one dissolves into the night one */
.hero__plate {
  position: absolute;
  left: 0; right: 0; top: -6%;
  height: 106%;
  will-change: transform;
}
.hero__img, .hero__night {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 58%;
}
.hero__night {
  --k: clamp(0, (var(--p) - .08) / .5, 1);
  opacity: calc(var(--k) * var(--k) * (3 - 2 * var(--k)));
}
html.js .hero__plate { animation: heroZoom 2.6s var(--ease) both; }
@keyframes heroZoom {
  from { scale: 1.05; }
  to   { scale: 1; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    /* top + bottom vignettes so the header and the page seam always sit on navy */
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 13, 31, .74) 7%, rgba(10, 13, 31, .28) 18%, rgba(10, 13, 31, 0) 32%),
    linear-gradient(180deg, rgba(10, 13, 31, 0) 52%, rgba(12, 10, 26, .42) 78%, rgba(10, 13, 31, .92) 94%, var(--bg) 100%);
}
/* the left column darkens for the type, and lets go as the type leaves —
   its own layer, faded by opacity, so the scroll never repaints a gradient */
.hero__scrim-l {
  position: absolute; inset: 0;
  background: linear-gradient(82deg, rgba(10, 13, 31, .9) 18%, rgba(10, 13, 31, .66) 42%, rgba(10, 13, 31, .28) 64%, rgba(10, 13, 31, 0) 84%);
  opacity: calc(1 - clamp(0, var(--p) / .3, 1) * .7);
  will-change: opacity;
}
/* the dusk light: a photographic haze pass (shot on black) screen-blended over
   the water under the real sunset — it dies as the night plate takes over */
.hero__haze {
  position: absolute; right: 2%; bottom: 5%;
  width: min(96vw, 1520px);
  transform: scaleX(-1);
  mix-blend-mode: screen;
  opacity: calc(.72 * (1 - clamp(0, (var(--p) - .06) / .42, 1)));
  pointer-events: none;
}
.hero__palm {
  position: absolute;
  top: -72px; right: -92px;
  width: clamp(330px, 33vw, 570px);
  height: auto;
  filter: drop-shadow(-20px 26px 30px rgba(3, 7, 14, .55));
  /* it falls into silhouette as night comes (opacity: compositor-only) */
  opacity: calc(1 - var(--p) * .5);
  transform: rotate(1.6deg);
  will-change: transform, opacity;
}
html.js .hero__palm { animation: palmSway 11s ease-in-out infinite alternate; }
@keyframes palmSway {
  from { transform: rotate(1.2deg) translateY(0); }
  to   { transform: rotate(2.6deg) translateY(9px); }
}

/* ----- the sign: three photographic tube segments, lit in order ----- */
.hero__sign {
  position: absolute;
  left: 50%; top: 9%;
  width: min(60vw, 900px);
  transform: translateX(-50%) scale(calc(.94 + var(--p) * .08));
  transform-origin: 50% 40%;
  display: none;
  pointer-events: none;
  will-change: transform;
}
html.js .hero__sign { display: block; }
/* the three words are cut from one generated sign and put back at their
   exact offsets, so the layout is the sign's own at any size */
.hero__tubes {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1490 / 816;
}
.hero__word {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  height: auto;
  /* dead glass: a ghost of the tube, waiting for current — and only once the
     headline has left the frame, never behind the words */
  opacity: calc(.14 * clamp(0, (var(--p) - .2) / .08, 1));
  filter: grayscale(.85) brightness(.9) contrast(1.2);
  will-change: opacity, filter;
}
.hero__word.is-on { animation: tubeOn 1.15s steps(1, end) both; }
@keyframes tubeOn {
  0%       { opacity: .14; filter: grayscale(.85) brightness(.9) contrast(1.2); }
  5%       { opacity: 1; filter: brightness(1.15); }
  9%       { opacity: .2; filter: grayscale(.6) brightness(.9); }
  13%      { opacity: 1; filter: none; }
  17%      { opacity: .55; filter: brightness(.8); }
  22%      { opacity: 1; filter: brightness(1.08); }
  40%      { opacity: .92; filter: brightness(.95); }
  48%, 100% { opacity: 1; filter: none; }
}
/* the light the sign throws: a screen-blended pool under it that grows with
   each word, and a mirrored, rippling copy laid on the water */
.hero__spill {
  position: absolute;
  left: 50%; top: 50%;
  width: 120%; height: 260%;
  transform: translate(-50%, -38%);
  background: radial-gradient(50% 42% at 50% 38%, rgba(62, 240, 228, .34), rgba(62, 240, 228, .08) 48%, transparent 72%);
  mix-blend-mode: screen;
  opacity: calc(var(--lit) * .8);
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.hero__mirror {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: clamp(10px, 3vh, 40px);
  aspect-ratio: 1490 / 816;
  transform: scaleY(-.58);
  transform-origin: 50% 0;
  opacity: .34;
  filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 40%, transparent 92%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 40%, transparent 92%);
  pointer-events: none;
}
@media (min-width: 921px) {
  .hero__mirror { filter: blur(1.6px) url(#hero-ripple); }
}

/* ----- the copy: rises on load, lifts away as the night comes ----- */
.hero__in {
  position: relative;
  max-width: var(--wrap);
  width: 100%;
  opacity: calc(1 - clamp(0, (var(--p) - .03) / .15, 1));
  transform: translateY(calc(var(--p) * -140px));
  will-change: transform, opacity;
}
.hero__h {
  margin: 20px 0 22px;
  font-weight: 790;
  font-variation-settings: 'wdth' 120;
  font-size: clamp(40px, 6.2vw, 96px);
  line-height: 1.01;
  letter-spacing: -.022em;
  color: #FFFFFF;
  text-wrap: balance;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(4, 8, 16, .45);
}
/* short laptop viewports: keep the whole sequence above the fold */
@media (max-height: 780px) and (min-width: 721px) {
  .hero__h { font-size: clamp(36px, 4.6vw, 62px); }
  .hero__sub { font-size: 17.5px; }
  .hero__act { margin-top: 24px; }
}
.hero__sub {
  font-size: 19px;
  color: #C6D3E2;
  max-width: 50ch;
  text-shadow: 0 1px 18px rgba(4, 8, 16, .5);
  text-wrap: pretty;
}
.hero__act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.hero__proof {
  margin-top: 28px;
  font-size: 14px;
  color: var(--text-2);
}
/* big screens: the type anchors left and owns the frame — no dead margin gutter */
@media (min-width: 1500px) {
  .hero__in {
    max-width: none;
    margin-left: clamp(56px, 6.5vw, 140px);
    margin-right: auto;
    padding-inline: 0;
  }
}

/* the scroll cue: a single tube of light that drips, and leaves once you move */
.hero__cue {
  position: absolute;
  left: 50%; bottom: 26px;
  width: 2px; height: 56px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
  opacity: calc(1 - clamp(0, var(--p) / .06, 1));
  display: none;
}
html.js .hero__cue { display: block; }
.hero__cue::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 40%;
  border-radius: 2px;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(62, 240, 228, .8);
  animation: cueDrip 1.9s var(--ease) infinite;
}
@keyframes cueDrip {
  0%   { transform: translateY(-100%); }
  60%, 100% { transform: translateY(260%); }
}

/* the title sequence — words rise through line masks (JS splits, no-JS plain).
   The masks are only masks while the words are rising: once the sequence
   lands they open up, so the glow on "you do." is never clipped to a box. */
html.js .hero__h:not(.is-split) { visibility: hidden; }
html.js .hero__h .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .13em;
  margin-bottom: -.13em;
}
html.js .hero__h.is-done .w { overflow: visible; }
html.js .hero__h .wi {
  display: inline-block;
  transform: translateY(118%);
  transition: transform .95s var(--ease);
  transition-delay: calc(150ms + var(--i) * 55ms);
}
html.js .hero__h.is-go .wi { transform: none; }

/* one ignition: "you do." is a lit tube — white-hot core, cyan skin, a halo
   that follows the letterforms (drop-shadow, not a clipped text-shadow) */
.hero__hl, .hl-w {
  color: var(--teal);
  background: linear-gradient(180deg, var(--neon-core) 0%, var(--neon-hi) 38%, var(--teal) 72%, #22D9CC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .8))
    drop-shadow(0 0 7px rgba(62, 240, 228, .75))
    drop-shadow(0 0 22px rgba(62, 240, 228, .45))
    drop-shadow(0 0 60px rgba(62, 240, 228, .28));
}
html.js .hero__h:not(.is-lit) .hl-w {
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  filter: none;
}
html.js .hero__h.is-lit .hl-w { animation: ignite 1.3s steps(1, end) both; }
@keyframes ignite {
  0%   { -webkit-text-fill-color: #FFFFFF; filter: none; }
  4%   { -webkit-text-fill-color: transparent; }
  7%   { -webkit-text-fill-color: #FFFFFF; filter: none; }
  11%  { -webkit-text-fill-color: transparent; }
  14%  { -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 4px rgba(62, 240, 228, .3)); }
  18%  { -webkit-text-fill-color: transparent; }
  46%  { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .8)) drop-shadow(0 0 6px rgba(62, 240, 228, .4)); }
  52%, 100% { -webkit-text-fill-color: transparent; }
}

/* ---------- 7. Sections ---------- */
.sec { position: relative; padding-block: clamp(90px, 12vh, 140px); }
.sec--tight { padding-block: clamp(76px, 10vh, 110px); }
.sec--panel {
  background: linear-gradient(180deg, var(--bg) 0%, #0C1524 18%, #0C1524 82%, var(--bg) 100%);
}

/* ambient depth — each section breathes with a faint directional glow so the
   page never sits as flat stacked rectangles. Warm from the sunset, cool from
   the water, kept well below the text. */
.sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 88% 0%, rgba(255, 178, 92, .05), transparent 62%),
    radial-gradient(52% 40% at 4% 100%, rgba(62, 240, 228, .04), transparent 60%),
    radial-gradient(46% 36% at 96% 78%, rgba(255, 79, 160, .028), transparent 65%);
}
.sec--panel::before {
  background:
    radial-gradient(52% 40% at 10% 10%, rgba(62, 240, 228, .06), transparent 60%),
    radial-gradient(46% 38% at 92% 92%, rgba(255, 178, 92, .04), transparent 62%);
}
/* hairline that separates sections with intention instead of an abrupt seam */
.sec + .sec { border-top: 1px solid rgba(255, 255, 255, .045); }

/* ---------- 8. Work — the reel, on a real screen ---------- */
.reel { padding-bottom: clamp(70px, 9vh, 110px); }
.reel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px clamp(30px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 5vh, 60px);
}
.reel__note { margin-top: 0; justify-self: end; padding-bottom: 6px; }

.reel__deck {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 0 clamp(26px, 3.4vw, 54px);
  align-items: start;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.reel__stage { position: relative; }

/* the laptop: a photographic frame with the display punched out to alpha,
   the captures playing behind the hole. It arrives tilted back and settles
   flat as it scrolls into view (--p from data-scrub). The screen rect is the
   punched hole, measured from the frame image itself. */
.reel__device {
  --p: 0;
  --sx: 8.003%; --sy: 5.379%; --sw: 84.065%; --sh: 84.963%;
  position: relative;
  aspect-ratio: 1412 / 818;
  transform: perspective(1400px) rotateX(calc((1 - clamp(0, var(--p), 1)) * 24deg));
  transform-origin: 50% 100%;
  will-change: transform;
}
/* its shadow is a second copy of the frame, blacked and blurred, so it has the
   laptop's real silhouette and never darkens the screen from above */
.reel__shadow {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  filter: brightness(0) blur(22px);
  opacity: .62;
  transform: translateY(34px) scale(1.01);
  pointer-events: none;
}
/* the light the screen throws down onto the desk */
.reel__device::after {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: -6%;
  height: 34%;
  z-index: 0;
  background: radial-gradient(50% 70% at 50% 100%, rgba(62, 240, 228, .18), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}
.reel__frame {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.reel__clip {
  position: absolute;
  left: var(--sx); top: var(--sy);
  width: var(--sw); height: var(--sh);
  z-index: 1;
  background: #0A1320;
  overflow: hidden;
  overflow: clip;
}
.reel__slide { position: absolute; inset: 0; }
/* the video itself is a play/pause hit area — show the hand that says so,
   and settle a beat under the press so the tap is acknowledged */
.reel__v { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; cursor: pointer; transition: scale .25s var(--ease); }
.reel__v:active { scale: .99; }

/* with JS the slides stack into one screen; the captions sit under the laptop */
html.js .reel__slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity .5s var(--ease), transform .8s var(--ease), visibility 0s .5s;
}
html.js .reel__slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s var(--ease), transform .8s var(--ease);
  z-index: 1;
}

.reel__caps {
  position: relative;
  margin-top: clamp(18px, 3vh, 30px);
  min-height: var(--cap-floor, 0);
}
.reel__cap { display: grid; gap: 3px; }
html.js .reel__cap {
  position: absolute; left: 0; right: 0; top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .7s var(--ease), visibility 0s .45s;
}
html.js .reel__cap.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s var(--ease) .12s, transform .7s var(--ease) .12s;
}
.reel__cap-row { display: flex; align-items: baseline; gap: 14px; }
.reel__cap h3 {
  font-weight: 730;
  font-variation-settings: 'wdth' 114;
  font-size: 23px;
  letter-spacing: -.01em;
  color: var(--text);
}
.reel__count {
  margin-left: auto;
  font: 600 12.5px/1 var(--body);
  letter-spacing: .08em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.reel__sec {
  font: 560 13px/1.5 var(--body);
  color: var(--teal);
  opacity: .9;
}
.reel__scope { font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 62ch; text-wrap: pretty; }
.reel__cap .reel__go { justify-self: start; margin-top: 6px; }

/* the screen's bottom edge doubles as the timeline when the reel runs itself */
.reel__edge {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, rgba(62, 240, 228, .35), rgba(62, 240, 228, .08) 55%, transparent);
  pointer-events: none;
}
.reel__edge-fill {
  display: none;
  position: absolute; inset: 0;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(62, 240, 228, .8);
  transform: scaleX(0);
  transform-origin: left;
}
body.reel-auto-on .reel__edge-fill { display: block; }
/* one-time tap affordance for coarse pointers */
.tap-chip {
  display: none;
}
@media (pointer: coarse) {
  html.js:not(.reel-played) .tap-chip {
    display: block;
    position: absolute; left: 50%; bottom: 18px; z-index: 3;
    transform: translateX(-50%);
    background: rgba(6, 11, 20, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(62, 240, 228, .4);
    color: var(--text);
    padding: 11px 16px;
    border-radius: 10px;
    font: 600 13.5px/1 var(--body);
    pointer-events: none;
  }
}

/* play/pause pill lives on the screen's top-right */
.pp {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(6, 11, 20, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 9px;
  font: 600 12.5px/1 var(--body);
  letter-spacing: .04em;
  min-height: 36px;
  transition: background-color .2s, scale .15s var(--ease);
}
.pp:hover { background: rgba(6, 11, 20, .95); }
.pp:active { scale: .95; }
.pp__i {
  width: 0; height: 0;
  border-left: 8px solid var(--teal);
  border-block: 5.5px solid transparent;
}
.pp.is-on .pp__i {
  width: 4px; height: 11px;
  border-left: 3px solid var(--teal);
  border-right: 3px solid var(--teal);
  border-block: 0;
}

/* the index — five titles, one light */
.reel__side { display: flex; flex-direction: column; padding-top: 2%; }
.reel__index { display: flex; flex-direction: column; }
.reel__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: baseline;
  width: 100%;
  min-height: 58px;
  text-align: left;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  color: var(--text-2);
  transition: color .2s, background-color .25s, border-color .25s;
}
.reel__i {
  font: 700 13px/1 var(--body);
  letter-spacing: .05em;
  opacity: .62;
  font-variant-numeric: tabular-nums;
}
.reel__nm {
  font: 700 17px/1.3 var(--body);
  font-variation-settings: 'wdth' 112;
  letter-spacing: -.005em;
}
.reel__cat { grid-column: 2 / 4; font-size: 12.5px; line-height: 1.4; opacity: .8; }
.reel__row:hover { color: var(--text); background: rgba(255, 255, 255, .025); }
/* press shows the teal the row earns when it takes the stage */
.reel__row:active { color: var(--text); background: rgba(62, 240, 228, .07); }
.reel__row.is-active {
  border-left-color: var(--teal);
  color: var(--text);
  background: linear-gradient(90deg, rgba(62, 240, 228, .08), rgba(62, 240, 228, 0) 62%);
}
.reel__row.is-active .reel__i { color: var(--teal); opacity: 1; }
.reel__row.is-active .reel__nm { color: var(--text); }

.reel__hint { margin-top: 14px; font-size: 13px; color: var(--text-2); }

/* no-JS: the laptop rests; the five builds stack as clean cards, then their captions */
html.nojs .reel__deck, html:not(.js) .reel__deck { display: block; }
html.nojs .reel__device, html:not(.js) .reel__device { aspect-ratio: auto; transform: none; }
html.nojs .reel__frame, html:not(.js) .reel__frame,
html.nojs .reel__shadow, html:not(.js) .reel__shadow,
html.nojs .reel__device::after, html:not(.js) .reel__device::after,
html.nojs .reel__edge, html:not(.js) .reel__edge { display: none; }
html.nojs .reel__clip, html:not(.js) .reel__clip { position: static; width: auto; height: auto; overflow: visible; background: none; }
html.nojs .reel__slide, html:not(.js) .reel__slide {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
  margin-bottom: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
html.nojs .reel__caps, html:not(.js) .reel__caps { min-height: 0; border-top: 1px solid var(--line-2); }
html.nojs .reel__cap, html:not(.js) .reel__cap { padding: 18px 0; border-bottom: 1px solid var(--line); }
html.nojs .reel__side, html:not(.js) .reel__side { display: none; }

/* ---------- 9. Services — the capability board ---------- */
/* the marquee: capability type as architecture. Full-bleed (escapes the wrap),
   outlined display type, always in motion; JS drives velocity + skew from scroll. */
.caps { padding-bottom: clamp(70px, 9vh, 110px); }
.caps .sec__head { margin-bottom: clamp(34px, 5vh, 54px); }

.mq {
  position: relative;
  margin-block: clamp(8px, 2vh, 20px) clamp(40px, 6vh, 64px);
  padding-block: clamp(14px, 2.4vh, 26px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  overflow: clip;
  /* soft horizontal vignette so the type passes through the edges, not into them */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  /* the lane is a picture (role="img"), not prose — and JS clones it to loop,
     so a drag-selection would sweep across duplicated, moving words */
  -webkit-user-select: none;
  user-select: none;
}
.mq__lane { display: flex; width: max-content; will-change: transform; }
.mq__run {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(26px, 3.4vw, 54px);
  padding-right: clamp(26px, 3.4vw, 54px);
}
.mq__ph {
  flex: none;
  font-weight: 800;
  font-variation-settings: 'wdth' 124;
  font-size: clamp(46px, 7.4vw, 110px);
  line-height: 1.04;
  letter-spacing: -.022em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(236, 242, 248, .34);
  transition: color .35s var(--ease), -webkit-text-stroke-color .35s var(--ease);
  cursor: default;
}
.mq__ph--fill {
  color: var(--teal);
  -webkit-text-stroke-color: transparent;
  opacity: .94;
  text-shadow: 0 0 2px rgba(255, 255, 255, .4), 0 0 18px rgba(62, 240, 228, .35), 0 0 60px rgba(62, 240, 228, .16);
}
@media (hover: hover) {
  .mq:hover .mq__ph { -webkit-text-stroke-color: rgba(236, 242, 248, .22); }
  .mq:hover .mq__ph--fill { opacity: .5; }
  .mq .mq__ph.is-hot {
    color: var(--teal);
    -webkit-text-stroke-color: transparent;
    opacity: 1;
    text-shadow:
      0 0 2px rgba(255, 255, 255, .55),
      0 0 16px rgba(62, 240, 228, .5),
      0 0 44px rgba(62, 240, 228, .26),
      0 0 90px rgba(62, 240, 228, .14);
  }
}
.mq__dot {
  flex: none;
  width: clamp(10px, 1.1vw, 16px);
  height: clamp(10px, 1.1vw, 16px);
  border-radius: 50%;
  background: var(--warm);
  opacity: .8;
  box-shadow: 0 0 18px rgba(255, 178, 92, .5);
}

/* the capability index: three rows, each holding its asset as a real object.
   number / copy / specimen — the asset lifts and tilts when the row is armed. */
.capx { border-top: 1px solid var(--line-2); }
.capx__row {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1.35fr) clamp(200px, 20vw, 300px);
  gap: 8px clamp(24px, 3.8vw, 60px);
  align-items: center;
  padding: clamp(28px, 4.4vh, 46px) 8px;
  border-bottom: 1px solid var(--line);
  transition: background-color .35s var(--ease);
}
.capx__row:hover { background: linear-gradient(90deg, rgba(62, 240, 228, .045), rgba(62, 240, 228, 0) 60%); }
.capx__n {
  font: 700 13px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--teal);
  opacity: .85;
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 10px;
}
.capx__main h3 {
  font-weight: 760;
  font-variation-settings: 'wdth' 122;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.02;
  letter-spacing: -.018em;
  color: var(--text);
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .capx__row:hover .capx__main h3 { transform: translateX(10px); }
}
.capx__main p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 52ch;
  text-wrap: pretty;
}
/* the price tag — an underline note set into the copy, not a floating chip */
.capx__price {
  display: inline-block;
  margin-top: 14px;
  font: 650 13.5px/1 var(--body);
  letter-spacing: .02em;
  color: var(--teal);
  border-bottom: 1px solid rgba(62, 240, 228, .4);
  padding-bottom: 4px;
}
.capx__price b { font-weight: 760; }
.capx__price .card__link { padding: 6px 8px; margin: -6px -8px; }
.capx__row--wired .capx__price { color: var(--warm); border-bottom-color: rgba(255, 178, 92, .4); }

/* the asset as a held object — large enough to read, lifting on hover */
.capx__art {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}
.capx__art img {
  width: 100%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, .5));
  transform: rotate(-1.4deg);
  transition: transform .6s var(--ease), filter .6s var(--ease);
  will-change: transform;
}
@media (hover: hover) {
  .capx__row:hover .capx__art img {
    transform: rotate(.4deg) translateY(-8px) scale(1.02);
    filter: drop-shadow(0 36px 60px rgba(0, 0, 0, .55)) drop-shadow(0 0 34px rgba(62, 240, 228, .12));
  }
}
.capx__row--wired .capx__art img { transform: rotate(1.4deg); }
@media (hover: hover) {
  .capx__row--wired:hover .capx__art img { transform: rotate(-.4deg) translateY(-8px) scale(1.02); }
}

/* the drawn underline — sweeps in on hover, lingers like a signature */
.capx__line {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), rgba(62, 240, 228, .15) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.capx__row:hover .capx__line { transform: scaleX(1); }

/* the price bar: the number a visitor remembers, given its own stage */
.pricebar {
  margin-top: clamp(36px, 5.5vh, 56px);
  padding: clamp(22px, 3.4vh, 32px) clamp(22px, 3.4vw, 40px);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(120% 190% at 8% 0%, rgba(62, 240, 228, .09), rgba(62, 240, 228, 0) 55%),
    var(--bg-2);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 12px clamp(24px, 4vw, 56px);
  align-items: center;
}
.pricebar__lead {
  font-weight: 720;
  font-variation-settings: 'wdth' 112;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
.pricebar__lead b { color: var(--teal); font-weight: 780; }
.pricebar__sub { font-size: 14px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* ---------- 10. The Switchboard ---------- */
.swb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.swb__copy .lede { margin-top: 16px; }
.swb .btn { margin-top: 28px; }
.swb__hint { margin-top: 14px; font-size: 13px; color: var(--text-2); }

.swb__console {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  overflow: visible;
}
/* a slow ring of light travels the console's edge — cyan with an amber tail,
   the same two colors the log speaks in. A masked conic gradient, one property
   animating, nothing repainting inside. */
@property --sb { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.swb__console::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: calc(var(--r) + 1px);
  padding: 1px;
  background: conic-gradient(from var(--sb), transparent 0 66%, rgba(62, 240, 228, .95) 78%, rgba(255, 178, 92, .85) 85%, transparent 93%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: sbSpin 9s linear infinite;
}
@keyframes sbSpin { to { --sb: 360deg; } }
.swb__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  font: 600 11.5px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.swb__clock {
  color: var(--warm);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.swb__ln {
  position: relative;
  display: grid;
  grid-template-columns: 58px 150px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  opacity: .45;
  transition: opacity .45s, background-color .45s;
}
.swb__ln::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--teal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s var(--ease);
}
.swb__ln.is-lit { opacity: 1; background: rgba(62, 240, 228, .04); }
.swb__ln.is-lit::before { transform: none; }
.swb__t { font: 400 12.5px/1.6 var(--mono); color: var(--warm); font-variant-numeric: tabular-nums; }
.swb__e { font: 650 15.5px/1.45 var(--body); color: var(--text); }
.swb__d { font-size: 14px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.swb__foot {
  padding: 13px 20px;
  font-size: 12px;
  color: var(--text-2);
}

/* the payoff — the same text message the composer sends (console language) */
.swb__sms {
  position: absolute;
  right: -16px; bottom: 74px;
  z-index: 3;
  width: min(310px, 78%);
  background: linear-gradient(180deg, #111C2F, #0C1524);
  border: 1px solid rgba(255, 178, 92, .38);
  border-radius: 16px 16px 4px 16px;
  padding: 15px 20px 16px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  pointer-events: none;
}
.swb__sms.is-in { animation: smsIn .5s var(--spring) both; }
@keyframes smsIn {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.swb__sms-k {
  display: block;
  font: 600 10.5px/1 var(--body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--warm);
}
.swb__sms-x { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.swb__dots { display: none; position: absolute; left: 20px; bottom: 18px; gap: 5px; }
.swb__sms.is-in:not(.is-said) .swb__sms-x { visibility: hidden; }
.swb__sms.is-in:not(.is-said) .swb__dots { display: flex; }
.swb__dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--warm);
  animation: dotsBounce 1s ease-in-out infinite;
}
.swb__dots i:nth-child(2) { animation-delay: .15s; }
.swb__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotsBounce { 50% { opacity: .25; transform: translateY(-3px); } }

/* ---------- 11. Process — the wire that draws itself ---------- */
.steps-wrap { position: relative; --p: 0; }
.steps__wire {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line);
  pointer-events: none;
}
.steps__fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--neon-hi), var(--teal));
  box-shadow: 0 0 10px rgba(62, 240, 228, .7), 0 0 26px rgba(62, 240, 228, .3);
  transform: scaleX(var(--p));
  transform-origin: left;
}
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}
.step { position: relative; padding-top: 26px; }
/* the node: dead glass until the wire reaches it, then it pops on */
.step::before {
  content: "";
  position: absolute; left: 0; top: -5px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
.step.is-lit::before {
  background: var(--teal);
  border-color: var(--neon-hi);
  box-shadow: 0 0 10px rgba(62, 240, 228, .9), 0 0 28px rgba(62, 240, 228, .4);
  animation: nodePop .5s var(--spring) both;
}
@keyframes nodePop {
  from { transform: scale(.4); }
  60%  { transform: scale(1.4); }
  to   { transform: scale(1); }
}
.step__n {
  display: block;
  font: 700 13px/1 var(--body);
  letter-spacing: .14em;
  color: var(--teal);
  margin-bottom: 12px;
}
.step h3 {
  font-weight: 700;
  font-variation-settings: 'wdth' 110;
  font-size: 20px;
  margin-bottom: 10px;
}
.step p { font-size: 15px; color: var(--text-2); text-wrap: pretty; }

/* ---------- 12. FAQ ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.faq__aside { position: sticky; top: calc(var(--hdr-h) + 36px); text-align: left; }
.faq__aside .lede { margin-top: 14px; }

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line-2); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 0;
  font: 620 17px/1.4 var(--body);
  color: var(--text);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover, .faq summary:active { color: var(--teal); }
.faq__x { position: relative; flex: none; width: 16px; height: 16px; transition: transform .3s var(--ease); }
.faq__x::before, .faq__x::after {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 16px; height: 2px;
  border-radius: 2px;
  background: var(--teal);
}
.faq__x::after { transform: rotate(90deg); }
.faq details[open] .faq__x { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq details[open] .faq__a { grid-template-rows: 1fr; }
.faq__a p {
  min-height: 0; overflow: hidden;
  padding: 0 0 24px; font-size: 15.5px; color: var(--text-2); max-width: 62ch; text-wrap: pretty;
}
.faq__tel { color: var(--teal); padding: 8px 2px; margin: -8px -2px; }
.faq__tel:hover, .faq__tel:active { color: #8CF7EE; }

/* ---------- 13. Contact ---------- */
.contact { overflow: clip; }
.contact__bg {
  position: absolute; right: -40px; bottom: -30px;
  width: min(46vw, 560px);
  opacity: .14;
  pointer-events: none;
  /* fade every edge into the page — no visible tile boundary, just a skyline
     breathing in the corner */
  -webkit-mask-image: radial-gradient(120% 120% at 80% 85%, #000 30%, transparent 72%);
  mask-image: radial-gradient(120% 120% at 80% 85%, #000 30%, transparent 72%);
}
/* dissolve the tile's bottom edge so the night-skyline footer can rise from it */
.contact__bg::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(10, 17, 28, 0), var(--bg) 88%);
}
.contact__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(44px, 6vw, 100px);
  align-items: start;
}
.contact .label { margin-bottom: 10px; }
.contact .lede { margin-top: 14px; }

.scope__set { margin-top: clamp(26px, 4vh, 36px); }
.scope__lg {
  font: 600 12.5px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 14px;
}

/* the choice-sheet — a refined list, not a grid of pills. Each row is a quiet
   ledger line: a drawn check, a label, and a hairline that fills on selection. */
.sheet { border-top: 1px solid var(--line-2); }
.sheet__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 6px 15px 2px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color .28s var(--ease);
}
.sheet__row input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sheet__row:hover { background: rgba(255, 255, 255, .022); }

/* the drawn check — a box whose mark strokes itself in */
.sheet__check {
  flex: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--line-2);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--teal-ink);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.sheet__check svg { width: 11px; height: 9px; overflow: visible; }
.sheet__check path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  transition: stroke-dashoffset .3s var(--ease) .04s;
}
.sheet__row input:checked ~ .sheet__check {
  background: var(--teal-fill);
  border-color: var(--teal-fill);
  transform: scale(1.02);
  box-shadow: 0 0 8px rgba(62, 240, 228, .5), 0 0 22px rgba(62, 240, 228, .2);
}
.sheet__row input:checked ~ .sheet__check path { stroke-dashoffset: 0; }

.sheet__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sheet__txt b {
  font: 650 16px/1.3 var(--body);
  font-variation-settings: 'wdth' 104;
  color: var(--text);
  transition: color .22s var(--ease), transform .3s var(--ease);
}
.sheet__txt small { font-size: 12.5px; color: var(--text-2); transition: color .22s; }
.sheet__row input:checked ~ .sheet__txt b { color: var(--teal); }
@media (hover: hover) {
  .sheet__row:hover .sheet__txt b { transform: translateX(3px); }
}

/* the arrow that slides in when a row is armed */
.sheet__go {
  margin-left: auto;
  flex: none;
  width: 15px; height: 11px;
  color: var(--teal);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .28s var(--ease), transform .32s var(--ease);
}
.sheet__go svg { width: 100%; height: 100%; }
.sheet__row input:checked ~ .sheet__go { opacity: 1; transform: none; }

/* the armed row gets a teal edge and a whisper of fill */
.sheet__row::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--teal);
  transform: scaleY(0);
  transition: transform .3s var(--ease);
}
.sheet__row:has(input:checked) { background: rgba(62, 240, 228, .05); }
.sheet__row:has(input:checked)::before { transform: none; }
.sheet__row input:focus-visible ~ .sheet__check { outline: 2px solid var(--teal); outline-offset: 3px; }
.sheet__row:active .sheet__check { transform: scale(.94); }

.scope__opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 11px;
}
/* business types — pure typeset choices, no chrome; the selection rides the
   same traveling ink as the header nav */
.scope__opts--text {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 30px;
}
.scope__ink {
  position: absolute; height: 2px;
  background: var(--teal);
  border-radius: 2px;
  opacity: 0;
  transition: top .35s var(--ease), left .35s var(--ease), width .35s var(--ease), opacity .25s;
  pointer-events: none;
}

.opt { position: relative; display: block; }

.opt--text { position: relative; }
.opt--text input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt--text .opt__t {
  display: inline-block;
  padding: 12px 2px;
  font: 620 16px/1 var(--body);
  font-variation-settings: 'wdth' 104;
  color: var(--text-2);
  transition: color .2s;
}
.opt--text:hover .opt__t { color: var(--text); }
.opt--text:active .opt__t { color: var(--teal); }
.opt--text input:checked + .opt__t { color: var(--teal); }
.opt--text input:focus-visible + .opt__t { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
html.nojs .scope__ink, html:not(.js) .scope__ink { display: none; }

/* the composer's output IS a text message — same object the Switchboard sends */
.scope__out { display: block; margin-top: clamp(28px, 4vh, 38px); }
.scope__lbl {
  display: block;
  font: 600 11.5px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.scope__bubble {
  position: relative;
  margin: 12px 0 0 auto;
  max-width: 58ch;
  width: fit-content;
  background:
    linear-gradient(180deg, rgba(62, 240, 228, .10), rgba(62, 240, 228, .045)),
    var(--bg-2);
  border: 1px solid rgba(62, 240, 228, .30);
  border-radius: 16px 16px 4px 16px;
  padding: 15px 20px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 24px rgba(62, 240, 228, .05),
    0 12px 34px rgba(3, 10, 20, .5),
    0 0 28px rgba(62, 240, 228, .07);
  transition: transform .3s var(--ease), border-color .3s;
}
.scope__msg { font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

@keyframes scopeTick {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.012); border-color: rgba(62, 240, 228, .65); }
  100% { transform: scale(1); }
}
.scope__bubble.is-touched { animation: scopeTick 240ms var(--ease); }

.scope__act { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* on desktop sms: is a dead click — lead with email there.
   DOM order is email-first; coarse pointers flip the row so Text leads visually. */
@media (hover: hover) and (pointer: fine) {
  .scope__act { flex-wrap: nowrap; }
  .scope__act #scopeMail {
    background: var(--teal-fill);
    color: var(--teal-ink);
    border-color: transparent;
  }
  .scope__act #scopeMail:hover { background: #5AF3E8; }
  .scope__act #scopeSms { border-color: var(--line-2); color: var(--text); background: none; }
  .scope__act #scopeSms:hover { border-color: rgba(62, 240, 228, .6); background: rgba(255, 255, 255, .04); }
}
/* touch devices lead with Text (DOM stays email-first for focus order) */
@media (pointer: coarse) {
  .scope__act #scopeSms { order: -1; }
}

.contact__direct { position: relative; text-align: center; padding-top: 12px; }
/* light from a sign just out of frame — the pink half of the Miami duet */
.contact__direct::before {
  content: "";
  position: absolute; top: -10%; right: -16%;
  width: 76%; height: 62%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 79, 160, .14), transparent 70%);
  pointer-events: none;
}
.contact__sign {
  position: relative;
  display: block;
  width: min(100%, 400px);
  margin: 0 auto clamp(56px, 7vw, 92px);
}
/* dead tubes until the visitor arrives — then the sign flickers awake once */
.contact__neon {
  width: 100%;
  height: auto;
  transform: rotate(-2.4deg);
  filter: grayscale(1) brightness(.22) contrast(.9) drop-shadow(0 30px 54px rgba(0, 0, 0, .55));
  transition: transform .5s var(--ease);
}
html.nojs .contact__neon, html:not(.js) .contact__neon, .contact__neon.is-on {
  filter:
    drop-shadow(0 0 18px rgba(62, 240, 228, .30))
    drop-shadow(0 30px 54px rgba(0, 0, 0, .55));
}
.contact__neon.is-on { animation: neonUp 1.6s steps(1, end) both; }
@keyframes neonUp {
  0%   { filter: grayscale(1) brightness(.22) contrast(.9) drop-shadow(0 30px 54px rgba(0, 0, 0, .55)); }
  6%   { filter: drop-shadow(0 0 18px rgba(62, 240, 228, .30)) drop-shadow(0 30px 54px rgba(0, 0, 0, .55)); }
  10%  { filter: grayscale(1) brightness(.3) drop-shadow(0 30px 54px rgba(0, 0, 0, .55)); }
  16%  { filter: drop-shadow(0 0 18px rgba(62, 240, 228, .30)) drop-shadow(0 30px 54px rgba(0, 0, 0, .55)); }
  22%  { filter: brightness(.55) drop-shadow(0 30px 54px rgba(0, 0, 0, .55)); }
  30%, 100% { filter: drop-shadow(0 0 18px rgba(62, 240, 228, .30)) drop-shadow(0 30px 54px rgba(0, 0, 0, .55)); }
}
.contact__neon:hover { transform: rotate(-.6deg) scale(1.01); }
.contact__mirror {
  position: absolute; left: 0; right: 0; top: 97%;
  width: 100%; height: auto;
  transform: rotate(2.4deg) scaleY(-.42);
  transform-origin: 50% 0;
  opacity: 0;
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 72%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent 72%);
  pointer-events: none;
  transition: opacity 1.4s var(--ease) .5s;
}
.contact__neon.is-on + .contact__mirror,
html.nojs .contact__mirror, html:not(.js) .contact__mirror { opacity: .55; }
.contact__k {
  font: 600 12.5px/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-top: 14px;
}
/* the direct line, rendered as a sign on the wall: pale hot glass, a stepped
   teal halo, and a pink bloom thrown from the left — the second neon voice.
   It sags for a quarter-second every nine seconds, like mains hum. */
.contact__num {
  display: inline-block;
  margin-top: 12px;
  font-weight: 780;
  font-variation-settings: 'wdth' 114;
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: .01em;
  color: #DDFFFB;
  text-shadow:
    0 0 3px rgba(240, 255, 250, .9),
    0 0 12px rgba(62, 240, 228, .6),
    0 0 34px rgba(62, 240, 228, .34),
    0 0 80px rgba(62, 240, 228, .18),
    -18px 4px 44px rgba(255, 79, 160, .30),
    16px 2px 44px rgba(255, 79, 160, .16);
  font-variant-numeric: tabular-nums;
  transition: color .25s var(--ease), text-shadow .3s var(--ease);
  padding: 10px;
  margin-inline: -10px;
  border-radius: 8px;
}
.contact__num:hover {
  color: #F2FFFD;
  text-shadow:
    0 0 3px rgba(255, 255, 255, .95),
    0 0 14px rgba(62, 240, 228, .75),
    0 0 44px rgba(62, 240, 228, .44),
    0 0 104px rgba(62, 240, 228, .24),
    -18px 4px 54px rgba(255, 79, 160, .4),
    16px 2px 54px rgba(255, 79, 160, .24);
}
@media (prefers-reduced-motion: no-preference) {
  .contact__num { animation: signHum 9s linear infinite; }
  @keyframes signHum {
    0%, 91.9%, 93.1%, 100% { opacity: 1; }
    92%, 92.4% { opacity: .86; }
    92.8% { opacity: .94; }
  }
}
.contact__alt { margin-top: 10px; font-size: 14.5px; color: var(--text-2); }
.contact__alt a {
  color: var(--text);
  padding: 10px 4px;
  margin: -10px -4px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: color .18s, background-size .35s var(--ease);
}
.contact__alt a:hover, .contact__alt a:active { color: var(--teal); background-size: 100% 1px; }
.contact__alt span { padding-inline: 7px; }
.contact__hours { margin-top: 18px; font-size: 12.5px; color: var(--text-2); }

/* the person the promises belong to */
.contact__who {
  margin: 0 auto 20px;
  max-width: 30ch;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--text);
  text-wrap: balance;
}
.contact__who b { color: #fff; font-weight: 750; }
.contact__line {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-2);
  text-wrap: pretty;
}

/* ---------- 14. Footer — the city at night ---------- */
.ftr__sky {
  position: relative;
  height: clamp(110px, 16vw, 230px);
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  margin-bottom: -1px;
}
.ftr__sky img {
  position: absolute; left: 50%; bottom: -2px;
  transform: translateX(-50%);
  min-width: max(100vw, 1100px);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
}

.ftr { position: relative; border-top: 1px solid var(--line); padding: 46px 0 30px; }
.ftr__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.ftr__sum { font-size: 14.5px; color: var(--text-2); max-width: 52ch; text-wrap: pretty; }
.ftr__c { font-size: 14.5px; }
/* the same sliding underline the contact links wear */
.ftr__c a {
  padding: 8px 2px; margin: -8px -2px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: color .18s, background-size .35s var(--ease);
}
.ftr__c a:hover, .ftr__c a:active { color: var(--teal); background-size: 100% 1px; }
.ftr__base {
  display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--text-2);
}
.ftr__colo { font-style: normal; letter-spacing: .01em; }
.ftr__base a {
  padding: 8px 2px; margin: -8px -2px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: color .18s, background-size .35s var(--ease);
}
.ftr__base a:hover, .ftr__base a:active { color: var(--teal); background-size: 100% 1px; }

.quickcall[hidden] { display: none; }
.quickcall {
  position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: flex; align-items: stretch;
  background: var(--teal-fill);
  color: var(--teal-ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
  font: 650 15px/1 var(--body);
  opacity: 0;
  transform: translateY(16px);
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}
.quickcall.is-shown { opacity: 1; transform: none; }
.quickcall a {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 12px 10px;
  transition: background-color .15s;
}
/* touch has no hover — the press tint is the whole acknowledgment */
.quickcall a:active { background: rgba(6, 37, 31, .16); }
.quickcall a + a { border-left: 1px solid rgba(6, 37, 31, .25); }


/* typing dialect for the composer bubble */
.scope__dots { display: none; position: absolute; left: 20px; bottom: 16px; gap: 5px; }
.scope__dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  animation: dotsBounce 1s ease-in-out infinite;
}
.scope__dots i:nth-child(2) { animation-delay: .15s; }
.scope__dots i:nth-child(3) { animation-delay: .3s; }
.scope__bubble.is-typing .scope__msg { visibility: hidden; }
.scope__bubble.is-typing .scope__dots { display: flex; }

/* the sun that knows when it's real: one pulse if loaded at actual sunset */
.logo__sun--golden { animation: sunPulse 1.6s var(--ease) 1; }
@keyframes sunPulse {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.7); transform: scale(1.18); }
  100% { filter: brightness(1); transform: none; }
}

/* easter-egg reward: dialing 305 makes the sign blink awake once */
.contact__neon.egg-once { animation: neonWake .9s steps(1, end) 1 both; }
@keyframes neonWake {
  0%, 22% { filter: brightness(.25); }
  30%, 38% { filter: brightness(1); }
  45% { filter: brightness(.4); }
  52%, 100% { filter: brightness(1); }
}

/* ---------- 15. Reveals — groups, not 40 separate fades ----------
   Members animate with one-shot keyframes (backwards fill) so their natural
   hover transforms stay live the moment the reveal finishes. */
html.js .rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
html.js .rv--p { transform: translateY(28px); }
html.js .rv.is-in { opacity: 1; transform: none; }

/* section titles rise through the same line masks as the hero headline */
html.js .h2.is-split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
html.js .h2.is-split .wi {
  display: inline-block;
  transform: translateY(112%);
  transition: transform .9s var(--ease);
  transition-delay: calc(var(--i) * 60ms);
}
html.js .h2.is-split.is-in .wi { transform: none; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
html.js .capx.rv:not(.is-in) .capx__row,
html.js .steps-wrap.rv:not(.is-in) .step,
html.js .scope.rv:not(.is-in) .scope__set,
html.js .scope.rv:not(.is-in) .scope__out,
html.js .scope.rv:not(.is-in) .scope__act { opacity: 0; }
html.js .capx.rv.is-in .capx__row,
html.js .steps-wrap.rv.is-in .step,
html.js .scope.rv.is-in .scope__set,
html.js .scope.rv.is-in .scope__out,
html.js .scope.rv.is-in .scope__act { animation: riseIn .65s var(--ease) backwards; }
html.js .capx.rv.is-in .capx__row:nth-child(2),
html.js .steps-wrap.rv.is-in .step:nth-child(2),
html.js .scope.rv.is-in .scope__set + .scope__set { animation-delay: .1s; }
html.js .capx.rv.is-in .capx__row:nth-child(3),
html.js .steps-wrap.rv.is-in .step:nth-child(3),
html.js .scope.rv.is-in .scope__out,
html.js .scope.rv.is-in .scope__act { animation-delay: .2s; }

/* ---------- 16. Responsive ---------- */
@media (max-width: 1020px) {
  .reel__head { grid-template-columns: 1fr; align-items: start; }
  .reel__note { justify-self: start; max-width: 58ch; }
  .reel__deck {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .reel__side { padding-top: 0; }
  /* phones read the index as the page reads itself: top to bottom, all five visible */
  .reel__index { flex-direction: column; gap: 0; }
  .reel__row {
    width: 100%;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 4px 14px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 13px 2px;
    min-height: 52px;
  }
  .reel__row.is-active {
    border-color: rgba(255,255,255,.08);
    border-left: 2px solid var(--teal);
    background: linear-gradient(90deg, rgba(62, 240, 228, .07), rgba(62, 240, 228, 0) 62%);
  }
  .reel__cat { grid-column: auto; }
  .reel__scope { display: none; }
  @media (pointer: coarse) {
    html.js:not(.reel-played) .pp { min-height: 44px; padding: 12px 18px; }
  }
  .swb { grid-template-columns: 1fr; gap: 40px; }
  .swb__console { max-width: 720px; }
  .swb__sms { right: 10px; }
  .capx__row { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; }
  .capx__main { grid-column: 2; }
  .capx__art {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: 18px;
  }
  .capx__art img { max-width: 240px; }
  .pricebar { grid-template-columns: 1fr; gap: 10px; }
  /* stacked steps: the wire turns vertical and runs down the left edge */
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .step { max-width: 60ch; padding-top: 0; padding-left: 30px; }
  .step::before { left: -1px; top: 4px; }
  .steps__wire { top: 4px; bottom: 4px; right: auto; left: 4px; width: 2px; height: auto; }
  .steps__fill { transform: scaleY(var(--p)); transform-origin: top; }
  .contact__in { grid-template-columns: 1fr; }
  .contact__direct { border-top: 1px solid var(--line); padding-top: 40px; }
}

@media (max-width: 920px) {
  .hdr__in { gap: 12px; }
  .hdr__cta { margin-left: auto; }
  .nav {
    position: fixed; inset: 0; z-index: 85;
    flex-direction: column; justify-content: center;
    padding: calc(var(--hdr-h) + 20px) var(--gut) 40px;
    gap: 6px;
    background: rgba(8, 13, 22, .96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s;
    overscroll-behavior: contain;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav > a {
    font: 740 clamp(30px, 7.5vw, 44px)/1.25 var(--body);
    font-variation-settings: 'wdth' 116;
    letter-spacing: -.01em;
    color: var(--text);
    padding: 6px 0;
  }
  .nav > a.is-active { color: var(--teal); }
  .nav__ink { display: none; }
  .burger { display: inline-flex; }
  .nav { margin-left: 0; }

  .faq__grid { grid-template-columns: 1fr; gap: 36px; }
  .faq__aside { position: static; }
  .ftr__in { grid-template-columns: 1fr; gap: 16px; text-align: left; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .sec { padding-block: clamp(60px, 9vh, 90px); }
  .sec--tight { padding-block: clamp(54px, 8vh, 76px); }
  .hero { min-height: 100vh; min-height: 88svh; }
  /* portrait frames: ride lower in the photo so dusk color fills the top */
  .hero__img { height: 128%; margin-top: -24%; object-position: 62% 50%; }
  .hero__palm { width: clamp(240px, 60vw, 340px); top: -44px; right: -64px; opacity: .92; }
  .hero__h { font-size: clamp(34px, 9.6vw, 52px); max-width: none; }
  .hero__act .btn { flex: 1 1 auto; justify-content: center; }
  html.js .hero { height: 200vh; height: 200svh; }
  .hero__sign { width: 92vw; top: 16%; }
  .hero__mirror { display: none; }
  /* phones: the bezel goes, the screen fills the width */
  .reel__frame, .reel__shadow, .reel__device::after { display: none; }
  .reel__device { aspect-ratio: auto; transform: none; }
  .reel__clip { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--r); }
  .reel__cap h3 { font-size: 19px; }
  .reel__scope { display: none; }
  .pp { top: 10px; right: 10px; padding: 9px 13px; }
  .scope__act { flex-direction: column; align-items: stretch; }
  .scope__act .btn { justify-content: center; }
  .scope__opts { grid-template-columns: 1fr 1fr; }
  .scope__opts--text { gap: 0 22px; }
  .sheet__row { padding: 14px 4px 14px 2px; gap: 13px; }
  .sheet__txt b { font-size: 15.5px; }
  .sheet__txt small { font-size: 12px; }
  .swb__head { letter-spacing: .1em; }
  .swb__clock { white-space: nowrap; flex: none; }
  .swb__ln { grid-template-columns: 50px minmax(0, 1fr); row-gap: 2px; opacity: .6; }
  .swb__ln.is-lit { opacity: 1; }
  .swb__ln .swb__d { grid-column: 1 / -1; }
  .swb__sms { right: 6px; width: min(290px, 88%); }
  .hdr__cta { min-height: 44px; display: inline-flex; align-items: center; }
  .ftr__sky { height: clamp(70px, 18vw, 120px); }
}

@media (max-width: 400px) {
  .logo__word { display: none; }
  .hdr__cta { font-size: 12.5px; padding: 10px 14px; }
  .lang { padding: 8px 9px; }
}

.arw--up { width: 11px; height: 8px; transform: rotate(-90deg) translateY(-1px); }

/* dusk deepens with the real Miami sun (set from site.js Solar Engine) */
@supports (color: color-mix(in srgb, red, blue)) {
  html[data-sunk] body { background-color: color-mix(in srgb, var(--bg), #00030c calc(var(--night, 0) * 9%)); }
}

/* ---------- 17. Reduced motion & no-JS ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html.js .hero__plate, html.js .hero__palm { animation: none; }
  html.js .hero__h .wi { transform: none; transition: none; }
  html.js .hero__h:not(.is-split) { visibility: visible; }
  html.js .hero__h .w { overflow: visible; }
  html.js .hero { height: auto; }
  html.js .hero__pin { position: relative; height: auto; min-height: 94svh; }
  html.js .hero__sign, html.js .hero__cue { display: none; }
  html.js .h2.is-split .wi { transform: none; transition: none; }
  .reel__device { transform: none; }
  .steps__fill { transform: none; }
  .nav { transition-delay: 0s !important; }
}

html.nojs .pp { display: none; }
html.nav-locked, html.nav-locked body { overflow: hidden; }
#main:focus, #main:focus-visible { outline: none; }

/* the marquee without JS: a graceful slow drift; reduced motion stills it */
html.nojs .mq__lane { animation: mqDrift 46s linear infinite; }
@keyframes mqDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html.nojs .mq__lane { animation: none; }
  .mq__peek { display: none; }
}