/* =============================================================
   Prospace Cleaning - design system
   Started from the MetroWide build pattern (reset, container,
   focus-visible, reduced-motion, reveal-on-scroll) and re-skinned
   to /css/tokens.css. Brand values live in tokens.css only.

   CONTRAST RULES (computed, see handback):
   - Body copy: --ink / --muted / --navy-800 on white or --surface.
   - --blue (#0977C1) only on large text and UI (buttons, icons,
     the SPACE wordmark at >=19px bold). Never body copy.
   ============================================================= */

/* -- Font fallbacks ------------------------------------------
   Metric-matched local fallbacks so the swap to the web fonts does not
   shift layout (CLS). Ratios computed from the Montserrat / Inter font files
   against Arial. tokens.css is left untouched; the stacks are extended here. */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial');
  font-weight: 600 800;
  size-adjust: 111%; ascent-override: 87%; descent-override: 22.5%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT');
  size-adjust: 107.5%; ascent-override: 90%; descent-override: 22.4%; line-gap-override: 0%;
}
:root {
  --font-display: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* -- Reset-ish ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* Reveal start states and hover lifts are not animations, so the rule above does not
     neutralise them. Their explicit overrides live with the motion system at the end of this file. */
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 768px) { body { font-size: 17px; } }
img, svg { max-width: 100%; display: block; }
a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-700); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- Skip link ---------------------------------------------- */
.skip-link {
  position: absolute; top: -100px; left: 12px;
  background: var(--navy-900); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

/* -- Layout primitives ------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.anchor-top { display: block; height: 0; }

/* -- Type --------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-800); margin: 0; letter-spacing: -0.015em; line-height: 1.15; }
.display {
  font-size: clamp(34px, 5.6vw, 60px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.h2 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.h2-on-dark { color: #fff; }
.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: var(--track-tag);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--green-700);
}
.eyebrow-on-dark { color: var(--green-100); }
.lede {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--muted);
  margin: 18px 0 24px;
  max-width: 60ch;
}
.section-sub { color: var(--muted); max-width: 62ch; margin: 14px auto 0; }

/* Placeholder marker: anything wrapped in .tbc is waiting on a client asset or answer
   (docs/CLIENT-QUESTIONS.md). Since revision 2 the only one is the showroom video caption;
   launch gate 1 requires exactly one until the video lands, then zero. */
.tbc {
  display: inline-block;
  font: 600 12px/1.4 var(--font-body);
  letter-spacing: .02em;
  color: #92400E;
  background: #FEF3C7;
  border: 1px dashed #D97706;
  border-radius: 6px;
  padding: 1px 7px;
  vertical-align: middle;
  white-space: normal;
}
.tbc::before { content: "TBC: "; }

/* -- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 12px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  min-height: 44px;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn-sm { padding: 10px 14px; font-size: 14px; min-height: 44px; }
.btn-lg { padding: 16px 22px; font-size: 16px; min-height: 52px; border-radius: 14px; }
.btn-primary {
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px rgba(9,119,193,.25);
}
.btn-primary:hover { background: var(--blue-700); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(9,119,193,.3); }
.btn-primary:active { background: var(--navy-700); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: 80ms; }
.btn-ghost { background: #fff; color: var(--navy-800); border-color: var(--line-strong); }
.btn-ghost:hover { color: var(--navy-800); border-color: var(--navy-800); background: var(--surface); }
.btn-on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-on-dark:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }
.btn-white { background: #fff; color: var(--navy-800); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.btn-white:hover { background: var(--blue-50); color: var(--navy-800); transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; }

/* -- Header ------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.hdr::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,38,74,.08);
  opacity: 0; transition: opacity calc(var(--dur-1) * 1.5) var(--ease-out);
}
.hdr.is-scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.86); }
.hdr.is-scrolled::after { opacity: 1; }
.hdr-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 16px; }

/* Lockup: SVG mark + live Montserrat text */
.lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.lockup-mark { width: 32px; height: auto; }
.lockup-type { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-display); }
.lockup-word { font-weight: 800; font-size: 19px; letter-spacing: -0.035em; }
.lockup-word .pro { color: var(--navy-800); }
.lockup-word .space { color: var(--blue-600); }
.lockup-sub { font-weight: 600; font-size: 9px; letter-spacing: var(--track-wide); color: var(--navy-800); margin-top: 4px; padding-left: 1px; }
@media (min-width: 1024px) {
  .lockup-mark { width: 38px; }
  .lockup-word { font-size: 23px; }
  .lockup-sub { font-size: 10.5px; }
}

.hdr-nav { display: none; gap: 24px; flex: 1; justify-content: center; align-items: center; }
@media (min-width: 1100px) { .hdr-nav { display: flex; } }
.hdr-link {
  color: var(--ink);
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  padding: 8px 2px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.hdr-link:hover { color: var(--navy-800); border-bottom-color: var(--line-strong); }
.hdr-link.is-active { color: var(--navy-800); border-bottom-color: var(--blue-600); }

/* Industries disclosure — Rev4 (5 Oct, Daniel).
   Nine industries could not share the bar (rev3 measured two rows at every desktop width) and a curated
   four privileged three of them. This panel gives all nine identical weight one interaction away, and the
   header bar itself names no industry. Desktop only: .hdr-nav is display:none below 1100px, where the
   burger menu already lists all nine. [hidden] when closed, so it has zero height and gate 11's
   on-screen-and-invisible sweep never sees it. */
.hdr-dd { position: relative; }
.hdr-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  /* A <button> inherits neither family nor line-height from the UA, so both are forced: at line-height
     1.4 the button measured 39px against the anchors' 42px and its hover underline sat 1.5px high. */
  font-family: inherit; line-height: inherit; cursor: pointer;
}
.hdr-dd-chev { transition: transform var(--dur-1) var(--ease-out); }
.hdr-dd-btn[aria-expanded="true"] { color: var(--navy-800); border-bottom-color: var(--line-strong); }
.hdr-dd-btn[aria-expanded="true"] .hdr-dd-chev { transform: rotate(180deg); }
.hdr-dd-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px;
  width: max-content; max-width: min(520px, calc(100vw - 48px));
  padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
.hdr-dd-panel a {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); font-size: 14.5px; font-weight: 500; text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.hdr-dd-panel a:hover { background: var(--blue-50); color: var(--navy-800); }
.hdr-dd-panel a.is-active { background: var(--blue-50); color: var(--navy-800); }
@media (prefers-reduced-motion: reduce) { .hdr-dd-chev { transition: none; } }

.hdr-cta { display: flex; align-items: center; gap: 8px; }
.hdr-phone span[data-phone-text] { font-size: 14px; font-weight: 700; }
/* main.js swaps "Call" (83px) for the number (146px) after load, which moved the whole CTA group left:
   Lighthouse desktop CLS 0.002. The fallback font then runs both buttons ~151px until Montserrat lands.
   Reserve 152px on each so neither the number swap nor the font swap moves the group. */
@media (min-width: 768px) { .hdr-phone, .hdr-quote { min-width: 152px; justify-content: center; } }
@media (max-width: 767px) {
  /* Phone: icon-only tap-to-call (the number is announced via the visually hidden label) */
  .hdr-phone { padding: 0; width: 44px; gap: 0; justify-content: center; }
  .hdr-phone span[data-phone-text] { display: none; }
}
.hdr-quote { padding-left: 12px; padding-right: 12px; gap: 0; }
@media (max-width: 767px) {
  .hdr .container { padding-left: 16px; padding-right: 16px; }
  .hdr-inner { gap: 8px; }
  .hdr-cta { gap: 6px; }
  .hide-sm { display: none; }
  .lockup { gap: 7px; }
  .lockup-mark { width: 27px; }
  .lockup-word { font-size: 16px; }
  .lockup-sub { font-size: 7.5px; margin-top: 3px; }
}
@media (max-width: 359px) {
  .hdr-quote { display: none; }
}

/* Client login (header) -- CLIENT-QUESTIONS 16a, Sam 8 Oct.
   Lowest-emphasis element in the bar on purpose: --muted text on white measures 7.5:1, so it is quiet
   without being faint, and it reads as a utility link rather than a third call to action.

   THE BREAKPOINT IS 1200px, NOT 1100px, AND THAT IS MEASURED -- DO NOT LOWER IT.
   .hdr-nav is a flex:1 item, so it absorbs whatever space the lockup and .hdr-cta leave. Measured in
   headless Chrome after document.fonts.ready, at 1100px WITH this link shown: .hdr-inner content came
   to 1004.0px inside a 1004.0px box and .hdr-nav sat at exactly its natural content width -- ZERO free
   space. It rendered correctly, one row, no collision. It just had nothing left. Repeat measurements of
   the same nav items varied by ~10px across runs (font-swap timing), which is larger than the margin,
   so 1100px was fitting by luck. At 1200px the same measurement leaves 83px spare.
   Gate 16 exists because this bar already broke to two rows once. See launch gate 17(e).
   No min-width reservation is needed (unlike .hdr-phone, whose label is swapped by main.js after load):
   this label is static, so it cannot move the group and cannot contribute to CLS. */
.hdr-portal {
  display: none;
  align-items: center; gap: 7px;
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
/* WHERE IT SHOWS, AND WHY EACH BOUND IS WHERE IT IS (all three measured 8 Oct, headless Chrome after
   document.fonts.ready, free space = .hdr-inner box width minus the summed width of its visible
   children and their gaps):
     320-767px  HIDDEN. Free space is 21.5px at 360px and 51.5px at 390px; a 44px tap target plus its
                6px gap needs 50px. It does not fit, and shrinking the tap target below 44px or cutting
                the quote button to make room are both worse trades. Phone copy lives at the TOP of the
                burger menu instead.
     768-1099px SHOWN, immediately left of the burger -- Daniel's ask, 8 Oct. Free space here is 241.5px
                at 768px rising to 544.3px at 1099px, against a 118px link. Comfortable.
     1100-1199px HIDDEN. The nav appears at 1100px and .hdr-nav is flex:1, so it silently absorbs the
                slack: at 1100px WITH this link shown, .hdr-inner content measured 1004.0px in a
                1004.0px box -- 0.0px free, inside a ~10px font-swap noise band. The FOOTER copy covers
                this band. DO NOT LOWER THIS TO 1100px. See gate 17(e).
     >=1200px   SHOWN, and order:-1 returns it to the head of the group, which is where it was measured
                (83px spare). The markup places it next to the burger; this is what restores the
                desktop arrangement without a second copy of the element. */
@media (min-width: 768px) { .hdr-portal { display: inline-flex; } }
@media (min-width: 1100px) and (max-width: 1199px) { .hdr-portal { display: none; } }
@media (min-width: 1200px) { .hdr-portal { order: -1; } }
.hdr-portal:hover { color: var(--navy-800); background: var(--blue-50); }
.hdr-portal:focus-visible { color: var(--navy-800); background: var(--blue-50); }

.hdr-burger {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.hdr-burger:hover { border-color: var(--line-strong); background: var(--surface); }
.hdr-burger span {
  display: block; width: 18px; height: 2px; background: var(--navy-800); border-radius: 2px;
  transition: transform calc(var(--dur-1) * 1.25) var(--ease-out), opacity calc(var(--dur-1) * 1.25) var(--ease-out);
}
.hdr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1100px) { .hdr-burger { display: none; } }

/* -- Mobile menu ------------------------------------------- */
.mobile-menu {
  position: fixed;
  top: 72px; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--gutter) max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 24px 40px rgba(0,38,74,.10);
  animation: slideDown calc(var(--dur-1) * 1.25) var(--ease-out);
  /* 2026-10-08 -- Android Chrome and iOS Safari resolve 100vh to the LARGE viewport (the one you get
     with the URL bar retracted), NOT to what is on screen. A 100vh cap can therefore be taller than
     the visible area: the panel's own scroller reaches its end while its last rows sit underneath the
     browser chrome, unreachable by any amount of scrolling. On a 390x704 phone that put the Client
     login row 30px below the fold -- the divider rule was visible, the link was not, and
     elementFromPoint on it returned null. dvh tracks the VISIBLE viewport, so the scroller contains
     everything. The 100vh line is kept above it as the fallback for engines without dvh. */
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  display: block;
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  padding: 13px 4px;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-menu nav a:last-of-type { border-bottom: 0; }
.mobile-menu .btn { margin-top: 12px; color: #fff; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (min-width: 1100px) { .mobile-menu { display: none !important; } }
/* Client login, FIRST row of the burger menu (moved from last, 8 Oct). Separated from the industries
   list by a rule below it so it reads as a different kind of thing -- a utility for existing clients,
   not another step in the sales path. First rather than last so it needs no scrolling: as the last row
   it was the one that ended up under the browser chrome (gate 17(g)).
   Phone only: at >=768px the header bar carries it, and two copies inside one open panel is noise. */
.mm-portal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 14px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none;
}
.mm-portal:hover { color: var(--navy-800); }
@media (min-width: 768px) { .mm-portal { display: none; } }

/* -- Sections ---------------------------------------------- */
.section { padding: 72px 0; }
@media (min-width: 768px) { .section { padding: 96px 0; } }
@media (min-width: 1024px) { .section { padding: 112px 0; } }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
@media (min-width: 1024px) { .section-head { margin-bottom: 60px; } }

/* -- 2. Hero ------------------------------------------------ */
.hero {
  position: relative;
  padding: 48px 0 56px;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 1024px) { .hero { padding: 80px 0 88px; min-height: 640px; display: flex; align-items: center; } }
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg picture, .hero-bg-img { width: 100%; height: 100%; }
.hero-bg-img { object-fit: cover; object-position: 60% center; }
.hero-bg-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,27,53,.80) 0%, rgba(0,27,53,.72) 45%, rgba(0,27,53,.92) 100%);
}
@media (min-width: 1024px) {
  .hero-bg-shade {
    background:
      linear-gradient(90deg, rgba(0,27,53,.94) 0%, rgba(0,27,53,.82) 40%, rgba(0,27,53,.45) 75%, rgba(0,27,53,.30) 100%),
      linear-gradient(180deg, transparent 60%, rgba(0,27,53,.5) 100%);
  }
}
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; width: 100%; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; } }
/* The hero goes two-column at 1024px, which drops the copy column from ~920px to ~412px while
   `.display` keeps sizing off 5.6vw. Between 1024 and 1193px that made the H1 191-254px and split
   the "Prospace Cleaning" lockup across two lines — iPad landscape (1024/1180) and any
   non-maximised laptop window. Measured on the live host 2026-10-05; 390/1280/1440/1512 were all
   fine, which is why two-width testing missed it. The display size has to track the COLUMN, not the
   viewport, so it is capped for exactly the band where the two decouple.
   (The general fix is container-query units on .hero-copy; this keeps the blast radius to the band.) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-copy .display { font-size: clamp(34px, 4.2vw, 50px); }
}
.hero .display { color: #fff; text-wrap: balance; }
/* Hero brand lockup — business name leads the H1 at full display size, the
   positioning line sits beneath at 58%. Pattern lifted from Metro (U237/85ad664).
   The brand in the H1 is a Google Ads brand-clarity requirement, not decoration:
   see docs/LAUNCH-GATE.md gate 13. */
.hero-brand {
  display: block;
  letter-spacing: -0.032em;
}
.hero-tagline {
  display: block;
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.12;
  margin-top: 10px;
}
.hero-sub {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  color: #D9E6F2;
  margin: 18px 0 28px;
  max-width: 58ch;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 520px) { .hero-ctas .btn { width: 100%; } }
.hero-points { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: #E6EEF6; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points svg { color: var(--green-100); }

/* -- Forms (hero + final CTA share these) ------------------ */
.card-form {
  background: #fff;
  color: var(--ink);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
@media (min-width: 768px) { .card-form { padding: 32px; } }
.form-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0; color: var(--navy-800); }
.form-sub { color: var(--muted); font-size: 15px; margin: -6px 0 2px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: 13.5px; color: var(--ink-soft); }
.field .opt { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.field input, .field textarea, .field select {
  font: 500 16px var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
  min-height: 46px;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300264A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(9,119,193,.18);
}
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select {
  border-color: #B91C1C;
  box-shadow: 0 0 0 3px rgba(185,28,28,.12);
}
.field-msg { color: #B91C1C; font-size: 13px; font-weight: 600; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.form-error {
  background: #FEF2F2; color: #B91C1C;
  border: 1px solid rgba(185,28,28,.25);
  border-radius: 10px; padding: 12px 14px;
  font-weight: 600; font-size: 14px; margin: 0;
}
.form-error a { color: #B91C1C; }

/* -- 3. Trust bar ------------------------------------------ */
.trust { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-list {
  list-style: none; margin: 0 auto; padding: 26px 0;
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: 1080px;
}
@media (min-width: 768px) {
  .trust-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 36px 0; }
}
@media (min-width: 1024px) { .trust-list { gap: 56px; padding: 52px 0; } }
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 0 10px; }
.trust-icon { flex: none; margin-bottom: 4px; transform-origin: center; }
.trust-item strong { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--navy-800); line-height: 1.2; letter-spacing: -0.01em; }
.trust-item span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
@media (min-width: 1024px) { .trust-item strong { font-size: 22px; } .trust-item span { font-size: 15px; } }

/* -- 4. Problem -------------------------------------------- */
.problem-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .problem-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; } }
.problem .h2 { text-wrap: balance; }
.pain-list, .answer-list { list-style: none; padding: 0; margin: 0; }
.pain-list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 17px; color: var(--ink-soft);
}
.pain-list li:last-child { border-bottom: 1px solid var(--line); }
.pain-list svg { flex: none; margin-top: 3px; color: #B91C1C; }
.problem-answer {
  background: var(--navy-50);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  border: 1px solid #DCE4EE;
}
@media (min-width: 768px) { .problem-answer { padding: 40px; } }
.answer-title { font-size: 24px; font-weight: 800; }
.answer-lede { color: var(--navy-800); font-weight: 600; margin: 8px 0 20px; }
.answer-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid #D5DEEA; }
.answer-list svg { flex: none; }
.answer-list strong { display: block; font-family: var(--font-display); color: var(--navy-800); font-size: 17px; margin-bottom: 3px; }
.answer-list span { color: var(--muted); font-size: 15.5px; }

/* -- 5. Vertical cards ------------------------------------- */
.verticals { background: var(--surface); }
.v-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .v-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .v-grid { grid-template-columns: repeat(4, 1fr); } .v-card--lead { grid-column: 1 / -1; } }
@media (min-width: 720px) and (max-width: 1099px) { .v-card--lead { grid-column: 1 / -1; } }
.v-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-1);
  scroll-margin-top: 90px;
  position: relative;
}
.v-icon { transition: transform var(--dur-1) var(--ease-out); }
.v-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.v-icon { flex: none; transform-origin: center; }
.v-card h3 { font-size: 19px; font-weight: 700; line-height: 1.25; }
.v-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.v-list li { position: relative; padding-left: 18px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.5; }
.v-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--green-600); }
.v-note { margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--navy-800); }
.v-card--lead {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 100%);
  border-color: var(--navy-800);
  color: #fff;
  padding: 28px 24px;
  display: grid; gap: 4px 48px;
}
@media (min-width: 900px) {
  .v-card--lead { padding: 40px; grid-template-columns: 1fr 1fr; grid-template-areas: "head list" "lead list" "proof list"; align-content: start; }
  .v-card--lead .v-head { grid-area: head; }
  .v-card--lead .v-lead { grid-area: lead; }
  .v-card--lead .v-list { grid-area: list; align-self: center; }
  .v-card--lead .v-proof { grid-area: proof; }
}
.v-card--lead h3 { color: #fff; font-size: clamp(22px, 2.4vw, 28px); }
.v-card--lead .v-icon { background: #fff; border-radius: 12px; padding: 6px; width: 56px; height: 56px; }
.v-lead { color: #D9E6F2; font-size: 17px; line-height: 1.6; margin: 0 0 16px; }
.v-card--lead .v-list li { color: #fff; font-size: 16px; }
.v-card--lead .v-list li::before { background: var(--green-100); }
.v-proof { margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); color: var(--green-100); font-weight: 600; font-size: 15px; }
@media (max-width: 899px) { .v-card--lead .v-list { margin-bottom: 18px; } }

/* -- 6. Eco band ------------------------------------------- */
.eco { background: var(--green-50); border-top: 1px solid var(--green-100); border-bottom: 1px solid var(--green-100); }
.eco-inner { display: flex; gap: 18px; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.eco-icon { flex: none; width: 48px; height: 48px; }
.eco-title { font-size: 19px; font-weight: 700; color: var(--navy-800); margin-bottom: 4px; }
.eco p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* -- 7. Showroom video ------------------------------------ */
.about { overflow-x: clip; }
/* REV4 (2026-10-07, Daniel: "make the video much larger"). The side-by-side grid is GONE.
   It capped the clip at 1.35fr of 2.35fr -- a MEASURED 597x336 box inside a 1104px container.
   The section now uses the same pattern the rest of the page already uses (.section-head:
   centred head, full-width media beneath), so the clip renders at the FULL container width:
   1104px at >=1024px. 597 -> 1104 is +85% wide and 3.4x the area.
   Do not reintroduce a media column here without re-reading docs/VIDEO-AUDIT-2026-10-07.md
   section 11 -- the encode bitrate was raised to suit the larger box, and shrinking the box
   again would leave the page paying for bits it no longer displays. */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.about-copy { text-align: center; max-width: 760px; margin: 0 auto; }
.about-copy .h2 { text-wrap: balance; }
.about-copy p { color: var(--ink-soft); max-width: 62ch; margin-left: auto; margin-right: auto; }
.about-copy .lede { color: var(--muted); }
/* 16:9 box reserves the real video's space up front: CLS stays 0 on swap */
.video-box {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  background: var(--navy-900);
}
/* Rev3: Sam is sending several clips. .video-set holds 1, 2 or 3 .video-box elements with no layout shift:
   each box reserves its own 16:9 before the file loads. 1 clip fills the column; 2 stack; 3 = the first full
   width with two half-width beneath (from 600px). Never add an empty box for a clip that has not arrived. */
.video-set { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.video-set > .video-box { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .video-set > .video-box:first-child:nth-last-child(3) ~ .video-box { grid-column: auto; }
}
.video-ph, .video-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-media { object-fit: cover; }
/* The placeholder must read as a video player at a glance: a filled navy panel, the mark,
   a solid play button and a player bar. The caption sits on the bar's dark fill and is
   white, so its contrast is measured against the lightest navy behind it (see REV2 notes). */
.video-ph {
  background:
    radial-gradient(70% 90% at 50% 38%, rgba(9,119,193,.38), transparent 70%),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(14px, 3.5%, 26px);
  padding-bottom: clamp(40px, 11%, 64px);
}
.video-mark { width: auto; height: clamp(46px, 19%, 92px); opacity: .95; }
.video-play {
  display: grid; place-items: center;
  width: clamp(60px, 15%, 88px); aspect-ratio: 1; border-radius: 50%;
  background: #fff;
  color: var(--navy-800);
  box-shadow: 0 0 0 8px rgba(255,255,255,.14), 0 14px 30px rgba(0,0,0,.35);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.video-play svg { width: 42%; height: auto; margin-left: 6%; }
.video-box:hover .video-play { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255,255,255,.2), 0 16px 34px rgba(0,0,0,.38); }
.video-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(0,27,53,.0) 0%, rgba(0,27,53,.88) 38%);
}
.video-track { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); min-width: 24px; }
.video-time { color: #fff; font: 600 13px/1 var(--font-body); font-variant-numeric: tabular-nums; opacity: .9; }
.video-tbc {
  flex: none;
  color: #fff; background: var(--navy-900);
  border: 1px dashed #FBBF24;
  font-size: 14px; padding: 4px 10px;
}
.video-tbc::before { content: none; }
@media (max-width: 479px) {
  .video-bar { padding: 10px 12px; gap: 10px; }
  .video-tbc { font-size: 13px; padding: 3px 8px; }
  .video-time { display: none; }
}

/* -- 8. How we work ---------------------------------------- */
.how { background: var(--surface); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 18px; counter-reset: none; }
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; position: relative; }
.step-n { transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.step-n {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy-800); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  margin-bottom: 14px;
}
.step h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.step p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* -- 9. Guarantee ------------------------------------------ */
.guarantee { padding-top: 0; background: var(--surface); }
.guarantee-card {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  border-radius: var(--r-xl);
  padding: 32px 24px;
  color: #fff;
  border-left: 6px solid var(--green-600);
}
@media (min-width: 768px) { .guarantee-card { padding: 48px 56px; } }
.guarantee-card .h2 { max-width: 24ch; text-wrap: balance; }
.g-terms { margin: 28px 0 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .g-terms { grid-template-columns: 1fr 1fr 1.4fr; gap: 32px; } }
.g-terms div { border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; }
.g-terms dt { font-family: var(--font-display); font-weight: 700; color: var(--green-100); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.g-terms dd { margin: 0; color: #E6EEF6; font-size: 16px; }

/* -- 10. FAQ ----------------------------------------------- */
.faq-wrap { max-width: 860px; }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy-800);
  transition: color var(--dur-1) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-700); }
.faq-item .chev { flex: none; width: 20px; height: 20px; position: relative; }
.faq-item .chev::before,
.faq-item .chev::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform calc(var(--dur-1) * 1.25) var(--ease-out), background-color calc(var(--dur-1) * 1.25) var(--ease-out);
}
.faq-item .chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .chev::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item[open] .chev::before, .faq-item[open] .chev::after { background: var(--blue-600); }
.faq-item p { margin: 0 4px 22px; color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 70ch; }
@media (min-width: 768px) { .faq-item summary { font-size: 19px; padding: 24px 4px; } }

/* -- 11. Final CTA ----------------------------------------- */
.contact {
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(9,119,193,.22), transparent 60%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
}
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.contact .h2 { text-wrap: balance; }
.contact-lede { color: #C4D2EC; font-size: 18px; line-height: 1.65; margin: 18px 0 28px; max-width: 46ch; }
.contact-meta { list-style: none; padding: 0; margin: 32px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.contact-meta li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.10); font-size: 15px; }
@media (min-width: 560px) { .contact-meta li { grid-template-columns: 130px 1fr; gap: 12px; } }
.contact-meta span { color: #9DB4CF; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; align-self: center; }
.contact-meta strong { color: #fff; font-family: var(--font-display); font-weight: 600; }

/* -- Footer ------------------------------------------------ */
.ftr { background: var(--navy-900); color: #C4D2EC; padding: 56px 0 24px; }
.ftr-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 760px) { .ftr-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } }
.ftr-h { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 14px; }
.ftr-nav { display: flex; flex-direction: column; gap: 4px; }
.ftr-nav a { color: #C4D2EC; font-size: 15px; text-decoration: none; padding: 4px 0; }
.ftr-nav a:hover { color: #fff; text-decoration: underline; }
.ftr-logo { width: 246px; height: auto; margin-bottom: 16px; }
.ftr-brand p { color: #9DB4CF; max-width: 40ch; font-size: 14.5px; margin: 0; }
.ftr-phone { display: inline-block; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 8px; text-decoration: none; }
.ftr-phone:hover { color: #fff; text-decoration: underline; }
.ftr-contact p { margin: 0 0 6px; color: #9DB4CF; font-size: 14.5px; }
/* Client login (footer) -- the copy that exists at every width and without JS. #C4D2EC on --navy-900
   is the same pair the footer nav already uses. */
.ftr-portal {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  color: #C4D2EC; font-size: 15px; font-weight: 600; text-decoration: none;
}
.ftr-portal:hover { color: #fff; text-decoration: underline; }
.ftr-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: #9DB4CF; font-size: 13px;
}
.ftr-base p { margin: 0; }
.ftr-base a { color: #C4D2EC; }

/* -- Motion system ------------------------------------------
   Tokens in tokens.css. Transform and opacity only. Three layers:
   1. Hero entrance: CSS keyframes on load (runs without JS too).
   2. Scroll reveals: .reveal (= up) or [data-reveal="up|left|right|scale"],
      and [data-stagger="|left|right|scale"] > * for cascading siblings. main.js
      adds .is-in and sets --i per batch; the delay is capped at --stagger-max.
      A list can retune its own cadence by setting --stagger / --stagger-max /
      --reveal-dist on the [data-stagger] parent (custom properties inherit).
   2b. Secondary lift (rev2): a heading, icon or play button inside a reveal
      trails its container by one beat. TRANSFORM ONLY, never opacity, and keyed
      to the container's .is-in — so a nested element can never be invisible on
      its own. Anything that needs its own opacity fade must be a reveal target
      (matched by main.js REVEAL_SEL) so the safety-net sweep and launch gate 11
      cover it. check-reveals.mjs also asserts every 2b target is at rest.
   3. Micro-interactions: card lift, icon nudge, button press, header shadow.
   No scroll-linked parallax, by rule. */

/* 1. Hero entrance */
@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, var(--reveal-dist), 0); }
}
@keyframes hero-settle {
  from { transform: scale(1.04); }
}
.hero-copy > * { animation: hero-rise var(--dur-2) var(--ease-out) backwards; }
.hero-copy > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.hero-copy > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.hero-copy > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.hero-copy > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.hero .card-form { animation: hero-rise var(--dur-2) var(--ease-out) calc(var(--stagger) * 3) backwards; }
.hero-bg-img { animation: hero-settle 1.2s var(--ease-in-out) backwards; transform-origin: 60% center; }

/* 2. Scroll reveals */
.reveal, [data-reveal], [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, var(--reveal-dist), 0);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-soft);
}
[data-reveal="left"],  [data-stagger="left"] > *  { transform: translate3d(calc(var(--reveal-dist) * -1), 0, 0); }
[data-reveal="right"], [data-stagger="right"] > * { transform: translate3d(var(--reveal-dist), 0, 0); }
[data-reveal="scale"], [data-stagger="scale"] > * { transform: scale(.96); }
[data-stagger] > * { transition-delay: calc(min(var(--i, 0), var(--stagger-max)) * var(--stagger)); }
.reveal.is-in, [data-reveal].is-in, [data-stagger] > .is-in { opacity: 1; transform: none; }
/* No JS: nothing is ever hidden */
.no-js .reveal, .no-js [data-reveal], .no-js [data-stagger] > * { opacity: 1; transform: none; }

/* Per-list cadence (rev2). Overrides only ever target :not(.is-in) under :root:not(.no-js), so they can never pin an end state or touch the no-JS page. */
.faq-list { --stagger: 55ms; --stagger-max: 6; --reveal-dist: 14px; }          /* seven rows, one quick read */
.steps { --stagger: 110ms; --stagger-max: 3; }                                  /* four steps read as a sequence */
:root:not(.no-js) .v-grid > .v-card--lead:not(.is-in) { transform: scale(.975); }               /* the lead card settles, the rest rise */
.pain-list, .answer-list, .g-terms, .contact-meta { --stagger: 80ms; --reveal-dist: 12px; }
.ftr-grid { --stagger: 90ms; --reveal-dist: 14px; }

/* 2b. Secondary lift */
.h2 { transition: transform calc(var(--dur-2) + 200ms) var(--ease-soft) var(--lift-delay); }
.trust-icon {
  transition: transform calc(var(--dur-2) + 200ms) var(--ease-soft);
  transition-delay: calc(min(var(--i, 0), var(--stagger-max)) * var(--stagger) + var(--lift-delay));
}
.eco-icon { transition: transform calc(var(--dur-2) + 200ms) var(--ease-soft) var(--lift-delay); }
.video-box:not(.is-settled) .video-play { transition: transform calc(var(--dur-2) + 200ms) var(--ease-soft) calc(var(--lift-delay) * 2); }
:root:not(.no-js) :is(.reveal, [data-reveal]):not(.is-in) .h2 { transform: translate3d(0, var(--lift-dist), 0); }
:root:not(.no-js) [data-stagger] > :not(.is-in) .trust-icon { transform: translate3d(0, var(--lift-dist), 0) scale(.86); }
:root:not(.no-js) .reveal:not(.is-in) .eco-icon { transform: rotate(-8deg) scale(.86); }
:root:not(.no-js) .video-box:not(.is-in) .video-play { transform: scale(.82); }

/* 3. Micro-interactions (hover only on devices that really hover) */
/* Once revealed (main.js adds .is-settled), drop the stagger delay so hover is instant */
[data-stagger] > .is-settled, .reveal.is-settled, [data-reveal].is-settled {
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.v-card::after, .step::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow-3);
  opacity: 0; transition: opacity var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .v-card.is-in:hover, .step.is-in:hover,
  .no-js .v-card:hover, .no-js .step:hover {
    transform: translate3d(0, -4px, 0);
  }
  .v-card:hover, .step:hover { border-color: var(--blue-100); }
  .v-card--lead:hover { border-color: var(--navy-600); }
  .v-card:hover::after, .step:hover::after { opacity: 1; }
  .v-card:hover .v-icon { transform: translate3d(0, -2px, 0) scale(1.06); }
  .step:hover .step-n { transform: scale(1.1); background: var(--green-700); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal], [data-stagger] > *,
  .hero-copy > *, .hero .card-form, .hero-bg-img { opacity: 1 !important; transform: none !important; }
  .h2, .trust-icon, .eco-icon, .video-play { transform: none !important; }
  .v-card:hover, .step:hover, .v-card:hover .v-icon, .step:hover .step-n,
  .video-box:hover .video-play, .btn:hover, .btn:active { transform: none !important; }
}

/* -- Print -------------------------------------------------- */
@media print {
  .hdr, .mobile-menu, .hero-bg, .card-form { display: none; }
  .hero, .contact, .ftr, .guarantee-card, .v-card--lead { background: #fff !important; color: #000; }
  .reveal, [data-reveal], [data-stagger] > *, .h2, .trust-icon, .eco-icon, .video-play { opacity: 1; transform: none; }
}