/* ==========================================================================
   Flat Out Automations — Design System
   Base: warm paper · Ink black · Torch orange · Live green
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
}

/* ---------- TOKENS ---------- */
@layer tokens {
  :root {
    /* colour */
    --paper:      #F7F6F3;
    --paper-2:    #EFEDE8;
    --surface:    #FFFFFF;
    --ink:        #0B0B0C;
    --ink-2:      #1A1A1D;
    --muted:      #6B6B72;
    --muted-2:    #6F6F77;
    --accent:     #FF4D0F;   /* torch — CTAs, urgency */

    /* Torch fails WCAG AA for SMALL text: 3.3:1 on white against a 4.5:1
       requirement (PageSpeed's accessibility audit flags exactly this).
       Large headlines and buttons keep the true brand orange — at display
       sizes the threshold is 3:1 and it passes. Small labels use one of
       these two instead, tuned per ground:
         --accent-down  deep torch,   5.1:1 on white  — small text on LIGHT
         --accent-up    lifted torch, 7.6:1 on #0B0B0C — small text on DARK
       They read as the same family; they are the accessible cuts of it. */
    --accent-down: #BC3D08;
    --accent-up:   #FF7A4D;
    --accent-ink: #FFF3EE;
    --live:       #00A862;   /* live / success states */
    --live-bg:    #E6F7EF;
    --warn:       #E8A200;
    --line:       rgb(11 11 12 / .10);
    --line-2:     rgb(11 11 12 / .06);

    /* shadow — the floating-card look */
    --sh-sm: 0 1px 2px rgb(11 11 12 / .04), 0 2px 6px rgb(11 11 12 / .04);
    --sh-md: 0 2px 4px rgb(11 11 12 / .04), 0 8px 20px rgb(11 11 12 / .07);
    --sh-lg: 0 4px 8px rgb(11 11 12 / .05), 0 18px 50px rgb(11 11 12 / .10);
    --sh-xl: 0 8px 16px rgb(11 11 12 / .06), 0 32px 80px rgb(11 11 12 / .14);

    /* type */
    --f-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
    --f-body:    "Inter", system-ui, -apple-system, sans-serif;
    --f-mono:    "JetBrains Mono", ui-monospace, monospace;

    --t-xs:   clamp(.72rem, .70rem + .10vw, .78rem);
    --t-sm:   clamp(.84rem, .81rem + .14vw, .92rem);
    --t-base: clamp(1rem, .96rem + .18vw, 1.09rem);
    --t-lg:   clamp(1.14rem, 1.06rem + .34vw, 1.34rem);
    --t-xl:   clamp(1.4rem, 1.22rem + .78vw, 1.95rem);
    --t-2xl:  clamp(1.85rem, 1.45rem + 1.7vw, 3rem);
    --t-3xl:  clamp(2.4rem, 1.6rem + 3.4vw, 4.6rem);
    --t-4xl:  clamp(3rem, 1.6rem + 6vw, 7rem);

    /* space */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
    --sp-9: 6rem;    --sp-10: 8rem;

    /* radius */
    --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-full: 999px;

    --wrap: 1200px;
    --ease: cubic-bezier(.22, 1, .36, 1);
  }

  /* The display sizes above are tuned for desktop and left exactly as they
     were. The problem was only at the small end: the clamp FLOORS (3rem and
     2.4rem) sat above the fluid middle term on any phone, so the floor bound
     and the type stopped scaling — a 320px iPhone SE rendered the same 48px
     h1 as a 430px Pro Max, in 30% less width. Below 760px the scale is
     redeclared with a gentler slope so it actually responds to the viewport.
     Nothing above 760px is affected.
     The two curves are set to meet the desktop ones exactly at 760px
     (h1 71.2px, h2 51.4px), so resizing across the breakpoint does not snap. */
  @media (max-width: 760px) {
    :root {
      --t-3xl: clamp(1.75rem, .67rem + 5.35vw, 3.22rem);
      --t-4xl: clamp(2rem, .27rem + 8.8vw, 4.45rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------- BASE ---------- */
@layer base {
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--f-body);
    font-size: var(--t-base);
    line-height: 1.62;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-4xl); }
  h2 { font-size: var(--t-3xl); }
  h3 { font-size: var(--t-xl); }
  p  { text-wrap: pretty; }

  /* Headings carry hand-placed <br> for desktop rhythm. On a phone the line
     is already too narrow, so the break fires on top of a natural wrap and
     leaves orphan words. Drop the hard breaks and let text-wrap: balance
     do the job it is already declared for. */
  @media (max-width: 760px) {
    h1 br, h2 br, h3 br { display: none; }
    h1, h2 { line-height: 1.08; letter-spacing: -.028em; }
  }
  strong { font-weight: 650; }
  ::selection { background: var(--accent); color: #fff; }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
  .wrap-wide { width: min(100% - 2rem, 1400px); margin-inline: auto; }
  section { position: relative; }
  .sect { padding-block: clamp(4rem, 9vw, 8rem); }
  .stack > * + * { margin-top: var(--flow, 1rem); }
  .grid { display: grid; gap: var(--gap, 1.25rem); }
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* -- eyebrow / label -- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--f-mono); font-size: var(--t-xs);
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); font-weight: 500;
  }
  .eyebrow::before {
    content: ""; width: 22px; height: 1px; background: var(--accent);
  }
  .eyebrow.no-rule::before { display: none; }

  /* -- keyword line inside an <h1> --
     Visually identical to .eyebrow, but it lives INSIDE the heading rather
     than as a sibling above it.

     WHY: every commercial page opened with a narrative h1 — "The burst pipe
     rang at 9pm", "We find what your business is leaking" — which reads well
     and contains no term anyone searches. The h1 is the strongest on-page
     relevance signal we control and it was naming nothing. The eyebrow above
     it already carried the useful words ("Plumbing & gas · Perth WA") but as
     a <span>, where a heading parser never sees them.

     Moving that line inside the h1 fixes the signal without touching the
     layout: same mono, same rule, same spacing, same position on screen.
     The narrative line keeps its full visual weight and stays the thing a
     human reads first. -- */
  h1 .h1-kw {
    display: block;
    font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .9rem;
  }
  h1 .h1-kw::before {
    content: ""; display: inline-block; vertical-align: middle;
    width: 22px; height: 1px; background: var(--accent); margin-right: .5rem;
  }

  /* -- buttons -- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .95rem 1.6rem; border-radius: var(--r-full);
    font-weight: 600; font-size: var(--t-sm); letter-spacing: -.01em;
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .2s;
    white-space: nowrap; will-change: transform;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgb(255 77 15 / .30); }
  .btn-primary:hover { box-shadow: 0 10px 28px rgb(255 77 15 / .38); }
  .btn-ink { background: var(--ink); color: #fff; box-shadow: var(--sh-md); }
  .btn-ink:hover { box-shadow: var(--sh-lg); }
  .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
  .btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
  .btn-lg { padding: 1.15rem 2rem; font-size: var(--t-base); }

  /* Long labels on narrow phones.
     .btn is white-space: nowrap, which is right almost everywhere — a button
     that wraps mid-phrase reads as broken. But the longest labels on the site
     ("Get a free compliance check", "Get the real number on a call") measure
     289px, and a 320px screen leaves about 265px once the container padding is
     taken out. nowrap cannot shrink, so the button pushed past the card edge
     and body's overflow-x: hidden sliced the end off it.

     Below 480px the label is allowed to wrap and the horizontal padding eases
     off. Two centered lines are not as tight as one, but they are legible and
     fully tappable, which a clipped button is not. Nothing at or above 480px
     changes. */
  @media (max-width: 480px) {
    .btn { white-space: normal; text-align: center; max-width: 100%; }
    .btn-lg { padding-inline: 1.35rem; }
  }
  .btn .ar { transition: transform .3s var(--ease); }
  .btn:hover .ar { transform: translateX(4px); }

  /* -- cards -- */
  .card {
    background: var(--surface); border-radius: var(--r-lg);
    border: 1px solid var(--line-2); box-shadow: var(--sh-sm);
    padding: var(--sp-6);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .card-hover:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }

  /* ==================================================================
     NAV — floating pill
     ================================================================== */
  .navbar {
    position: fixed; inset-block-start: 14px; inset-inline: 0; z-index: 100;
    display: flex; justify-content: center; padding-inline: 1rem;
    transition: inset-block-start .4s var(--ease);
  }
  .nav-pill {
    display: flex; align-items: center; gap: .35rem;
    background: rgb(255 255 255 / .82);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgb(255 255 255 / .9);
    border-radius: var(--r-full);
    padding: .45rem .45rem .45rem 1.3rem;
    box-shadow: var(--sh-md);
    width: min(100%, 1080px);
    transition: box-shadow .4s var(--ease), background .4s var(--ease);
  }
  .navbar.stuck .nav-pill { box-shadow: var(--sh-lg); background: rgb(255 255 255 / .95); }

  .brand { font-family: var(--f-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.045em; }
  .brand .dot { color: var(--accent); }
  .nav-links { display: flex; gap: .15rem; margin-inline: auto; }
  .nav-links a {
    position: relative;
    padding: .55rem .85rem; border-radius: var(--r-full);
    font-size: var(--t-sm); font-weight: 500; color: var(--muted);
    transition: color .2s, background .2s;
  }
  .nav-links a:hover { color: var(--ink); background: var(--paper-2); }
  .nav-links a.is-active { color: var(--ink); font-weight: 600; }
  /* The underline sits outside the flow. As an in-flow block it doubled the
     active link's line box, the tall link stretched the whole ul, and the
     centred ul pushed every other link up under the announce bar on any page
     with an active nav item (the homepage has none, which is why only inner
     pages looked broken). */
  .nav-links a.is-active::after {
    content: ''; position: absolute; height: 2px; width: 14px;
    left: 50%; transform: translateX(-50%); bottom: .18rem;
    border-radius: 2px; background: var(--accent);
  }
  @media (max-width: 980px) {
    /* Stacked dropdown links are left-aligned; keep the dash in flow there,
       where the extra row height is harmless. */
    .nav-links a.is-active::after {
      position: static; transform: none; display: block;
      margin: .35rem 0 0;
    }
  }
  .nav-phone {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 500;
    padding: .55rem .9rem; border-radius: var(--r-full);
    color: var(--ink); transition: background .2s;
  }
  .nav-phone:hover { background: var(--paper-2); }
  .nav-phone svg { color: var(--accent); }
  .nav-toggle { display: none; padding: .6rem; border-radius: var(--r-full); }

  @media (max-width: 980px) {
    .nav-links, .nav-phone span { display: none; }
    .nav-toggle { display: grid; place-items: center; }
    .nav-pill { padding-left: 1.1rem; }
    .nav-links.open {
      display: flex; flex-direction: column; position: absolute;
      top: calc(100% + 10px); left: 0; right: 0;
      background: var(--surface); border-radius: var(--r-lg);
      padding: .75rem; box-shadow: var(--sh-lg); border: 1px solid var(--line-2);
    }
    .nav-links.open a { padding: .8rem 1rem; }

    /* 44px minimum tap target — WCAG 2.5.5. Both controls were ~39px and
       ~33px tall respectively, because padding alone was setting the box. */
    .nav-toggle, .nav-phone { min-width: 44px; min-height: 44px; }
    .nav-phone { justify-content: center; padding-inline: .7rem; }
    .brand { flex: none; }

    /* .nav-links carries margin-inline:auto, which is what separates the brand
       from the controls on desktop. It is display:none here, so that spacer
       disappeared and the phone icon sat hard against the wordmark with the
       whole right half of the pill empty.
       Moving the auto margin onto .nav-phone restores the split: brand left,
       controls right, which is also where a thumb expects them. */
    .nav-phone { margin-inline-start: auto; }
    .nav-pill { gap: .5rem; }
    .nav-toggle { margin-inline-start: .15rem; }
  }

  /* At 360px the pill has ~303px of inner width. Brand (~88) + phone (~44) +
     toggle (~44) + gaps (~17) + "Book a free audit" (~165) = ~353px, and
     .btn is white-space: nowrap, so the label pushed out of its own box.
     body { overflow-x: hidden } was hiding it rather than fixing it.
     The .mobile-bar already pins Call + Book to the bottom below 720px, so
     the header CTA is duplicated on exactly the widths where it will not fit. */
  @media (max-width: 620px) {
    .navbar .nav-pill > .btn-ink { display: none; }
  }

  /* Industries dropdown. Desktop: a panel under the link on hover or keyboard
     focus (:focus-within), no JS. Below 980px the whole menu is already a
     stacked panel, so the trade links simply show indented under "Industries". */
  .nav-sub { position: relative; }
  .nav-sub > a { white-space: nowrap; }
  /* Inline, not inline-flex: an inline-flex link is taller than its plain
     inline neighbours and sat 3px lower in the row. */
  /* inline-block: the site's base styles make every svg display:block, which
     pushed the caret onto its own line under "Industries" once the link went inline. */
  .nav-caret { display: inline-block; width: 13px; height: 13px; margin-left: .15rem; vertical-align: -2px; transition: transform .2s; }
  .nav-sub-menu {
    position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translate(-50%, 4px);
    display: grid; gap: .1rem; min-width: 230px; padding: .45rem;
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  /* Bridges the 8px gap so the pointer can travel from the link to the panel. */
  .nav-sub-menu::before { content: ''; position: absolute; inset: -10px 0 auto; height: 10px; }
  .nav-sub-menu a { display: block; white-space: nowrap; }
  .nav-sub:hover .nav-sub-menu,
  .nav-sub:focus-within .nav-sub-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  }
  .nav-sub:hover .nav-caret,
  .nav-sub:focus-within .nav-caret { transform: rotate(180deg); }
  @media (max-width: 980px) {
    .nav-sub-menu {
      display: block; position: static; transform: none; opacity: 1; visibility: visible;
      pointer-events: auto; min-width: 0; padding: 0 0 0 1rem;
      background: none; border: 0; box-shadow: none;
    }
    /* Same inline rhythm as the other stacked links, just indented. */
    .nav-sub-menu a { display: inline; }
    .nav-sub-menu::before, .nav-caret { display: none; }
  }

  /* ==================================================================
     ANNOUNCEMENT BAR
     ================================================================== */
  .announce {
    background: var(--ink); color: #fff; text-align: center;
    padding: .6rem 1rem; font-size: var(--t-xs); letter-spacing: .01em;
    position: relative; z-index: 101;
  }
  /* The navbar is position:fixed at top:14px and the announce bar sits above
     it in the flow with a higher z-index, so the bar paints over the pill.
     On desktop the bar is one line (~33px) and only clips the pill's top edge.
     On a phone the copy wraps to two lines (57px) and covered 43px of a 60px
     pill — the wordmark and both controls were behind it.
     Below 760px the bar shortens and the pill drops clear of it. */
  /* Shrinking the type was not enough — the sentence still wrapped to two
     lines (41px) and buried 33px of a 60px pill. On desktop the bar is one
     line and clips ~19px of the pill's top curve, which is the intended look.
     To match that on a phone the bar has to be one line, and the only way to
     guarantee that at 360px is to drop the sentence and keep the call to
     action. font-size:0 collapses the bare text node, which CSS cannot select
     directly, then the link gets its size back. .pulse-dot keeps its
     dimensions because they are set in px, not em. */
  @media (max-width: 760px) {
    .announce { padding: .5rem .75rem; font-size: 0; line-height: 1.2; white-space: nowrap; }
    .announce a { font-size: .74rem; }
    .announce .pulse-dot { margin-right: .45rem; }
    .navbar { inset-block-start: 8px; }
  }
  .announce a { color: var(--accent-up); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .announce .pulse-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); margin-right: .5rem; vertical-align: middle;
    animation: pulse 2s var(--ease) infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(255 77 15 / .6); }
    50% { opacity: .7; box-shadow: 0 0 0 6px rgb(255 77 15 / 0); }
  }

  /* ==================================================================
     HERO
     ================================================================== */
  .hero { padding-block: clamp(7rem, 13vw, 11rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
  .hero-arcs {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .55;
  }
  .hero-inner { position: relative; z-index: 2; text-align: center; }
  .hero h1 { margin-block: 1.4rem 0; }

  /* ---- homepage headline sizing ----

     The hero line is longer than the other h1s and carries hand-placed <br>,
     so it cannot reflow to escape a container it does not fit. At the global
     --t-4xl cap of 7rem its longest line measured 1156px inside a 1200px
     .wrap — 44px of slack, about 4%. That held at exactly 1920px and broke
     everywhere else: browser zoom or Windows display scaling narrowed the
     container just enough to push line one over, and it split into five lines
     that filled the screen.

     DESKTOP ONLY. The ≤760px scale above is tuned to meet the desktop curve
     at 760px so resizing across the breakpoint does not snap, and an earlier
     attempt at this fix set font-size flat on .hero h1, which overrode that
     tuning at every width and blew the headline up on phones. The curve below
     is solved to pass through 71.2px at 761px — the same value the mobile
     clamp reaches at 760px — so the join stays seamless, and to reach 6rem by
     1920px, which restores ~209px of slack. */
  @media (min-width: 761px) {
    .hero h1 { font-size: clamp(3rem, 3.43rem + 2.14vw, 6rem); }
  }

  /* Between 761 and 900px the container is narrow enough that the forced
     break in line one overflows it, and a <br> cannot wrap its way out. Drop
     the hard breaks earlier for this heading than for the rest and let
     text-wrap: balance place the lines. */
  @media (max-width: 900px) {
    .hero h1 br { display: none; }
  }
  .hero h1 .hl { position: relative; display: inline-block; color: var(--accent); }
  .hero-sub {
    font-size: var(--t-lg); color: var(--muted); max-width: 56ch;
    margin: 1.6rem auto 0; line-height: 1.55;
  }
  .hero-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; }
  .hero-note { margin-top: 1rem; font-size: var(--t-sm); color: var(--muted-2); }

  /* floating tool chips */
  .float-chip {
    position: absolute; z-index: 1;
    background: var(--surface); border-radius: var(--r-md);
    box-shadow: var(--sh-md); border: 1px solid var(--line-2);
    padding: .7rem .95rem; display: flex; align-items: center; gap: .5rem;
    font-size: var(--t-xs); font-weight: 600; white-space: nowrap;
    will-change: transform;
  }
  .float-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; }
  .fc-1 { top: 14%;  left: 3%;  rotate: -7deg; }
  .fc-2 { top: 26%;  right: 4%; rotate: 6deg; }
  .fc-3 { bottom: 22%; left: 7%; rotate: 5deg; }
  .fc-4 { bottom: 14%; right: 6%; rotate: -5deg; }
  @media (max-width: 1100px) { .float-chip { display: none; } }

  /* ==================================================================
     LIVE STATUS WIDGET (real-time Perth clock)
     ================================================================== */
  .live-status {
    display: inline-flex; align-items: center; gap: .8rem;
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r-full); padding: .5rem .5rem .5rem 1rem;
    box-shadow: var(--sh-sm); font-size: var(--t-sm);
  }
  .live-status .dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--live);
    animation: pulse-live 2.4s var(--ease) infinite; flex: none;
  }
  .live-status.after .dot { background: var(--accent); }
  @keyframes pulse-live {
    0%, 100% { box-shadow: 0 0 0 0 rgb(0 168 98 / .55); }
    70% { box-shadow: 0 0 0 8px rgb(0 168 98 / 0); }
  }
  .live-status .txt { color: var(--muted); }
  .live-status .txt b { color: var(--ink); font-weight: 600; }
  .live-status .clock {
    font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
    background: var(--paper-2); border-radius: var(--r-full);
    padding: .35rem .7rem; font-variant-numeric: tabular-nums;
  }

  /* ==================================================================
     MARQUEE
     ================================================================== */
  .marquee { overflow: hidden; padding-block: 1.6rem; border-block: 1px solid var(--line-2); background: var(--surface); }
  .marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: slide 38s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-item {
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 500;
    color: var(--muted); letter-spacing: -.01em; white-space: nowrap;
  }
  .marquee-item svg { color: var(--ink); opacity: .8; }
  @keyframes slide { to { transform: translateX(-50%); } }

  /* ==================================================================
     SECTION HEADS
     ================================================================== */
  .sect-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
  .sect-head.center { margin-inline: auto; text-align: center; }
  .sect-head p { color: var(--muted); font-size: var(--t-lg); margin-top: 1.1rem; }
  .sect-head h2 { margin-top: 1.1rem; }

  /* ==================================================================
     BENTO — problem grid
     ================================================================== */
  .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }
  .bento > * { border-radius: var(--r-lg); padding: clamp(1.5rem, 2.6vw, 2.2rem); }
  .b-lg { grid-column: span 4; }
  .b-sm { grid-column: span 2; }
  .b-md { grid-column: span 3; }
  @media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .bento > * { grid-column: 1 / -1; } }

  .b-dark { background: var(--ink); color: #fff; }
  .b-dark h3 { color: #fff; }
  .b-dark p { color: rgb(255 255 255 / .62); }
  .b-light { background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-sm); }
  .b-accent { background: var(--accent); color: #fff; }
  .b-accent h3, .b-accent p { color: #fff; }
  .b-accent p { opacity: .88; }
  .b-num {
    font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em;
    opacity: .5; display: block; margin-bottom: 1.2rem;
  }
  .b-stat { font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1; letter-spacing: -.05em; }
  .b-stat-label { font-size: var(--t-sm); opacity: .65; margin-top: .6rem; }

  /* ==================================================================
     SERVICES — bold blocks
     ================================================================== */
  .svc-list { border-top: 1px solid var(--line); }
  .svc {
    display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 2rem; align-items: start;
    padding-block: clamp(2rem, 4vw, 3.2rem);
    border-bottom: 1px solid var(--line);
    position: relative; transition: padding-inline .45s var(--ease);
  }
  .svc::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--surface); opacity: 0; border-radius: var(--r-lg);
    transition: opacity .45s var(--ease);
  }
  .svc:hover { padding-inline: 1.6rem; }
  .svc:hover::before { opacity: 1; box-shadow: var(--sh-md); }
  .svc-idx { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--accent-down); font-weight: 600; padding-top: .5rem; }
  .svc-body h3 { font-size: var(--t-2xl); letter-spacing: -.045em; }
  .svc-body p { color: var(--muted); margin-top: .9rem; max-width: 58ch; }
  .svc-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
  .tag {
    font-family: var(--f-mono); font-size: var(--t-xs); padding: .35rem .75rem;
    border-radius: var(--r-full); background: var(--paper-2); color: var(--muted);
    letter-spacing: .02em;
  }
  .tag.hot { background: var(--accent-ink); color: var(--accent-down); font-weight: 600; }
  .svc-go {
    width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--line); flex: none; transition: all .35s var(--ease);
  }
  .svc:hover .svc-go { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-45deg); }
  @media (max-width: 760px) {
    .svc { grid-template-columns: 1fr; gap: .8rem; }
    .svc-go { display: none; }
  }

  /* ==================================================================
     SMS DEMO (real-time)
     ================================================================== */
  .demo-shell {
    display: grid; grid-template-columns: 1fr 380px; gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
  }
  @media (max-width: 940px) { .demo-shell { grid-template-columns: 1fr; } }

  .phone-frame {
    background: var(--ink); border-radius: 38px; padding: 12px;
    box-shadow: var(--sh-xl); margin-inline: auto; width: 100%; max-width: 360px;
  }
  .phone-screen {
    background: var(--paper); border-radius: 28px; overflow: hidden;
    min-height: 470px; display: flex; flex-direction: column;
  }
  .phone-top {
    background: var(--surface); padding: .85rem 1rem;
    border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: .65rem;
  }
  .phone-top .av {
    width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem;
  }
  .phone-top b { font-size: var(--t-sm); display: block; line-height: 1.2; }
  .phone-top small { font-size: .7rem; color: var(--muted-2); }
  .phone-body { flex: 1; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; overflow-y: auto; }
  .bubble {
    max-width: 82%; padding: .7rem .95rem; border-radius: 18px;
    font-size: .87rem; line-height: 1.45;
    opacity: 0; transform: translateY(12px) scale(.96);
    animation: pop .45s var(--ease) forwards;
  }
  .bubble.them { background: var(--surface); border: 1px solid var(--line-2); border-bottom-left-radius: 5px; align-self: flex-start; }
  .bubble.you  { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
  .bubble .meta { display: block; font-size: .66rem; opacity: .55; margin-top: .35rem; font-family: var(--f-mono); }
  @keyframes pop { to { opacity: 1; transform: none; } }

  .typing { display: flex; gap: 4px; padding: .85rem 1rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; border-bottom-left-radius: 5px; align-self: flex-start; width: fit-content; }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted-2); animation: blink 1.3s infinite; }
  .typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
  @keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

  .demo-form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.6rem; }
  .field { position: relative; }
  .field label {
    position: absolute; top: .55rem; left: 1.05rem;
    font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted-2); pointer-events: none;
  }
  .field input, .field select {
    width: 100%; padding: 1.55rem 1.05rem .7rem; border-radius: var(--r-md);
    border: 1.5px solid var(--line); background: var(--surface);
    font-size: var(--t-base); transition: border-color .2s, box-shadow .2s;
  }
  .field input:focus, .field select:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgb(255 77 15 / .10);
  }
  .demo-timer {
    font-family: var(--f-mono); font-size: var(--t-sm); color: var(--muted);
    display: flex; align-items: center; gap: .5rem; margin-top: .4rem;
  }
  .demo-timer b { color: var(--accent-down); font-variant-numeric: tabular-nums; }

  /* ==================================================================
     ROI CALCULATOR (real-time)
     ================================================================== */
  .calc {
    background: var(--ink); color: #fff; border-radius: var(--r-xl);
    padding: clamp(2rem, 4.5vw, 3.5rem);
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
    align-items: center; box-shadow: var(--sh-xl);
  }
  @media (max-width: 880px) { .calc { grid-template-columns: 1fr; } }
  .calc > * { min-width: 0; }
  .calc h2 { color: #fff; font-size: var(--t-2xl); }
  .calc .eyebrow { color: rgb(255 255 255 / .5); }
  .calc-controls { display: flex; flex-direction: column; gap: 1.7rem; margin-top: 2rem; }
  .ctrl label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: var(--t-sm); color: rgb(255 255 255 / .6); margin-bottom: .7rem;
  }
  .ctrl label b { font-family: var(--f-mono); color: #fff; font-size: var(--t-base); font-variant-numeric: tabular-nums; }
  input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
    border-radius: var(--r-full); background: rgb(255 255 255 / .16); cursor: pointer;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); border: 3px solid var(--ink);
    box-shadow: 0 0 0 1px var(--accent); transition: transform .2s var(--ease);
  }
  input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
  input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
    border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--accent);
  }
  .calc-out { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .10); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem); }
  .calc-out .lbl { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .5); }
  .calc-big {
    font-family: var(--f-display); font-size: min(clamp(2.6rem, 7vw, 4.4rem), 11.5vw); line-height: 1;
    letter-spacing: -.05em; color: var(--accent); margin-block: .5rem 0;
    font-variant-numeric: tabular-nums;
  }
  .calc-rows { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .8rem; }
  .calc-row { display: flex; justify-content: space-between; font-size: var(--t-sm); padding-bottom: .8rem; border-bottom: 1px solid rgb(255 255 255 / .09); }
  .calc-row:last-child { border: 0; padding-bottom: 0; }
  .calc-row span { color: rgb(255 255 255 / .55); }
  .calc-row b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
  .calc-row b.good { color: var(--live); }

  /* ==================================================================
     INTEGRATIONS
     ================================================================== */
  .integ { display: flex; align-items: center; gap: 1.1rem; }
  .integ-logo {
    width: 52px; height: 52px; border-radius: var(--r-md); flex: none;
    display: grid; place-items: center; font-family: var(--f-display);
    font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: -.04em;
  }
  .integ b { display: block; font-size: var(--t-base); }
  .integ span { font-size: var(--t-sm); color: var(--muted); }

  /* ==================================================================
     COMPLIANCE CALLOUT
     ================================================================== */
  .compliance {
    background: linear-gradient(140deg, #101012, #1c1c20);
    color: #fff; border-radius: var(--r-xl); overflow: hidden;
    position: relative; padding: clamp(2.2rem, 5vw, 4rem);
  }
  .compliance::after {
    content: ""; position: absolute; top: -30%; right: -10%;
    width: 480px; height: 480px; border-radius: 50%;
    background: radial-gradient(circle, rgb(255 77 15 / .22), transparent 68%);
    pointer-events: none;
  }
  .compliance h2 { color: #fff; position: relative; z-index: 1; }
  .compliance p { color: rgb(255 255 255 / .66); position: relative; z-index: 1; }
  .deadline-chip {
    display: inline-flex; align-items: center; gap: .6rem;
    background: rgb(255 77 15 / .13); border: 1px solid rgb(255 77 15 / .32);
    color: var(--accent-up); border-radius: var(--r-full); /* sits on the dark compliance panel */
    padding: .5rem 1.1rem; font-family: var(--f-mono); font-size: var(--t-xs);
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    position: relative; z-index: 1;
  }
  .comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; position: relative; z-index: 1; }
  @media (max-width: 800px) { .comp-grid { grid-template-columns: 1fr; } }
  .comp-item { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .09); border-radius: var(--r-md); padding: 1.5rem; }
  .comp-item b { display: block; margin-bottom: .5rem; font-size: var(--t-base); }
  .comp-item p { font-size: var(--t-sm); color: rgb(255 255 255 / .58); }

  /* ==================================================================
     PROCESS
     ================================================================== */
  .steps { counter-reset: s; display: grid; gap: 1.1rem; grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 940px) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
  .step { counter-increment: s; position: relative; padding-top: 3.4rem; }
  .step::before {
    content: "0" counter(s);
    position: absolute; top: 0; left: 0;
    font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 600;
    color: var(--accent-down); background: var(--accent-ink);
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    display: grid; place-items: center;
  }
  .step h3 { font-size: var(--t-lg); }
  .step p { color: var(--muted); font-size: var(--t-sm); margin-top: .6rem; }
  .step .when { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted-2); margin-top: .9rem; display: block; }

  /* ==================================================================
     PROOF PLACEHOLDER
     ================================================================== */
  .proof-slot {
    border: 2px dashed var(--line); border-radius: var(--r-lg);
    padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--surface);
  }
  .proof-slot .flag {
    font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .1em;
    text-transform: uppercase; color: var(--warn); font-weight: 600;
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
  }
  .proof-slot p { color: var(--muted); font-size: var(--t-sm); }

  /* ==================================================================
     PRICING
     ================================================================== */
  .price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
  @media (max-width: 800px) { .price-grid { grid-template-columns: 1fr; } }
  .price {
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--r-xl); padding: clamp(1.8rem, 3.5vw, 2.6rem);
    box-shadow: var(--sh-sm); display: flex; flex-direction: column;
  }
  .price.featured { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--sh-lg); }
  .price.featured h3, .price.featured .amt { color: #fff; }
  .price.featured li { color: rgb(255 255 255 / .72); }
  .price .kind { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .price.featured .kind { color: var(--accent); }
  .amt { font-family: var(--f-display); font-size: var(--t-2xl); letter-spacing: -.045em; margin-block: 1rem .3rem; }
  .amt small { font-size: var(--t-sm); font-family: var(--f-body); color: var(--muted); font-weight: 400; letter-spacing: 0; }
  .price ul { margin-block: 1.6rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
  .price li { display: flex; gap: .65rem; font-size: var(--t-sm); color: var(--muted); }
  .price li svg { color: var(--live); flex: none; margin-top: .25rem; }

  /* ==================================================================
     FAQ
     ================================================================== */
  .faq { border-top: 1px solid var(--line); }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding-block: 1.5rem; cursor: pointer; list-style: none;
    font-family: var(--f-display); font-size: var(--t-lg); font-weight: 600;
    letter-spacing: -.025em; transition: color .2s;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--accent); }
  .faq summary .ic {
    width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--line);
    display: grid; place-items: center; flex: none; transition: all .3s var(--ease);
  }
  .faq details[open] summary .ic { background: var(--accent); border-color: var(--accent); color: #fff; rotate: 45deg; }
  .faq .ans { padding-bottom: 1.6rem; color: var(--muted); max-width: 78ch; }
  .faq .ans a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

  /* ==================================================================
     FINAL CTA + FORM
     ================================================================== */
  .cta-final {
    background: var(--ink); border-radius: var(--r-xl); color: #fff;
    padding: clamp(2.4rem, 5.5vw, 4.5rem); position: relative; overflow: hidden;
  }
  .cta-final::before {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(to right, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 60px 60px,
      linear-gradient(to bottom, rgb(255 255 255 / .035) 1px, transparent 1px) 0 0 / 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
  }
  .cta-final > * { position: relative; z-index: 1; }
  .cta-final h2 { color: #fff; }
  .cta-final p { color: rgb(255 255 255 / .62); }
  .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  @media (max-width: 880px) { .cta-grid { grid-template-columns: 1fr; } }
  .cta-form { display: flex; flex-direction: column; gap: .8rem; }
  .cta-form .field label { color: rgb(255 255 255 / .45); }
  .cta-form .field input, .cta-form .field select {
    background: rgb(255 255 255 / .05); border-color: rgb(255 255 255 / .13); color: #fff;
  }
  .cta-form .field input::placeholder { color: rgb(255 255 255 / .3); }
  .or-line { display: flex; align-items: center; gap: 1rem; color: rgb(255 255 255 / .35); font-size: var(--t-sm); margin-block: .4rem; }
  .or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: rgb(255 255 255 / .13); }
  .call-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .13);
    border-radius: var(--r-md); padding: 1.1rem 1.3rem; transition: background .25s;
  }
  .call-strip:hover { background: rgb(255 255 255 / .1); }
  .call-strip .num { font-family: var(--f-mono); font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; }
  .call-strip small { display: block; font-size: var(--t-xs); color: rgb(255 255 255 / .45); }
  .form-note { font-size: var(--t-xs); color: rgb(255 255 255 / .38); line-height: 1.5; }

  /* ==================================================================
     FOOTER
     ================================================================== */
  .footer { background: var(--ink); color: #fff; padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; margin-top: clamp(3rem, 6vw, 5rem); }
  .footer-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
  @media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
  .footer .brand { font-size: 1.5rem; color: #fff; }
  .footer-blurb { color: rgb(255 255 255 / .5); font-size: var(--t-sm); margin-top: 1rem; max-width: 34ch; }
  /* Column labels were <h4>, which made every page on the site jump h2 → h4.
     They are <h2> now; the styling is unchanged, so this is a pure a11y fix. */
  .footer h2 { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: rgb(255 255 255 / .4); font-weight: 500; margin-bottom: 1.1rem; }
  .footer li + li { margin-top: .35rem; }
  /* Below 560px the footer collapses to one column and stacks 15 links.
     At the old 21px line box + .6rem gap that was a ~31px pitch, which is a
     mis-tap every time. inline-flex + min-height gives a real 44px target
     without changing how it looks. */
  .footer li a {
    color: rgb(255 255 255 / .66); font-size: var(--t-sm); transition: color .2s;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer li a:hover { color: var(--accent); }
  .footer-bottom {
    margin-top: 3.5rem; padding-top: 1.8rem; border-top: 1px solid rgb(255 255 255 / .1);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: var(--t-xs); color: rgb(255 255 255 / .38);
  }
  .footer-contact { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.6rem; }
  .footer-contact a { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--t-sm); color: #fff; font-family: var(--f-mono); }
  .footer-contact a svg { color: var(--accent); }

  /* mobile sticky call bar */
  .mobile-bar {
    position: fixed; bottom: 0; inset-inline: 0; z-index: 90;
    display: none; flex-wrap: wrap; gap: .6rem; padding: .55rem .7rem .7rem;
    background: rgb(255 255 255 / .92); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    /* Hidden until the visitor scrolls past the first screen — the hero has
       its own CTAs, and the bar was doubling them the moment the page opened.
       main.js toggles .is-on. visibility keeps the links out of tab order
       while the bar is off-screen. */
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .35s ease, visibility 0s .35s;
  }
  .mobile-bar.is-on { transform: none; visibility: visible; transition: transform .35s ease; }
  .mobile-bar-note {
    flex: 0 0 100%; text-align: center;
    font-size: var(--t-xs); color: var(--muted); letter-spacing: .01em;
  }
  .mobile-bar .btn { flex: 1; padding: .9rem 1rem; min-height: 48px; }
  @media (max-width: 720px) {
    .mobile-bar { display: flex; }
    /* Scoped with :has() so pages without a bar (privacy) do not reserve
       empty space for a bar that is not there. 6.2rem = note line + buttons. */
    body:has(.mobile-bar) { padding-bottom: 6.2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-bar, .mobile-bar.is-on { transition: none; }
  }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; }
  .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
  .muted { color: var(--muted); }
  .center { text-align: center; }
  .mono { font-family: var(--f-mono); }
  .accent { color: var(--accent-down); } /* utility is only used on 12px mono labels */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  /* GSAP reveal base — deliberately EMPTY. Do not put the hide back here.

     This used to be `.rv { opacity: 0; transform: translateY(26px); }`, and
     that one line was the site's biggest performance problem. Every reveal
     element — including the hero headline, the largest thing on the page —
     was invisible until ~150 KB of deferred JavaScript loaded, parsed and
     animated it. On a fast desktop that resolves before first paint and
     nobody notices. On PageSpeed's throttled phone the headline painted at
     6.3 s (LCP) while the page itself was ready at 1.7 s (FCP). Mobile
     score: 72, entirely self-inflicted.

     The hide now happens in main.js instead, at the moment GSAP is actually
     ready to animate (gsap.fromTo sets the hidden state and the reveal in
     one call). Content is visible by default, so a phone paints the page
     immediately; the entrance animation becomes an enhancement for browsers
     that get there in time, which is exactly what it should have been. */
}

/* ==========================================================================
   NATIVE CONTROL POPUPS — outside the layers on purpose, so nothing beats it.
   Without color-scheme, an OS in dark mode gives the <select> a dark popup
   while the reset keeps the option text ink-dark: invisible text. Forcing
   light popups matches the site and keeps options readable everywhere.
   ========================================================================== */
:root { color-scheme: light; }
select option { color: var(--ink); background: var(--surface); }

/* Skip link — first tab stop, visible only when focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: .85rem 1.25rem;
  border-radius: 0 0 var(--r-md) 0; font-family: var(--f-mono);
  font-size: var(--t-sm); letter-spacing: .04em;
}
.skip-link:focus { left: 0; }