/* ============================================================
   GENE HEW v9 - UI/UX POLISH PASS (2026-09-13)
   Additive layer, loaded LAST. Reuses the v3 tokens; adds one:
   --sec-y, the single vertical rhythm every section now shares.
   Scope: (1) section rhythm, (2) stats "+" bug, (3) hero tail on
   phones, (4) tile walls reserve their space before images land,
   (5) current-section nav state, (6) skip link + tap targets.
   ============================================================ */

:root { --sec-y: clamp(64px, 7vw, 104px); }

/* ---------- 1. one vertical rhythm ----------
   Before: builds/ai/tools/sites/analytics 101px · design/explore/van/contact 140px · approach 70px.
   Now every section breathes the same amount; background changes carry the section breaks. */
#builds, #ai, .more-tools, #sites, #analytics,
.design, .explore, .van-sec, .approach { padding-block: var(--sec-y); }
.contact { padding-top: var(--sec-y); }

/* ---------- 2. stats: "40+" is one word ----------
   sections.css `.stat span { display:block }` was catching the "+" suffix span and
   dropping it onto its own line under the number. */
.stat b { font-variant-numeric: tabular-nums; }
/* three-up stats: numbers share one top line even when a label wraps (tablet widths) */
.stat { align-items: flex-start; }
.stat b .suffix { display: inline; margin: 0; font: inherit; letter-spacing: inherit; text-transform: none; color: var(--green); }
@media (max-width: 700px) {
  /* phones: number and label on one baseline, so three stats read as a short list, not three billboards */
  .stat { padding-block: 16px; }
  .stat-t { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
  .stat b { font-size: 2.1rem; }
  .stat span { margin-top: 0; }
}

/* ---------- 3. hero tail line ----------
   "Based on Maui. Building for people everywhere." ran edge to edge at 390px. Give it the
   page gutter and let it balance onto two lines when it must. */
.hero-stakes { padding-inline: var(--pad); text-wrap: balance; }
@media (max-width: 520px) {
  .hero-stakes { font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; }
}
/* hero section chips: 44px tap rows (were 38px) */

/* ---------- 4. design / brand-world walls ----------
   Each tile now carries width+height attrs (see index.html), so the browser knows the
   aspect ratio and lays the tile out at full width before the lazy image arrives. The tint
   is the placeholder you see for that half second; the image paints over it. */
.bw-tile, .bw-tile img { background: var(--green-ghost); }
.web-shot { background: var(--green-ghost); }

/* ---------- 5. nav: show where you are ----------
   polish.js sets aria-current on the link whose section owns the viewport. Desktop keeps the
   underline sweep as the resting state; the phone drawer just uses the color. */
.nav-links a[aria-current]:not(.nav-cta) { opacity: 1; color: var(--green-deep); }
.nav-links a[aria-current]:not(.nav-cta)::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- 6. skip link ----------
   Hidden until it has keyboard focus, then a pill in the top-left over the fixed nav. */
.skip-link {
  position: fixed; top: 14px; left: 14px; z-index: 200;
  padding: 12px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-180%); opacity: 0;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-feedback) ease;
}
.skip-link:focus-visible { transform: none; opacity: 1; outline: 2px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* screen-rail dots: a wider thumb target (was 30px) */
.screens-shell .rail-dots { gap: 6px; }
.screens-shell .rail-dots button { width: 36px; min-width: 36px; }

/* ---------- 7. phones: the primary action stays reachable ----------
   Desktop keeps "Book a call" in the bar at every scroll position; the phone bar held only the
   logo and the hamburger, with the CTA buried in the closed drawer. A compact pill now sits
   beside the hamburger (the drawer keeps its full-width one). */
.nav-book { display: none; }
@media (max-width: 820px) {
  .nav-book {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; margin: 0 -8px 0 auto; /* grouped with the hamburger: its 44px tap box already pads the bars, so the bar's 18px gap alone left the pill floating mid-bar */
    border-radius: 999px; background: var(--green); color: var(--black); text-decoration: none;
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    white-space: nowrap; box-shadow: 0 8px 20px -12px color-mix(in oklab, var(--green), transparent 30%);
  }
  .nav-book:active { background: var(--mint); }
  .nav.menu-open .nav-book { display: none; } /* the drawer's own pill takes over while it is open */
}

/* ---------- 8. drawer: scrim, scroll lock ----------
   mobile.js inserts .nav-scrim after the bar and toggles body.nav-locked. The scrim takes the
   outside tap (it used to reach the page underneath) and dims the page so the panel reads as a layer. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 79; background: color-mix(in oklab, var(--black), transparent 62%);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease;
}
.nav.menu-open + .nav-scrim { opacity: 1; pointer-events: auto; }
body.nav-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .nav-scrim { transition: none; } }

/* ---------- 9. anchors land below the fixed bar ----------
   Only #ai and the tab panels declared an offset; every other nav target scrolled its eyebrow
   under the bar. The bar is ~75px tall on desktop and ~76px on phones. */
section[id], header#top { scroll-margin-top: 78px; }

/* ---------- 10. design / brand-world walls on touch ----------
   brandworlds.js marks the wall .is-swipe on hover-less devices instead of running the marquee
   (WCAG 2.2.2: motion that cannot be paused). Rows become native horizontal swipe strips. */
.bw-wall.is-swipe .bw-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 6px 0 8px; margin: -6px 0 -8px; }
.bw-wall.is-swipe .bw-row::-webkit-scrollbar { display: none; }
.bw-wall.is-swipe .bw-track { flex-wrap: nowrap; width: max-content; }
.bw-wall.is-swipe .bw-tile { scroll-snap-align: start; }

/* ---------- 11. contact form: say which fields are needed; comfortable checkbox rows ---------- */
.cform .req { color: var(--green); font-weight: 600; }
.cform-send { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cform .req-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-soft); }
.cform-needs .ck { min-height: 44px; }