/* ============================================================
     FONTS
     Both faces are variable and self-hosted from /assets/fonts, built from
     the TTFs in /Fonts. One file per family covers every weight the site
     uses, so weight changes cost no extra request.
     ============================================================ */
  @font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/Manrope-Variable.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Geist';
    src: url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  /* ============================================================
     DESIGN TOKENS
     Source of truth: Brand_Assets/brand/ (alvsolutions-brand-guidelines.png,
     alv-buttons.css) and Brand_Assets/README.md.
     Typography per the brand guide: Manrope for headings (ExtraBold display,
     Bold subheadings) and Geist for body and interface text.

     COLOUR RULES (from the guide):
       Blue carries the page. Gold moves: hover, focus, prices and the one
       recommended pick in a set. Never a decorative tint on an ordinary card.
       Headings Mist (--text), body Cloud (--text-2), captions Slate (--text-3).

     RADIUS RULE (applied everywhere, no exceptions):
       --r-xs    6px  inner chrome: url bar, scrollbar
       --r-ctl  10px  controls: buttons, inputs, small tiles
       --r-card 16px  cards, panels, media frames
       999px          pills and dots only
     ============================================================ */
  :root {
    /* surfaces */
    --ink:       #070C14;
    --ink-2:     #0A111C;
    --surface:   #0E1826;
    --surface-2: #14202F;
    --line:      rgba(125,166,214,.13);  /* dividers, card edges (decorative) */
    --line-2:    rgba(125,166,214,.24);  /* frames, stronger dividers (decorative) */
    --line-ui:   rgba(125,166,214,.60);  /* control boundaries: 3.0-3.4:1 on every surface */

    /* brand */
    --blue:         #3DA8F8;  /* Alv Blue: accents, links, icons. 7.6:1 on ink */
    --blue-deep:    #1A72C6;  /* Deep Blue: button fill, 4.92:1 with white text */
    --blue-pressed: #155FA8;
    --logo-navy:    #072753;
    --gold:         #FFC811;  /* ink label 12.6:1 */
    --gold-hover:   #FFD84A;
    --gold-pressed: #F0B800;

    /* text, all AA or better on --ink */
    --text:      #EDF2F8;  /* 17.0:1 */
    --text-2:    #B4C2D2;  /* 10.4:1 */
    --text-3:    #8698AC;  /*  6.4:1 */

    --r-xs:    6px;
    --r-ctl:  10px;
    --r-card: 16px;

    --sp:      clamp(64px, 6.6vw, 100px);
    --sp-tight:clamp(52px, 5.4vw, 78px);
    --gut:     clamp(20px, 4vw, 32px);
    --nav-h:   68px;

    --ease: cubic-bezier(.22,.61,.36,1);

    /* Headline face and text face. Every rule reads these rather than
       naming a family, so a future swap happens in one place. */
    --font-head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  }

  *,*::before,*::after { box-sizing: border-box; }
  * { margin: 0; }

  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }

  body {
    font-family: var(--font-body);
    background: var(--ink);
    color: var(--text);
    font-size: 15.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* The UA sheet's `[hidden] { display: none }` is a bare element rule, so any
     class that sets display outranks it and the element stays on screen. Every
     wizard panel, conditional field and swapped button is toggled with the
     attribute, so this has to win outright. */
  [hidden] { display: none !important; }

  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; }
  button, input, textarea { font: inherit; color: inherit; }

  ::selection { background: rgba(61,168,248,.28); }
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--ink); }
  ::-webkit-scrollbar-thumb { background: rgba(125,166,214,.2); border-radius: 999px; border: 3px solid var(--ink); }
  ::-webkit-scrollbar-thumb:hover { background: rgba(125,166,214,.34); }

  /* ---------- layout primitives ---------- */
  .wrap      { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); }
  .wrap-mid  { max-width: 940px; }
  .sec       { padding-block: var(--sp); position: relative; }
  .sec-tight { padding-block: var(--sp-tight); }
  .sec-line  { border-top: 1px solid var(--line); }
  .band      { background: var(--ink-2); }

  /* ---------- type ---------- */
  /* Manrope is narrower and higher-contrast than the face it replaced, so the
     display sizes carry ExtraBold without going heavy, and the tracking is
     opened a touch because Manrope is already tightly spaced by default. */
  h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
  h1 { font-size: clamp(35px, 4.4vw, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -.028em; }
  h2 { font-size: clamp(28px, 3.4vw, 43px); font-weight: 800; letter-spacing: -.025em; }
  h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -.012em; line-height: 1.35; }
  p  { text-wrap: pretty; }

  .accent    { color: var(--blue); }
  .lead      { font-size: 17px; font-weight: 450; line-height: 1.72; color: var(--text-2); max-width: 52ch; }
  .body-2    { color: var(--text-2); }
  .body-3    { color: var(--text-3); font-size: 14.5px; line-height: 1.68; }
  .eyebrow   { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
  .sec-head  { max-width: 640px; }
  .sec-head p { margin-top: 18px; }

  /* ---------- icons (Tabler, outline, uniform 1.75 stroke) ---------- */
  .ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

  .ic-box {
    width: 44px; height: 44px; border-radius: var(--r-ctl);
    display: grid; place-items: center; font-size: 21px;
    background: rgba(61,168,248,.10);
    border: 1px solid rgba(61,168,248,.20);
    color: var(--blue);
  }
  /* Gold icon tile: only for the price or the one recommended item in a set. */
  .ic-box.gold { background: rgba(255,200,17,.10); border-color: rgba(255,200,17,.22); color: var(--gold); }

  /* ---------- controls ---------- */
  /* Buttons follow Brand_Assets/brand/alv-buttons.css: three fixed heights
     (38 / 46 / 54), 10px radius, Geist 600. The brand gesture is that every
     button turns Gold when highlighted; the fill change is the whole signal,
     so there is no glow. Labels say where they go, so they carry no trailing
     arrow unless the arrow adds meaning (a new tab, a step forward). */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px;
    white-space: nowrap;
    font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.002em;
    border-radius: var(--r-ctl);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background-color .18s var(--ease), border-color .18s var(--ease),
                transform .12s var(--ease), color .18s var(--ease);
  }
  .btn .ic { font-size: 18px; }
  .btn:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }

  /* Primary: one per view. White on Deep Blue 4.92:1, ink on Gold 12.6:1. */
  .btn-primary { background: var(--blue-deep); color: #fff; }
  .btn-primary:hover { background: var(--gold); color: var(--ink); }
  .btn-primary:active { background: var(--gold-pressed); color: var(--ink); }

  /* Ghost: secondary actions beside a Primary. The border is --line-ui, which
     clears 3:1 for a control boundary; the old .24 alpha measured 1.5:1. */
  .btn-ghost { background: transparent; color: var(--text); border-color: var(--line-ui); }
  .btn-ghost:hover {
    border-color: rgba(255,200,17,.55);
    background: rgba(255,200,17,.08);
    color: var(--gold);
  }
  .btn-ghost:active { background: rgba(255,200,17,.14); }
  .btn-sm { min-height: 38px; padding: 0 16px; font-size: 14px; gap: 6px; }
  .btn-sm .ic { font-size: 16px; }
  .btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
  .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .pill {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(61,168,248,.08);
    border: 1px solid rgba(61,168,248,.22);
    border-radius: 999px; padding: 7px 16px 7px 13px;
    font-size: 12.5px; font-weight: 500; color: var(--blue);
  }
  .pill .ic { font-size: 14px; }

  /* ---------- surfaces ---------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 26px;
    transition: border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
  }
  .card-hover:hover { border-color: rgba(61,168,248,.34); background: var(--surface-2); }

  .tile {
    background: rgba(61,168,248,.06);
    border: 1px solid rgba(61,168,248,.17);
    border-radius: var(--r-ctl);
    padding: 13px 14px;
  }
  .tile-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .tile p { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

  /* ============================================================
     NAV
     ============================================================ */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    background: rgba(7,12,20,.72);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), background .25s var(--ease);
  }
  .nav.scrolled { background: rgba(7,12,20,.9); border-bottom-color: var(--line); }
  .nav-in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
  .brand img { height: 27px; width: auto; }
  .wordmark { font-family: var(--font-head); font-size: 19px; font-weight: 800; letter-spacing: -.03em; color: var(--text); line-height: 1; }
  .wordmark span { color: var(--blue); }

  /* Six links plus the brand and the CTA. The gap opens up once there is room
     for it; below that the row would push the CTA off the end. */
  .nav-links { display: none; align-items: center; gap: 24px; }
  .nav-link {
    font-size: 14px; font-weight: 500; color: var(--text-2);
    text-decoration: none; position: relative; padding-block: 4px;
    transition: color .18s var(--ease);
  }
  .nav-link::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1.5px; background: var(--blue);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
  }
  .nav-link:hover { color: var(--text); }
  .nav-link:hover::after { transform: scaleX(1); }
  .nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }
  .nav-cta { display: none; }

  .burger {
    display: grid; place-items: center;
    width: 40px; height: 40px; font-size: 22px;
    background: transparent; border: 1px solid var(--line-ui);
    border-radius: var(--r-ctl); color: var(--text); cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease);
  }
  .burger:hover { border-color: rgba(61,168,248,.5); background: rgba(61,168,248,.07); }
  .burger:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .burger .ic-close { display: none; }
  .burger[aria-expanded="true"] .ic-open { display: none; }
  .burger[aria-expanded="true"] .ic-close { display: block; }

  .mob-menu { display: none; border-top: 1px solid var(--line); background: rgba(7,12,20,.97); padding: 8px var(--gut) 22px; }
  .mob-menu.open { display: block; }
  .mob-menu a.nav-link { display: block; padding: 13px 0; font-size: 16px; border-bottom: 1px solid var(--line); }
  .mob-menu a.nav-link::after { display: none; }
  .mob-menu .btn { width: 100%; margin-top: 18px; }

  @media (min-width: 980px) {
    .nav-links { display: flex; }
    .nav-cta   { display: inline-flex; }
    .burger    { display: none; }
    .mob-menu  { display: none !important; }
  }
  @media (min-width: 1140px) { .nav-links { gap: 30px; } }

  /* ============================================================
     HERO  -  asymmetric split, real work as the visual
     ============================================================ */
  .hero {
    position: relative; overflow: hidden;
    padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 84px));
    padding-bottom: clamp(64px, 8vw, 104px);
  }
  /* static ambience: one glow + a fine grid. No canvas, no animation loop. */
  .hero::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    width: min(1100px, 130%); aspect-ratio: 1;
    top: -55%; left: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, rgba(61,168,248,.13) 0%, rgba(61,168,248,.04) 42%, transparent 68%);
  }
  .hero::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(125,166,214,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(125,166,214,.05) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 85% 62% at 50% 28%, #000 20%, transparent 78%);
            mask-image: radial-gradient(ellipse 85% 62% at 50% 28%, #000 20%, transparent 78%);
  }
  .hero-in { position: relative; z-index: 1; display: grid; gap: clamp(48px, 6vw, 68px); align-items: center; }
  .hero-copy > * + * { margin-top: 22px; }
  .hero-copy .lead { max-width: 45ch; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
  /* stacked CTAs should share one width rather than sitting ragged */
  @media (max-width: 479px) {
    .hero-actions { display: grid; grid-template-columns: 1fr; }
    .hero-actions .btn { width: 100%; }
  }

  @media (min-width: 1000px) {
    .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  }

  /* browser frame holding a real screenshot */
  .frame {
    border-radius: var(--r-card); overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(61,168,248,.05);
  }
  .frame-bar {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 14px;
    background: rgba(125,166,214,.05);
    border-bottom: 1px solid var(--line);
  }
  .frame-dots { display: flex; gap: 6px; flex: none; }
  .frame-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(125,166,214,.26); }
  .frame-url {
    flex: 1; min-width: 0; text-align: center;
    font-size: 11.5px; color: var(--text-3);
    background: rgba(7,12,20,.6); border-radius: var(--r-xs); padding: 4px 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .frame img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top center; }

  @media (min-width: 1200px) {
    .hero-visual { margin-right: calc(-1 * clamp(24px, 5vw, 90px)); }
  }

  /* hero shot as a link down to the build */
  .frame-link { display: block; position: relative; text-decoration: none; border-radius: var(--r-card); }
  .frame-link .stage { transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
  .frame-link:hover .stage,
  .frame-link:focus-visible .stage { border-color: rgba(61,168,248,.55); }
  .frame-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

  .shot-hint {
    position: absolute; right: 18px; bottom: 18px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 999px;
    background: var(--gold); color: var(--ink);
    font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0,0,0,.55);
    opacity: 0; transition: opacity .2s var(--ease);
    pointer-events: none;
  }
  .shot-hint .ic { font-size: 15px; stroke-width: 2.2; }
  .frame-link:hover .shot-hint,
  .frame-link:focus-visible .shot-hint { opacity: 1; }

  /* ============================================================
     INCLUDED  -  hairline spec row, no cards
     ============================================================ */
  .included { display: grid; gap: 0; grid-template-columns: 1fr; }
  .inc-item { padding: 22px 0; border-top: 1px solid var(--line); }
  .inc-item:first-child { border-top: 0; }
  .inc-item .ic { font-size: 19px; color: var(--blue); margin-bottom: 12px; }
  .inc-item h3 { font-size: 15.5px; margin-bottom: 5px; }
  .inc-item p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
  .inc-item.is-gold .ic, .inc-item.is-gold h3 { color: var(--gold); }

  @media (min-width: 700px) {
    .included { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
    .inc-item { border-top: 1px solid var(--line); padding: 26px 0 4px; }
    .inc-item:first-child { border-top: 1px solid var(--line); }
  }
  @media (min-width: 1040px) {
    .included { grid-template-columns: repeat(5, 1fr); column-gap: 28px; }
  }

  /* ============================================================
     SERVICES  -  asymmetric bento, exactly 7 cells
     ============================================================ */
  .bento { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .bento .card { display: flex; flex-direction: column; }
  .bento h3 { margin: 16px 0 8px; }
  .bento p  { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
  .bento .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

  .inc-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
  .inc-list li {
    position: relative; padding-left: 24px;
    font-size: 13.5px; line-height: 1.55; color: var(--text-2);
  }
  .inc-list li::before {
    content: ''; position: absolute; left: 4px; top: .55em;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--blue); opacity: .7;
  }
  @media (min-width: 560px) { .inc-list { grid-template-columns: 1fr 1fr; column-gap: 20px; } }

  /* ---- shader backdrop (services) ------------------------------------
     A WebGL "pulsing border" ring sits behind the section. Its base colour
     is near-black, so `mix-blend-mode: screen` drops the black out entirely
     and leaves only the blue glow: no dark rectangle edge, nothing to line
     up with the section bounds. Masked soft at top and bottom so it melts
     into the neighbouring bands, and kept under the content at z-index 0. */
  .sec-shader { overflow: hidden; }
  .sec-shader > .wrap { position: relative; z-index: 1; }
  #svc-shader {
    position: absolute; z-index: 0;
    /* Bled past the section so the CSS blur has no visible cut-off edge; the
       parent clips it, so this cannot cause page overflow.
       width/height are explicit on purpose: <canvas> is a replaced element,
       so insets alone do NOT stretch it - it silently falls back to its
       intrinsic 300x150 and renders as a tile in the corner. */
    top: -60px; left: -60px;
    width: calc(100% + 120px);
    height: calc(100% + 120px);
    pointer-events: none;
    opacity: .5;
    /* The raw shader draws a hard travelling highlight. Unblurred it crosses
       the headline as a bright streak and eats text contrast. Blurring turns
       it into a soft moving wash, which is both easier to read against and
       the more expensive-looking result. */
    filter: blur(28px) saturate(125%);
    mix-blend-mode: screen;
    /* Fade the horizontal arcs out at top and bottom: it melts into the
       neighbouring bands instead of drawing a hard line across the section
       boundary, and it keeps the travelling light off the headline. What
       reads is the two vertical arcs running down the outer margins, clear
       of the text column entirely. */
    /* Hold it off the section head (the only text not sitting on an opaque
       card), then let it run at full strength around the grid below. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 11%, #000 25%, #000 92%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, transparent 11%, #000 25%, #000 92%, transparent 100%);
  }
  /* single column on small screens: text runs full width, so pull the bloom
     down and back rather than letting it sit under the section head */
  @media (max-width: 719px) {
    #svc-shader { opacity: .5; filter: blur(30px); }
  }

  /* Every bento cell is a link to the service page it describes, so the whole
     card is the target rather than a "learn more" at the bottom of it. */
  .bento a.card { text-decoration: none; color: inherit; }
  .bento a.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  .sec-close {
    margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  }
  .sec-close p { font-size: 14.5px; color: var(--text-2); max-width: 46ch; }

  /* ============================================================
     PRICING RAIL  -  the packages at a glance, on the home page
     Three prices side by side and nothing else. The full cards, the
     comparison chart and the care plans live on /packages/; repeating
     them here would make the home page a second pricing page.
     ============================================================ */
  .rail { display: grid; gap: 12px; grid-template-columns: 1fr; }
  @media (min-width: 640px) { .rail { grid-template-columns: repeat(3, 1fr); } }

  .rail-item {
    position: relative;
    display: grid; gap: 6px; align-content: start;
    padding: 22px 22px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    text-decoration: none;
    transition: border-color .25s var(--ease), background .25s var(--ease);
  }
  .rail-item:hover { border-color: rgba(61,168,248,.34); background: var(--surface-2); }
  .rail-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .rail-item.pop {
    border-color: rgba(255,200,17,.42);
    background: linear-gradient(180deg, rgba(255,200,17,.055), transparent 46%), var(--surface);
  }
  .rail-badge {
    position: absolute; top: -11px; left: 22px;
    font-size: 12px; font-weight: 600;
    color: var(--ink); background: var(--gold);
    border-radius: 999px; padding: 3px 11px;
  }
  .rail-name { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text-2); }
  .rail-price {
    font-family: var(--font-head); font-size: 34px; font-weight: 800;
    letter-spacing: -.035em; line-height: 1.05;
    font-variant-numeric: tabular-nums;
  }
  .rail-item.pop .rail-price { color: var(--gold); }
  .rail-note { font-size: 13.5px; color: var(--text-3); }

  .rail-foot {
    display: flex; align-items: flex-start; gap: 11px;
    margin-top: 16px; padding: 13px 16px;
    background: rgba(61,168,248,.07);
    border: 1px solid rgba(61,168,248,.26);
    border-radius: var(--r-ctl);
    font-size: 13.5px; line-height: 1.6; color: var(--text-2);
  }
  .rail-foot .ic { flex: none; font-size: 17px; color: var(--blue); margin-top: 2px; }

  /* ---- the four trade builds, as a row of targets ---- */
  .trades { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
  .trades-h { font-size: 16.5px; font-weight: 700; color: var(--text-2); margin-bottom: 18px; }
  .trade-row { display: grid; gap: 14px; grid-template-columns: 1fr; }
  @media (min-width: 560px) { .trade-row { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .trade-row { grid-template-columns: repeat(4, 1fr); } }

  .trade {
    display: flex; align-items: center; gap: 13px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-ctl);
    text-decoration: none;
    transition: border-color .2s var(--ease), background .2s var(--ease);
  }
  .trade:hover { border-color: rgba(255,200,17,.45); background: rgba(255,200,17,.08); }
  .trade:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .trade .ic { font-size: 23px; color: var(--blue); }
  .trade-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
  .trade-price {
    font-family: var(--font-head); font-size: 17px; font-weight: 800;
    letter-spacing: -.02em; color: var(--gold); font-variant-numeric: tabular-nums;
  }

  /* cell visual variation */
  .cell-feature {
    background:
      radial-gradient(120% 130% at 100% 0%, rgba(61,168,248,.16) 0%, transparent 58%),
      var(--surface);
  }
  .cell-feature::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background-image:
      linear-gradient(rgba(125,166,214,.055) 1px, transparent 1px),
      linear-gradient(90deg, rgba(125,166,214,.055) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(200deg, #000, transparent 62%);
            mask-image: linear-gradient(200deg, #000, transparent 62%);
  }
  .cell-feature { position: relative; }
  .cell-feature > * { position: relative; z-index: 1; }

  @media (min-width: 720px) {
    .bento { grid-template-columns: repeat(6, 1fr); }
    .c1 { grid-column: span 6; }
    .c2 { grid-column: span 6; }
    .c3, .c4 { grid-column: span 3; }
    .c5 { grid-column: span 6; }
    .c6, .c7 { grid-column: span 3; }
  }
  @media (min-width: 1000px) {
    .bento { grid-template-columns: repeat(12, 1fr); }
    .c1 { grid-column: span 7; }
    .c2 { grid-column: span 5; }
    .c3 { grid-column: span 4; }
    .c4 { grid-column: span 4; }
    .c5 { grid-column: span 4; }
    .c6 { grid-column: span 6; }
    .c7 { grid-column: span 6; }
  }

  /* ============================================================
     WORK  -  full showcase rows
     ============================================================ */
  .work-row { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
  .work-row + .work-row { margin-top: clamp(64px, 8vw, 104px); }
  .work-copy > * + * { margin-top: 16px; }
  .work-copy p { max-width: 46ch; }
  .work-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 500;
    color: var(--text-3);
  }
  .work-tag b { color: var(--blue); font-weight: 600; }
  .work-meta { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
  /* the chips are metadata, the CTA is an action: give it its own breathing
     room rather than letting it read as another chip */
  .work-cta { margin-top: 22px; align-self: start; }
  .chip {
    font-size: 12.5px; color: var(--text-2);
    border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px;
    background: rgba(125,166,214,.04);
  }

  /* desktop shot with the mobile shot overlapping its corner */
  .shot { position: relative; padding-bottom: 34px; padding-left: 30px; }

  /* STAGE
     A demo build is somebody else's brand. Dropping a cream-and-gold
     restaurant screenshot straight onto this navy page is an abrupt colour
     jump, so each showcase sits on a mat: a neutral surface border, a soft
     brand glow behind it, and the same browser chrome used in the hero.
     The mat is the barrier; the chrome says "this is a website, not our page". */
  .stage {
    position: relative; z-index: 1;
    padding: clamp(9px, 1.2vw, 14px);
    border-radius: var(--r-card);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line-2);
    box-shadow:
      0 34px 74px -28px rgba(0,0,0,.88),
      inset 0 1px 0 rgba(255,255,255,.055);
  }
  /* kept inside the container: a negative horizontal inset here pushed the
     document past the viewport at tablet widths */
  .shot::before {
    content: ''; position: absolute; z-index: 0; inset: 5% 0 9%;
    background: radial-gradient(68% 58% at 50% 46%, rgba(61,168,248,.19), transparent 74%);
    pointer-events: none;
  }
  /* inside a stage the frame is the inner element, so the stage carries the
     shadow and the frame keeps only a hairline */
  .stage .frame { border-radius: var(--r-ctl); box-shadow: none; border-color: var(--line-2); }

  .shot-mob {
    position: absolute; z-index: 2; left: 0; bottom: 0; width: clamp(92px, 18%, 138px);
    padding: 5px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border: 1px solid var(--line);
    box-shadow: 0 20px 44px -14px rgba(0,0,0,.92);
  }
  .shot-mob img { border-radius: var(--r-xs); }
  .shot-mob img { width: 100%; aspect-ratio: 1/2; object-fit: cover; object-position: top center; display: block; }

  /* below 600px the inset phone shrinks to illegible clutter, so drop it
     and give the desktop shot the full column */
  @media (max-width: 599px) {
    .shot { padding-left: 0; padding-bottom: 0; }
    .shot-mob { display: none; }
  }

  @media (min-width: 940px) {
    .work-row      { grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); }
    /* mirror the track sizes too, so the shot keeps the wide column in both
       rows and the two rows read as a matched pair */
    .work-row.flip { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }
    .work-row.flip .work-copy { order: 2; }
    .work-row.flip .shot      { order: 1; padding-left: 0; padding-right: 30px; }
    .work-row.flip .shot-mob  { left: auto; right: 0; }
  }

  /* ---- aurora backdrop (work section) --------------------------------
     Adapted from the 21st.dev Aurora Background component, rebuilt in plain
     CSS. Three things changed on purpose:
       1. Palette. The stock blobs are purple-600 / fuchsia-600 / indigo-700
          over violet radials. That is the AI-default violet this site
          deliberately avoids, and it is nowhere in the brand guide. These
          are the brand blues.
       2. The 50-80 twinkling star divs are gone. A starfield says nothing
          about a web design studio, and 80 permanently-animating nodes is
          real compositing cost for decoration.
       3. No framer-motion and no JS at all. Three elements animating only
          `transform`, which the compositor handles on its own.
     ------------------------------------------------------------------- */
  .sec-aurora { overflow: hidden; }
  .sec-aurora > .wrap { position: relative; z-index: 1; }

  .aurora {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; pointer-events: none;
    /* single knob for the whole effect: raise toward 1 for more glow,
       lower toward 0 for less. Scales all three blobs together. */
    --aurora-strength: .6;
    opacity: var(--aurora-strength);
    mix-blend-mode: screen;
    /* melt into the neighbouring bands instead of ending on a hard line */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 17%, #000 83%, transparent 100%);
  }
  .aurora i {
    position: absolute; display: block;
    aspect-ratio: 1; border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
  }
  .aurora .a1 { width: 46%; top: -15%; left: -9%;     background: #1A72C6; opacity: .40; }
  /* a2 sits bottom-right, which is where the flipped row's copy lives, so it
     is the dimmest of the three: at .26 the body text measured 4.58:1, only
     just over the AA floor */
  .aurora .a2 { width: 40%; bottom: -20%; right: -10%; background: #3DA8F8; opacity: .17; }
  .aurora .a3 { width: 34%; top: 33%; left: 40%;      background: #16457C; opacity: .38; }

  @media (prefers-reduced-motion: no-preference) {
    /* very long, offset cycles so the drift never reads as a loop */
    .aurora .a1 { animation: aur-a 38s ease-in-out infinite alternate; }
    .aurora .a2 { animation: aur-b 46s ease-in-out infinite alternate; }
    .aurora .a3 { animation: aur-c 54s ease-in-out infinite alternate; }
  }
  @keyframes aur-a {
    from { transform: translate3d(-3%, -2%, 0) scale(1);    }
    to   { transform: translate3d(7%, 4%, 0)   scale(1.18); }
  }
  @keyframes aur-b {
    from { transform: translate3d(4%, 2%, 0)   scale(1.12); }
    to   { transform: translate3d(-6%, -3%, 0) scale(1);    }
  }
  @keyframes aur-c {
    from { transform: translate3d(2%, -3%, 0)  scale(1);    }
    to   { transform: translate3d(-5%, 3%, 0)  scale(1.22); }
  }
  @media (max-width: 719px) {
    .aurora { --aurora-strength: .42; }
    .aurora i { filter: blur(64px); }
  }

  /* ============================================================
     PROCESS  -  numbered steps on a connecting rule
     ============================================================ */
  .steps { display: grid; gap: 36px; grid-template-columns: 1fr; counter-reset: step; }
  .step { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
  .step-n {
    position: absolute; top: -1px; left: 0;
    display: flex; align-items: center; gap: 9px;
    padding-right: 12px; background: var(--ink);
    transform: translateY(-50%);
    font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--blue);
  }
  .step-n .ic { font-size: 15px; }
  .step h3 { margin-bottom: 9px; }
  .step p  { font-size: 14.5px; line-height: 1.7; color: var(--text-2); }
  @media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

  /* ============================================================
     ABOUT  -  split, hairline list, no cards
     ============================================================ */
  .about { display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; }
  .about-copy > * + * { margin-top: 20px; }
  .price { color: var(--gold); font-weight: 600; }

  .pts { display: grid; }
  .pt { display: grid; grid-template-columns: auto 1fr; gap: 15px; padding: 22px 0; border-top: 1px solid var(--line); }
  .pt:first-child { border-top: 0; padding-top: 0; }
  .pt .ic-dot {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(61,168,248,.13); color: var(--blue); font-size: 14px; margin-top: 1px;
  }
  .pt h3 { font-size: 15.5px; margin-bottom: 5px; }
  .pt p  { font-size: 14px; line-height: 1.65; color: var(--text-2); }
  @media (min-width: 940px) { .about { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }

  /* ============================================================
     CONTACT
     ============================================================ */
  .contact { display: grid; gap: clamp(40px, 5vw, 64px); align-items: start; }
  @media (min-width: 940px) { .contact { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); } }

  .next { display: grid; margin-top: 30px; }
  .next-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
  .next-item:first-child { border-top: 0; padding-top: 0; }
  .next-item .ic { font-size: 18px; color: var(--blue); margin-top: 3px; }
  .next-item h3 { font-size: 15px; margin-bottom: 3px; }
  .next-item p { font-size: 14px; line-height: 1.6; color: var(--text-2); }

  .form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(22px, 3.5vw, 32px); }
  .field { display: grid; gap: 7px; margin-bottom: 16px; }
  .field label { font-size: 13px; font-weight: 500; color: var(--text-2); }
  .field .hint { font-size: 12px; color: var(--text-3); }
  .input {
    width: 100%; background: rgba(7,12,20,.55);
    border: 1px solid var(--line-ui); border-radius: var(--r-ctl);
    padding: 12px 14px; font-size: 15px; color: var(--text);
    transition: border-color .18s var(--ease), background .18s var(--ease);
  }
  .input::placeholder { color: var(--text-3); }
  .input:hover { border-color: rgba(125,166,214,.8); }
  .input:focus { outline: none; border-color: var(--blue); background: rgba(7,12,20,.8); }
  .input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  textarea.input { resize: vertical; min-height: 118px; }
  /* column gap only: each .field already carries its own bottom margin, so a
     row gap doubled the space between stacked fields on phones */
  .field-row { display: grid; column-gap: 16px; }
  @media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

  .err {
    display: none; align-items: flex-start; gap: 6px;
    font-size: 12.5px; line-height: 1.45; color: #FF9B9B;
  }
  .err .ic { flex: none; font-size: 14px; margin-top: 2px; }
  .field.invalid .err { display: flex; }
  .field.invalid .input { border-color: rgba(255,120,120,.6); }

  .form-note { font-size: 12.5px; color: var(--text-3); text-align: center; margin-top: 14px; }
  .form-note a { color: var(--text-2); }

  .sent { display: none; text-align: center; padding: 26px 6px; }
  .sent .ic { font-size: 40px; color: var(--blue); margin: 0 auto 16px; }
  .sent h3 { font-size: 20px; margin-bottom: 10px; }
  .sent p { font-size: 14px; color: var(--text-3); max-width: 40ch; margin-inline: auto; }
  .form.done .form-body { display: none; }
  .form.done .sent { display: block; }
  .form.done .wiz-head { display: none; }

  .sent h3 { text-wrap: balance; }
  .sent h3:focus { outline: none; }
  .sent h3:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r-xs); }
  .sent .sent-lead { color: var(--text-2); max-width: 44ch; }
  .sent .sent-note {
    font-size: 12.5px; max-width: 42ch;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  }

  /* ============================================================
     PROJECT INTAKE WIZARD
     Three answer steps and a review, one panel at a time. Everything
     reuses the form tokens above: .input, .err and .field are shared
     with the old single-screen form, so an error looks the same here
     as it did there.

     Two shapes carry the whole control language:
       square + tick   pick as many as you like
       circle + dot    pick exactly one
     Blue means chosen. Gold stays what it is everywhere else on the
     site: the highlight under a pointer or a focus ring.
     ============================================================ */
  /* One continuous bar rather than four checkpoints. The fill is scaled, not
     resized, so the browser animates it on the compositor; the track clips it
     so the leading edge stays square and only the ends of the track round. */
  .wiz-head { margin-bottom: 26px; }
  .wiz-meta {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 10px;
  }
  .wiz-count { font-size: 13px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
  .wiz-now { font-family: var(--font-head); font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -.015em; }

  .wiz-bar {
    height: 6px; border-radius: 999px; overflow: hidden;
    background: rgba(7,12,20,.8);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .wiz-fill {
    display: block; width: 100%; height: 100%;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue));
    transform: scaleX(var(--p, .25)); transform-origin: left;
  }

  .wiz-panel { min-width: 0; }
  .wiz-title { font-size: 17px; margin-bottom: 5px; }
  .wiz-title:focus { outline: none; }
  .wiz-title:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r-xs); }
  .wiz-sub { font-size: 13.5px; line-height: 1.6; color: var(--text-3); margin-bottom: 20px; }

  .wiz-tag { margin-bottom: 20px; }
  .opt-tag { font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-left: 6px; }

  .wiz-alert {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: 18px; padding: 11px 14px;
    background: rgba(255,120,120,.08);
    border: 1px solid rgba(255,120,120,.32); border-radius: var(--r-ctl);
    font-size: 13px; line-height: 1.55; color: #FFC9C9;
  }
  .wiz-alert .ic { font-size: 16px; color: #FF9B9B; margin-top: 2px; }

  /* ---------- grouped answers ---------- */
  .fset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
  .fset-lg { padding: 0; font-size: 13px; font-weight: 500; color: var(--text-2); }
  .fset > .hint { display: block; font-size: 12px; color: var(--text-3); margin-top: 4px; }
  .fset .err { margin-top: 9px; }
  .fset.invalid .fset-lg { color: #FF9B9B; }
  [data-field].invalid > .err { display: flex; }

  .seg, .opt-pair, .opt-grid, .opt-stack { display: grid; gap: 8px; margin-top: 10px; }
  .seg { grid-template-columns: 1fr 1fr; max-width: 260px; }
  .opt-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
  @media (min-width: 520px) { .opt-pair { grid-template-columns: 1fr 1fr; } }

  .opt { position: relative; display: block; min-width: 0; }
  .opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .opt-face {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; height: 100%; padding: 9px 13px;
    background: rgba(7,12,20,.55);
    border: 1px solid var(--line-ui); border-radius: var(--r-ctl);
    font-size: 14px; line-height: 1.4; color: var(--text-2); cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  }
  .opt:hover .opt-face { border-color: rgba(125,166,214,.8); color: var(--text); }
  .opt input:focus-visible ~ .opt-face { outline: 2px solid var(--gold); outline-offset: 2px; }
  .opt input:checked ~ .opt-face {
    background: rgba(61,168,248,.10); border-color: rgba(61,168,248,.5); color: var(--text);
  }

  .opt-mark {
    flex: none; width: 18px; height: 18px;
    border-radius: var(--r-xs); border: 1px solid var(--line-ui);
    background: rgba(7,12,20,.6);
    display: grid; place-items: center;
    transition: background .18s var(--ease), border-color .18s var(--ease);
  }
  .opt-mark .ic { font-size: 13px; color: #fff; opacity: 0; }
  .opt input:checked ~ .opt-face .opt-mark { background: var(--blue-deep); border-color: var(--blue); }
  .opt input:checked ~ .opt-face .opt-mark .ic { opacity: 1; }
  .opt-one .opt-mark { border-radius: 999px; }
  .opt-one .opt-mark::after {
    content: ""; width: 8px; height: 8px; border-radius: 999px;
    background: #fff; transform: scale(0);
  }
  .opt-one input:checked ~ .opt-face .opt-mark::after { transform: none; }
  .opt-txt { min-width: 0; }

  /* ---------- select ----------
     The chevron sits in its own tile rather than floating in the padding, so
     the control reads as something that opens instead of an input with a mark
     after it. The native listbox is kept: it is the one dropdown that is
     already keyboard-complete and already right on a phone. */
  .sel { position: relative; }
  select.input {
    appearance: none; -webkit-appearance: none;
    padding-right: 54px; cursor: pointer; font-weight: 500;
  }
  select.input:required:invalid { color: var(--text-3); font-weight: 400; }
  select.input option { background: var(--surface-2); color: var(--text); font-weight: 400; }
  select.input option:disabled { color: var(--text-3); }

  .sel-chev {
    position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: var(--r-xs);
    display: grid; place-items: center; pointer-events: none;
    font-size: 17px; color: var(--blue);
    background: rgba(61,168,248,.07);
    border: 1px solid rgba(61,168,248,.13);
    transition: background .18s var(--ease), border-color .18s var(--ease);
  }
  .sel:hover .sel-chev { background: rgba(61,168,248,.14); border-color: rgba(61,168,248,.28); }
  .sel select.input:focus ~ .sel-chev { background: rgba(61,168,248,.18); border-color: rgba(61,168,248,.5); }

  textarea.input-sm { min-height: 84px; }

  /* Rush delivery note. Blue, like any other information: gold is reserved for
     highlight and price. The border is solid because dashed means PLACEHOLDER. */
  .wiz-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 12px; padding: 12px 14px;
    background: rgba(61,168,248,.07);
    border: 1px solid rgba(61,168,248,.28); border-radius: var(--r-ctl);
    font-size: 13.5px; line-height: 1.6; color: var(--text-2);
  }
  .wiz-note .ic { flex: none; font-size: 17px; color: var(--blue); margin-top: 2px; }

  /* ---------- review ---------- */
  .rev { display: grid; gap: 14px; margin-bottom: 22px; }
  .rev-group {
    background: rgba(7,12,20,.42);
    border: 1px solid var(--line); border-radius: var(--r-ctl);
    padding: 15px 16px;
  }
  .rev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .rev-head h4 { font-size: 14px; font-weight: 700; color: var(--text); }
  .rev-edit {
    background: none; border: 0; cursor: pointer;
    padding: 6px 8px; margin: -6px -8px -6px 0; border-radius: var(--r-xs);
    font-size: 12.5px; font-weight: 600; color: var(--text-3);
    transition: color .18s var(--ease), background .18s var(--ease);
  }
  .rev-edit:hover { color: var(--gold); background: rgba(255,200,17,.08); }
  .rev-edit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  .rev-list { display: grid; gap: 10px; }
  .rev-row { display: grid; gap: 2px; }
  @media (min-width: 440px) {
    .rev-row { grid-template-columns: 122px minmax(0,1fr); gap: 14px; align-items: baseline; }
  }
  .rev-row dt { font-size: 12.5px; color: var(--text-3); }
  .rev-row dd { font-size: 14px; color: var(--text); margin: 0; overflow-wrap: anywhere; }
  .rev-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
  .rev-tags li {
    font-size: 12.5px; color: var(--text-2);
    background: rgba(61,168,248,.10);
    border: 1px solid rgba(61,168,248,.24); border-radius: 999px;
    padding: 3px 10px;
  }

  /* ---------- step controls ---------- */
  .wiz-nav {
    display: flex; flex-direction: column-reverse; gap: 10px;
    margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  }
  .wiz-nav .btn { width: 100%; }
  @media (min-width: 520px) {
    .wiz-nav { flex-direction: row; align-items: center; justify-content: flex-end; }
    .wiz-nav .btn { width: auto; }
    .wiz-back { margin-right: auto; }
  }
  .wiz-back-ic { transform: scaleX(-1); }

  /* Panels enter from the direction of travel, so Back reads as going back.
     --wiz-y is flipped on the form by main.js. */
  @media (prefers-reduced-motion: no-preference) {
    .wiz-panel.is-in, .cond.is-in { animation: wiz-in .34s var(--ease) both; }
    .cond.is-in { --wiz-y: -6px; }
    .wiz-fill { transition: transform .45s var(--ease); }
    .opt-mark::after { transition: transform .18s var(--ease); }
  }
  @keyframes wiz-in {
    from { opacity: 0; transform: translateY(var(--wiz-y, 10px)); }
    to   { opacity: 1; transform: none; }
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  .foot { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 68px) 0 30px; background: var(--ink-2); }
  .foot-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
  @media (min-width: 780px) { .foot-grid { grid-template-columns: 2fr 1fr 1.2fr; gap: 48px; } }
  .foot h4 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text); margin-bottom: 16px; }
  .foot-list { display: grid; gap: 11px; }
  /* :not(.btn) so the footer CTA keeps its own white label and contrast */
  .foot-list a:not(.btn), .foot-list span { font-size: 14px; color: var(--text-2); text-decoration: none; transition: color .18s var(--ease); }
  .foot-list a:not(.btn):hover { color: var(--text); }
  .foot-list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
  .foot-contact { display: inline-flex; align-items: center; gap: 9px; }
  .foot-contact .ic { font-size: 16px; color: var(--blue); }
  .foot-bar {
    margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
    font-size: 13px; color: var(--text-3);
  }

  /* ============================================================
     MOTION  -  MOTION_INTENSITY 4. Everything below is opt-out.
     Reveal = sequence/hierarchy on scroll. Hover = feedback.
     ============================================================ */
  .reveal { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0; transform: translateY(22px);
      transition: opacity .6s var(--ease), transform .6s var(--ease);
      transition-delay: calc(var(--d, 0) * 90ms);
    }
    .reveal.in { opacity: 1; transform: none; }

    /* pressed, per the button spec: a 1px push, no lift on hover */
    .btn:active { transform: translateY(1px); }
    .card-hover:hover { transform: translateY(-3px); }

    .frame-link .stage { transition: transform .3s var(--ease), border-color .25s var(--ease); }
    .frame-link:hover .stage, .frame-link:focus-visible .stage { transform: translateY(-5px); }
    .frame-link:active .stage { transform: translateY(-1px); }
    .shot-hint { transform: translateY(7px); transition: opacity .2s var(--ease), transform .25s var(--ease); }
    .frame-link:hover .shot-hint, .frame-link:focus-visible .shot-hint { transform: none; }

    .hero-copy > *, .hero-visual {
      opacity: 0; animation: rise .7s var(--ease) forwards;
    }
    .hero-copy > *:nth-child(1) { animation-delay: .05s; }
    .hero-copy > *:nth-child(2) { animation-delay: .13s; }
    .hero-copy > *:nth-child(3) { animation-delay: .21s; }
    .hero-copy > *:nth-child(4) { animation-delay: .29s; }
    .hero-visual { animation-delay: .22s; }
  }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--blue-deep); color: #fff; padding: 12px 20px; border-radius: var(--r-ctl);
    text-decoration: none; font-size: 14px; font-weight: 600;
  }
  .skip:focus { left: var(--gut); top: 12px; }