/* ================================================================
   Weber Advertising, Overhaul Design System  (overhaul.css)
   ----------------------------------------------------------------
   The 2026 redesign layer. Loaded LAST, after Sammy's liquid-glass
   "-modern" files, so it extends them rather than fighting them.

   What lives here:
     1. Design tokens (colors, type, spacing, radii, shadows)
     2. Type scale (Montserrat display + Inter body)
     3. Texture + color backgrounds (from the WAM booklet package)
     4. Section "bands" with alternating dark / light rhythm
     5. Angled + curved section dividers (so the page is not all
        rectangles), reusable, drop-in classes
     6. Glass cards (extends Sammy's .box liquid glass)
     7. The big metallic "jobs done" number block
     8. Red checkmark lists, kickers, the Think/Design/Print/Launch
        pipeline tag, Weber buttons
     9. Decorative character elements (rocket, van, etc.) with
        coordinated placement + motion
    10. Animation utilities (scroll reveal, float, drift, rocket)

   HOW TO USE (quick reference):
     <section class="wb-band wb-band--dark wb-slant-b">    dark band, slanted bottom edge
     <section class="wb-band wb-band--honeycomb">          dark honeycomb texture band
     <div class="wb-glass">…</div>                         liquid-glass card
     <ul class="wb-checks"><li>…</li></ul>                 red checkmark list
     <p class="wb-kicker">Marketing execution partner</p>  red eyebrow
     <div class="wb-stat"><span class="wb-stat__num" data-count="101551">101,551</span><span class="wb-stat__label">Jobs Completed and counting</span></div>
     <img class="wb-deco wb-deco--tr wb-float" src="…/rocket.webp" alt="">  floating corner character
     <div data-reveal>…</div>                              fades/slides in on scroll (overhaul.js)

   Everything is namespaced `wb-` (Weber Build) so it never collides
   with Bootstrap or the legacy classes.
   ================================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand color, pulled from the Weber logo / booklet red */
  --wb-red:        #d8232a;   /* primary red */
  --wb-red-dk:     #9e1620;   /* deep red, gradient end + dark band */
  --wb-red-lt:     #ef3e46;   /* bright red, gradient start / hovers */
  --wb-red-grad:   linear-gradient(135deg, var(--wb-red-lt), var(--wb-red-dk));
  /* Hero red, brighter top-left bloom falling to deep oxblood for depth + energy */
  --wb-red-radial: radial-gradient(130% 150% at 22% -10%, #f23842 0%, #d8232a 32%, #a8141c 72%, #7a0e15 100%);
  /* Deeper "vault" red for the big stat band so it differs from the hero */
  --wb-red-deep:   radial-gradient(130% 150% at 50% -20%, #b01a22 0%, #7a0e15 70%, #5c0a10 100%);

  /* Neutrals, keep Sammy's calm canvas + dark glass */
  --wb-ink:        #1a1d21;   /* near-black for text on light, dark bands */
  --wb-ink-2:      #2b313a;   /* body text (matches site-modern.css) */
  --wb-canvas:     #e8ebef;   /* the light grey homepage canvas */
  --wb-white:      #ffffff;
  --wb-muted:      #6b727c;
  --wb-line:       rgba(0,0,0,.10);
  --wb-line-on-dark: rgba(255,255,255,.16);

  /* Dark band: SOLID charcoal (owner 2026-07-23). Was a 160deg gradient, but a
     per-band gradient made adjacent dark bands show a hard tonal seam instead of
     flowing together. A flat solid lets a run of dark bands read as one field;
     the textured accents (honeycomb/metal/red) still stand out. Value is the old
     gradient's visual average, so the tone barely changes. Name kept for reuse. */
  --wb-dark-grad:  #1f2226;

  /* Metallic silver, for the big "jobs done" number + .wb-metal-text (chrome).
     A slight 165deg tilt gives the sheen a diagonal; the stops run
     bright -> mid -> bright so that sliding the gradient (via --wb-sheen on
     scroll) sweeps a travelling highlight across the glyphs, like light
     moving over polished steel. The darkest mid was lightened (was #8c95a2)
     so the silver never muddies to a dull grey on the red field. */
  --wb-metal:      linear-gradient(165deg, #ffffff 0%, #f2f5f9 24%, #d2d9e2 44%, #a9b1bd 58%, #e9eef3 78%, #ffffff 100%);

  /* Type */
  --wb-display:    'Montserrat', 'Poppins', system-ui, sans-serif;
  --wb-body:       'Inter', system-ui, sans-serif;

  /* Fluid type scale (clamps so it reads on phone + desktop).
     Pushed bigger + bolder for the 2026 brand: the hero owns the viewport,
     and the H3 to H2 to H1 steps are wide enough to read as art direction. */
  --wb-h1:  clamp(2.3rem, 1.3rem + 3.4vw, 4.5rem);   /* dialed down: the 16px root made the rem term count, tops were too big */
  --wb-h2:  clamp(1.7rem, 1.15rem + 2vw, 3rem);
  --wb-h3:  clamp(1.2rem, 1.02rem + 1vw, 1.6rem);
  --wb-lead:clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);   /* stays clearly above the 17px body */

  /* Spacing scale (one beat for the whole page, used by the spacing utilities
     so bands and grids share a single vertical rhythm instead of ad-hoc values) */
  --wb-space-1: .5rem;
  --wb-space-2: 1rem;
  --wb-space-3: 1.5rem;
  --wb-space-4: 2.5rem;
  --wb-space-5: 4rem;

  /* Spacing + shape */
  --wb-pad:    clamp(3.5rem, 2rem + 6vw, 7rem);   /* vertical band padding */
  --wb-gap:    clamp(1rem, 0.6rem + 1.5vw, 2rem);
  --wb-radius: 18px;
  --wb-radius-lg: 28px;
  --wb-maxw:   1180px;

  /* Shadows. The offset is driven by a virtual moving light source:
     overhaul.js publishes --wb-lx / --wb-ly as the page scrolls (and sweeps
     --wb-sheen across the metal gradients), so every glass card and chrome
     headline that uses these tokens has its shadow slowly rotate, as if the
     light overhead were arcing across the page. The values below are the
     resting (no-JS / reduced-motion) position: light from straight above. */
  --wb-lx: 0px;
  --wb-ly: 14px;
  --wb-sheen: 40%;
  --wb-shadow:    var(--wb-lx) var(--wb-ly) 50px rgba(20,24,31,.16);
  --wb-shadow-sm: calc(var(--wb-lx) * .6) calc(var(--wb-ly) * .6) 24px rgba(20,24,31,.12);

  /* Height of the slanted section edges (one knob to retune them all).
     Clamped so the angle stays sane: it never collapses on tablet or grows
     into a tall wedge on ultrawide. The slant divider overlap reuses this. */
  --wb-slant: clamp(28px, 3.5vw, 72px);

  /* Height reserved to clear the fixed liquid-glass nav. The first band's
     CONTENT is padded down by this much so the hero headline never tucks
     under the nav; the band background still runs to the very top edge,
     which looks right behind the translucent nav. */
  --wb-nav-h: 5rem;
}

/* CRITICAL ROOT-SIZE RESET. The legacy stylesheet sets html{font-size:10px},
   so every rem in this system was computing against 10px: body 1.0625rem
   rendered at ~10.6px, bullets ~10.6px, card copy 10px, and all rem-based
   spacing at 0.6x (the "text too small / not enough whitespace" the owner saw).
   The standalone styleguide looked right only because it never loads the legacy
   CSS. Re-assert a 16px root so rem means what the design system assumes.
   SAFE: no legacy / -modern / nav / footer file uses rem (all px), so this only
   affects the wb- overhaul layer, not Sammy's pages or the legacy chrome. */
html{ font-size:16px; }
/* Pin the legacy body back to 16px. With html re-based to 16px, the legacy
   body{font-size:1.6rem} (which equalled 16px at the old 10px root) would have
   ballooned to 25.6px. wb- content lives in .wb-scope (its own size), so this
   only restores bare legacy/Sammy body text to exactly what it was. */
body{ font-size:16px; }

/* GLOBAL HORIZONTAL-OVERFLOW CLAMP (systemic, 2026-06-30). Several shared
   elements legitimately sit a few px past the viewport edge: the off-canvas
   driving van seam-riders (translateX in vw units), the bare body-level
   Bootstrap .row from header.php / footer.php (Bootstrap's -15px gutters), and
   Google's position:fixed reCAPTCHA badge. On a 390px phone each of these
   pushed documentElement.scrollWidth past clientWidth, so the whole page
   rubber-banded sideways. Clip the horizontal axis at the document root so no
   off-canvas mover can create a scrollbar. Uses `clip` (not `hidden`) so it
   does not create a scroll container that would break a future position:sticky;
   overflow-y stays visible. No band relies on overflow:visible at the root, the
   seam-riders escape their OWN band via z-index, not the document scroll box. */
html, body{ overflow-x:clip; }

/* ============================================================
   1b. SCOPE HARDENING  (neutralize legacy Bootstrap / custom.css)
   Real pages load min.css (Bootstrap + custom.css) for the legacy nav
   and footer. Those ELEMENT-level rules leak into our bands and make a
   real page look different from the standalone styleguide: custom.css
   sets h1{font-size:48px}, heading line-heights, paragraph and blockquote
   margins, link colors, list padding, and so on. overhaul.css loads last,
   so this block re-asserts the design system inside .wb-scope and the page
   matches the styleguide. Class-based wb- rules still win over these.
   ============================================================ */
.wb-scope, .wb-scope *, .wb-scope *::before, .wb-scope *::after{ box-sizing:border-box; }
/* Explicit base font-size is the critical reset: without it, body copy
   INHERITS Bootstrap's 14px base from min.css and every paragraph renders
   small (the standalone styleguide looks right only because it never loads
   min.css). 1.0625rem (17px) is the readable body size for the whole site. */
.wb-scope{ font-family:var(--wb-body); color:var(--wb-ink-2); line-height:1.65; font-size:1.0625rem; }
/* bands own their own spacing, so strip the legacy heading/paragraph margins */
.wb-scope h1,.wb-scope h2,.wb-scope h3,.wb-scope h4,.wb-scope h5{ margin:0; line-height:1.1; }
/* Force body/list size with selector specificity so a stray legacy
   p{font-size:14px} / li{font-size:13px} can never shrink our copy. */
.wb-scope p{ margin:0 0 1em; font-size:1.0625rem; line-height:1.65; }
.wb-scope p:last-child{ margin-bottom:0; }
.wb-scope li{ font-size:1.0625rem; line-height:1.6; }
.wb-scope ul,.wb-scope ol{ margin:0; padding:0; }
.wb-scope img,.wb-scope video{ max-width:100%; height:auto; }
.wb-scope a{ color:var(--wb-red); text-decoration:none; }
/* Underline ONLY inline text links inside prose/lists, never cards or buttons
   (the global a:hover underline was striping card and button text on hover). */
.wb-scope .wb-prose a:hover,
.wb-scope p a:hover,
.wb-scope li a:hover{ text-decoration:underline; }
/* INLINE PROSE / LIST LINKS ON DARK, RED, OR HONEYCOMB BANDS. The base rule
   above paints every inline link brand red; on a dark/red/honeycomb ground that
   is red-on-red / red-on-near-black and the link is invisible (the WHO band's
   "See Grocery & Retail" and "instant quote" wayfinding links vanished). Only
   .wb-card-link, .wb-card-cta and the .wb-btn variants were themed for dark
   bands, so primary inline wayfinding had no lift. Mirror the .wb-card-link
   treatment: the lightened brand red (#ff8b90) with a standing underline, so an
   inline route link reads as a real, clickable link on the dark/red/honeycomb
   ground. Scoped to prose + list links so it never touches cards or buttons. */
/* #143 (owner 2026-07-14): these inline-link rules (0,4,0) out-specify
   a.wb-btn (0,2,1), so a PILL sitting inside .wb-prose on a dark/red/honeycomb
   band rendered pink-red text (#ff8b90) on its red pill (red-on-red). Exclude
   buttons with :not(.wb-btn) so only real inline wayfinding links get the
   lightened-red treatment; the pills keep their own white/red inks. */
.wb-scope .wb-band--dark .wb-prose a:not(.wb-btn),
.wb-scope .wb-band--dark li a:not(.wb-btn),
.wb-scope .wb-band--red .wb-prose a:not(.wb-btn),
.wb-scope .wb-band--red li a:not(.wb-btn),
.wb-scope .wb-band--honeycomb .wb-prose a:not(.wb-btn),
.wb-scope .wb-band--honeycomb li a:not(.wb-btn){
  color:#ff8b90; text-decoration:underline; text-underline-offset:2px;
}
.wb-scope .wb-band--dark .wb-prose a:not(.wb-btn):hover,
.wb-scope .wb-band--dark li a:not(.wb-btn):hover,
.wb-scope .wb-band--red .wb-prose a:not(.wb-btn):hover,
.wb-scope .wb-band--red li a:not(.wb-btn):hover,
.wb-scope .wb-band--honeycomb .wb-prose a:not(.wb-btn):hover,
.wb-scope .wb-band--honeycomb li a:not(.wb-btn):hover{ color:#ffb4b8; }
.wb-scope .wb-btn,
.wb-scope .wb-btn:hover,
.wb-scope a.wb-glass,
.wb-scope a.wb-glass:hover,
.wb-scope .wb-glass--link,
.wb-scope .wb-glass--link:hover{ text-decoration:none; }
/* BULLETPROOF: a pill button must NEVER underline, even when it sits inside a
   <p> or .wb-prose on a dark/red/honeycomb band (the band-scoped prose-link
   underline rules above out-specify the plain .wb-btn rule). !important ends the
   specificity whack-a-mole, a .wb-btn is always a button, never a text link. */
.wb-scope a.wb-btn,
.wb-scope a.wb-btn:hover,
.wb-scope a.wb-btn:focus,
.wb-scope a.wb-btn:visited{ text-decoration:none !important; }
/* A demoted secondary link that must NOT compete with a red CTA sitting right
   above it (e.g. the quote escape hatch under the final CTA button). Desaturated
   to a muted light tone with a standing underline, so it still reads as a link
   but the one hard red CTA keeps ownership of the red. */
.wb-scope a.wb-link--quiet{ color:#c7cdd6; text-decoration:underline; text-underline-offset:2px; }
.wb-scope a.wb-link--quiet:hover{ color:#fff; }
.wb-scope .wb-band--light a.wb-link--quiet,
.wb-scope .wb-band--quilt a.wb-link--quiet,
.wb-scope .wb-band--gray a.wb-link--quiet,
.wb-scope .wb-band--air a.wb-link--quiet{ color:var(--wb-muted); }
.wb-scope .wb-band--light a.wb-link--quiet:hover,
.wb-scope .wb-band--quilt a.wb-link--quiet:hover,
.wb-scope .wb-band--gray a.wb-link--quiet:hover,
.wb-scope .wb-band--air a.wb-link--quiet:hover{ color:var(--wb-ink); }
/* bootstrap blockquote has a left border, big size, and grey, strip it back */
.wb-scope blockquote{ margin:1em 0; padding:0; border:0; font-size:1rem; color:inherit; quotes:none; }
/* re-assert the size scale with extra specificity so the class always beats
   custom.css's element h1{48px} / h2{38px} no matter the load order */
.wb-scope .wb-h1{ font-size:var(--wb-h1); line-height:.98; }
.wb-scope .wb-h2{ font-size:var(--wb-h2); line-height:1.04; }
.wb-scope .wb-h3{ font-size:var(--wb-h3); line-height:1.2; }
.wb-scope .wb-lead{ font-size:var(--wb-lead); line-height:1.55; }
/* re-assert the TOP-MARGIN spacing utilities on a <p> with matching specificity.
   .wb-scope p{ margin:0 0 1em } (0,1,1) was BEATING .wb-mt{ margin-top } (0,1,0),
   so every <p class="wb-lead wb-mt"> following a heading computed margin-top:0 and
   glued straight under the headline (no heading-to-lead air anywhere on the page).
   Qualify the utilities with .wb-scope (0,2,0) so they win on a paragraph and the
   intended heading-to-lead gap is restored site-wide. Not a new class; this is the
   same scope-hardening pattern as the size-scale re-assert above. */
.wb-scope p.wb-mt-sm{ margin-top:var(--wb-space-2); }
.wb-scope p.wb-mt{ margin-top:var(--wb-space-3); }
.wb-scope p.wb-mt-lg{ margin-top:var(--wb-space-4); }
.wb-scope p.wb-mt-xl{ margin-top:var(--wb-space-5); }
/* #70: honor the margin utilities on card headings too (site-wide). A logo/image
   well followed by an <h3 class="wb-h3 wb-mt"> otherwise collides, because the
   more specific .wb-glass .wb-h3 rule zeroes the heading's top margin. Same scope-
   hardening pattern as the .wb-checks utilities further down. */
.wb-scope .wb-h3.wb-mt-sm{ margin-top:var(--wb-space-2); }
.wb-scope .wb-h3.wb-mt{ margin-top:var(--wb-space-3); }
.wb-scope .wb-h3.wb-mt-lg{ margin-top:var(--wb-space-4); }
.wb-scope .wb-h3.wb-mt-xl{ margin-top:var(--wb-space-5); }

/* ============================================================
   2. TYPE  (Montserrat display, Inter body)
   fonts-modern.css already swaps the family; here we set the
   display weights, tracking, and rhythm the booklet uses.

   Headlines run BIG and BOLD on purpose (Montserrat 800/900): the
   hero owns its band, and each level steps down hard so the
   hierarchy reads at a glance.

   .wb-metal-text (alias .wb-chrome) is the reusable metallic chrome
   headline utility, the silver gradient clipped to the text. Use it
   sparingly and ONLY on dark, red, metal, or honeycomb bands where
   the silver reads as polished steel. Do NOT use it on light bands
   or on body copy. It always keeps a solid fallback color so the
   text never vanishes if background-clip is unsupported.
   ============================================================ */
.wb-scope h1, .wb-scope h2, .wb-scope h3, .wb-scope h4,
h1.wb, h2.wb, h3.wb{
  font-family:var(--wb-display);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.01em;
}
.wb-h1{ font-size:var(--wb-h1); font-weight:800; line-height:.98; letter-spacing:-.025em; text-wrap:balance; }
.wb-h2{ font-size:var(--wb-h2); font-weight:800; line-height:1.04; letter-spacing:-.015em; text-wrap:balance; }
.wb-h3{ font-size:var(--wb-h3); font-weight:700; letter-spacing:-.005em; }
.wb-lead{ font-size:var(--wb-lead); line-height:1.55; color:var(--wb-ink-2); }
.wb-display-black{ font-weight:900; letter-spacing:-.03em; }
/* Big stat figure for LIGHT bands (brand red). Chrome (.wb-metal-text) is for
   dark/red/honeycomb bands only; on white glass cards use this instead. */
.wb-stat-fig{ color:var(--wb-red); font-family:var(--wb-display); font-weight:800; font-size:var(--wb-h2); display:block; letter-spacing:-.02em; line-height:1; }
/* The label that sits UNDER a .wb-stat-fig figure on a light-band stat card.
   A small, tracked, stepped-back caption so the card reads as the crisp
   number-then-label beat a top agency uses, not a huge number over a normal
   body sentence. The light-band counterpart to the big band's .wb-stat__label. */
.wb-stat-label{
  display:block; margin-top:.55rem;
  font-family:var(--wb-display); font-weight:700;
  font-size:.8rem; letter-spacing:.06em; line-height:1.35;
  text-transform:uppercase; color:var(--wb-muted);
}

/* Metallic chrome headline treatment. Reusable, drop onto any headline
   the owner wants silvered. Dark / red / metal / honeycomb bands only.
   Keeps a solid fallback color (never transparent) so the text is always
   readable even when the gradient clip fails. The thin dark stroke stops
   the silver edges from glowing on a dark field. */
.wb-metal-text,
.wb-chrome{
  background:var(--wb-metal);
  background-size:100% 260%;                   /* headroom for the sheen to travel */
  background-position:50% var(--wb-sheen,40%); /* swept by scroll, see overhaul.js */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#eef1f5;                              /* fallback, NOT transparent */
  -webkit-text-stroke:.4px rgba(0,0,0,.06);   /* keeps edges crisp on dark */
  /* Vertical padding (cancelled by the matching negative margin so layout is
     unchanged) enlarges the background-paint box, so the clipped gradient
     covers the full glyph height. Without it, a tight line-height crops the
     gradient and the tops / descenders render transparent (the "clipped"
     letters in review). */
  padding-block:.16em; margin-block:-.16em;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.16))
         drop-shadow(calc(var(--wb-lx) * .3) calc(var(--wb-ly) * .35) 10px rgba(0,0,0,.26));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wb-metal-text,
  .wb-chrome{ background:none; color:#f4f6f8; -webkit-text-fill-color:currentColor; }
}

/* GearedSlab, the booklet's display slab, self-hosted as a webfont.
   OWNER RULE (2026-06-30): the geared slab is RESERVED for the brand
   signature "We Get Stuff Done." and nothing else. Everywhere else the
   big display face is bold/black Montserrat so the geared face stays
   special and rare. Apply the geared face with .wb-wgsd; .wb-slab is now
   just Montserrat 900 for any other large display headline.
   License: confirm a webfont license for GearedSlab before the
   production launch (see build/QUESTIONS.md). Fine on proofing for review. */
@font-face{
  font-family:'GearedSlab';
  src:url("../fonts/GearedSlab-Extrabold.woff") format("woff");
  font-weight:800; font-style:normal; font-display:swap;
}
/* THE geared face, "We Get Stuff Done." ONLY. A scope-level selector
   (0,2,0) so it beats `.wb-scope h1{font-family:var(--wb-display)}` (0,1,1)
   and the face actually loads; the !important is required because the legacy
   fonts-modern.css pins `p, li, ... { font-family:Inter !important }`, which
   would otherwise crush the slab on a <p>/<span> sign-off. */
.wb-wgsd,
.wb-scope .wb-wgsd{ font-family:'GearedSlab', var(--wb-display) !important; font-weight:800; letter-spacing:0; }
/* Standalone 3-line brand LOCKUP (feedback #50), mirrors the footer signature:
   three stacked words, no period, each line tuned so they read the same width
   (WE GET smallest, DONE largest). For true standalone brand elements far from the
   footer (a hero/mid-page sign-off), NOT for tagline text inside a sentence and NOT
   for the redundant flourish that sits right above the footer. Keep .wb-wgsd on the
   element for the GearedSlab face; color is inherited from the element's own style. */
/* #72: the three lines used to be sized off --wb-h3/-h2/-h1, but those clamps grow
   at different vw rates, so the "equal width" reading only held at one screen size
   (DONE outran STUFF at others). Drive all three off ONE clamp with fixed em ratios
   so the proportions stay locked at every width. */
.wb-scope .wb-wgsd-lockup{ display:block; margin:0; line-height:.9; text-transform:uppercase; font-size:clamp(1.7rem, 1.15rem + 2vw, 3rem); }
.wb-scope .wb-wgsd-lockup span{ display:block; }
.wb-scope .wb-wgsd-lockup span:nth-child(1){ font-size:.8em; }
.wb-scope .wb-wgsd-lockup span:nth-child(2){ font-size:1em; }
.wb-scope .wb-wgsd-lockup span:nth-child(3){ font-size:1.35em; }
/* .wb-slab now = bold/black Montserrat (NOT geared). It used to carry the
   GearedSlab face; the owner asked to reserve that for "We Get Stuff Done",
   so every other big display headline that still uses .wb-slab renders in
   clean Montserrat 900. Same specificity + !important so it wins the same
   battles the geared rule used to. */
.wb-slab,
.wb-scope .wb-slab{ font-family:var(--wb-display) !important; font-weight:900; letter-spacing:-.02em; }

/* Red eyebrow / kicker that sits above a headline */
.wb-kicker{
  display:inline-block;
  font-family:var(--wb-display);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wb-red);
  margin:0 0 .6rem;
}
.wb-band--dark .wb-kicker,
.wb-band--honeycomb .wb-kicker{ color:#ff5a61; } /* lightened brand red reads on dark/honeycomb */
/* #65: honest, file-driven "last updated" stamp near the top of a page. Small and
   muted so it backs the SEO/GEO freshness claim without competing with the H1. */
.wb-scope .wb-updated{ display:block; margin:.1rem 0 .2rem; font-family:var(--wb-display); font-weight:600; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--wb-muted); }
.wb-band--dark .wb-updated,
.wb-band--honeycomb .wb-updated{ color:rgba(255,255,255,.6); }
.wb-band--red  .wb-kicker{ color:rgba(255,235,236,.92); } /* red-on-red was unreadable; pale on the red field */
/* On the SOLID red band, the lightened brand red above is red-on-red and
   barely legible. Lift the eyebrow to a warm cream so it passes contrast on
   the red ground. Add .wb-kicker--on-red to a kicker sitting on .wb-band--red. */
.wb-band--red .wb-kicker--on-red{ color:rgba(255,248,244,.92); }

/* ============================================================
   3. BACKGROUNDS  (textures from the booklet + brand gradients)
   The .webp files live in /images/overhaul/. Each texture has a
   solid fallback color so text contrast holds if the image fails.
   ============================================================ */
/* Honeycomb stretches to COVER the whole band (no tiling seams). It also
   parallax-pans when the band carries data-bg-parallax (see overhaul.js):
   the texture is sized a touch taller than the band so there is room to pan. */
/* Black honeycomb: drop the texture to ~50% and let a darker black show through,
   so it reads as subtle depth, not a busy pattern (a 50% black wash over the
   texture on a near-black base). */
.wb-bg-honeycomb{ background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)), #0a0b0d url("../images/overhaul/tex-honeycomb-dark.webp") center top/cover no-repeat; }
.wb-bg-honeycomb[data-bg-parallax]{ background-size:cover; background-position-y:var(--wb-bgY, 0); }
/* Brushed steel: a lighter base than pure black so the metallic lines have
   something to catch light on, plus a diagonal sheen so it reads as a plate,
   not a black panel. Distinguishes it from the honeycomb band above it. */
.wb-bg-metal    {
  background:
    linear-gradient(105deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%,
                            rgba(0,0,0,.25) 60%, rgba(255,255,255,.06) 100%),
    #3a3f46 url("../images/overhaul/tex-metallic-lines.webp") center/360px repeat;
}
/* Brighter, cooler brushed-steel for a final CTA that sits directly under a
   near-black honeycomb band: lifts the base value and cools the sheen so the
   two dark bands clearly read as separate sections across the slant seam
   (instead of running together as one long dark block). Still keeps light text. */
.wb-bg-metal--bright{
  background:
    linear-gradient(105deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.02) 26%,
                            rgba(0,0,0,.18) 62%, rgba(255,255,255,.10) 100%),
    #5b626c url("../images/overhaul/tex-metallic-lines.webp") center/360px repeat;
}
/* Grey diagonal-triangle texture, toned to ~30% strength with a 72% canvas
   wash over it so copy stays legible (owner note 2026-06-29). */
.wb-bg-gray     {
  background:
    linear-gradient(rgba(232,235,239,.72), rgba(232,235,239,.72)),
    var(--wb-canvas) url("../images/overhaul/tex-gray-blocks.webp") center/720px repeat;
}
/* Deeper, cooler slate gray for a problem/contrast band that would otherwise
   read as a second near-white field stacked on a pale band above it. A darker
   wash drops the value a real step so the slant seam shows a visible tonal
   break and the band reads as its OWN section, while the slate stays light
   enough that the dark ink body copy still passes contrast. The extra band
   padding (.wb-band--gray-deep) gives it more breathing room than the pale
   bands so it is unmistakably distinct. Reusable on any back-to-back light
   pair where one band must visibly recede. */
.wb-band--gray-deep.wb-bg-gray{
  background:
    linear-gradient(rgba(196,204,214,.82), rgba(186,195,206,.82)),
    #b9c1cb url("../images/overhaul/tex-gray-blocks.webp") center/720px repeat;
}
.wb-band--gray-deep{ padding-top:calc(var(--wb-pad) + 1.25rem); padding-bottom:calc(var(--wb-pad) + 1.25rem); }
.wb-band--gray-deep .wb-kicker{ color:#b0282d; }   /* slightly deeper red holds on the cooler slate */
.wb-bg-red      { background:var(--wb-red-radial); }
/* a soft white "quilt" diamond, drawn in CSS so it stays crisp + tiny.
   Toned to ~30% (alpha .015) per owner note 2026-06-29, for legibility. */
.wb-bg-quilt{
  background-color:#f4f6f9;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,.015) 25%, transparent 25%),
    linear-gradient(225deg, rgba(0,0,0,.015) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(0,0,0,.015) 25%, transparent 25%),
    linear-gradient(315deg, rgba(0,0,0,.015) 25%, transparent 25%);
  background-size:52px 52px;
  background-position:0 0, 26px 0, 26px -26px, 0 26px;
}

/* ============================================================
   4. BANDS  (full-width horizontal sections, alternating rhythm)
   Put copy inside .wb-inner to get the centered max-width column.
   ============================================================ */
.wb-band{
  position:relative;
  padding:var(--wb-pad) 1.25rem;
  overflow:hidden;                 /* clips deco elements to the band */
  isolation:isolate;               /* deco + textures stack inside */
}
/* Deep-linked sections (e.g. #we-get-stuff-done) must land BELOW the fixed nav,
   not tucked under it. ~7rem clears the floating nav (bottom ~98px un-shrunk);
   matches the broader rule in wb-toc.css. */
.wb-band[id]{ scroll-margin-top:7rem; }

/* Breadcrumbs (inc/wb-breadcrumbs.php): a small, quiet trail at the top of the
   hero .wb-inner. Inherits the band text color (white on dark/red heroes), tints
   to muted ink on light bands. */
/* background:none/box-shadow:none/padding:0 NEUTRALIZE the legacy bare nav{}
   rule in custom.css (gradient + 0 2px 5px shadow), which a <nav> breadcrumb
   otherwise inherits as a "weird box drop-shadow with text touching the edges"
   (owner feedback #28). Same fix pattern as .wa-foot-nav and .wb-jumplinks. */
.wb-crumbs{ margin:0 0 1.25rem; font-size:.8rem; font-weight:600; letter-spacing:.02em; background:none; box-shadow:none; padding:0; border:0; }
.wb-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; }
.wb-crumbs__item{ display:inline-flex; align-items:center; }
.wb-crumbs__item + .wb-crumbs__item::before{ content:"/"; opacity:.5; margin:0 .5rem; }
.wb-scope .wb-crumbs a{ color:inherit; text-decoration:none; opacity:.82; }
.wb-scope .wb-crumbs a:hover{ opacity:1; text-decoration:underline; }
.wb-crumbs__current{ opacity:1; }
.wb-band--light .wb-crumbs,.wb-band--quilt .wb-crumbs,.wb-band--gray .wb-crumbs,.wb-band--air .wb-crumbs{ color:var(--wb-muted); }

/* Pricing table (the /pricing/ ballpark). Clean, readable rows; price column
   in brand red and bold. Inherits the card's text color so it reads on light glass. */
.wb-ptable{ width:100%; border-collapse:collapse; font-size:.98rem; }
/* Horizontal cell padding so SIZE / QTY / PRICE never touch and merge inside a
   narrow mobile glass card (they used to read as one run-on value, e.g.
   "60x361" = 60x36 + qty 1). The first/last cells stay flush to the table edge
   (padding-left/right:0 below) so the table still spans the card cleanly. */
.wb-ptable th{ text-align:left; font-family:var(--wb-display); font-weight:700; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--wb-muted); padding:0 .6rem .5rem; border-bottom:2px solid var(--wb-line); }
.wb-ptable td{ padding:.55rem .6rem; border-bottom:1px solid var(--wb-line); line-height:1.3; }
.wb-ptable th:first-child,.wb-ptable td:first-child{ padding-left:0; }
.wb-ptable th:last-child,.wb-ptable td:last-child{ text-align:right; padding-right:0; }
/* Keep the numeric middle columns (QTY, dimensions) on one line so a wrap never
   shoves a digit into the neighbouring column at the narrowest widths. */
.wb-ptable td,.wb-ptable th{ white-space:nowrap; }
.wb-ptable td:first-child,.wb-ptable th:first-child{ white-space:normal; }
.wb-ptable td:last-child{ font-family:var(--wb-display); font-weight:800; color:var(--wb-red); white-space:nowrap; }
.wb-ptable tr:last-child td{ border-bottom:0; }

/* Logo trust row: grayscale client logos, even spacing, lift to color on hover.
   Uses MAX-height (not height) so the scope's img{height:auto} cannot override it,
   and a max-width cap so a wide logo never blows out the row. */
.wb-logo-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(2rem, 1.25rem + 3.25vw, 4.25rem); }
.wb-scope .wb-logo-row img{ height:auto; max-height:clamp(30px,2rem + 1vw,46px); width:auto; max-width:150px; object-fit:contain; opacity:.6; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease; }
.wb-scope .wb-logo-row img:hover{ opacity:1; filter:grayscale(0); }
/* On dark/red/honeycomb bands, do not grayscale logos to mud; drop the filter and
   lift opacity (use reversed/white logo assets where available). */
.wb-scope .wb-band--dark .wb-logo-row img,
.wb-scope .wb-band--red .wb-logo-row img,
.wb-scope .wb-band--honeycomb .wb-logo-row img{ filter:none; opacity:.9; }
.wb-inner{
  max-width:var(--wb-maxw);
  margin-inline:auto;
  position:relative;
  z-index:2;                       /* copy sits above deco/texture */
}
/* Nav clearance: the first band on every page (the hero) gets extra top
   padding so its headline clears the fixed nav. Opt a band out with
   .wb-band--flush (e.g. a full-bleed photo hero that owns its own offset). */
.wb-scope > .wb-band:first-child:not(.wb-band--flush){
  padding-top:calc(var(--wb-pad) + var(--wb-nav-h));
}
/* Footer flush: kill the legacy 70px gap so the dark footer touches the
   last band on overhaul pages (the body background no longer shows as a
   seam). Scoped to wb- pages so legacy pages keep their spacing. */
.wb-scope + footer.wa-footer{ margin-top:0; }

/* Band themes */
.wb-band--light{ background:var(--wb-canvas); color:var(--wb-ink-2); }
/* Pure-white band: a fully white section used to separate two adjacent light
   bands so neither blurs into the other (e.g. a white Problem band sitting
   next to a gray-textured Trust band). Same ink + slant behavior as light. */
.wb-band--white{ background:#fff; color:var(--wb-ink-2); }
.wb-band--quilt{ color:var(--wb-ink-2); }                 /* pair with .wb-bg-quilt */
.wb-band--gray { color:var(--wb-ink-2); }                 /* pair with .wb-bg-gray  */
.wb-band--dark{ background:var(--wb-dark-grad); color:#eef1f5; }
.wb-band--red { background:var(--wb-red-radial); color:#fff; }
.wb-band--red.wb-band--deep{ background:var(--wb-red-deep); }  /* deeper "vault" red for the stat */
.wb-band--honeycomb{ color:#eef1f5; }                     /* pair with .wb-bg-honeycomb */
.wb-band.wb-bg-metal{ color:#eef1f5; }                    /* brushed steel band keeps light text */
.wb-band--dark h1,.wb-band--dark h2,.wb-band--dark h3,
.wb-band--red h1,.wb-band--red h2,.wb-band--red h3,
.wb-band--honeycomb h1,.wb-band--honeycomb h2,.wb-band--honeycomb h3{ color:#fff; }

/* Dark-band body copy: lift it off the dim grey so agency copy reads
   effortlessly on the dark and textured bands. */
.wb-band--dark .wb-lead,
.wb-band--red .wb-lead,
.wb-band--honeycomb .wb-lead{ color:#d7dce3; }
/* .wb-lead--bright: for a HERO lead that has to carry the page's main promise
   on a loud band. Lifts the lead toward white (and a hair bolder) so the most
   important lines hold up on saturated red instead of sitting low in the
   contrast hierarchy under the big headline. */
.wb-band--dark .wb-lead.wb-lead--bright,
.wb-band--red .wb-lead.wb-lead--bright,
.wb-band--honeycomb .wb-lead.wb-lead--bright,
.wb-band--red .wb-lead--bright{ color:#fdf4f3; font-weight:500; }

/* Optional contrast scrim for textured bands: holds kicker / heading
   contrast over the lighter cells of the honeycomb without muddying it. */
.wb-band--honeycomb::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 30% 30%, rgba(0,0,0,0), rgba(0,0,0,.32));
}

/* A whole-page helper: alternate light/dark automatically when you
   just stack `.wb-band.wb-band--auto` sections without picking a theme. */
.wb-band--auto:nth-of-type(odd){  background:var(--wb-canvas); color:var(--wb-ink-2); }
.wb-band--auto:nth-of-type(even){ background:var(--wb-dark-grad); color:#eef1f5; }

/* ============================================================
   5. ANGLED + CURVED DIVIDERS  (kill the all-rectangles look)
   ------------------------------------------------------------
   THE TESSELLATION CONTRACT (read this before reordering bands):
   a slant is a SEAM shared by two bands. The band ABOVE stays flat
   (no slant class). The band BELOW carries the slant: it clips a
   triangle off its OWN top, then pulls UP under the band above by
   the full slant height. The band above paints down into the cut,
   so the diagonal is always filled by a real band color, never the
   page background. The overlap is a full var(--wb-slant), not a
   shared hairline, so sub-pixel rounding can never expose a sliver.

   This is gradient-safe and texture-safe: nothing assumes a solid
   fill, the band above simply shows through the lower band's cut.

   USE:
     <section class="wb-band wb-band--red">          flat bottom, sits on top
     <section class="wb-band ... wb-slant-up">       rises into the band above
     <section class="wb-band ... wb-slant-up wb-slant--rev">   mirror the angle

   Two wb-slant-up bands in a row still tessellate: each independently
   tucks under its own predecessor.

   LEGACY: .wb-slant-b / .wb-slant-t / .wb-slant-tb still exist below
   for pages already using them, but they are now thin aliases onto
   the overlap model so they tessellate too. Prefer wb-slant-up on
   new work.
   ============================================================ */

/* The robust tessellating divider. Put it on the LOWER band of a seam. */
.wb-slant-up{
  /* clip a triangle off the top, keep everything below it */
  clip-path:polygon(0 var(--wb-slant), 100% 0, 100% 100%, 0 100%);
  /* pull up so the band above fills the cut, a full slant of overlap */
  margin-top:calc(var(--wb-slant) * -1);
  /* add the slant back as padding so copy never sits in the wedge */
  padding-top:calc(var(--wb-pad) + var(--wb-slant));
  position:relative;
  z-index:1;                 /* sit above the band above in the overlap zone */
}
/* mirror: triangle rises from the other side */
.wb-slant-up.wb-slant--rev{
  clip-path:polygon(0 0, 100% var(--wb-slant), 100% 100%, 0 100%);
}

/* Legacy aliases. .wb-slant-t now behaves exactly like wb-slant-up
   (lower band rises into the one above). .wb-slant-b is treated as a
   request for the FOLLOWING band to rise, so it just adds a touch of
   bottom padding for copy clearance and lets the next band's slant-up
   do the tessellating. Kept so existing markup keeps working. */
.wb-slant-t{
  clip-path:polygon(0 var(--wb-slant), 100% 0, 100% 100%, 0 100%);
  margin-top:calc(var(--wb-slant) * -1);
  padding-top:calc(var(--wb-pad) + var(--wb-slant));
  position:relative; z-index:1;
}
.wb-slant-t.wb-slant--rev{
  clip-path:polygon(0 0, 100% var(--wb-slant), 100% 100%, 0 100%);
}
.wb-slant-b{ padding-bottom:calc(var(--wb-pad) + var(--wb-slant)); }
.wb-slant-b.wb-slant--rev{ padding-bottom:calc(var(--wb-pad) + var(--wb-slant)); }
.wb-slant-tb{
  clip-path:polygon(0 var(--wb-slant), 100% 0, 100% 100%, 0 100%);
  margin-top:calc(var(--wb-slant) * -1);
  padding-block:calc(var(--wb-pad) + var(--wb-slant));
  position:relative; z-index:1;
}

/* ============================================================
   CALM THE RHYTHM  (owner #91 / Sammy, 2026-07-23)
   ------------------------------------------------------------
   Every band carried the diagonal seam, which read as too much.
   The slant is now reserved for TEXTURED accent bands (honeycomb,
   quilt, metal, gray, red, photo, deep, video). A plain light or
   dark band renders flat and rectangular, so the angle lands as a
   deliberate call-out, not the default. The diagonal always lives
   on the lower band, so flattening a plain band only straightens
   its own top and every seam stays clean. Net: about 60% straight,
   40% angled, matching the owner ask. Delete this block to restore
   the all-slanted look.
   ============================================================ */
.wb-band.wb-slant-up:not(.wb-bg-honeycomb):not(.wb-bg-metal):not(.wb-band--honeycomb):not(.wb-band--red):not(.wb-band--photo):not(.wb-band--deep):not(.wb-band--video),
.wb-band.wb-slant-t:not(.wb-bg-honeycomb):not(.wb-bg-metal):not(.wb-band--honeycomb):not(.wb-band--red):not(.wb-band--photo):not(.wb-band--deep):not(.wb-band--video){
  clip-path:none;
  margin-top:0;
  padding-top:var(--wb-pad);
}
/* Fewer distinct backgrounds (owner 2026-07-23): the subtle LIGHT textures
   (quilt, gray) render as plain canvas, so a run of light content bands shares
   one background instead of each getting its own pattern. Text stays dark, so
   contrast is unchanged. The deliberate gray-deep "recede" band keeps its slate
   via its own higher-specificity rule. */
.wb-bg-quilt, .wb-bg-gray, .wb-band--quilt, .wb-band--gray{
  background:var(--wb-canvas);
  background-image:none;
}

/* Curved edges. Like the slant, the LOWER band owns the curve and
   pulls up so the band above fills it. Only use between SOLID-color
   bands; a curved cut over a texture can clip the texture oddly. */
.wb-curve-up{
  border-top-left-radius:50% 4vw; border-top-right-radius:50% 4vw;
  margin-top:calc(var(--wb-slant) * -1);
  padding-top:calc(var(--wb-pad) + var(--wb-slant));
  position:relative; z-index:1;
}
/* Legacy curve aliases, now tucked so the corners cannot expose canvas. */
.wb-curve-t{
  border-top-left-radius:50% 4vw; border-top-right-radius:50% 4vw;
  margin-top:calc(var(--wb-slant) * -1);
  padding-top:calc(var(--wb-pad) + var(--wb-slant));
  position:relative; z-index:1;
}
.wb-curve-b{ border-bottom-left-radius:50% 4vw; border-bottom-right-radius:50% 4vw; }

/* Standalone wave divider you can drop BETWEEN two bands.
   <div class="wb-wave wb-wave--up"></div>, fills with currentColor;
   set color to the band above's background. */
.wb-wave{ line-height:0; }
.wb-wave svg{ display:block; width:100%; height:5vw; }

/* ============================================================
   6. GLASS CARDS  (extends Sammy's .box liquid glass)
   ============================================================ */
.wb-glass{
  /* roomier, even padding so the head and body both clear the edges */
  padding:clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--wb-radius);
  box-shadow:var(--wb-shadow-sm);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  /* flex column so internal spacing is even top to bottom and the card
     fills its grid track (matches its row-mates when grids stretch) */
  display:flex;
  flex-direction:column;
  height:100%;
}
/* Symmetric internal rhythm: kill the stray browser heading margins that
   made the top inset look bigger than the bottom, and give the card head
   a consistent gap above the body. */
.wb-glass > :first-child{ margin-top:0; }
.wb-glass > :last-child{ margin-bottom:0; }
.wb-glass .wb-h3,
.wb-glass h3{ margin:0 0 .5rem; }
/* #61: a card image sitting directly above a heading had no gap (.wb-media has no
   bottom margin and the rule above zeroes the heading's top). Give just that pair
   a consistent gap. Scoped to media+heading so deck-hook cards, which rely on the
   zeroed top margin, are untouched. */
.wb-glass .wb-media + .wb-h3,
.wb-glass .wb-media + h3{ margin-top:var(--wb-space-2); }
/* Card heading color on LIGHT bands. The legacy global `h1,h3,h5{color:#e50a2d}`
   in custom.css leaks brand red onto glass-card H3s on light/quilt/gray bands
   (dark bands are already overridden to #fff). Render them in ink so a card
   heading reads as a heading, not a clickable link; red stays reserved for the
   kicker and the check bullets. Reusable across every light-band card grid. */
.wb-band--light  .wb-glass .wb-h3, .wb-band--light  .wb-glass h3,
.wb-band--quilt  .wb-glass .wb-h3, .wb-band--quilt  .wb-glass h3,
.wb-band--gray   .wb-glass .wb-h3, .wb-band--gray   .wb-glass h3,
.wb-band--air    .wb-glass .wb-h3, .wb-band--air    .wb-glass h3{ color:var(--wb-ink); }
/* Card BODY color on LIGHT bands for a LINK card. A link card is an <a>, so the
   base `.wb-scope a{ color:var(--wb-red) }` cascades into the card's inner <p>
   and <li>, painting the whole paragraph brand red (it reads as a giant link /
   an error state and kills the heading-vs-body hierarchy). Dark bands already
   re-ink the body to #d7dce3 (see the dark .wb-glass p rule), but a light band
   had no matching override, so the paragraph stayed red. Re-ink it the same way
   the h3 above is re-inked. Red stays reserved for the kicker, the checks, and
   the .wb-card-cta arrow. Mirrors the h3 selector list so it covers every
   light-tone band that hosts a link-card grid. */
.wb-band--light  .wb-glass--link p, .wb-band--light  .wb-glass--link li,
.wb-band--quilt  .wb-glass--link p, .wb-band--quilt  .wb-glass--link li,
.wb-band--gray   .wb-glass--link p, .wb-band--gray   .wb-glass--link li,
.wb-band--air    .wb-glass--link p, .wb-band--air    .wb-glass--link li{ color:var(--wb-ink-2); }
.wb-glass p{ margin:0; font-size:1rem; line-height:1.6; }
/* Story cards (the Work case-study cards) stack several paragraphs and a
   pull-quote, so give the card body an even vertical rhythm instead of the
   crowded zero-margin default. The deck is the bold hook line under the
   heading; the blockquote gets a touch more air to read as a quote. */
.wb-glass .wb-card-deck{
  margin:0 0 .65rem; font-weight:700; line-height:1.45; color:inherit;
}
.wb-glass .wb-card-deck + p{ margin-top:0; }
.wb-glass p + p{ margin-top:.85rem; }
/* A testimonial inside a card has to read as a distinct quoted proof, not as
   one more body paragraph. Give it a red left rule, slight italic, and more
   air above and below so the client voice stands apart from the surrounding
   copy. The lead size lift keeps it a beat louder than body. */
.wb-glass blockquote{
  margin:1.35rem 0 .25rem; padding:.15rem 0 .15rem 1.1rem;
  border-left:3px solid var(--wb-red);
  font-style:italic; font-size:1.05rem; line-height:1.5;
}
.wb-band--dark .wb-glass blockquote,
.wb-band--red .wb-glass blockquote,
.wb-band--honeycomb .wb-glass blockquote{ border-left-color:#ff4d54; }
.wb-glass blockquote strong{ font-style:normal; }
.wb-glass blockquote + .wb-card-tags{ margin-top:1rem; }

/* Foot-of-card route links. A small stacked block (primary CTA affordance plus
   a high-contrast secondary link) pinned to the bottom of the flex-column card
   so the links never br-touch and never sit crammed under the last paragraph.
   margin-top:auto pushes the block to the card foot, aligning across row-mates;
   the explicit gap is the spacing the old <br>-stacked links were missing. */
.wb-card-links{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:.65rem; margin-top:auto; padding-top:var(--wb-space-3);
}
.wb-card-links .wb-card-cta{ margin-top:0; padding-top:0; }
/* The secondary card link, a clearly-readable underlined link (NOT dim red on
   dark): brand red on light cards, the lightened brand red on dark/honeycomb so
   it clears contrast on the glass face. Underlined so it reads as a real link,
   with a nudging arrow to match the CTA vocabulary. */
.wb-card-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; color:var(--wb-red);
  text-decoration:underline; text-underline-offset:3px;
}
.wb-band--dark .wb-card-link,
.wb-band--red .wb-card-link,
.wb-band--honeycomb .wb-card-link{ color:#ff8b90; }
.wb-card-link i{ font-size:.85em; transition:transform .18s ease; }
.wb-card-link:hover i{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){ .wb-card-link:hover i{ transform:none; } }
/* Service-silo cards: the bold promise line is the real hook, so make the deck
   LEAD, a notch larger than body, and give the cards a clear three-level
   hierarchy (label heading, promise lead, stat chip, then quiet body). */
.wb-band--honeycomb .wb-glass .wb-card-deck{ font-size:1.12rem; line-height:1.35; }
/* A small emphasized stat chip that pulls the real number out of the body so
   the cards are skimmable instead of a flat grey block. Sits between the
   promise deck and the body paragraph. */
.wb-stat-chip{
  display:inline-flex; align-items:baseline; gap:.45rem;
  /* The chip lives inside a flex-COLUMN .wb-glass card, where the default
     align-items:stretch blockifies inline-flex and pulls the pill to the full
     card width (a half-empty pill that reads as broken on short values like
     "Never" / "~20 years"). align-self:flex-start makes the pill hug its text;
     width:fit-content + max-width:100% keep it tight without overflowing. */
  align-self:flex-start; width:-moz-fit-content; width:fit-content; max-width:100%;
  margin:.2rem 0 .15rem; padding:.3rem .7rem;
  border-radius:999px;
  font-family:var(--wb-display); font-weight:700; font-size:.9rem;
  line-height:1.2; letter-spacing:.01em;
  background:rgba(216,35,42,.12); color:#f1d4d6;
  border:1px solid rgba(255,90,97,.4);
}
/* When the chip LABEL wraps to 2-3 lines (some Work cards), a full 999px pill
   around a tall text block looks cramped against the rounded ends and only the
   first line baseline-aligns to the big number. Add .wb-stat-chip--wrap for
   those: a softer rounded-rect (not a capsule) with the number anchored
   top-left of the block so multi-line labels read cleanly. */
.wb-stat-chip--wrap{ align-items:flex-start; border-radius:12px; }
.wb-stat-chip__num{ font-size:1.15rem; font-weight:800; color:#fff; }
.wb-stat-chip + p{ margin-top:.7rem; }
/* On light cards the chip flips to brand-red ink on a faint red wash. */
.wb-band--light .wb-stat-chip,
.wb-band--quilt .wb-stat-chip,
.wb-band--air .wb-stat-chip{ background:rgba(216,35,42,.08); color:var(--wb-red); border-color:rgba(216,35,42,.3); }
.wb-band--light .wb-stat-chip__num,
.wb-band--quilt .wb-stat-chip__num,
.wb-band--air .wb-stat-chip__num{ color:var(--wb-red); }

/* INLINE STAT (owner feedback #27): the service-card callouts read poorly as
   left-floated red pills. This variant drops the box and renders the figure as a
   bold red lead-in that flows as a normal line of card copy. Keep .wb-stat-chip
   (the pill) where a real scoreboard band wants it. */
.wb-stat-inline{
  display:block; align-self:auto; width:auto; max-width:none;
  margin:.35rem 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  font-family:inherit; font-weight:inherit; font-size:1rem; line-height:1.5; letter-spacing:0;
}
.wb-stat-inline .wb-stat-chip__num{ font-size:1.05em; font-weight:800; color:#ff5a61; margin-right:.4em; }
.wb-band--light .wb-stat-inline .wb-stat-chip__num,
.wb-band--quilt .wb-stat-inline .wb-stat-chip__num,
.wb-band--air .wb-stat-inline .wb-stat-chip__num{ color:var(--wb-red); }
.wb-stat-inline + p{ margin-top:.5rem; }
/* #68: infographic stat callouts inside a Work gallery card, when a study carries
   a stats JSON. A compact chip row: a big red figure over a small muted label. */
.wb-scope .wb-cs-card__stats{ list-style:none; margin:.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; }
.wb-scope .wb-cs-card__stats li{ display:flex; flex-direction:column; line-height:1.05; }
/* ---- .wb-ownerq: review-only OWNER QUESTION callouts (2026-07-13). Magenta on
   purpose: clearly an internal note, never a design element. Emitted by
   wb_ownerq() in inc/page-status.php, which self-gates to non-live pages. ---- */
.wb-scope .wb-ownerq{ border:3px solid #e017c8; background:rgba(224,23,200,.09); border-radius:12px; padding:1.05rem 1.25rem; margin:1.3rem 0; max-width:56rem; position:relative; z-index:6; text-align:left; }
.wb-scope .wb-ownerq__tag{ display:inline-block; font-family:var(--wb-display) !important; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:#e017c8; border-radius:4px; padding:.22rem .55rem; margin:0 0 .55rem; }
.wb-scope .wb-ownerq p{ margin:0; font-size:.93rem; line-height:1.6; }
.wb-scope .wb-band--dark .wb-ownerq, .wb-scope .wb-band--red .wb-ownerq{ background:rgba(224,23,200,.16); }
.wb-scope .wb-band--dark .wb-ownerq p, .wb-scope .wb-band--red .wb-ownerq p{ color:#fff; }
/* ---- .wb-photobox (SR feedback #93/#96, 2026-07-13): a TEAM PHOTO TO SHOOT
   placeholder. Holds the slot a real photo will fill and tells the
   photographer exactly what to capture. Search "wb-photobox" before launch:
   every one of these must be a real photo (or cut) by then. Shot list in
   build/51. ---- */
.wb-scope .wb-photobox{ border:2px dashed rgba(229,10,45,.55); border-radius:14px; background:rgba(229,10,45,.05); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.55rem; padding:2rem 1.5rem; min-height:250px; height:100%; }
.wb-scope .wb-photobox i{ font-size:1.7rem; color:var(--wb-red); }
.wb-scope .wb-photobox strong{ font-family:var(--wb-display) !important; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--wb-red); }
.wb-scope .wb-photobox p{ margin:0; font-size:.93rem; line-height:1.5; color:var(--wb-muted); max-width:40ch; }
.wb-scope .wb-band--dark .wb-photobox, .wb-scope .wb-band--red .wb-photobox{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.05); }
.wb-scope .wb-band--dark .wb-photobox i, .wb-scope .wb-band--red .wb-photobox i,
.wb-scope .wb-band--dark .wb-photobox strong, .wb-scope .wb-band--red .wb-photobox strong{ color:#fff; }
.wb-scope .wb-band--dark .wb-photobox p, .wb-scope .wb-band--red .wb-photobox p{ color:rgba(255,255,255,.78); }
.wb-scope .wb-cs-card__staticon{ color:var(--wb-red); font-size:1rem; margin-bottom:.22rem; opacity:.85; }   /* #88: stat icon, statgrid-style stack */
.wb-scope .wb-cs-card__statnum{ font-family:var(--wb-display); font-weight:800; font-size:1.55rem; color:var(--wb-red); }
.wb-scope .wb-cs-card__statlbl{ font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--wb-muted); margin-top:.15rem; }

/* glass that reads on dark/red/honeycomb bands. Roomier padding, a clearer
   edge, and an inner top highlight so each card separates cleanly from the
   honeycomb instead of reading as one grey strip. */
.wb-band--dark .wb-glass,
.wb-band--red .wb-glass,
.wb-band--honeycomb .wb-glass{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--wb-lx) var(--wb-ly) 30px rgba(0,0,0,.38);
  color:#eef1f5;
}
.wb-band--dark .wb-glass p,
.wb-band--red .wb-glass p,
.wb-band--honeycomb .wb-glass p{ color:#d7dce3; }   /* readable card body on dark */

/* a glass card with a soft red glow halo (like the booklet benefit box) */
.wb-glass--glow{ box-shadow:0 0 0 1px rgba(216,35,42,.18), 0 18px 50px rgba(216,35,42,.18); }
/* On a textured dark / honeycomb / red band the base .wb-glass dark override
   (fill .06, border .16) wins over the glow above and the card dissolves into
   the texture. Lift the glow card so it reads as a raised, contained panel:
   a touch more fill, a brighter edge, and a red halo that is actually visible
   against the dark. Reusable for any emphasized glow card on a dark band. */
.wb-band--dark .wb-glass--glow,
.wb-band--honeycomb .wb-glass--glow,
.wb-band--red .wb-glass--glow{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 0 1px rgba(216,35,42,.40), 0 24px 60px rgba(216,35,42,.30), inset 0 1px 0 rgba(255,255,255,.10);
}

/* A testimonial CENTERPIECE card: a single cleared quote that must read as the
   raised focal moment of its band, not a thin full-width banner. Capped to a
   readable centered measure, extra internal padding, and the quote set a notch
   larger than body so it lands as the proof beat. On a busy honeycomb / dark
   band the glass face and red glow are strengthened so the card lifts clearly
   off the texture instead of dissolving into it. */
.wb-glass--testimonial{
  max-width:70ch; margin-inline:auto;
  padding:clamp(2rem, 1.4rem + 2vw, 3rem);
  text-align:center;
}
/* The centerpiece variant is CENTERED and has its own large display styling, so
   it must NOT inherit the in-body card-quote left rule (.wb-glass blockquote sets
   border-left + padding-left). On centered text that rule renders as a stray red
   vertical stripe floating to the left of the quote. Reset it here so the
   centered testimonial reads as one clean focal beat everywhere it is reused. */
.wb-glass--testimonial blockquote{ margin:0; border-left:0; padding-left:0; }
.wb-glass--testimonial blockquote > :first-child,  /* the quote text node wrapper, if any */
.wb-glass--testimonial blockquote{
  font-family:var(--wb-display); font-weight:700;
  font-size:clamp(1.2rem, 1rem + .9vw, 1.6rem); line-height:1.4;
  letter-spacing:-.005em;
}
.wb-glass--testimonial blockquote footer{
  display:block; margin-top:1.25rem;
  font-family:var(--wb-body); font-weight:400;
  font-size:1rem; line-height:1.4; letter-spacing:0;
  /* full opacity: the attribution is a trust signal and read a notch soft at .92
     on the dark glass card (flagged across several testimonial reuses). */
  opacity:1;
}
.wb-glass--testimonial blockquote footer strong{ font-weight:700; }
/* Lift the centerpiece off a textured dark/honeycomb band: a touch more fill,
   a brighter edge, and a stronger red halo so the most important proof element
   on the page does not disappear into the honeycomb. */
.wb-band--honeycomb .wb-glass--testimonial,
.wb-band--dark .wb-glass--testimonial,
.wb-band--red .wb-glass--testimonial{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 0 0 1px rgba(216,35,42,.38), 0 26px 70px rgba(216,35,42,.30), inset 0 1px 0 rgba(255,255,255,.10);
}

/* A SHORT one-line testimonial inside a grid card. A single sentence in a normal
   card leaves a big empty well below it; here the quote is set large, centered,
   and vertically centered so it deliberately OWNS the card height instead of
   looking unfinished, with a compact credit line pinned beneath it. Pair a long
   block-quote card opposite a card like this so the grid rows read balanced. */
.wb-glass--quote{
  display:flex; flex-direction:column; justify-content:center; text-align:center;
  padding:clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}
.wb-glass--quote blockquote{
  margin:0; font-family:var(--wb-display); font-weight:700;
  font-size:clamp(1.3rem, 1.05rem + 1vw, 1.8rem); line-height:1.3; letter-spacing:-.005em;
  text-wrap:balance;
}
.wb-glass--quote .wb-quote-credit{
  margin:1.25rem 0 0; font-family:var(--wb-body); line-height:1.35;
}
.wb-glass--quote .wb-quote-credit strong{ display:block; font-weight:700; }
.wb-glass--quote .wb-quote-credit span{ display:block; opacity:.8; font-size:.95rem; margin-top:.1rem; }

/* Standalone glass card (a lone quote/CTA card sitting straight in .wb-inner,
   not inside a stretching grid track). The base .wb-glass{ height:100% } is
   meant for grid row-mates; on a lone card it resolves up to the viewport and
   balloons to ~1200px with the content stranded at the top. Hug the content
   instead. Cards inside .wb-grid keep height:100% so they still match heights. */
.wb-inner > .wb-glass{ height:auto; }

/* Cards that act as links / service entries get a restrained hover lift
   that matches the button motion vocabulary. Add wb-glass--link in markup. */
.wb-glass--link{
  cursor:pointer;
  /* Force left alignment so every link card matches the feed cards. Image-less
     link cards (e.g. the "Catch up fast" trio) were inheriting a legacy
     custom.css text-align:center on the heading + body, while the .wb-card-cta
     inside stayed left, giving a jarring center-then-left jump. One rule fixes
     the heading, body, and CTA wherever the image-less link card appears. */
  text-align:left;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wb-glass--link:hover{ transform:translateY(-4px); box-shadow:var(--wb-shadow); border-color:rgba(216,35,42,.35); }
.wb-band--dark .wb-glass--link:hover,
.wb-band--red .wb-glass--link:hover,
.wb-band--honeycomb .wb-glass--link:hover{ border-color:rgba(255,255,255,.4); }

/* The "Explore X ->" affordance at the foot of a link card. margin-top:auto
   pins it to the bottom of the flex-column card so every card in a row aligns
   its CTA on the same line regardless of body length (even internal spacing,
   like the styleguide). Brand red on light cards; the lightened brand red on
   dark/red/honeycomb cards so it never muddies on a dark glass face (matches
   the kicker / check theming). The arrow nudges right on card hover. */
.wb-card-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:auto; padding-top:var(--wb-space-3);
  font-family:var(--wb-display); font-weight:700;
  color:var(--wb-red);
}
.wb-band--dark .wb-card-cta,
.wb-band--red .wb-card-cta,
.wb-band--honeycomb .wb-card-cta{ color:#ff5a61; }
.wb-card-cta i{ transition:transform .18s ease; }
.wb-glass--link:hover .wb-card-cta i{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .wb-glass--link:hover .wb-card-cta i{ transform:none; } }

/* Service / taxonomy tag line inside a card (e.g. the Work case-study cards).
   A small, quiet meta row of dot-separated tags. It is label text, not body
   copy, so it is intentionally below the 17px body size, and it lives in the
   system as a class rather than an inline font-size. It pins just above the
   card CTA. Muted ink on light cards; a soft light on dark/red/honeycomb. */
.wb-card-tags{
  margin:var(--wb-space-2) 0 0;
  font-size:.85rem; line-height:1.5; color:var(--wb-muted);
}
.wb-band--dark .wb-card-tags,
.wb-band--red .wb-card-tags,
.wb-band--honeycomb .wb-card-tags{ color:rgba(255,255,255,.62); }

/* ============================================================
   7. THE BIG "JOBS DONE" NUMBER  (chrome on red)
   Pair with a .wb-band--red. The number animates up via overhaul.js
   (data-count). The metallic fill is a clipped gradient.
   ============================================================ */
.wb-stat{ text-align:center; }
/* On the narrowest phones the 14vw mid-term wins and the big number renders
   full-bleed, kissing the band's slanted right edge (the last digit reads as if
   clipped). A small side gutter at <=420px gives the figure visible air on both
   sides so it reads as deliberate, not clipped, without shrinking its drama on
   the homepage hero stat where the clamp is tuned to dominate. */
@media (max-width:420px){ .wb-stat{ padding-inline:.75rem; } }
.wb-stat__num{
  display:block;
  font-family:var(--wb-display);
  font-weight:900;
  /* floor pushed up so the number is unmistakably the biggest thing on
     the page even mid-width, this is the booklet hero stat */
  font-size:clamp(4.5rem, 2rem + 14vw, 11rem);
  line-height:.92;                     /* a touch looser so glyph tops/feet clear */
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;   /* count-up does not jitter width */
  background:var(--wb-metal);
  background-size:100% 260%;                   /* headroom for the travelling sheen */
  background-position:50% var(--wb-sheen,40%); /* swept by scroll, see overhaul.js */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#eef1f5;                       /* fallback if clip fails, NOT transparent */
  /* padding+negative-margin enlarges the paint box so the clipped gradient
     covers the whole numeral, no more cropped tops or commas. */
  padding-block:.12em; margin-block:-.12em;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))
         drop-shadow(calc(var(--wb-lx) * .5) calc(var(--wb-ly) * .5) 18px rgba(0,0,0,.3));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .wb-stat__num{ background:none; color:#f4f6f8; -webkit-text-fill-color:currentColor; }
}
.wb-stat__label{
  display:block; margin-top:.8rem;
  font-family:var(--wb-display); font-weight:700;
  font-size:clamp(1.1rem,.9rem + .6vw,1.4rem);
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.82);          /* step back so the number dominates */
}

/* ============================================================
   8. LISTS, BUTTONS, PIPELINE TAG
   ============================================================ */
/* Red checkmark list (FontAwesome is already loaded site-wide) */
.wb-checks{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
/* Bullets read as primary copy, not fine print: a comfortable ~18px size and
   open line-height, with more space between items (gap above) so a tight block
   never sits crammed under a big headline. */
.wb-checks li{ position:relative; padding-left:2rem; line-height:1.55; font-size:1.125rem; }
.wb-checks li::before{
  content:"\f00c";                  /* fa-check */
  font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.1em;
  color:var(--wb-red); font-size:.95em;
}
.wb-band--dark .wb-checks li::before,
.wb-band--red .wb-checks li::before,
.wb-band--honeycomb .wb-checks li::before{ color:#ff4d54; }  /* brand-true red on dark, not pink */
/* Two-column check list: when a long list of items would otherwise stack into a
   tall single column, run it as a balanced 2-col grid so it scans fast and stops
   crowding the band vertically. Collapses back to one column on narrow screens. */
.wb-checks--2col{ grid-template-columns:repeat(2,1fr); gap:1.1rem 2.25rem; }
@media (max-width:720px){ .wb-checks--2col{ grid-template-columns:1fr; } }

/* A standalone signature blockquote sitting straight on a band (not in a card):
   a red left rule and slight italic so it reads as a quoted statement instead of
   one more lead paragraph. Pair with .wb-prose to cap its measure clear of any
   corner deco. */
.wb-quote-rule blockquote{
  border-left:3px solid var(--wb-red); padding-left:1.25rem; font-style:italic;
}
.wb-band--dark .wb-quote-rule blockquote,
.wb-band--red .wb-quote-rule blockquote,
.wb-band--honeycomb .wb-quote-rule blockquote{ border-left-color:#ff4d54; }

/* Weber button, red "liquid" gradient pill */
.wb-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--wb-display); font-weight:700;
  padding:.85rem 1.6rem; border-radius:999px; border:0;
  color:#fff; background:var(--wb-red-grad);
  box-shadow:0 8px 22px rgba(216,35,42,.35);
  text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.wb-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(216,35,42,.45); filter:brightness(1.05); color:#fff; }
.wb-btn:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(216,35,42,.35); filter:brightness(.98); }  /* pressed feel */
.wb-btn--ghost{ background:transparent; color:var(--wb-red); border:2px solid currentColor; box-shadow:none; }
.wb-band--dark .wb-btn--ghost,.wb-band--red .wb-btn--ghost,.wb-band--honeycomb .wb-btn--ghost{ color:#fff; }
/* On a RED band the solid red CTA is red-on-red and reads as a faded pill. Flip the
   primary to a WHITE pill with red text so it pops; the ghost stays white-outlined.
   Higher specificity (a.wb-btn) so it beats the global white-text button rule. */
.wb-scope .wb-band--red a.wb-btn:not(.wb-btn--ghost),
.wb-scope .wb-band--red button.wb-btn:not(.wb-btn--ghost){ background:#fff; color:var(--wb-red); box-shadow:0 8px 22px rgba(0,0,0,.28); }
.wb-scope .wb-band--red a.wb-btn:not(.wb-btn--ghost):hover,
.wb-scope .wb-band--red button.wb-btn:not(.wb-btn--ghost):hover{ background:#fff; color:var(--wb-red-dk); filter:none; box-shadow:0 12px 30px rgba(0,0,0,.34); }
/* the ghost on red stays a transparent WHITE-OUTLINE pill (not filled white). */
.wb-scope .wb-band--red a.wb-btn--ghost{ background:transparent; color:#fff; border-color:#fff; }
/* A row of CTAs (solid primary + ghost secondary). Flex so they sit side by
   side on wide screens and WRAP to a stack on narrow ones; the gap guarantees
   margin between the buttons so stacked CTAs never touch (quality-bar rule). */
.wb-btn-row{ display:flex; flex-wrap:wrap; gap:var(--wb-space-3); align-items:center; }
/* Stacked variant: solid over ghost in a centered column with a real gap, so
   the two CTAs read as two choices and never weld into one block (the collapsing
   <p class="wb-mt"> wrapper was producing a 0px gap). Used in centered final CTAs. */
.wb-btn-row--stack{ flex-direction:column; align-items:center; gap:var(--wb-space-2); }
.wb-center .wb-btn-row{ justify-content:center; }
/* OWNER 2026-06-30: loose CTAs that stack vertically (NOT in a .wb-btn-row)
   used to touch with no gap. Give every pill a small bottom margin so stacked
   buttons always breathe; inside a .wb-btn-row the flex gap owns spacing, so
   reset it there to avoid doubling. */
.wb-scope .wb-btn{ margin-bottom:.55rem; }
.wb-scope .wb-btn-row .wb-btn{ margin-bottom:0; }
/* CRITICAL: buttons are <a> inside .wb-scope, and .wb-scope a{color:red} (0,1,1)
   was BEATING .wb-btn{color:#fff} (0,1,0), so every solid CTA rendered red text
   on the red pill (unreadable). Re-assert button text color with matching
   specificity (a.wb-btn = 0,2,1). */
.wb-scope a.wb-btn{ color:#fff; }
/* Primary CTA sitting on the SOLID red hero band: the red pill is red-on-red
   and reads weak. .wb-btn--on-red gives it a cream fill with brand-red ink and
   a lifted shadow so the primary action pops off the red ground. The white-text
   rule is not violated (this is a light pill carrying a dark-red label). */
.wb-scope a.wb-btn--on-red{
  background:linear-gradient(180deg,#fff 0%,#ffeef0 100%);
  color:var(--wb-red);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.wb-scope a.wb-btn--on-red:hover{ color:var(--wb-red); filter:brightness(1.02); box-shadow:0 14px 32px rgba(0,0,0,.34); }
.wb-scope a.wb-btn--on-red i{ color:var(--wb-red); }
.wb-scope a.wb-btn--ghost{ color:var(--wb-red); }
.wb-scope .wb-band--dark a.wb-btn--ghost,
.wb-scope .wb-band--red a.wb-btn--ghost,
.wb-scope .wb-band--honeycomb a.wb-btn--ghost{ color:#fff; }
.wb-scope a.wb-btn--ghost:hover{ color:#fff; }
.wb-scope .wb-band--dark a.wb-btn--ghost:hover,
.wb-scope .wb-band--red a.wb-btn--ghost:hover,
.wb-scope .wb-band--honeycomb a.wb-btn--ghost:hover{ color:var(--wb-ink); }
/* Ghost hover: FILL the pill (the base .wb-btn:hover set color:#fff on a
   transparent bg, which made the label vanish on light bands). On light bands
   fill red; on dark/red/honeycomb fill white with dark ink. */
.wb-btn--ghost:hover{ background:var(--wb-red); color:#fff; filter:none; box-shadow:0 10px 24px rgba(216,35,42,.30); }
.wb-band--dark .wb-btn--ghost:hover,
.wb-band--red .wb-btn--ghost:hover,
.wb-band--honeycomb .wb-btn--ghost:hover{ background:#fff; color:var(--wb-ink); border-color:#fff; }

/* Visible, non-clipped focus ring. outline is not clipped by the band's
   overflow:hidden the way a box-shadow ring can be. */
.wb-btn:focus-visible,
.wb-glass--link:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 6px rgba(216,35,42,.45);
}
.wb-band--light .wb-btn:focus-visible{ outline-color:var(--wb-red); }

/* "Think It. Design It. Print It. Launch It." stacked pipeline tag */
.wb-pipeline{ display:flex; align-items:flex-start; gap:1.1rem; }
.wb-pipeline__rule{ width:4px; align-self:stretch; background:var(--wb-red); border-radius:2px; }
.wb-pipeline__steps{ font-family:var(--wb-display); font-weight:800; font-size:var(--wb-h2); line-height:1.05; color:var(--wb-ink); }
.wb-band--dark .wb-pipeline__steps,.wb-band--red .wb-pipeline__steps,.wb-band--honeycomb .wb-pipeline__steps{ color:#fff; }

/* ============================================================
   9. DECORATIVE CHARACTERS  (rocket, van, thumbs-up, etc.)
   Absolutely positioned, behind the copy, never catch clicks.
   Placement helpers put them in a corner; size helpers scale them.
   Always give the <img> alt="" (decorative).
   ============================================================ */
.wb-deco{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  width:clamp(120px,18vw,260px); height:auto; opacity:.96;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.22));
}
/* Insets pulled in so a character never escapes past a slanted corner or
   the band edge (the band clips at its painted area, a negative offset can
   poke into the page gutter). max-width caps them to the band. */
.wb-deco--tr{ top:0;      right:.5rem; }
.wb-deco--tl{ top:0;      left:.5rem; }
/* Bottom-corner decos lifted clear of the next band's slant (feedback #46): a
   wb-slant-up band rises ~43px into the band above it, so a bottom:0 deco got its
   lower corner clipped behind that diagonal. This offset holds every bottom deco
   above the overlap zone site-wide (pages that need more still override inline). */
.wb-deco--br{ bottom:clamp(2.25rem,3.5vw,3.5rem);   right:.5rem; }
.wb-deco--bl{ bottom:clamp(2.25rem,3.5vw,3.5rem);   left:.5rem; }
.wb-deco--sm{ width:clamp(80px,10vw,150px); }
.wb-deco--lg{ width:clamp(180px,26vw,420px); }
.wb-deco--soft{ opacity:.85; }            /* a real, visible character, not mud */
/* Pull a top-corner deco DOWN off the very top edge so it clears the fixed nav
   and reads as a full, deliberate accent instead of a clipped sliver tucked
   behind the header. Pairs with .wb-deco--tr / .wb-deco--tl on a hero band. */
.wb-deco--drop{ top:clamp(4.5rem, 3rem + 5vw, 8rem); }

/* Gutter clearance for a corner character that would otherwise overlap a
   FULL-WIDTH copy column (a checklist or a wide paragraph, not a card grid).
   The default wide-screen rule below pins a corner deco to the CONTENT edge,
   which drops it on top of the text. .wb-deco--gutter overrides that: it
   shrinks the figure and pushes it OUT past the content column into the page
   gutter, and lowers it toward the band floor, so the character reads clearly
   BESIDE the copy and never crosses a line of text. Wide-screen behavior is in
   the min-width:1280px block near the bottom of the deco section. */
.wb-deco--gutter{ width:clamp(84px,8.5vw,124px); opacity:.62; }
/* Reserve a copy LANE so full-width text in a band stops short of the corner
   character (belt-and-suspenders with .wb-deco--gutter: even if the figure
   edges toward the column, the copy already ends before it). The lane is only
   carved on wide screens where the deco shows; on small screens copy is full
   width and the deco is hidden/faded. Apply to the .wb-inner of the band. */
.wb-inner--lane-r{ padding-right:0; }
.wb-inner--lane-l{ padding-left:0; }
@media (min-width:1100px){
  .wb-inner--lane-r{ padding-right:clamp(140px,12vw,200px); }
  .wb-inner--lane-l{ padding-left:clamp(140px,12vw,200px); }
}

/* On the 3-up honeycomb band, tuck the corner character fully into the
   corner and shrink it so its float never drifts over a card heading. */
.wb-band--honeycomb .wb-deco--tr{ top:.5rem; right:.5rem; }
.wb-band--honeycomb .wb-deco--tr.wb-float{ width:clamp(110px,14vw,200px); }
/* The rocket on the "vault red" stat band sat at top:0, but that band uses
   wb-slant--rev, which cuts the top-RIGHT corner down by --wb-slant and clipped
   the rocket's top along the diagonal. Drop it below the slant line so the whole
   rocket shows (owner 2026-07-23). Shared band, so this fixes ~17 pages at once. */
.wb-band--red.wb-band--deep .wb-deco--tr{ top:calc(var(--wb-slant) + 1.5rem); }
/* The thumbs-up character on the honeycomb solution band sits beside a
   full-width checklist; pull it into the right gutter and down so it never
   crosses the body paragraph or the check rows. */
.wb-band--honeycomb .wb-deco--gutter.wb-deco--br{ bottom:.5rem; }

@media (max-width:768px){
  .wb-deco{ opacity:.5; width:clamp(90px,30vw,160px); }  /* keep it from crowding mobile copy */
  .wb-deco--hide-sm{ display:none; }
}

/* ============================================================
   10. ANIMATION UTILITIES
   - Continuous: .wb-float (gentle bob), .wb-drift (slow side sway),
     .wb-rocket (a launch wiggle). Apply to .wb-deco characters.
   - Scroll reveal: add data-reveal (and optional data-reveal="left|
     right|zoom", data-reveal-delay="120"); overhaul.js fades them in.
   Respects prefers-reduced-motion.
   ============================================================ */
/* The idle keyframes use the `translate` / `rotate` longhands, NOT the
   `transform` shorthand, so they compose with deco parallax (which sets
   transform:translateY(var(--wb-parY)) in JS). float + parallax no longer
   fight, the character can bob AND parallax at once. */
@keyframes wbFloat { 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }
@keyframes wbDrift { 0%,100%{ translate:0 0; rotate:-1deg; } 50%{ translate:14px 0; rotate:1.5deg; } }
@keyframes wbRocket{ 0%,100%{ translate:0 0; rotate:-2deg; } 50%{ translate:0 -10px; rotate:2deg; } }
@keyframes wbSpinSlow{ to{ rotate:360deg; } }

.wb-float { animation:wbFloat 5.5s ease-in-out infinite; }
.wb-drift { animation:wbDrift 9s ease-in-out infinite; }
.wb-rocket{ animation:wbRocket 4s ease-in-out infinite; }
/* Parallax travel rides on `transform` so it composes with the `translate`
   based float above. overhaul.js writes --wb-parY on scroll. */
.wb-deco--parallax{ transform:translateY(var(--wb-parY,0)); }

/* Scroll reveal, initial hidden state; overhaul.js adds .is-in.
   Tightened from .7s to .55s so reveals feel crisp, not slow.
   GATED behind .wb-js (overhaul.js adds it to <html> the moment it runs), so
   the hidden start-state only exists when JS is live to undo it. With JS
   blocked / errored the copy is just visible, never an empty colored band. */
.wb-js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.wb-js [data-reveal="left"]{ transform:translateX(-40px); }
.wb-js [data-reveal="right"]{ transform:translateX(40px); }
.wb-js [data-reveal="zoom"]{ transform:scale(.92); }
.wb-js [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .wb-float,.wb-drift,.wb-rocket,.wb-spin{ animation:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  /* neutralize hover lifts too so nothing moves under reduced motion */
  .wb-btn:hover,.wb-glass--link:hover{ transform:none; }
}

/* ============================================================
   11. SMALL HELPERS
   ============================================================ */
.wb-grid{ display:grid; gap:var(--wb-gap); align-items:stretch; }
.wb-grid--2{ grid-template-columns:repeat(2,1fr); }
/* card grids get a slightly larger, dedicated gap + equal-height rows so
   columns breathe and every card matches its row-mates regardless of copy */
.wb-grid--3{ grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem, .8rem + 1.2vw, 2rem); grid-auto-rows:1fr; }
.wb-grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:860px){ .wb-grid--2,.wb-grid--3,.wb-grid--4{ grid-template-columns:1fr; } }
.wb-center{ text-align:center; }
/* spacing utilities ride the shared scale so every band shares one beat */
.wb-mt-sm{ margin-top:var(--wb-space-2); }   /* tight pair gap, e.g. a caption sitting just above its button */
.wb-mt{ margin-top:var(--wb-space-3); }
.wb-mt-lg{ margin-top:var(--wb-space-4); }
.wb-prose{ max-width:64ch; }
.wb-prose.wb-center{ margin-inline:auto; }
/* A single emphasized pull-line to break a wall of body paragraphs and give the
   eye an anchor. Bigger than the lead, display face, with a short red rule to
   the left so it reads as a deliberate beat, not just a bold sentence. */
.wb-scope .wb-pull{   /* .wb-scope prefix so the font-size beats .wb-scope p (0,1,1) */
  font-family:var(--wb-display); font-weight:800;
  font-size:clamp(1.35rem, 1rem + 1.6vw, 1.9rem); line-height:1.3;
  letter-spacing:-.01em; color:var(--wb-ink); max-width:34ch;
  padding-left:1.1rem; border-left:4px solid var(--wb-red);
}
.wb-band--dark .wb-pull,
.wb-band--red .wb-pull,
.wb-band--honeycomb .wb-pull{ color:#fff; border-left-color:#ff4d54; }
/* A mid measure (narrower than wb-prose's 64ch) for centered body copy, where a
   full-width centered paragraph is hard to read. Always centers itself. */
.wb-measure-mid{ max-width:52ch; margin-inline:auto; }
/* A band that carries a small corner character (e.g. the final-CTA hand button)
   must keep its centered copy clear of that corner. Cap the centered prose so
   its edges never reach the corner deco, and add bottom room so the last line
   sits above the bottom-corner glyph. The deco is decorative + behind copy, but
   the quality bar forbids any overlap, so this guarantees clearance at every
   width. */
.wb-band--has-corner-deco .wb-center.wb-prose{ max-width:58ch; }
.wb-band--has-corner-deco .wb-inner{ padding-bottom:clamp(2rem, 1rem + 4vw, 4.5rem); }
/* Cap a LEFT-aligned content column so its right edge always clears a corner
   character sitting in the bottom-right / top-right gutter (the deco is behind
   the copy, but the quality bar forbids any overlap). Use on a plain .wb-inner
   whose paragraphs and lists would otherwise run full width into the figure.
   ~70ch keeps a comfortable line length while leaving a clear right margin. */
.wb-clear-deco-br > *{ max-width:70ch; }
@media (max-width:768px){ .wb-clear-deco-br > *{ max-width:none; } }  /* deco hidden on mobile, reclaim the width */

/* ============================================================
   12. VIDEO BACKGROUND BANDS
   A band with a muted, looping video behind the copy, plus a
   darkening brand scrim so headlines and metallic text stay legible.

   Markup:
     <section class="wb-band wb-band--video wb-band--dark"
              style="background-image:url('videos/clip-poster.jpg')">
       <video class="wb-band__video" autoplay muted loop playsinline
              preload="metadata" poster="videos/clip-poster.jpg">
         <source src="videos/clip.webm" type="video/webm">
         <source src="videos/clip.mp4"  type="video/mp4">
       </video>
       <span class="wb-band__scrim"></span>
       <div class="wb-inner"> ...copy... </div>
     </section>

   The band's inline background-image is the poster. It is what shows
   on mobile, on prefers-reduced-motion, and before the video loads,
   so we never play heavy video on phones (battery + data).
   ============================================================ */
.wb-band--video{ color:#fff; background-size:cover; background-position:center; }
.wb-band__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; pointer-events:none;
}
/* Full-cover video: a percentage height on a <video> (replaced element) falls back
   to its 16:9 aspect and leaves a tall band short. The wrapper stretches to the band
   via inset offsets, then FLEX-stretches the video to the wrapper's height (no
   percentage needed), so object-fit:cover fills the whole band at any band height. */
.wb-scope .wb-band__video-wrap{ position:absolute; inset:0; overflow:hidden; z-index:0; display:flex; }
.wb-scope .wb-band__video-wrap .wb-band__video{ position:static; inset:auto; flex:1 1 auto; align-self:stretch; width:100%; height:auto; object-fit:cover; }
/* darken + red tint so white and metallic headlines read on any frame */
.wb-band__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Stronger, near-black scrim so white + chrome copy reads over any photo. The
     90deg layer darkens the LEFT text column hardest (hero copy is left-aligned),
     the 180deg layer floors the whole frame, and a faint red bloom keeps brand. */
  background:
    linear-gradient(90deg, rgba(8,10,13,.74) 0%, rgba(8,10,13,.44) 48%, rgba(8,10,13,.16) 100%),
    linear-gradient(180deg, rgba(8,10,13,.5), rgba(8,10,13,.34) 45%, rgba(8,10,13,.76)),
    radial-gradient(120% 130% at 18% 0%, rgba(158,22,32,.3), transparent 58%);
}
/* Heavier scrim for busy / lighter photos so chrome headlines and white lead
   copy stay legible. The extra left-anchored gradient darkens the text column
   (copy is left-aligned in these heroes) without flattening the whole frame. */
.wb-band__scrim--strong{
  background:
    /* Right-edge floor lifted .34 -> .48 so a headline whose right third sits over
       a bright spot in the photo (a lit window / equipment) keeps contrast across
       its FULL width, not just the dark left column. Helps every photo hero that
       reuses this scrim, without flattening the photo. */
    linear-gradient(90deg, rgba(11,13,16,.82), rgba(11,13,16,.58) 52%, rgba(11,13,16,.48)),
    linear-gradient(180deg, rgba(11,13,16,.66), rgba(11,13,16,.46) 45%, rgba(11,13,16,.8)),
    radial-gradient(120% 130% at 18% 4%, rgba(158,22,32,.4), transparent 58%);
}
.wb-band--video .wb-inner{ z-index:2; }
/* drop the video on small screens + reduced motion; the poster carries it */
@media (max-width:768px){ .wb-band__video{ display:none; } }
@media (prefers-reduced-motion:reduce){ .wb-band__video{ display:none; } }

/* ============================================================
   13. SEAM RIDERS  (a character that drives across a band seam)
   A decorative element that straddles the diagonal seam between two
   bands and drives horizontally on scroll, breaking the clean slant
   edge for a more dynamic feel. Put the wrapper BETWEEN two bands,
   after one </section> and before the next <section>:

     </section>
     <div class="wb-seam-rider">
       <img class="wb-drive" data-drive data-drive-from="78" data-drive-to="-18"
            src="images/overhaul/delivery-van.webp" alt="">
     </div>
     <section class="wb-band ... wb-slant-up"> ...

   The wrapper is zero-height with overflow visible, so the rider floats
   OVER both bands, escaping the overflow:hidden clip of either one, and
   sits right on the seam. overhaul.js reads data-drive and translates it
   from data-drive-from to data-drive-to (in vw, right to left) as the
   seam scrolls through the viewport. Reduced motion parks it.
   ============================================================ */
.wb-seam-rider{
  position:relative; height:0; width:100%; z-index:45;   /* above adjacent isolated bands */
  pointer-events:none; overflow:visible;
}
/* MOBILE OVERFLOW GUARD (systemic, 2026-06-30): the driving van/rocket starts
   parked off-canvas right (transform:translateX(78vw)), so on a phone its right
   edge lands ~60-70px past the viewport and the page rubber-bands sideways. The
   --van / --seam variants already display:none under 860px, but the BARE
   .wb-seam-rider used across the Printing & Signage silo, video-audio, and the
   industry hubs never got that guard. Hide the bare driving van below 768px (the
   leftward drive is barely visible at phone width anyway) so it cannot widen the
   document. Static riders (--finger, --van) and the rocket keep their own rules.
   Pairs with the html,body overflow-x:clip clamp below as belt-and-suspenders. */
@media (max-width:768px){
  .wb-seam-rider:not(.wb-seam-rider--rocket) > .wb-drive:not(.wb-drive--rocket){ display:none; }
}
.wb-drive{
  position:absolute; left:0; bottom:-2.6rem;
  /* delivery-van.webp is a 3/4 view (~1.28:1), far taller per width than the old
     side-profile van, so the width clamp is pulled down to keep the rider's
     HEIGHT on the seam in the same ~150-175px band it had before. */
  width:clamp(130px,15vw,215px); height:auto;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.4));
  will-change:transform;
  transform:translateX(78vw);   /* JS overrides; this is the off-right start */
}
@media (max-width:768px){ .wb-drive{ width:clamp(110px,30vw,170px); bottom:-1.6rem; } }
@media (prefers-reduced-motion:reduce){ .wb-drive{ transform:translateX(8vw) !important; } }

/* The JS writes transform:translateX() onto the .wb-drive img itself, so a
   sprite that points the wrong way for its motion cannot be mirrored on the
   img (the translate would clobber the flip). .wb-drive-flip is a wrapper that
   carries the mirror, leaving the inner img's translate untouched. Use it when
   a driving asset faces the opposite way to its travel (e.g. the nose-right van
   driving right-to-left): mirror the sprite so the cab leads the motion. */
.wb-drive-flip{ display:inline-block; transform:scaleX(-1); }
/* Drop a seam rider lower onto the slant below a FLAT-bottom hero so it rides
   the real diagonal of the band beneath it and never lifts up over the hero
   lead copy. Smaller than the default so it stays clear of the prose column. */
.wb-drive--seam{ bottom:-3.8rem; width:clamp(120px,13vw,200px); }
@media (max-width:768px){ .wb-drive--seam{ bottom:-2.4rem; } }

/* A STATIC seam-rider character (no data-drive): floats on a seam to break
   the clean diagonal edge of the band above without being a second mover.
   --finger parks the pointing hand on the LEFT and lifts it UP into the band
   above (negative top) so it overlaps the seam and clears the right-hand copy
   column below. Aligned to the content column on wide screens. */
.wb-seam-rider--finger > img{
  position:absolute; left:1rem; top:-6rem;
  width:clamp(96px,12vw,168px); height:auto;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.32));
}
@media (min-width:1280px){
  .wb-seam-rider--finger > img{ left:calc((100% - var(--wb-maxw))/2 + 1rem); }
}
@media (max-width:860px){ .wb-seam-rider--finger > img{ top:-3rem; width:clamp(80px,18vw,120px); } }

/* --van parks a STATIC brand-van on a seam, LEFT side, lifted up over the seam
   to break the clean edge. NOT mirrored: the asset's cab faces right, reading
   as heading into the page from the left, and the "Weber" branding on its side
   stays legible. Hidden on small screens so it never crowds stacked copy. */
.wb-seam-rider--van > img{
  position:absolute; left:1rem; top:-4rem;
  width:clamp(170px,20vw,300px); height:auto;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.4));
}
@media (min-width:1280px){
  .wb-seam-rider--van > img{ left:calc((100% - var(--wb-maxw))/2 + 1rem); }
}
@media (max-width:860px){ .wb-seam-rider--van{ display:none; } }

/* Bands that pan their texture on scroll carry data-bg-parallax; overhaul.js
   sets their inline background-position-y. Works on both cover (honeycomb)
   and repeat (metal, gray) textures, no extra CSS needed here. */

/* ============================================================
   14. ROCKET FLY  (mouse + scroll driven hero rocket)
   The hero rocket slides horizontally with the mouse, and as you scroll
   it angles up the slant (and a little past it), rises, and grows for
   depth. overhaul.js initRocketFly sets the transform; this primes it.
   Use this INSTEAD of .wb-rocket / .wb-float / .wb-deco--parallax on the
   same element (they all write transform and would fight). Keep .wb-deco
   plus a placement class (e.g. .wb-deco--tr) for the starting spot, and
   tune with data-fly-sway / data-fly-rise / data-fly-rot / data-fly-grow.
   ============================================================ */
.wb-rocket-fly{
  transform-origin:60% 60%;
  transition:transform .14s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
  z-index:3;                 /* rides above the band copy as it climbs */
}
@media (prefers-reduced-motion:reduce){ .wb-rocket-fly{ transition:none; transform:none !important; } }

/* ============================================================
   15. AIR  (calm, boxless sections, let whitespace do the work)
   Not every section needs a texture, a band color, or cards. A
   .wb-band--air is a clean white section with extra breathing room
   and centered prose, used to BALANCE the dense textured bands so the
   page is easier to read. Use it sparingly: one or two per page, often
   a big testimonial quote or a single calm statement. Pair the rhythm
   so an air band follows a busy one (dense, then breathe, then dense).
   ============================================================ */
.wb-band--air{
  background:#fff; color:var(--wb-ink-2);
  padding-block:clamp(5rem, 3rem + 7vw, 9rem);   /* more air than a normal band */
  text-align:center;
}
.wb-band--air .wb-inner{ max-width:860px; }
.wb-band--air .wb-h1,.wb-band--air .wb-h2{ color:var(--wb-ink); }
.wb-band--air .wb-lead{ margin-inline:auto; }

/* A big, boxless testimonial or statement. No card, no border, just
   large centered type and a small attribution. Let the words carry it. */
.wb-quote{
  max-width:26ch; margin:0 auto; border:0; padding:0;
  font-family:var(--wb-display); font-weight:800;
  font-size:clamp(1.6rem, 1rem + 3vw, 2.7rem); line-height:1.22;
  letter-spacing:-.01em; color:var(--wb-ink);
}
.wb-quote__by{ margin-top:1.4rem; display:inline-flex; align-items:center; gap:.8rem; text-align:left; }
.wb-quote__by img{ width:54px; height:54px; border-radius:50%; object-fit:cover; }
.wb-quote__by b{ font-family:var(--wb-display); color:var(--wb-ink); display:block; line-height:1.2; }
/* display:block so each attribution line stacks: name (the <b>, already block),
   then role, then any source/tenure line. Two inline <span>s used to collapse
   onto one run-on line ("President, Karns Foods Source: client testimonial...").
   The sibling .wb-quote__cite span already does this; mirror it here. The air-
   band variant adds margin-top to these spans, so it already expects them
   stacked. */
.wb-quote__by span{ display:block; color:var(--wb-muted); font-size:.92rem; line-height:1.35; }
/* A simple CENTERED attribution under a boxless wb-quote, for the (common) case
   with no avatar image. Reads as one unit with the quote: tight top gap, name on
   its own line, role muted beneath. Use instead of wb-quote__by when there is no
   portrait, so the inline-flex left-align does not float the credit off-axis. */
.wb-quote__cite{ margin-top:1rem; text-align:center; line-height:1.35; }
.wb-quote__cite b{ font-family:var(--wb-display); color:var(--wb-ink); display:block; }
.wb-quote__cite span{ display:block; color:var(--wb-muted); font-size:.95rem; margin-top:.15rem; }
/* In an air band the quote IS the centerpiece, so scale it up and tighten the
   measure so it stacks into a deliberate few-line statement instead of reading
   small (the 26ch / clamp default rendered too quiet on a short line). */
.wb-band--air .wb-quote{ max-width:18ch; font-size:clamp(2rem, 1.3rem + 2.6vw, 3rem); }

/* A calm two-column split, copy beside media, airy, no band color. */
.wb-split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center; text-align:left;
}
@media (max-width:860px){ .wb-split{ grid-template-columns:1fr; } }
.wb-split__media img{ width:100%; border-radius:var(--wb-radius-lg); box-shadow:var(--wb-shadow); }
/* When the text column runs taller than a single photo, .wb-split--balance
   lets the media cell stretch to the full row height and the image cover it,
   so neither column trails off into dead space beside the other. The grid stops
   centering and aligns both columns to the top so they share the same height. */
.wb-split--balance{ align-items:stretch; }
.wb-split--balance .wb-split__media{ display:flex; }
.wb-split--balance .wb-split__media > img{ height:100%; min-height:clamp(320px,42vw,560px); object-fit:cover; }
@media (max-width:860px){ .wb-split--balance .wb-split__media img{ min-height:0; height:auto; } }
/* Alternating split: photo on the LEFT (desktop only), so a page can distribute
   photos down its sections in a magazine rhythm instead of an all-right ladder.
   Mobile keeps source order (copy first, photo below). */
@media (min-width:861px){
  .wb-split--rev{ grid-template-columns:.95fr 1.05fr; }
  .wb-split--rev .wb-split__media{ order:-1; }
}

/* ============================================================
   16. PHOTO HEROES + FEATURED MEDIA
   Real photography, not just characters. Three tools:

   (a) .wb-band--photo, a full-bleed background PHOTO hero with the same
       darkening scrim as the video band. Use a big real photo to carry
       the hero (production floor, grocery aisle, an industry scene):
         <section class="wb-band wb-band--photo wb-band--dark"
                  style="background-image:url('images/overhaul/photos/x.webp')">
           <span class="wb-band__scrim"></span>
           <div class="wb-inner"> ...copy... </div>
         </section>

   (b) .wb-hero, a SPLIT hero: copy on the left, a featured framed photo
       in the right half. This replaces the old corner character that
       tucked off the slant. Pair it with a .wb-seam-rider (rocket/van)
       on the slant BELOW the hero for the moving accent:
         <div class="wb-inner">
           <div class="wb-hero">
             <div class="wb-hero__copy"> kicker, h1, lead, CTAs </div>
             <div class="wb-hero__media">
               <img src="images/overhaul/photos/team-review.webp" alt="...">
             </div>
           </div>
         </div>

   (c) .wb-media / .wb-portrait, consistent photo boxes for putting real
       people and work shots throughout the page (object-fit:cover so
       nothing distorts). See website-overhaul/build/09-photo-library.md
       for the catalog of available photos and which page each suits.
   ============================================================ */
.wb-band--photo{ color:#fff; background-size:cover; background-position:center; background-repeat:no-repeat; }
/* .wb-band__scrim + .wb-band--video .wb-inner z-index already defined in §12;
   make the same scrim/inner stacking apply to photo bands. */
.wb-band--photo .wb-inner{ z-index:2; }

/* Split hero: copy + featured graphic. */
.wb-hero{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center;
}
.wb-hero__copy{ min-width:0; }
.wb-hero__media{ position:relative; }
.wb-hero__media img{
  width:100%; height:auto; display:block;
  border-radius:var(--wb-radius-lg);
  box-shadow:var(--wb-lx) var(--wb-ly) 60px rgba(0,0,0,.42);   /* rides the moving light */
  outline:1px solid rgba(255,255,255,.14); outline-offset:-1px;
}
/* a red gradient block peeking from behind the photo for depth + brand */
.wb-hero__media::before{
  content:""; position:absolute; inset:auto -16px -16px auto; z-index:-1;
  width:64%; height:64%; border-radius:var(--wb-radius-lg);
  background:linear-gradient(135deg,#e50a2d,#ff5a3c); opacity:.5;
}
/* When the hero media slot is a LABELED PLACEHOLDER (no real photo yet), the
   depth block above has no photo to peek out from behind, so it renders as a
   stray red rectangle bleeding past the dashed frame's bottom-right corner and
   reads as a glitch (home-services hero). Suppress it for the placeholder case
   only, so the reserved slot shows as a clean dashed frame. A real <img> in
   .wb-hero__media still keeps the depth block. Single targeted rule, not a new
   utility class. */
.wb-hero__media:has(.wb-media--placeholder)::before{ display:none; }
@media (max-width:860px){
  .wb-hero{ grid-template-columns:1fr; }
  .wb-hero__media{ margin-top:1.75rem; max-width:540px; }
}
/* When the hero copy column runs TALLER than the featured photo (long lead +
   buttons), .wb-hero--balance stretches the media cell to the full row height
   and lets the image cover it, so the photo carries its half of the band instead
   of floating top-right above a tall empty gutter beside the buttons. Mirrors the
   .wb-split--balance pattern. Reverts to natural height when the columns stack. */
.wb-hero--balance{ align-items:stretch; }
.wb-hero--balance .wb-hero__media{ display:flex; }
.wb-hero--balance .wb-hero__media img{
  height:100%; min-height:clamp(340px,30vw,520px); object-fit:cover;
}
@media (max-width:860px){
  .wb-hero--balance .wb-hero__media img{ min-height:0; height:auto; }
}

/* Consistent photo box: fixed ratio + object-fit so any photo crops
   cleanly instead of distorting. Drop an <img> straight inside. */
.wb-media{ width:100%; border-radius:var(--wb-radius-lg); overflow:hidden; box-shadow:var(--wb-shadow); background:#0d0f12; }
/* height:auto (not 100%) so the aspect-ratio actually drives the box height.
   With height:100% against an auto-height parent the box collapsed to the
   viewport and a portrait source got letterboxed into a giant slab. */
.wb-media img{ width:100%; height:auto; object-fit:cover; display:block; aspect-ratio:4/3; }
.wb-media--wide img{ aspect-ratio:16/9; }
.wb-media--square img{ aspect-ratio:1/1; }
.wb-media--tall img{ aspect-ratio:3/4; }
/* Extra bottom margin under an inline media box so the content below it (a card
   grid, a paragraph) clearly breathes and never butts against the photo. */
.wb-media--cap-lg{ margin-bottom:var(--wb-space-5); }
/* A photo that sits at the TOP of a glass card (news feed, work grid): negate
   the card's own top padding so the image bleeds edge to edge to the card's
   rounded corners, then add a clean gap before the card-deck/heading below.
   Needs to beat .wb-glass > :first-child{margin-top:0}, hence the .wb-glass
   prefix so the negative top margin actually pulls the photo flush. */
.wb-glass > .wb-card-media{
  display:block;
  margin:calc(-1 * clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)) calc(-1 * clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem)) var(--wb-space-3);
  border-radius:var(--wb-radius) var(--wb-radius) 0 0;
}
.wb-card-media img{ border-radius:var(--wb-radius) var(--wb-radius) 0 0; }
/* Cap an inline media box to a comfortable CENTERED width so a single photo
   well does not swallow a whole band. Pairs with a ratio (--wide etc.); the
   image still fills its frame, the frame just stops short of the full column. */
.wb-media--frame{ max-width:min(820px,100%); margin-inline:auto; }
/* Labeled placeholder: a neutral box that holds the slot for a real photo we
   do not have yet, instead of shipping a wrong/illegible image. Honest dashed
   frame + a caption naming the shot to pull. Same ratio system as .wb-media. */
.wb-media--placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:clamp(160px,22vw,300px); padding:1.5rem;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 14px, rgba(255,255,255,.06) 14px 28px),
    #14171c;
  border:2px dashed rgba(255,255,255,.28); box-shadow:none;
}
.wb-media--placeholder .wb-media__label{
  color:#cfd5dd; font-size:clamp(.95rem,.85rem + .3vw,1.05rem); line-height:1.5; max-width:46ch; margin:0;
}
.wb-media--placeholder .wb-media__label strong{ display:block; color:#fff; font-weight:700; margin-bottom:.25rem; }
/* Light-band variant: same honest dashed frame, readable on a white section. */
.wb-band--light .wb-media--placeholder,
.wb-band--air .wb-media--placeholder,
.wb-band--quilt .wb-media--placeholder{
  background:
    repeating-linear-gradient(45deg, rgba(20,24,30,.025) 0 14px, rgba(20,24,30,.05) 14px 28px),
    #eef1f5;
  border-color:rgba(120,130,145,.5);
}
.wb-band--light .wb-media--placeholder .wb-media__label,
.wb-band--air .wb-media--placeholder .wb-media__label,
.wb-band--quilt .wb-media--placeholder .wb-media__label{ color:var(--wb-muted); }
.wb-band--light .wb-media--placeholder .wb-media__label strong,
.wb-band--air .wb-media--placeholder .wb-media__label strong,
.wb-band--quilt .wb-media--placeholder .wb-media__label strong{ color:var(--wb-ink-2); }
/* Extra-large top gap (one beat above wb-mt-lg) for the few spots that need a
   card row or air beat to clearly own its own vertical space. */
.wb-mt-xl{ margin-top:var(--wb-space-5); }
/* Hairline rule across the TOP of an element, to set a sub-group apart from the
   one above it inside a single band (so two card groups read as deliberate
   sub-sections, not one crowded run). Theme-aware: dark line on light bands,
   light line on dark/honeycomb/red bands. Pair with wb-mt-xl for the gap. */
.wb-hr-top{ border-top:1px solid var(--wb-line); padding-top:var(--wb-space-3); }
.wb-band--dark .wb-hr-top,
.wb-band--red .wb-hr-top,
.wb-band--honeycomb .wb-hr-top{ border-top-color:var(--wb-line-on-dark); }
/* A checklist that should read at the comfortable LEAD size, used where a
   band's bullets must not look smaller than the lead paragraph above them. */
.wb-checks--lead li{ font-size:var(--wb-lead); line-height:1.5; }
/* Roomier checklist: more vertical gap between rows, a larger check icon, and
   the bold lead-in reads as a true mini-headline (block, slightly bigger) so a
   short list of wins scans as distinct points instead of a dense run of text.
   Used where the bullets ARE the proof and must not blur together on a busy
   textured band. */
.wb-checks--airy{ gap:var(--wb-space-3); }
.wb-checks--airy li{ padding-left:2.4rem; }
.wb-checks--airy li::before{ font-size:1.15em; top:0; }

/* ============================================================
   ROUND-3 SYSTEMIC FIXES  (flagged by the review committee, fixed ONCE
   here instead of per-page, per the owner's "check site-wide" rule)
   ============================================================ */
/* 1. Bootstrap (in min.css) injects an em dash before EVERY testimonial
   attribution: blockquote footer::before{content:'\2014\00A0'}. No wb- source
   file contains the character, but it renders on every quote band and visually
   breaks the no-em-dash rule. Kill it inside the design scope. */
.wb-scope blockquote footer::before{ content:none !important; }

/* 2. Breadcrumbs on dark / photo / video / red / honeycomb heroes: light text on
   a transparent strip (no white bar, no red-on-dark link text). */
.wb-crumbs, .wb-crumbs ol{ background:transparent; }
.wb-band--dark .wb-crumbs, .wb-band--red .wb-crumbs, .wb-band--honeycomb .wb-crumbs,
.wb-band--photo .wb-crumbs, .wb-band--video .wb-crumbs{ color:rgba(255,255,255,.85); }

/* 3. Boxless-quote attribution was hard-set to ink, invisible on dark bands. */
.wb-band--dark .wb-quote__by b, .wb-band--red .wb-quote__by b, .wb-band--honeycomb .wb-quote__by b{ color:#fff; }
.wb-band--dark .wb-quote__by span, .wb-band--red .wb-quote__by span, .wb-band--honeycomb .wb-quote__by span{ color:rgba(255,255,255,.72); }

/* 4. .wb-quote self-centers on ANY band (the .wb-scope blockquote margin reset
   was out-ranking .wb-quote{margin:0 auto}). */
.wb-scope .wb-quote{ margin-inline:auto; }

/* 5. Stat labels readable on dark/red/honeycomb bands (default --wb-muted is a
   light-band gray). */
.wb-band--dark .wb-stat-label, .wb-band--red .wb-stat-label, .wb-band--honeycomb .wb-stat-label{ color:rgba(255,255,255,.82); }

/* 6. Multi-up stat scoreboard: a row of figures on a band (case studies need 3
   across) without a per-page <style> block. Caps the figure so 3 fit a red band. */
.wb-stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--wb-gap); text-align:center; }
@media (max-width:680px){ .wb-stat-row{ grid-template-columns:1fr; } }
.wb-stat-row .wb-stat__num{ font-size:clamp(2.6rem, 1.6rem + 4vw, 4.4rem); line-height:1; }
.wb-checks--airy li strong{ display:block; font-size:1.08em; margin-bottom:.2rem; }
/* circular portrait for team / named people */
.wb-portrait{ width:clamp(76px,9vw,116px); height:clamp(76px,9vw,116px); border-radius:50%; object-fit:cover; box-shadow:var(--wb-shadow-sm); border:3px solid rgba(255,255,255,.65); }

/* Keep corner characters aligned to the CONTENT column on wide screens so
   they sit beside the copy, not off in the gutter / half off-screen (the
   "graphic tucked off the right edge" problem). */
@media (min-width:1280px){
  .wb-deco--tr,.wb-deco--br{ right:calc((100% - var(--wb-maxw))/2 + 1rem); }
  .wb-deco--tl,.wb-deco--bl{ left:calc((100% - var(--wb-maxw))/2 + 1rem); }
  /* gutter override: sit the (already small) figure in the page margin OUTSIDE
     the content column so it never crosses full-width copy. Anchored to the
     band edge, not the content edge, so it stays in the gutter and never clips
     off-screen. */
  .wb-deco--gutter.wb-deco--br,.wb-deco--gutter.wb-deco--tr{
    right:max(.5rem, calc((100% - var(--wb-maxw))/2 - clamp(84px,8.5vw,124px) - .75rem));
  }
  .wb-deco--gutter.wb-deco--bl,.wb-deco--gutter.wb-deco--tl{
    left:max(.5rem, calc((100% - var(--wb-maxw))/2 - clamp(84px,8.5vw,124px) - .75rem));
  }
}

/* ============================================================
   17. HOME OVERHAUL polish utilities (2026 critic pass)
   New reusable pieces for the flagship homepage rhythm/contrast.
   ============================================================ */

/* Hero copy column: hold the headline + lead over the DARK left side of the
   video so they never sit over the busy subject on the right third. */
.wb-hero-copy{ max-width:62ch; }
@media (min-width:1100px){ .wb-hero-copy{ max-width:46rem; } }
/* Vertically center the hero copy on the video band so it sits on the strong
   center-left of the scrim instead of pinning to the top with a dead lower
   third of video below it. The inner takes a viewport-tied min-height and
   flex-centers its single copy column; the band's own top padding still clears
   the fixed nav. Scoped to the video band so other bands keep top-aligned copy. */
.wb-band--video .wb-inner{
  display:flex; align-items:center;
  min-height:clamp(26rem, 62vh, 40rem);
}

/* Stat cards on the near-white quilt band read as floating numbers with no
   edge. Give them a solid white face + a real border and shadow so each is
   clearly its own object. (Overrides the translucent .wb-glass face only on
   these stat cards; other glass cards are untouched.) */
.wb-glass--stat{
  background:#fff;
  border:1px solid rgba(20,24,31,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             var(--wb-lx) var(--wb-ly) 26px rgba(20,24,31,.10),
             0 2px 6px rgba(20,24,31,.06);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* Charcoal explainer card for the RED job-count band. Red-on-red is banned;
   this dark glass face separates cleanly from the red and lets the body copy
   run full white at the lead scale. */
.wb-card-ink{
  max-width:64ch;
  padding:clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
  border-radius:var(--wb-radius);
  background:rgba(18,20,24,.62);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             var(--wb-lx) var(--wb-ly) 34px rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* Hide a corner decal at every width where a two-column list FILLS the band,
   so the character never sits on the right column of copy (the quality bar
   forbids a decal overlapping copy). The honeycomb checks render as two columns
   above 860px, and the right column's last item runs into the bottom-right
   corner, so the decal drops out there. Below 861 the grid stacks 1-up and the
   bottom-right gutter is clear again, so the small decal returns. */
@media (min-width:861px){
  .wb-deco--hide-md{ display:none; }
}

/* The page's ONE moving accent: the hero->answer seam rocket. It rides ABOVE
   the seam (raised so it clears the sticky nav and the hero subject) and flies
   LEFT-TO-RIGHT as the seam scrolls through (JS reads data-drive-from/-to). */
.wb-seam-rider--rocket{ z-index:46; }
.wb-drive--rocket{
  bottom:auto; top:-2.6rem;
  width:clamp(120px,15vw,230px);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));
  /* Rest at the LEFT start (matches data-drive-from="-18"), not the inherited
     off-right 78vw park. Before/without JS the rocket sits at the left, true to
     the left-to-right contract, instead of a clipped red sliver on the right. */
  transform:translateX(-18vw);
}
@media (max-width:768px){ .wb-drive--rocket{ width:clamp(96px,28vw,150px); top:-1.6rem; } }

/* AIR band quote: a genuinely large, centered single column with the byline
   centered directly beneath it, so the air band earns its whitespace. Scoped to
   .wb-band--air so the inline quotes on other pages keep their compact style. */
.wb-band--air .wb-quote{
  max-width:42rem; margin-inline:auto;
  font-size:clamp(1.7rem, 1.15rem + 2.2vw, 2.9rem);
  line-height:1.18; text-align:center; text-wrap:balance;
}
.wb-band--air .wb-quote__by{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-top:1.6rem;
}
.wb-band--air .wb-quote__by span{ margin-top:.15rem; }

/* HOME-only: the rocket is the single moving accent, so drop the static van
   parked inside the red job-count band (it neither rides the seam nor moves).
   Scoped to .wb-home so the shared job-count include keeps its decal elsewhere. */
.wb-home .wb-band--red .wb-deco{ display:none; }

/* HOME proof grid: lock both rows to equal height so the "Read the X story"
   links pin to a common baseline across each pair (no ragged white pockets).
   The 2-up grid otherwise sizes its two rows independently. */
.wb-home .wb-band--light .wb-grid--2{ grid-auto-rows:1fr; }
@media (max-width:860px){ .wb-home .wb-band--light .wb-grid--2{ grid-auto-rows:auto; } }

/* HOME red-band explainer card: the shared job-count include renders the
   "secret behind the number" copy in a .wb-glass on the red band, which on red
   becomes a faint white-glass that reads red-on-red (banned). On the home page,
   restyle that single card to the charcoal .wb-card-ink face so it separates
   cleanly, and lift its body copy to the lead scale in full white (not pink-on-
   red 16px). Scoped to .wb-home so every other page that uses the include is
   untouched. */
.wb-home .wb-band--red .wb-stat .wb-glass{
  background:rgba(18,20,24,.62);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             var(--wb-lx) var(--wb-ly) 34px rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.wb-home .wb-band--red .wb-stat .wb-glass p{
  color:#eef1f5;
  font-size:var(--wb-lead);
  line-height:1.55;
}

/* Ghost CTA sitting on the BRUSHED-METAL band (wb-bg-metal). The plain ghost
   inherits the metal band's light text, but against the busy steel texture its
   transparent fill + thin border can read as a near-solid pill that competes
   with the solid red primary next to it. This forces an explicitly transparent
   fill, a clear light outline, and a faint frost so the phone CTA is
   unambiguously the SECONDARY action. Reusable on any metal final-CTA band. */
.wb-scope .wb-bg-metal a.wb-btn--ghost-metal{
  background:rgba(238,241,245,.06);
  border:2px solid rgba(238,241,245,.55);
  color:#eef1f5;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.wb-scope .wb-bg-metal a.wb-btn--ghost-metal:hover{
  background:#fff; border-color:#fff; color:var(--wb-ink);
}

/* =====================================================================
   SITE SEARCH  (www/search/)
   ---------------------------------------------------------------------
   The design system had no form-input vocabulary, so the search page
   needs its own. These are the only net-new rules the search page adds;
   everything else (bands, glass cards, card CTAs, checks, buttons) is
   reused as-is. Scoped to .wb-search so nothing leaks to other pages.
   ===================================================================== */
.wb-search{ max-width:48rem; }
/* The search field. A big, friendly, glass-frosted input that sits on
   the light hero band and reads as the one thing to do on the page. The
   magnifier icon is absolutely positioned inside the field's left pad. */
.wb-search__field{ position:relative; }
.wb-search__field .wb-search__icon{
  position:absolute; left:1.15rem; top:50%; transform:translateY(-50%);
  color:var(--wb-muted); font-size:1.1rem; pointer-events:none;
}
.wb-scope .wb-search__input{
  width:100%; margin:0;
  padding:1.05rem 1.25rem 1.05rem 3.1rem;
  font-family:var(--wb-body); font-size:1.15rem; line-height:1.3;
  color:var(--wb-ink);
  background:rgba(255,255,255,.85);
  border:1px solid var(--wb-line);
  border-radius:999px;
  box-shadow:var(--wb-shadow-sm);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  backdrop-filter:blur(8px) saturate(140%);
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none; appearance:none;
}
.wb-scope .wb-search__input::placeholder{ color:var(--wb-muted); }
.wb-scope .wb-search__input:focus{
  outline:none;
  border-color:var(--wb-red);
  box-shadow:0 0 0 4px rgba(216,35,42,.14), var(--wb-shadow-sm);
}
/* Live count line under the field, quiet until there is something to say */
.wb-search__count{
  margin-top:1rem; font-size:.95rem; color:var(--wb-muted); min-height:1.2em;
}
/* Small descriptive hint under the box (was a big lead paragraph). */
.wb-search__hint{ margin:.55rem 0 0; font-size:.82rem; line-height:1.5; color:var(--wb-muted); }
/* Search result card with a featured-image thumbnail for a visual clue.
   The thumb FLOATS RIGHT and the text wraps beside it, then flows to full
   width UNDER it once it runs past the image, so the card is only as tall as
   its text (shorter than a rigid two-column row). A result with no image is
   just a normal block card: no floated node, no empty column, no gap, nothing
   to look broken. The card must be display:block (not the .wb-glass flex
   column) or a child float is ignored, so re-block it and clearfix the float
   so the card box always encloses the image. */
.wb-scope .wb-search__results .wb-search__card{ display:block; }
.wb-scope .wb-search__card::after{ content:""; display:block; clear:both; }
.wb-scope .wb-search__thumb{
  float:right; width:132px; height:94px; margin:.1rem 0 .5rem 1.15rem;
  border-radius:10px; overflow:hidden; background:rgba(20,24,31,.06);
  box-shadow:0 2px 8px rgba(20,24,31,.1);
}
.wb-scope .wb-search__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Plain flow (NOT a new block formatting context) so the text wraps around
   and then under the floated thumb instead of sitting in its own column. */
.wb-scope .wb-search__text{ display:block; min-width:0; }
.wb-scope .wb-search__card .wb-h3{ display:block; margin:.15rem 0; }
.wb-scope .wb-search__snip{ display:block; color:var(--wb-ink-2); }
/* Keep the CTA row on its own line under everything, never squeezed beside
   the image. */
.wb-scope .wb-search__card .wb-card-cta{ clear:both; }
@media (max-width:560px){
  .wb-scope .wb-search__thumb{ width:96px; height:70px; margin-left:.85rem; }
}

/* Progressive disclosure (build/34, 2026-07-02): native <details> whose FULL
   content ships OPEN in the server HTML and is collapsed by the browser, so
   Googlebot + AI crawlers (which read raw HTML, never click) get 100% of it while
   humans see a short top and opt in. Rule: CUT FIRST, COLLAPSE SECOND. */
.wb-scope .wb-disclose{ border-top:1px solid var(--wb-line); }
.wb-scope .wb-disclose + .wb-disclose{ }
.wb-scope .wb-disclose > summary{ cursor:pointer; list-style:none; padding:.9rem 0; font-weight:700; font-size:1.02rem; line-height:1.3; display:flex; align-items:center; gap:.6rem; }
.wb-scope .wb-disclose > summary::-webkit-details-marker{ display:none; }
.wb-scope .wb-disclose__ico{ color:var(--wb-red); font-size:.78em; flex:0 0 auto; transition:transform .2s ease; }
.wb-scope .wb-disclose[open] > summary .wb-disclose__ico{ transform:rotate(180deg); }
.wb-scope .wb-disclose__body{ padding:0 0 1.15rem 1.5rem; }
.wb-scope .wb-disclose__body > :first-child{ margin-top:0; }
.wb-scope .wb-band--dark .wb-disclose, .wb-scope .wb-band--honeycomb .wb-disclose, .wb-scope .wb-band--red .wb-disclose{ border-color:var(--wb-line-on-dark); }
.wb-scope .wb-band--dark .wb-disclose > summary, .wb-scope .wb-band--honeycomb .wb-disclose > summary, .wb-scope .wb-band--red .wb-disclose > summary{ color:#fff; }
.wb-scope .wb-band--dark .wb-disclose__ico, .wb-scope .wb-band--honeycomb .wb-disclose__ico, .wb-scope .wb-band--red .wb-disclose__ico{ color:#ff5a61; }
.wb-scope .wb-band--dark .wb-disclose__body, .wb-scope .wb-band--honeycomb .wb-disclose__body, .wb-scope .wb-band--red .wb-disclose__body{ color:rgba(255,255,255,.85); }
/* CONDENSE (build/35): the "cut-first, ship-open, collapse-second" deep block.
   Authored as <details class="wb-disclose wb-condense" data-wb-collapse open>: it
   REUSES every .wb-disclose style above (summary row, red chevron, body padding,
   dark/honeycomb/red recolor) and adds no new visual language. The only new bits:
   it ships with the open attribute so a crawler reads it in full, overhaul.js
   strips that attribute so a human sees it collapsed, and the wb-toc rail opens it
   on jump. Its foot carries a quiet Skip-to-next anchor. NEVER wrap the answer
   capsule or a proof band in this; deep receipts / spec lists / edge-case FAQ only. */
.wb-scope .wb-condense__foot{ margin-top:1rem; }
.wb-scope .wb-condense__skip{ font-size:.9rem; }
/* The result list. Each result is a full-width route card (reuses
   .wb-glass--link), stacked, so a long answer reads top to bottom like
   a results page rather than a tight card grid. */
.wb-search__results{ display:grid; gap:1rem; }
/* Plain route cards (the popular-pages set, no thumbnail) stay flex columns.
   The float cards (.wb-search__card) are re-blocked above so the right float
   works, so exempt them here or this later rule would re-impose flex and kill
   the wrap. */
.wb-scope .wb-search__results .wb-glass--link:not(.wb-search__card){ display:flex; flex-direction:column; }
/* The little breadcrumb-style path above each result title, so the
   reader sees where in the site the match lives. */
.wb-search__path{
  font-family:var(--wb-display); font-weight:700;
  font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--wb-muted); margin:0 0 .35rem;
}
/* The <mark> highlight on the matched query inside a title/description,
   tinted with the brand red instead of the default yellow. The highlighted
   text is written into .wb-search__results (and the empty panel), which are
   SIBLINGS of the .wb-search form, so scope the rule to the results area, not
   the form, or the browser-default yellow leaks through. */
.wb-scope .wb-search__results mark,
.wb-scope .wb-search__empty mark{
  background:rgba(216,35,42,.16); color:inherit;
  padding:0 .12em; border-radius:3px; font-weight:600;
}
/* The creative no-results panel. A single roomy glass card, centered. */
.wb-search__empty{ max-width:46rem; margin-inline:auto; text-align:center; }
.wb-search__empty .wb-card-cta{ justify-content:center; }

/* =====================================================================
   FORM VOCABULARY  (www/contact/send-a-file/ + future overhaul forms)
   ---------------------------------------------------------------------
   The design system shipped with only the single search field above, so
   the Send Us a File uploader needs a real, reusable form vocabulary:
   labels, text/email inputs, a select, a textarea, and a file input that
   all match the wb- look (glass-frosted fields, red focus ring, the
   display-font label). Scoped to .wb-scope so it never leaks into the
   legacy Bootstrap forms still living on the rest of the site. This is
   the same precedent the search page set: net-new rules, everything else
   (bands, glass cards, checks, buttons) reused as-is.
   ===================================================================== */
.wb-form{ max-width:62rem; }
/* The two-column field grid. Collapses to one column on small screens via
   the shared wb-grid breakpoint, so the form stacks cleanly on a phone. */
.wb-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--wb-space-3); }
@media (max-width:680px){ .wb-form__grid{ grid-template-columns:1fr; } }
/* A field that should span the full width of the grid (comments, file rows). */
.wb-field--wide{ grid-column:1 / -1; }
.wb-field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:var(--wb-space-3); }
.wb-field:last-child{ margin-bottom:0; }
/* The label: the small display-font caps treatment, so it reads like the
   rest of the wb- kickers and card decks, not a default browser label. */
.wb-scope .wb-label{
  font-family:var(--wb-display); font-weight:700;
  font-size:.78rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--wb-ink-2); margin:0;
}
.wb-scope .wb-label .wb-req{ color:var(--wb-red); margin-left:.15rem; }
/* The shared field skin: text, email, number, select, textarea, file all
   sit on the same glass-frosted base with the red focus ring, so the form
   reads as one consistent control set. */
.wb-scope .wb-input,
.wb-scope .wb-select,
.wb-scope .wb-textarea,
.wb-scope .wb-file{
  width:100%; margin:0;
  font-family:var(--wb-body); font-size:1.0625rem; line-height:1.4;
  color:var(--wb-ink);
  background:rgba(255,255,255,.9);
  border:1px solid var(--wb-line);
  border-radius:12px;
  box-shadow:var(--wb-shadow-sm);
  transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none; appearance:none;
}
.wb-scope .wb-input,
.wb-scope .wb-select{ padding:.85rem 1.05rem; }
.wb-scope .wb-textarea{ padding:.85rem 1.05rem; resize:vertical; min-height:7.5rem; }
/* The select gets a custom chevron (appearance is stripped above) so it
   matches the rest of the controls instead of the native OS arrow. */
.wb-scope .wb-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%236b727c' d='M7 10L2 5h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.05rem center;
  padding-right:2.6rem; cursor:pointer;
}
/* The file input. The native button is left visible (the browser control
   is the most reliable picker), but the field frame matches the others. */
.wb-scope .wb-file{ padding:.7rem 1.05rem; cursor:pointer; }
.wb-scope .wb-file::-webkit-file-upload-button,
.wb-scope .wb-file::file-selector-button{
  font-family:var(--wb-display); font-weight:700; font-size:.8rem;
  letter-spacing:.03em; text-transform:uppercase;
  color:#fff; background:var(--wb-red);
  border:0; border-radius:8px; padding:.55rem 1rem; margin-right:1rem;
  cursor:pointer; transition:background .15s ease;
}
.wb-scope .wb-file:hover::-webkit-file-upload-button,
.wb-scope .wb-file:hover::file-selector-button{ background:var(--wb-red-dk); }
.wb-scope .wb-input::placeholder,
.wb-scope .wb-textarea::placeholder{ color:var(--wb-muted); }
.wb-scope .wb-input:focus,
.wb-scope .wb-select:focus,
.wb-scope .wb-textarea:focus,
.wb-scope .wb-file:focus{
  outline:none;
  border-color:var(--wb-red);
  box-shadow:0 0 0 4px rgba(216,35,42,.14), var(--wb-shadow-sm);
}
/* The little quiet helper line under a field or the form (max size, etc). */
.wb-form__note{ font-size:.92rem; color:var(--wb-muted); margin:.35rem 0 0; }
/* The gen_validatorv4 error text that the validator injects on a bad field. */
.wb-scope #send_file_form .error,
.wb-scope #contactForm .error{
  display:block; color:var(--wb-red); font-size:.9rem; font-weight:600; margin-top:.35rem;
}
/* The off-screen honeypot wrapper. Kept renderable (not display:none) so a
   dumb bot fills it while a human never sees it, exactly like the legacy
   .hidden "anti" trap the handler scores against. */
.wb-hp{ position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* =====================================================================
   ROUND-4 SYSTEMIC FIXES  (2026-06-30 overnight review pass)
   ---------------------------------------------------------------------
   Shared CHROME that lives OUTSIDE .wb-scope (the bare body-level header /
   footer .row, the third-party reCAPTCHA badge). These cannot be scoped to
   .wb-scope, so they sit here as deliberately narrow, element-level guards.
   The html,body{overflow-x:clip} clamp near the top of this file already stops
   any of these from creating a scrollbar; the rules below also stop them from
   bleeding at the source so the document measures clean on a phone.
   ===================================================================== */

/* The shared header (inc/header.php:18) opens a bare Bootstrap `.row` DIRECTLY on
   <body>. Its default -15px gutters push the box 15px past each viewport edge,
   the single biggest on-page source of the mobile sideways-scroll (flagged HIGH
   on vinyl-graphics, trade-show-displays, and others). The .row wraps a
   position:fixed navbar, so it does not need a grid gutter at all. Zero it. The
   footer .row is contained inside a padded .container > .wa-foot-glass and does
   NOT reach the viewport edge, so the global overflow-x:clip clamp above is its
   only guard (zeroing it would shift the footer columns). Scoped to the body-
   level header row so no Bootstrap .row inside .wb-scope content is touched. */
body > .row{
  margin-left:0;
  margin-right:0;
}

/* reCAPTCHA v3 badge (Google's position:fixed widget, enabled site-wide in
   commit 2c86c1e via inc/top.php). Its default off-canvas park lands its right
   edge 200px+ past a 390px viewport, which shows up as phantom width in tooling
   and could become real scroll if any future CSS reveals it. Pin it flush to the
   right edge inside the viewport. The html,body overflow-x:clip clamp above is
   the real guard; this keeps the badge tidy and visible. */
/* reCAPTCHA v3 badge (owner): parked lower-RIGHT and collapsed to a small tab that
   slides out on hover/focus, so it stops covering content and reads as a tidy chip.
   z-index kept very high so it never sits behind a band. Collapsing hides Google's
   Privacy/Terms links, so the required disclosure text is added to the footer for
   compliance (inc/footer.php). */
.grecaptcha-badge{
  left:auto !important; right:0 !important; bottom:14px !important;   /* owner 2026-07-06: dock flush; the 14px gap read as overhang against the square tab edge */
  width:70px !important; overflow:hidden !important;
  border-radius:8px 0 0 8px !important;
  box-shadow:0 0 10px rgba(0,0,0,.2) !important;
  transition:width .3s ease !important;
  z-index:2147480000 !important;
}
.grecaptcha-badge:hover,
.grecaptcha-badge:focus-within{ width:256px !important; }
/* The footer reCAPTCHA disclosure line (small + muted; sits under the copyright). */
.wa-foot-recaptcha{ display:block; margin-top:6px; font-size:11px; line-height:1.4; opacity:.55; }
.wa-foot-recaptcha a{ text-decoration:underline; color:inherit; }

/* ============================================================
   PAGE-SUMMARY HERO  (UX/IA review 2026: "concise top, depth on demand")
   Additive, opt-in via .wb-hero__summary on a hero's .wb-inner. Adds the
   3-bullet outcome list, the "more below" scroll cue the system lacked, and
   a mobile H1 clamp so the primary CTA stays on the first phone screen.
   Reuses wb-checks / wb-btn-row / wb-link--quiet / wb-lead--bright. Scoped so
   it NEVER touches the .wb-hero split-grid or un-migrated heroes. See
   website-overhaul/build/25-ux-progressive-disclosure-review.md.
   ============================================================ */

/* HERO BULLETS: 3 outcome lines that read at a glance, not as a body band.
   The .wb-scope prefix + class chain beats the base .wb-checks--airy li strong
   {display:block} so each bold lead-in stays inline (one short thought per line). */
.wb-scope .wb-hero__bullets{ max-width:50rem; }
.wb-scope .wb-hero__bullets li{ font-size:calc(var(--wb-lead) * .94); line-height:1.45; text-wrap:pretty; }
.wb-scope .wb-hero__bullets li strong{ display:inline; font-size:1em; margin-bottom:0; }
@media (max-width:560px){
  .wb-scope .wb-hero__bullets li{ font-size:1.02rem; padding-left:2rem; }
}

/* SCROLL CUE: the "there is more below" affordance. Quiet, voice-true,
   anchored to the first proof band. Gentle bob invites the scroll. */
.wb-scope .wb-scroll-cue{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.75rem; font-size:.92rem; font-weight:600; letter-spacing:.01em;
  color:rgba(255,255,255,.78); text-decoration:none;
}
.wb-scope .wb-scroll-cue:hover{ color:#fff; }
.wb-scope .wb-scroll-cue i{ animation:wb-cue-bob 1.8s ease-in-out infinite; }
.wb-scope .wb-band--light .wb-scroll-cue,
.wb-scope .wb-band--quilt .wb-scroll-cue,
.wb-scope .wb-band--gray  .wb-scroll-cue{ color:var(--wb-muted); }
.wb-scope .wb-band--light .wb-scroll-cue:hover{ color:var(--wb-ink); }
@keyframes wb-cue-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@media (prefers-reduced-motion:reduce){ .wb-scope .wb-scroll-cue i{ animation:none; } }

/* H1 SIZE + WIDTH: cap the page-summary headline well below the 4.5rem hero max
   (var(--wb-h1)) so it reads as a confident promise, not a billboard. The
   max-width on the H1 and the intro keeps both clear of the right-rail TOC,
   which only narrows the centered .wb-inner and so does not, on its own, stop a
   left-aligned hero line from running under the rail. Mobile clamps further and
   drops the metal effect for legibility. */
.wb-scope .wb-hero__summary .wb-h1{ font-size:clamp(2rem, 1.3rem + 2.2vw, 3.2rem); line-height:1.05; max-width:50rem; }
.wb-scope .wb-hero__summary .wb-lead--bright{ max-width:50rem; text-wrap:pretty; }
@media (max-width:560px){
  .wb-scope .wb-hero__summary .wb-h1{ font-size:clamp(1.9rem, 8.5vw, 2.6rem); line-height:1.04; }
  .wb-scope .wb-hero__summary .wb-h1.wb-metal-text{ background:none; -webkit-text-fill-color:currentColor; color:#fff; filter:none; }
}

/* HERO BAND PADDING: the first band adds --wb-pad + --wb-nav-h to clear the
   floating nav (overhaul.css:501). NEVER drop --wb-nav-h or the breadcrumb tucks
   under the nav. Desktop keeps the full clearance. On a phone, trim only the
   extra --wb-pad (keep --wb-nav-h) so the CTA clears the first screen while the
   breadcrumb still sits below the nav. */
@media (max-width:560px){
  .wb-scope .wb-band:has(> .wb-inner.wb-hero__summary){ padding-top:calc(var(--wb-nav-h) + 1.25rem); padding-bottom:2.5rem; }
  .wb-scope .wb-hero__summary .wb-hero__bullets{ margin-top:1rem; }
  .wb-scope .wb-hero__summary .wb-hero__bullets li{ font-size:.98rem; line-height:1.38; }
  .wb-scope .wb-hero__summary .wb-hero__bullets li + li{ margin-top:.4rem; }
  .wb-scope .wb-hero__summary .wb-lead--bright{ margin-top:.85rem; }
}

/* ============================================================
   OPTIONAL HERO FLOAT (visual-interest example, 2026)
   A decorative transparent-PNG cutout on the right of a page-summary
   hero. The On-this-page rail owns the right gutter >=1300px, so the
   float only shows >=1500px where the gap between the content column
   (capped 50rem) and the rail is wide enough to clear it. Hidden below
   that and on mobile, so it never collides with the rail or the text.
   ============================================================ */
.wb-scope .wb-hero__float{
  position:absolute; z-index:2; top:50%; transform:translateY(-50%);
  right:clamp(2.5rem, 3.5vw, 5rem);
  width:clamp(220px, calc(100vw - 1120px), 480px); height:auto;   /* fills the right side; the rail parks during the hero */
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.55));
  pointer-events:none;
}
@media (max-width:1299px){ .wb-scope .wb-hero__float{ display:none; } }

/* HERO FLOAT MOTION: a gentle continuous drift in the direction the image faces
   (data-float on the img). Keeps the translateY(-50%) centering in every frame.
   left = rolls left (cart), up = hovers (laptop), right = mirror. Motion-safe. */
@media (prefers-reduced-motion:no-preference){
  .wb-scope .wb-hero__float[data-float="up"]{ animation:wb-hf-up 4.6s ease-in-out infinite; }
  .wb-scope .wb-hero__float[data-float="left"]{ animation:wb-hf-left 5.2s ease-in-out infinite; }
  .wb-scope .wb-hero__float[data-float="right"]{ animation:wb-hf-right 5.2s ease-in-out infinite; }
}
@keyframes wb-hf-up{ 0%,100%{ transform:translateY(-50%); } 50%{ transform:translateY(calc(-50% - 15px)); } }
@keyframes wb-hf-left{ 0%,100%{ transform:translate(8px, calc(-50% - 3px)); } 50%{ transform:translate(-20px, calc(-50% + 3px)); } }
@keyframes wb-hf-right{ 0%,100%{ transform:translate(-8px, calc(-50% - 3px)); } 50%{ transform:translate(20px, calc(-50% + 3px)); } }

/* BARE FLOATING CUTOUT (feedback #45): a transparent PNG/webp that stands on its
   own in a split/media column and gently bobs, instead of a framed, rounded photo.
   The drop-shadow follows the alpha shape (not a rectangle box), so a transparent
   laptop reads as an object, not a boxed image. Motion-safe. */
.wb-scope .wb-float-col{ display:flex; align-items:center; justify-content:center; }
.wb-scope .wb-float-soft{ display:block; width:min(100%, 460px); height:auto; filter:drop-shadow(0 24px 38px rgba(0,0,0,.45)); }
@media (prefers-reduced-motion:no-preference){ .wb-scope .wb-float-soft{ animation:wb-bob-soft 4.8s ease-in-out infinite; } }
@keyframes wb-bob-soft{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* CHECKLIST SPACING (feedback #31): the .wb-mt* utilities are scoped to p.wb-mt* (to
   beat the paragraph default margin), so a wb-mt-lg on a <ul class="wb-checks"> did
   nothing and .wb-checks{margin:0} won, letting the list touch the copy above. Honor
   the margin utilities on checklists too (site-wide), so uls and prose never collide. */
.wb-scope .wb-checks.wb-mt-sm{ margin-top:var(--wb-space-2); }
.wb-scope .wb-checks.wb-mt{ margin-top:var(--wb-space-3); }
.wb-scope .wb-checks.wb-mt-lg{ margin-top:var(--wb-space-4); }
.wb-scope .wb-checks.wb-mt-xl{ margin-top:var(--wb-space-5); }

/* ============================================================
   INFOGRAPHIC STAT GRID (owner rule, feedback #33/#37)
   Proof numbers as BIG figures with an icon + short label, in an even
   grid, staggered in on scroll (data-reveal on each item). Replaces plain
   text chips / left-floated pills for "by the numbers" sections. Optional
   trailing <p> for a longer descriptor. See build/26 section 4.
   ============================================================ */
.wb-scope .wb-statgrid{
  list-style:none; padding:0;
  /* Breathing room above the grid so the top-row ICONS never crowd the headline
     that precedes them (feedback 2026-07-01). This wins over wb-mt/wb-mt-lg on the
     same <ul> because .wb-statgrid is declared after the margin utilities. */
  margin:clamp(2.25rem, 1.4rem + 2vw, 3.4rem) 0 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:clamp(1.5rem, 1rem + 2vw, 3rem); text-align:center;
}
.wb-scope .wb-statgrid__item{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.wb-scope .wb-statgrid__icon{ font-size:clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); color:var(--wb-red); line-height:1; margin-bottom:.15rem; }
.wb-scope .wb-statgrid__num{ font-family:var(--wb-display); font-weight:800; font-size:clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height:1; letter-spacing:-.02em; color:var(--wb-ink); }
.wb-scope .wb-statgrid__label{ font-size:1.05rem; font-weight:700; line-height:1.3; color:var(--wb-ink-2); max-width:24ch; }
.wb-scope .wb-statgrid__item p{ margin:.2rem 0 0; font-size:.95rem; line-height:1.45; color:var(--wb-muted); max-width:32ch; }
/* On dark / red / honeycomb / photo bands, flip the figure + label white, icon light-red. */
.wb-scope .wb-band--dark .wb-statgrid__num, .wb-scope .wb-band--red .wb-statgrid__num, .wb-scope .wb-band--honeycomb .wb-statgrid__num, .wb-scope .wb-band--photo .wb-statgrid__num,
.wb-scope .wb-band--dark .wb-statgrid__label, .wb-scope .wb-band--red .wb-statgrid__label, .wb-scope .wb-band--honeycomb .wb-statgrid__label, .wb-scope .wb-band--photo .wb-statgrid__label{ color:#fff; }
.wb-scope .wb-band--dark .wb-statgrid__icon, .wb-scope .wb-band--red .wb-statgrid__icon, .wb-scope .wb-band--honeycomb .wb-statgrid__icon, .wb-scope .wb-band--photo .wb-statgrid__icon{ color:#ff5a61; }
.wb-scope .wb-band--dark .wb-statgrid__item p, .wb-scope .wb-band--red .wb-statgrid__item p, .wb-scope .wb-band--honeycomb .wb-statgrid__item p, .wb-scope .wb-band--photo .wb-statgrid__item p{ color:rgba(255,255,255,.82); }
/* Case-study stat placements (2026-07-02): a compact hairline-divided strip in the
   hero (top, above the fold) and a fuller grid with the detail line in the result
   band (bottom). Same data, two treatments. */
.wb-scope .wb-cs-hero-stats{ margin-top:clamp(1.75rem, 1rem + 2.5vw, 3rem); padding-top:clamp(1.5rem, 1rem + 2vw, 2.5rem); border-top:1px solid rgba(255,255,255,.16); }
.wb-scope .wb-cs-hero-stats .wb-statgrid{ margin-top:0; gap:clamp(1rem, .5rem + 2vw, 2.75rem); }
.wb-scope .wb-cs-hero-stats .wb-statgrid__num{ font-size:clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); }
.wb-scope .wb-cs-hero-stats .wb-statgrid__label{ font-size:.95rem; font-weight:700; }
.wb-scope .wb-cs-result-stats{ margin-top:clamp(2rem, 1.2rem + 2.5vw, 3.5rem); }
.wb-scope .wb-cs-result-stats .wb-statgrid{ margin-top:0; }
/* Four stat cards: an even 4-up on wide screens, 2x2 at tablet, 1-up on phone,
   so a 4-card set never wraps to a lopsided 3-then-1 in the narrowed TOC column. */
.wb-scope .wb-statgrid--4up{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:900px){ .wb-scope .wb-statgrid--4up{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .wb-scope .wb-statgrid--4up{ grid-template-columns:1fr; } }
/* Small sourced caption under a stat grid: cite the source once (not per card),
   with a RELATIVE period, never a calendar "as of" date that ages. */
.wb-scope .wb-stat-src{ margin:clamp(1.1rem, .8rem + 1vw, 1.7rem) 0 0; font-size:.8rem; font-style:italic; color:var(--wb-muted); text-align:center; }
.wb-scope .wb-band--dark .wb-stat-src, .wb-scope .wb-band--red .wb-stat-src, .wb-scope .wb-band--honeycomb .wb-stat-src{ color:rgba(255,255,255,.6); }

/* Multi-channel campaign gallery (case study, 2026-07-02): framed campaign pieces
   (mail, email, social) in a grid, each with a channel label + caption. Pieces
   vary in aspect, so each shot is a fixed 4:3 window with the art top-anchored. */
.wb-scope .wb-campaign{ list-style:none; padding:0; margin:clamp(1.75rem, 1rem + 2vw, 3rem) 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:clamp(1.25rem, .75rem + 1.5vw, 2.25rem); }
.wb-scope .wb-campaign__item{ display:flex; flex-direction:column; margin:0; }
.wb-scope .wb-campaign__shot{ position:relative; border-radius:14px; overflow:hidden; background:#0d0f14; box-shadow:0 14px 34px -16px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); aspect-ratio:4/3; }
.wb-scope .wb-campaign__shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.wb-scope .wb-campaign__chan{ align-self:flex-start; margin:.9rem 0 .35rem; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--wb-red); }
.wb-scope .wb-campaign__chan i{ margin-right:.4rem; }
.wb-scope .wb-band--dark .wb-campaign__chan, .wb-scope .wb-band--honeycomb .wb-campaign__chan{ color:#ff5a61; }
.wb-scope .wb-campaign__cap{ font-size:.95rem; line-height:1.5; color:var(--wb-ink-2); margin:0; }
.wb-scope .wb-band--dark .wb-campaign__cap, .wb-scope .wb-band--honeycomb .wb-campaign__cap{ color:rgba(255,255,255,.8); }

/* In-house glass video: a rounded framed autoplay-muted-loop clip. */
.wb-scope .wb-videobox{ position:relative; border-radius:18px; overflow:hidden; background:#0a0b0e; box-shadow:0 26px 60px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07); }
.wb-scope .wb-videobox video{ display:block; width:100%; height:auto; }

/* Homepage hero "What can we get done for you" ask (guided-nav Phase 1, 2026-07-02):
   the routing input merged into the video hero. A real GET form to /search/ (works
   with JS off); overhaul.js later adds the instant curated + search dropdown. */
.wb-scope .wb-hero-ask{ max-width:44rem; margin-top:clamp(1.25rem, .8rem + 1.5vw, 2rem); }
.wb-scope .wb-hero-ask__q{ font-family:var(--wb-display); font-weight:800; font-size:clamp(1.2rem, 1rem + .8vw, 1.65rem); color:#fff; margin:0 0 .6rem; letter-spacing:-.01em; line-height:1.15; }
.wb-scope .wb-hero-ask__q label{ cursor:text; }
.wb-scope .wb-hero-ask__row{ display:flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.97); border-radius:999px; padding:.4rem .4rem .4rem 1.05rem; box-shadow:0 18px 44px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
.wb-scope .wb-hero-ask__icon{ color:#8a929b; font-size:1rem; flex:0 0 auto; }
.wb-scope .wb-hero-ask__input{ flex:1 1 auto; min-width:0; border:0; background:transparent; font:inherit; font-size:1.02rem; color:var(--wb-ink); padding:.6rem .2rem; outline:none; -webkit-appearance:none; appearance:none; }
.wb-scope .wb-hero-ask__input::placeholder{ color:#9aa1a9; }
.wb-scope .wb-hero-ask__input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.wb-scope .wb-hero-ask__go{ flex:0 0 auto; border:0; cursor:pointer; font:inherit; font-weight:800; font-size:.95rem; color:#fff; background:var(--wb-red); border-radius:999px; padding:.72rem 1.25rem; white-space:nowrap; transition:filter .15s ease, transform .1s ease; }
.wb-scope .wb-hero-ask__go:hover{ filter:brightness(1.08); }
.wb-scope .wb-hero-ask__go:active{ transform:translateY(1px); }
.wb-scope .wb-hero-ask__go i{ font-size:.85em; margin-left:.3em; }
.wb-scope .wb-hero-ask__note{ margin:.7rem 0 0; font-size:.85rem; line-height:1.5; color:rgba(255,255,255,.82); }
.wb-scope .wb-hero-ask__note a{ color:#fff; font-weight:700; text-decoration:underline; }
@media (max-width:560px){
  .wb-scope .wb-hero-ask__row{ flex-wrap:wrap; border-radius:20px; padding:.55rem; }
  .wb-scope .wb-hero-ask__input{ flex-basis:100%; padding:.5rem .5rem; }
  .wb-scope .wb-hero-ask__go{ flex:1 1 auto; text-align:center; }
}

/* Small client logo mark above a case-study hero headline. */
.wb-scope .wb-cs-clientmark{ display:block; height:auto; width:auto; max-width:190px; margin:0 0 1.15rem; opacity:.95; }
/* Quote card: a glass panel holding a pull quote + attribution, 2-up. Overrides
   the default blockquote treatment since the blockquote IS the card here. */
.wb-scope blockquote.wb-quote-card{ margin:0; padding:clamp(1.4rem, 1rem + 1.5vw, 2.1rem); border:0; font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height:1.5; font-weight:500; color:var(--wb-ink); display:flex; flex-direction:column; gap:.9rem; }
.wb-scope blockquote.wb-quote-card::before{ content:none; }
.wb-scope .wb-band--dark blockquote.wb-quote-card, .wb-scope .wb-band--honeycomb blockquote.wb-quote-card{ color:#fff; }
.wb-scope blockquote.wb-quote-card cite{ font-style:normal; font-weight:700; font-size:.88rem; letter-spacing:.02em; color:var(--wb-red); }

/* ============================================================
   MEDIA CHECKLIST (feedback #36): a checklist where each item carries a
   relevant square thumbnail (photo) or an icon, for visual interest. Drops
   the default red-check bullet. Reuse .wb-checks--media alongside .wb-checks.
   ============================================================ */
.wb-scope .wb-checks--media{ gap:1.4rem; }
.wb-scope .wb-checks--media li{ display:flex; gap:1.1rem; align-items:flex-start; padding-left:0; }
.wb-scope .wb-checks--media li::before{ display:none; }
.wb-scope .wb-check-thumb{
  flex:0 0 auto; width:84px; height:84px; border-radius:14px; object-fit:cover;
  background:rgba(20,24,31,.05); box-shadow:0 2px 8px rgba(20,24,31,.12);
}
.wb-scope .wb-check-thumb--ico{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:2rem; color:var(--wb-red);
  background:rgba(216,35,42,.08); box-shadow:none;
}
.wb-scope .wb-check-body{ flex:1 1 auto; min-width:0; }
.wb-scope .wb-band--dark .wb-check-thumb, .wb-scope .wb-band--honeycomb .wb-check-thumb, .wb-scope .wb-band--red .wb-check-thumb{ background:rgba(255,255,255,.08); }
.wb-scope .wb-band--dark .wb-check-thumb--ico, .wb-scope .wb-band--honeycomb .wb-check-thumb--ico, .wb-scope .wb-band--red .wb-check-thumb--ico{ color:#ff5a61; background:rgba(255,90,97,.14); }
@media (max-width:560px){ .wb-scope .wb-check-thumb{ width:64px; height:64px; } .wb-scope .wb-check-thumb--ico{ font-size:1.5rem; } }

/* Home video hero: .wb-band--video .wb-inner is display:flex (a 2-col split for the
   old video hero), which lays the concise-top stack out in a row. Force it to a
   single-column block so the page-summary hero reads top-to-bottom like the rest. */
.wb-scope .wb-band--video .wb-inner.wb-hero__summary{ display:block; }

/* ============================================================
   HERO FRAMED IMAGE (rounded corners + red offset accent + parallax drift)
   For 2-col heroes: concise content left, this framed photo right. A red block
   sits offset behind the rounded, overflow-clipped image; the image inside eases
   on scroll via data-wb-drift (js initImageDrift). Shows only where the right
   gutter is clear (>=1300px, the rail parks during the hero); hidden below.
   ============================================================ */
.wb-scope .wb-hero__frame{
  position:relative; margin:0 0 0 auto; width:100%; max-width:440px;
}
.wb-scope .wb-hero__frame::before{
  content:""; position:absolute; inset:0; transform:translate(20px, 20px);
  border-radius:18px; background:var(--wb-red); z-index:0;
}
.wb-scope .wb-hero__frame-img{
  position:relative; z-index:1; display:block; aspect-ratio:4/3;
  border-radius:18px; overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.45); outline:1px solid rgba(255,255,255,.12); outline-offset:-1px;
}
.wb-scope .wb-hero__frame-img img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:960px){ .wb-scope .wb-hero__frame{ display:none; } }

/* HERO SPLIT + WGSD PANEL (home): concise content left, the big "We Get Stuff Done"
   mark + a "what does that mean" link right. */
.wb-scope .wb-hero__summary--split{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr); gap:clamp(1.5rem,2.5vw,3.5rem); align-items:center; }
.wb-scope .wb-band--video .wb-inner.wb-hero__summary--split{ display:grid; }   /* beat the video-hero block override */
.wb-scope .wb-hero__wgsd{ text-align:center; }
.wb-scope .wb-hero__wgsd img{ width:min(100%, 320px); height:auto; display:block; margin:0 auto 1.1rem; filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)); }
.wb-scope .wb-hero__wgsd a{ font-weight:700; }
/* Quiet supporting caption under the hero CTA: weaves in the free weekly meeting
   without a second competing button (feedback 2026-07-01). Muted on the dark hero. */
.wb-scope .wb-hero__cta-note{ flex-basis:100%; margin:.85rem 0 0; font-size:.95rem; line-height:1.5; color:rgba(238,241,245,.72); max-width:46ch; }
.wb-scope .wb-hero__cta-note a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:960px){ .wb-scope .wb-hero__summary--split{ grid-template-columns:1fr; } .wb-scope .wb-hero__wgsd{ display:none; } }

/* ============================================================
   HISTORY TIMELINE (feedback 2026-07: interactive horizontal
   scroll-snap timeline of Weber milestones on the story page).
   Cards scroll horizontally on every breakpoint (touch-native on
   mobile); prev/next buttons + wheel + drag drive it on desktop.
   A continuous track line runs through the year dots. Motion-safe.
   ============================================================ */
.wb-scope .wb-timeline{ position:relative; margin-top:clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.wb-scope .wb-timeline__track{
  display:flex; gap:clamp(.9rem, .6rem + 1vw, 1.4rem);
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  padding:.25rem .25rem 1.25rem; scrollbar-width:thin;
  scrollbar-color:var(--wb-red) rgba(255,255,255,.12);
  cursor:grab;
}
.wb-scope .wb-timeline__track.is-drag{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.wb-scope .wb-timeline__track::-webkit-scrollbar{ height:8px; }
.wb-scope .wb-timeline__track::-webkit-scrollbar-thumb{ background:var(--wb-red); border-radius:8px; }
.wb-scope .wb-timeline__track::-webkit-scrollbar-track{ background:rgba(255,255,255,.1); border-radius:8px; }
.wb-scope .wb-timeline__item{
  flex:0 0 clamp(230px, 74vw, 268px); scroll-snap-align:center;
  display:grid; grid-template-rows:auto 26px 1fr; align-content:start;
}
.wb-scope .wb-timeline__year{
  font-family:var(--wb-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height:1; color:#ff5a61; text-align:center;
}
/* the dot + the continuous line segment for this item */
.wb-scope .wb-timeline__marker{ position:relative; }
.wb-scope .wb-timeline__marker::before{
  content:""; position:absolute; top:50%; left:0; right:0; height:2px;
  background:rgba(255,255,255,.22); transform:translateY(-50%);
}
.wb-scope .wb-timeline__dot{
  position:absolute; top:50%; left:50%; width:14px; height:14px; border-radius:50%;
  background:var(--wb-red); border:3px solid #12151b; transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(255,90,97,.35);
}
.wb-scope .wb-timeline__card{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10);
  border-radius:16px; overflow:hidden; box-shadow:0 14px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.wb-scope .wb-timeline__media{ aspect-ratio:4/3; overflow:hidden; background:rgba(0,0,0,.25); }
.wb-scope .wb-timeline__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.wb-scope .wb-timeline__card--nomedia{ background:linear-gradient(160deg, rgba(181,26,0,.20), rgba(255,255,255,.05)); }
.wb-scope .wb-timeline__body{ padding:.9rem 1rem 1.1rem; }
.wb-scope .wb-timeline__title{ font-size:1.02rem; font-weight:800; line-height:1.2; color:#fff; margin:0; }
.wb-scope .wb-timeline__cap{ margin:.4rem 0 0; font-size:.9rem; line-height:1.45; color:rgba(255,255,255,.78); }
/* nav buttons */
.wb-scope .wb-timeline__nav{
  position:absolute; top:calc(50% - .5rem); z-index:3; width:44px; height:44px; border-radius:50%;
  border:none; background:var(--wb-red); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer;
  display:none; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.4);
  transition:transform .15s ease, opacity .15s ease;
}
.wb-scope .wb-timeline__nav:hover{ transform:scale(1.08); }
.wb-scope .wb-timeline__nav[disabled]{ opacity:.3; cursor:default; transform:none; }
.wb-scope .wb-timeline__nav--prev{ left:-14px; }
.wb-scope .wb-timeline__nav--next{ right:-14px; }
@media (min-width:640px){ .wb-scope .wb-timeline__nav{ display:flex; } }
@media (prefers-reduced-motion:reduce){ .wb-scope .wb-timeline__track{ scroll-behavior:auto; } }

/* ============================================================
   WEBSITE SHOWCASE GRID (2026-07: a grid of client-site
   screenshots for the websites-ecommerce showcase band + the
   /work/websites gallery subpage). Each card = a framed browser
   screenshot on top, client + blurb + tags + visit link below.
   ============================================================ */
.wb-scope .wb-sitegrid{ list-style:none; margin:clamp(2rem,1.25rem + 1.5vw,2.75rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:clamp(1.1rem, .7rem + 1.2vw, 1.8rem); }
.wb-scope .wb-sitecard{ display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); box-shadow:0 16px 34px rgba(0,0,0,.32);
  transition:transform .18s ease, box-shadow .18s ease; }
.wb-scope .wb-band--light .wb-sitecard, .wb-scope .wb-band--quilt .wb-sitecard, .wb-scope .wb-band--gray .wb-sitecard{
  background:#fff; border:1px solid rgba(20,24,31,.10); box-shadow:0 14px 30px rgba(20,24,31,.12); }
.wb-scope .wb-sitecard:hover{ transform:translateY(-4px); box-shadow:0 24px 46px rgba(0,0,0,.4); }
.wb-scope .wb-sitecard__shot{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#0d0f13; }
.wb-scope .wb-sitecard__shot::before{ /* faux browser bar */
  content:""; position:absolute; top:0; left:0; right:0; height:22px; z-index:2;
  background:linear-gradient(#20242c,#171a20); box-shadow:inset 0 -1px 0 rgba(255,255,255,.06); }
.wb-scope .wb-sitecard__shot::after{ /* the 3 window dots */
  content:""; position:absolute; top:8px; left:10px; z-index:3; width:6px; height:6px; border-radius:50%;
  background:#ff5f57; box-shadow:10px 0 0 #febc2e, 20px 0 0 #28c840; }
.wb-scope .wb-sitecard__shot img{ position:absolute; top:22px; left:0; width:100%; height:calc(100% - 22px); object-fit:cover; object-position:top center; display:block; }
.wb-scope .wb-sitecard__body{ padding:1rem 1.15rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.wb-scope .wb-sitecard__client{ font-size:1.08rem; font-weight:800; line-height:1.2; margin:0; }
.wb-scope .wb-sitecard__blurb{ font-size:.92rem; line-height:1.5; margin:0; color:var(--wb-ink-2); }
.wb-scope .wb-band--dark .wb-sitecard__blurb, .wb-scope .wb-band--honeycomb .wb-sitecard__blurb{ color:rgba(255,255,255,.8); }
.wb-scope .wb-sitecard__tags{ font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--wb-red); font-weight:700; margin:auto 0 0; }
.wb-scope .wb-sitecard__link{ padding-top:.5rem; font-weight:700; font-size:.9rem; }
.wb-scope .wb-sitecard__link i{ font-size:.8em; }

/* Phase D polish (2026-07-02): timeline text-only cards bottom-anchor their body
   to match photo cards; a --wide frame + --shot media modifier fit 16:10 browser
   screenshots without clipping the nav; the wide frame shows stacked on mobile. */
.wb-scope .wb-timeline__card--nomedia .wb-timeline__body{ margin-top:auto; }
.wb-scope .wb-hero__frame--wide .wb-hero__frame-img{ aspect-ratio:16/10; }
.wb-scope .wb-hero__frame--wide .wb-hero__frame-img img{ object-position:top; }
@media (max-width:960px){ .wb-scope .wb-hero__frame--wide{ display:block; max-width:100%; margin:1.25rem 0 0; } }
.wb-scope .wb-media--shot img{ aspect-ratio:16/11; object-position:top; }
/* Phone-framed result screenshot (case-study template, 2026-07-02): a portrait
   mobile capture in a dark bezel, used when a study's result_image is a -mobile
   shot. Reliably shows the hero when a site's desktop hero is a JS slider that
   will not render in a full-page desktop capture (e.g. Wallover). */
.wb-scope .wb-media--phone{ background:transparent; box-shadow:none; border:0; padding:0; max-width:290px; margin-inline:auto; overflow:visible; }
.wb-scope .wb-media--phone img{ display:block; width:100%; height:auto; border-radius:2rem;
  border:10px solid #12151b; box-shadow:0 24px 55px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }

/* ============================================================
   FRAME PARALLAX (#80, build/35): a framed screenshot becomes a tall
   ACTIVE window. Tag the CLIP BOX (never the img) with
   data-wb-frameparallax: the box keeps a fixed ratio, the img inside
   is deliberately oversized on ONE axis, and initFrameParallax()
   (overhaul.js) pans it across that overflow as the frame scrolls
   through the viewport. Default sizing is the vertical pan (a
   full-page shot in a tall frame); the JS measures the real overflow
   and flips the attr to "x" when the image is the wider one, which
   switches to the horizontal sizing below. A tagged box must own its
   ratio (the --tall variants or the --shot rule here): the img is
   absolute in enhanced mode, so a ratio-less box has no height.
   Static fallbacks (no JS, reduced motion, <=960px) un-clip the
   image entirely: centered, whole shot visible, transform:none, so
   crawlers and reduced-motion visitors never lose content.
   ============================================================ */
/* Enhanced mode only: JS on, motion allowed, desktop. */
@media (prefers-reduced-motion:no-preference) and (min-width:961px){
  /* tall clip-box variants, the frame height finally matches the copy column */
  html.wb-js .wb-scope .wb-hero__frame--tall .wb-hero__frame-img{ aspect-ratio:3/4; }
  html.wb-js .wb-scope .wb-hero__frame--wide.wb-hero__frame--tall .wb-hero__frame-img{ aspect-ratio:16/13; }
  html.wb-js .wb-scope .wb-media--shot[data-wb-frameparallax]{ aspect-ratio:16/11; }
  html.wb-js .wb-scope [data-wb-frameparallax]{ position:relative; overflow:hidden; display:block; }
  /* y pan (default / auto): natural-ratio image at box width; whatever runs
     taller than the box is the pannable travel. The centering rides the
     `translate` longhand so the JS `transform` pan composes on top of it.
     min-height covers the degenerate case (image shorter than the box) so
     the frame never opens a gap. */
  html.wb-js .wb-scope [data-wb-frameparallax] img{
    position:absolute; left:50%; top:50%; translate:-50% -50%;
    width:100%; height:auto; min-height:100%; max-width:none; aspect-ratio:auto; object-fit:cover;
  }
  /* x pan: the JS sets the attr to "x" when the image is wider than the frame */
  html.wb-js .wb-scope [data-wb-frameparallax="x"] img{
    width:auto; height:100%; min-width:100%; min-height:0;
  }
}
/* Static fallbacks: the SAME whole-image state three ways (no JS, reduced
   motion, mobile). The doubled attribute bumps specificity past the
   .wb-hero__frame--wide 16/10 box ratio without touching those rules. */
html:not(.wb-js) .wb-scope [data-wb-frameparallax][data-wb-frameparallax]{ aspect-ratio:auto; }
html:not(.wb-js) .wb-scope [data-wb-frameparallax] img{ position:static; width:100%; height:auto; min-height:0; min-width:0; aspect-ratio:auto; translate:none; transform:none; }
@media (prefers-reduced-motion:reduce){
  .wb-scope [data-wb-frameparallax][data-wb-frameparallax]{ aspect-ratio:auto; }
  .wb-scope [data-wb-frameparallax] img{ position:static; width:100%; height:auto; min-height:0; min-width:0; aspect-ratio:auto; translate:none; transform:none; }
}
@media (max-width:960px){
  .wb-scope [data-wb-frameparallax][data-wb-frameparallax]{ aspect-ratio:auto; }
  .wb-scope [data-wb-frameparallax] img{ position:static; width:100%; height:auto; min-height:0; min-width:0; aspect-ratio:auto; translate:none; transform:none; }
}
/* A tagged box inside a .wb-split--balance media cell (how-we-do-business
   bands 2 + 7): in enhanced mode the flex stretch gives the ratio-less box
   its height (the frame matches the copy column) and the absolute img covers
   it. In the three static-fallback contexts the img goes back into flow at
   natural ratio, so the still-stretched box would show its dark background
   as a slab under the photo; center the box so it hugs the img instead. */
html:not(.wb-js) .wb-scope .wb-split--balance .wb-split__media > [data-wb-frameparallax]{ align-self:center; }
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-split--balance .wb-split__media > [data-wb-frameparallax]{ align-self:center; }
}
@media (max-width:960px){
  .wb-scope .wb-split--balance .wb-split__media > [data-wb-frameparallax]{ align-self:center; }
}

/* Work-grid filter chips (case-study gallery, 2026-07-02). One row per facet
   (industry, type of work), single-select, active chip fills red. Sits on the
   light gallery band; initWorkFilter() in overhaul.js toggles the cards. */
.wb-scope .wb-filter{ display:flex; flex-direction:column; gap:.7rem; }
.wb-scope .wb-filter__group{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.wb-scope .wb-filter__label{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--wb-ink-2); min-width:6rem; }
.wb-scope .wb-chip{ appearance:none; cursor:pointer; font:inherit; font-size:.85rem; font-weight:700; line-height:1;
  padding:.5rem .85rem; border-radius:999px; border:1px solid var(--wb-line); background:rgba(255,255,255,.72); color:var(--wb-ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease; }
.wb-scope .wb-chip:hover{ border-color:var(--wb-red); color:var(--wb-red); }
.wb-scope .wb-chip.is-active{ background:var(--wb-red); border-color:var(--wb-red); color:#fff; }
.wb-scope .wb-chip:active{ transform:translateY(1px); }
.wb-scope .wb-filter__empty{ margin:.4rem 0 0; font-weight:600; color:var(--wb-ink-2); }
/* Free-text search box (shared by /work/ + /solutions/). */
.wb-scope .wb-filter__search{ position:relative; max-width:26rem; width:100%; }
.wb-scope .wb-filter__ico{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--wb-ink-2); font-size:.9rem; pointer-events:none; }
.wb-scope .wb-filter__input{ width:100%; font:inherit; font-size:.95rem; padding:.6rem 1rem .6rem 2.5rem; border-radius:999px; border:1px solid var(--wb-line); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); color:var(--wb-ink); transition:border-color .15s ease, box-shadow .15s ease; }
.wb-scope .wb-filter__input:focus{ outline:none; border-color:var(--wb-red); box-shadow:0 0 0 3px rgba(200,16,46,.14); }
.wb-scope .wb-filter__input::placeholder{ color:var(--wb-ink-2); opacity:.75; }
@media (max-width:620px){ .wb-scope .wb-filter__label{ min-width:0; width:100%; margin-bottom:.1rem; } }
/* Homepage FAQ band (build/34): first answers visible, rest as .wb-disclose toggles. */
.wb-scope .wb-faq{ max-width:52rem; }
/* #156 (owner 2026-07-14): compact homepage proof snippets that replaced the big-box
   "Proof" band. Named client + one-line result + arrow, two columns, no cards. */
.wb-scope .wb-home-snips{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.7rem 2.4rem; grid-template-columns:1fr; }
@media (min-width:760px){ .wb-scope .wb-home-snips{ grid-template-columns:1fr 1fr; } }
.wb-scope .wb-home-snips a{ display:block; color:var(--wb-ink); text-decoration:none; line-height:1.5; padding:.15rem 0; }
.wb-scope .wb-home-snips a strong{ color:var(--wb-ink); font-family:var(--wb-display); }
.wb-scope .wb-home-snips a .wb-home-snips__r{ color:var(--wb-muted); }
.wb-scope .wb-home-snips a i{ color:var(--wb-red); font-size:.8em; margin-left:.25rem; transition:transform .15s ease; }
.wb-scope .wb-home-snips a:hover strong{ color:var(--wb-red); }
.wb-scope .wb-home-snips a:hover i{ transform:translateX(3px); }
.wb-scope .wb-faq__item{ border-top:1px solid var(--wb-line); padding:1.1rem 0; }
.wb-scope .wb-faq__item .wb-h3{ margin:0; }
.wb-scope .wb-faq__item p{ margin-top:.5rem; color:var(--wb-ink-2); }
/* #155 (owner 2026-07-14): the FAQ answer is dark ink (built for its old light band);
   after the FAQ moved into the dark metal CTA (#152) it read dark-grey-on-dark. Flip
   the answer to light on dark/honeycomb grounds; the border also lightens. */
.wb-scope .wb-band--dark .wb-faq__item p,
.wb-scope .wb-band--honeycomb .wb-faq__item p{ color:rgba(255,255,255,.82); }
.wb-scope .wb-band--dark .wb-faq__item,
.wb-scope .wb-band--honeycomb .wb-faq__item{ border-top-color:rgba(255,255,255,.16); }
/* Hero ask row (feedback #85): WGSD lockup to the LEFT of the search, single column. */
.wb-scope .wb-hero-ask-row{ display:flex; align-items:center; gap:clamp(1rem, 2vw, 2.4rem); flex-wrap:wrap; max-width:54rem; }
.wb-scope .wb-hero-ask__wgsd{ flex:0 0 auto; display:block; }
.wb-scope .wb-hero-ask__wgsd img{ display:block; width:clamp(120px, 13vw, 176px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
.wb-scope .wb-hero-ask-row .wb-hero-ask{ flex:1 1 340px; margin-top:0; max-width:none; }
@media (max-width:600px){ .wb-scope .wb-hero-ask__wgsd img{ width:112px; } }

/* ---- HERO ASK, FOCAL (owner: search + WGSD promoted ABOVE the H1 as the main
   focus, with breathing room; WGSD sized by HEIGHT so it matches the search). ---- */
.wb-scope .wb-hero-ask-row--focal{ align-items:center; gap:clamp(1.1rem, 1vw + .7rem, 2rem); flex-wrap:wrap; max-width:60rem; margin:clamp(.3rem, .5vw, .8rem) 0 clamp(1.7rem, 1rem + 2.2vw, 2.8rem); }
.wb-scope .wb-hero-ask-row--focal .wb-hero-ask__wgsd img{ width:auto; height:clamp(90px, 8.5vw, 124px); }
.wb-scope .wb-hero-ask-row--focal .wb-hero-ask{ flex:1 1 360px; margin-top:0; max-width:none; position:relative; }
.wb-scope .wb-hero-ask-row--focal .wb-hero-ask__q{ font-size:clamp(1.45rem, 1.1rem + 1.15vw, 2.15rem); line-height:1.12; margin-bottom:.75rem; text-shadow:0 2px 20px rgba(0,0,0,.5); }
.wb-scope .wb-hero-ask__q-em{ color:#ff5a61; position:relative; white-space:nowrap; }
.wb-scope .wb-hero-ask__q-em::after{ content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.09em; background:currentColor; border-radius:2px; opacity:.55; }
.wb-scope .wb-hero-ask-row--focal .wb-hero-ask__row{ padding:.5rem .5rem .5rem 1.25rem; box-shadow:0 24px 58px -16px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.1); }
.wb-scope .wb-hero-ask-row--focal .wb-hero-ask__input{ font-size:1.08rem; padding:.82rem .2rem; }
.wb-scope .wb-hero-ask-row--focal .wb-hero-ask__go{ padding:.86rem 1.5rem; font-size:1rem; }
@media (max-width:560px){ .wb-scope .wb-hero-ask-row--focal .wb-hero-ask__wgsd img{ height:70px; } }

/* AJAX live results, absolute dropdown anchored under the search pill (initHeroAsk). */
.wb-scope .wb-hero-ask__field{ position:relative; }
.wb-scope .wb-hero-ask__results{ position:absolute; left:0; right:0; top:calc(100% + .5rem); z-index:30; display:none; background:#fff; border-radius:16px; box-shadow:0 30px 70px -18px rgba(0,0,0,.62), 0 0 0 1px rgba(20,24,31,.06); overflow:hidden; max-height:min(58vh, 430px); overflow-y:auto; text-align:left; }
.wb-scope .wb-hero-ask__results.is-open{ display:block; }
.wb-scope .wb-hero-ask__res{ display:flex; align-items:center; gap:.8rem; padding:.65rem 1.1rem; text-decoration:none; color:var(--wb-ink); border-bottom:1px solid rgba(20,24,31,.07); transition:background .12s ease; }
.wb-scope .wb-hero-ask__res-img{ flex:0 0 auto; width:58px; height:44px; object-fit:cover; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.wb-scope .wb-hero-ask__res-body{ min-width:0; }
.wb-scope .wb-hero-ask__res:hover, .wb-scope .wb-hero-ask__res.is-active{ background:rgba(216,35,42,.06); }
.wb-scope .wb-hero-ask__res-cat{ display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--wb-red); margin-bottom:.15rem; }
.wb-scope .wb-hero-ask__res-t{ display:block; font-weight:700; font-size:1rem; line-height:1.25; color:var(--wb-ink); }
.wb-scope .wb-hero-ask__res-s{ display:block; font-size:.86rem; color:var(--wb-ink-2); line-height:1.4; margin-top:.15rem; }
.wb-scope .wb-hero-ask__res-s mark{ background:rgba(216,35,42,.16); color:inherit; padding:0 .1em; border-radius:3px; }
.wb-scope .wb-hero-ask__res-all{ display:block; padding:.78rem 1.1rem; font-weight:700; font-size:.9rem; color:var(--wb-red); text-decoration:none; background:rgba(20,24,31,.03); }
.wb-scope .wb-hero-ask__res-empty{ padding:.9rem 1.1rem; font-size:.92rem; color:var(--wb-ink-2); line-height:1.45; }
.wb-scope .wb-hero-ask__res-empty a{ color:var(--wb-red); font-weight:600; }

/* Owner: make the video HERO a full, consistent height so the video visibly COVERS
   the whole section (object-fit:cover already fills whatever height the band is; it
   just had no min-height, so a short copy column left the band short). */
.wb-scope .wb-band--video.wb-band--dark{ min-height:clamp(600px, 84vh, 880px); display:flex; flex-direction:column; justify-content:center; }
/* Guided-nav next-step, MERGED into the page close (build/35; owner feedback #117:
   "make these all blend into the section above much nicer and cleaner"). A flat
   tone can never match a gradient along a horizontal seam: the July-6 #15171a
   "end tone match" still banded against the 160deg --wb-dark-grad (a diagonal
   gradient has DIFFERENT tones along its bottom edge), and anti-aliasing added a
   hairline. So the endcard now paints NOTHING at all: it is a zero-height in-flow
   anchor, and its line is absolutely pinned INSIDE the previous band's bottom
   padding. One painted surface = no seam, on dark AND light closes alike. The
   endcard adds no flow height, so the footer still starts exactly at the band's
   bottom edge and nothing can ever show through behind the text (the failure that
   killed the old negative-margin overlay, see 2026-07-06 note in git history). */
.wb-scope .wb-reco--merged{ background:none; height:0; margin:0; padding:0; overflow:visible; position:relative; z-index:2; }
.wb-scope .wb-reco--merged .wb-inner{ position:absolute; bottom:0; left:1.25rem; right:1.25rem; margin-inline:auto; max-width:var(--wb-maxw); padding:0 0 clamp(2rem, 1.3rem + 1.8vw, 3rem); }
/* The band the line rides in gets extra bottom room so the pinned line always sits
   in clear space below the band's own CTA copy (sized for the worst case: a long
   reason wrapping to 3-4 lines on a narrow phone, hence the reversed clamp() that
   GROWS as the viewport shrinks). Selector = the LAST real band before the endcard;
   sibling-tolerant on purpose (hidden team-page modals or a related-stories band can
   sit between them, so plain `+` adjacency is not enough). :has() is already
   load-bearing elsewhere (hero-summary band padding, hero-ask z-lift). */
.wb-scope .wb-band:not(.wb-reco):has(~ .wb-reco--merged):not(:has(~ .wb-band:not(.wb-reco))){ padding-bottom:calc(var(--wb-pad) + clamp(4rem, 8rem - 4vw, 6.5rem)); }
.wb-scope .wb-reco__line{ margin:0; padding:0; border-top:0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.35rem .7rem; text-align:center; }   /* owner 2026-07-06: no rule/underline anywhere near this line; whitespace does the separating */
.wb-scope .wb-reco__label{ font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.6); }
.wb-scope .wb-reco__go{ font-weight:600; font-size:clamp(1rem, .95rem + .3vw, 1.16rem); line-height:1.4; color:#fff; text-decoration:none; transition:color .18s ease; }   /* owner 2026-07-08: the persistent underline read as a full-width grey rule (the link is a blockified flex item); underline on hover only */
.wb-scope .wb-reco__go:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.7); }
.wb-scope .wb-reco__go i{ margin-left:.35rem; font-size:.82em; color:var(--wb-red-lt); }
/* Ink flip: ~10 pages close on a LIGHT band (wb-band--light, or the gray related-
   stories band on banking-financial). The line rides that light ground there, so
   the white inks flip to the dark ink set. Adjacency (`+`) is safe here: every
   light-close page has the band directly before the endcard. */
.wb-scope .wb-band--light + .wb-reco--merged .wb-reco__label,
.wb-scope .wb-band--white + .wb-reco--merged .wb-reco__label,
.wb-scope .wb-band--gray  + .wb-reco--merged .wb-reco__label,
.wb-scope .wb-band--quilt + .wb-reco--merged .wb-reco__label{ color:rgba(20,24,31,.6); }
.wb-scope .wb-band--light + .wb-reco--merged .wb-reco__go,
.wb-scope .wb-band--white + .wb-reco--merged .wb-reco__go,
.wb-scope .wb-band--gray  + .wb-reco--merged .wb-reco__go,
.wb-scope .wb-band--quilt + .wb-reco--merged .wb-reco__go{ color:var(--wb-ink); }
.wb-scope .wb-band--light + .wb-reco--merged .wb-reco__go:hover,
.wb-scope .wb-band--white + .wb-reco--merged .wb-reco__go:hover,
.wb-scope .wb-band--gray  + .wb-reco--merged .wb-reco__go:hover,
.wb-scope .wb-band--quilt + .wb-reco--merged .wb-reco__go:hover{ text-decoration-color:rgba(20,24,31,.55); }

/* #58 quote landing: category cards, an icon badge + title + a get-a-price cta,
   centered inside a glass link card. Replaces the legacy .img-circle tiles. */
.wb-scope .wb-quote-cat{ text-align:center; align-items:center; }
.wb-scope .wb-quote-cat__icon{ display:inline-flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; background:var(--wb-red-grad); box-shadow:0 12px 26px rgba(216,35,42,.28); margin:0 0 var(--wb-space-2); }
.wb-scope .wb-quote-cat__icon img{ width:44%; height:auto; filter:brightness(0) invert(1); }
.wb-scope .wb-quote-cat .wb-card-cta{ margin-top:var(--wb-space-2); }
/* Small inline form-status note (e.g. "you have been logged out"). */
.wb-scope .wb-note{ display:block; margin:0 0 var(--wb-space-3); padding:.7rem 1rem; border-radius:12px; font-weight:600; font-size:.95rem; background:rgba(20,29,33,.06); color:var(--wb-ink); }
.wb-scope .wb-note--ok{ background:rgba(22,150,90,.12); color:#0f7a45; }


/* ================================================================
   HERO DESIGN VARIANTS  (build/36 committee review tool)
   ----------------------------------------------------------------
   The homepage hero band renders one .wb-hero-var per committee
   option; only the .is-active one displays (JS flips it via the
   fixed switcher, ?hero=N, or localStorage). The live build ships a
   single variant, so none of this affects production. Per-variant
   styles are scoped .wb-hv--N (content) / .wb-hero-vN (band level).
   ================================================================ */
/* Specificity note: the video-band cover fix sets .wb-scope .wb-band--video
   .wb-inner.wb-hero__summary{display:block} at (0,4,0), so these must match or
   beat it: the hide rule ties at (0,4,0) and sits later in the file, the show
   rule outranks everything at (0,5,0). */
.wb-scope [data-wb-hero-band] .wb-inner.wb-hero-var{ display:none; }
.wb-scope [data-wb-hero-band] .wb-inner.wb-hero-var.is-active{ display:block; }
/* When an ask dropdown is OPEN and extends past the hero band's bottom edge,
   the NEXT band (position:relative; z-index:1, later DOM) would paint over it.
   Lift the hero band only while a dropdown is open, so the slant-seam art
   stacks normally the rest of the time. (:has() is progressive: without it
   you just get today's behavior.) */
.wb-scope [data-wb-hero-band]:has(.wb-hero-ask__results.is-open){ z-index:6; overflow:visible; }

/* Slim in-hero proof strip (variant 1 "Receipts", grafted into 5): three
   cells under a hairline, quiet enough not to fight the search focal. */
.wb-scope .wb-hv-proof{ display:flex; gap:clamp(1.2rem, 2.5vw, 3rem); flex-wrap:wrap; margin-top:clamp(1.6rem, 1rem + 2vw, 2.6rem); padding-top:clamp(1rem, .7rem + 1vw, 1.5rem); border-top:1px solid rgba(255,255,255,.18); max-width:54rem; }
.wb-scope .wb-hv-proof__cell{ flex:1 1 150px; min-width:130px; }
.wb-scope .wb-hv-proof__num{ display:block; font-family:var(--wb-display); font-weight:800; font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); color:#fff; line-height:1; }
.wb-scope .wb-hv-proof__label{ display:block; margin-top:.35rem; font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.75); font-weight:700; }
@media (max-width:560px){
  .wb-scope .wb-hv-proof{ gap:.7rem; }
  .wb-scope .wb-hv-proof__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.6rem; }
  .wb-scope .wb-hv-proof__num{ font-size:1.35rem; }
}

/* The floating switcher (review builds only; left edge, clear of the
   feedback launcher at bottom-left and the section rail on the right). */
.wb-scope .wb-hero-switch{ position:fixed; left:10px; top:50%; transform:translateY(-50%); z-index:2147480000; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 7px; background:rgba(14,16,22,.92); border:1px solid rgba(255,255,255,.14); border-radius:22px; box-shadow:0 14px 40px -12px rgba(0,0,0,.65); backdrop-filter:blur(6px);
  /* Owner 2026-07-04: 37 options outgrew the viewport; the pill scrolls. */
  max-height:min(70vh, calc(100vh - 190px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) transparent; }   /* owner 2026-07-06: shorter, never reaches the feedback launcher zone */
.wb-scope .wb-hero-switch::-webkit-scrollbar{ width:5px; }
.wb-scope .wb-hero-switch::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.24); border-radius:3px; }
.wb-scope .wb-hero-switch__tag,
.wb-scope .wb-hero-switch__sort{ position:sticky; top:-10px; z-index:2; }
.wb-scope .wb-hero-switch__tag{ padding:10px 10px 2px; margin:-10px -7px 2px; background:rgba(14,16,22,.97); border-radius:20px 20px 0 0; align-self:stretch; text-align:center; }
.wb-scope .wb-hero-switch__sort{ top:16px; background:rgba(14,16,22,.97); }
.wb-scope .wb-hero-switch__tag{ font-family:var(--wb-display); font-weight:800; font-size:9px; line-height:1; letter-spacing:.12em; color:rgba(255,255,255,.55); margin-bottom:2px; }
.wb-scope .wb-hero-switch button{ position:relative; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:transparent; color:#fff; font-family:inherit; font-weight:700; font-size:12px; line-height:1; cursor:pointer; padding:0; transition:background .12s ease, transform .12s ease; }
.wb-scope .wb-hero-switch button:hover{ background:rgba(255,255,255,.14); transform:scale(1.08); }
.wb-scope .wb-hero-switch button.is-on{ background:var(--wb-red); border-color:transparent; }
.wb-scope .wb-hero-switch button::after{ content:attr(data-hero-tip); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); white-space:nowrap; background:rgba(14,16,22,.95); color:#fff; font-weight:600; font-size:11px; line-height:1.2; padding:6px 9px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.wb-scope .wb-hero-switch button:hover::after{ opacity:1; }
@media (max-width:767px){
  .wb-scope .wb-hero-switch{ left:6px; padding:8px 5px; gap:5px; }
  .wb-scope .wb-hero-switch button{ width:24px; height:24px; font-size:11px; }
  .wb-scope .wb-hero-switch button::after{ display:none; }
}


/* ---- Variant 1 "Receipts in the Hero" (build/36 winner). Everything reuses
   shipped components (focal ask row, wb-hv-proof); the only addition is room
   for the retention cell, whose approved wording runs longer than the two
   numeric labels beside it, so it wraps on two calm lines instead of four. */
.wb-scope .wb-hv--1 .wb-hv-proof__cell:last-child{ flex:1.6 1 220px; }
.wb-scope .wb-hv--1 .wb-hv-proof__cell:last-child .wb-hv-proof__label{ max-width:26ch; }
@media (max-width:560px){
  .wb-scope .wb-hv--1 .wb-hv-proof__cell:last-child .wb-hv-proof__label{ max-width:none; }
}


/* ---- VARIANT 2 "Say It Out Loud" (build/36 option 2): compact or-divider +
   secondary tel: pill under the search. The search pill stays visually primary;
   the call pill is ghost glass, a touch shorter, same radius family (graft 1). ---- */
.wb-scope .wb-hv--2 .wb-hv2-or{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.9rem 0; }
.wb-scope .wb-hv--2 .wb-hv2-or::before,
.wb-scope .wb-hv--2 .wb-hv2-or::after{ content:""; flex:0 0 52px; height:1px; background:rgba(255,255,255,.28); }
.wb-scope .wb-hv--2 .wb-hv2-or span{ font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); line-height:1; }
.wb-scope .wb-hv--2 .wb-hv2-call{ display:flex; align-items:center; gap:.7rem; padding:.62rem 1.25rem; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff; text-decoration:none; font-size:.98rem; line-height:1.3; box-shadow:0 12px 30px -14px rgba(0,0,0,.5); transition:background .15s ease, border-color .15s ease; }
.wb-scope .wb-hv--2 .wb-hv2-call:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); }
.wb-scope .wb-hv--2 .wb-hv2-call:active{ transform:translateY(1px); }
.wb-scope .wb-hv--2 .wb-hv2-call__icon{ flex:0 0 auto; font-size:.95rem; color:rgba(255,255,255,.85); }
.wb-scope .wb-hv--2 .wb-hv2-call strong{ font-weight:800; white-space:nowrap; }
.wb-scope .wb-hv--2 .wb-hero-ask__note{ margin-top:.9rem; }

/* Mobile (390px): one column; the CALL pill jumps ABOVE the search since dialing
   is the native phone gesture (spec). Explicit orders keep the label first. */
@media (max-width:560px){
	.wb-scope .wb-hv--2 .wb-hero-ask{ display:flex; flex-direction:column; }
	.wb-scope .wb-hv--2 .wb-hero-ask__q{ order:1; }
	.wb-scope .wb-hv--2 .wb-hv2-call{ order:2; justify-content:center; text-align:center; }
	.wb-scope .wb-hv--2 .wb-hv2-or{ order:3; margin:.8rem 0; }
	.wb-scope .wb-hv--2 .wb-hero-ask__field{ order:4; }
	.wb-scope .wb-hv--2 .wb-hero-ask__note{ order:5; }
}


/* Variant 3 "One Question" (build/36): quick-link chips under the search pill
   (graft 2). Graft 1 keeps the composition left-anchored, so the shipped left
   scrim and the focal ask row are reused untouched; chips are the only new styles. */
.wb-scope .wb-hv--1 .wb-hv3-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0 0; }
.wb-scope .wb-hv--1 .wb-hv3-chip{ display:inline-block; padding:.38rem .95rem; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font-size:.85rem; font-weight:700; line-height:1.2; text-decoration:none; transition:background .12s ease, border-color .12s ease; }
.wb-scope .wb-hv--1 .wb-hv3-chip:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55); }
@media (max-width:560px){
  .wb-scope .wb-hv--1 .wb-hv3-chips{ gap:.45rem; }
  .wb-scope .wb-hv--1 .wb-hv3-chip{ font-size:.82rem; padding:.34rem .8rem; }
}


/* ---- VARIANT 4, "The Front Desk" (build/36): 55/45 split stage. Identity
   column left (kicker, short H1, lead, red phone-first button); a white
   front-desk card right holding the WGSD lockup LEFT of the search (graft 1,
   Jg #85), three quick-link chips, and the quiet talk line. The red offset
   frame reuses the wb-hero__frame trick: red ::before behind a z-raised white
   face; the outer margins reserve the 20px overhang. Own wb-hv4-* classes, so
   the 960px .wb-hero__wgsd hide rule and the focal-row styles never apply. */
.wb-scope .wb-hv--4 .wb-hv4-grid{ display:grid; grid-template-columns:minmax(0, 55fr) minmax(0, 45fr); gap:clamp(1.75rem, 1rem + 3vw, 4rem); align-items:center; }
.wb-scope .wb-hv--4 .wb-hv4-panel{ position:relative; margin:0 20px 20px 0; }
.wb-scope .wb-hv--4 .wb-hv4-panel::before{ content:""; position:absolute; inset:0; transform:translate(20px, 20px); border-radius:18px; background:var(--wb-red); z-index:0; }
.wb-scope .wb-hv--4 .wb-hv4-card{ position:relative; z-index:1; background:#fff; border-radius:18px; padding:clamp(1.3rem, 1rem + 1.2vw, 2rem); box-shadow:0 26px 60px rgba(0,0,0,.45); }
/* Graft 1: dark WGSD art beside the search, height-matched to the label +
   pill block. The lockup is a near-square stacked mark, so height drives it. */
.wb-scope .wb-hv--4 .wb-hv4-askrow{ display:flex; align-items:center; gap:clamp(.9rem, .6rem + 1vw, 1.4rem); flex-wrap:wrap; }
.wb-scope .wb-hv--4 .wb-hv4-wgsd{ flex:0 0 auto; display:block; }
.wb-scope .wb-hv--4 .wb-hv4-wgsd img{ display:block; width:auto; height:clamp(84px, 6vw + 40px, 118px); }
.wb-scope .wb-hv--4 .wb-hero-ask{ flex:1 1 240px; margin-top:0; max-width:none; }
/* The shared ask component sits on WHITE here: dark label, hairline pill edge. */
.wb-scope .wb-hv--4 .wb-hero-ask__q{ color:var(--wb-ink); font-size:clamp(1.15rem, 1rem + .55vw, 1.45rem); }
.wb-scope .wb-hv--4 .wb-hero-ask__row{ background:#fff; box-shadow:0 10px 24px -14px rgba(0,0,0,.35), 0 0 0 1px rgba(20,24,31,.14); }
/* Quick-link chips: the breadth made explicit for visitors who will not type. */
.wb-scope .wb-hv--4 .wb-hv4-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0 0; }
.wb-scope .wb-hv--4 .wb-hv4-chip{ display:inline-block; padding:.42rem .95rem; border-radius:999px; background:rgba(20,24,31,.05); border:1px solid rgba(20,24,31,.14); color:var(--wb-ink); font-weight:700; font-size:.88rem; line-height:1.2; text-decoration:none; transition:background .12s ease, border-color .12s ease, color .12s ease; }
.wb-scope .wb-hv--4 .wb-hv4-chip:hover{ background:var(--wb-red); border-color:var(--wb-red); color:#fff; }
/* Quiet talk line, dark on the white card. */
.wb-scope .wb-hv--4 .wb-hv4-small{ margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid rgba(20,24,31,.1); font-size:.85rem; line-height:1.5; color:var(--wb-ink-2); }
.wb-scope .wb-hv--4 .wb-hv4-small a{ color:var(--wb-red); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:960px){
  .wb-scope .wb-hv--4 .wb-hv4-grid{ grid-template-columns:minmax(0, 1fr); gap:2rem; }
  .wb-scope .wb-hv--4 .wb-hv4-panel{ max-width:36rem; }
}
@media (max-width:560px){
  /* Graft 2: the ask card orders ABOVE the identity column so the search is
     never buried below the fold on a phone. Offset frame trims to 12px. */
  .wb-scope .wb-hv--4 .wb-hv4-panel{ order:-1; margin:0 12px 12px 0; max-width:none; }
  .wb-scope .wb-hv--4 .wb-hv4-panel::before{ transform:translate(12px, 12px); }
  .wb-scope .wb-hv--4 .wb-hv4-wgsd img{ height:auto; width:140px; }
  .wb-scope .wb-hv--4 .wb-hv4-grid{ gap:1.5rem; }
}


/* ---- Variant 5 "The Spirk Line" (build/36 option 5 + both grafts):
   identity-first order (kicker, H1, lead, red call button), then the shared
   focal ask row and proof strip pulled tight so the search stays on screen
   one. Hold the ~33-character H1 to one line at desktop widths; under 560px
   the page-summary mobile rule flattens the metal text and lets it wrap. */
.wb-scope .wb-hv--5 .wb-h1{ margin:0 0 .4em; }
@media (min-width:561px){ .wb-scope .wb-hv--5 .wb-h1{ font-size:clamp(2rem, 1.2rem + 2vw, 2.9rem); } }
.wb-scope .wb-hv--5 .wb-lead--bright{ margin-bottom:.9rem; }
/* Graft 2: the tel: button hugs the lead, modest gap before the ask row. */
.wb-scope .wb-hv--5 .wb-btn-row{ margin:0 0 clamp(1.1rem, .8rem + 1.2vw, 1.7rem); }
/* The focal row drops its big built-in bottom margin; the proof hairline
   provides the separation, with a band-level top-margin trim per build/36. */
.wb-scope .wb-hv--5 .wb-hero-ask-row--focal{ margin-top:0; margin-bottom:0; }
.wb-scope .wb-hero-v5 .wb-hv-proof{ margin-top:clamp(1rem, .7rem + 1vw, 1.6rem); }
@media (max-width:560px){
	.wb-scope .wb-hv--5 .wb-btn-row .wb-btn{ width:100%; justify-content:center; }
}


/* ---- Variant 6 "Fill In The Stuff" (build/37 winner, big-type-poster).
   Full-viewport Swiss press poster: WE GET / [the live search pill] / DONE.
   in giant Montserrat 900 (CSS text via --wb-display, never images); the one
   photo on screen is ink INSIDE the DONE. letterforms (background-clip:text
   over images/overhaul/hero37/done-ink-*.webp, solid brand-red fallback via
   @supports). The press-proof garnish (crop marks, CMYK control squares,
   slug line) is cut per the owner 2026-07-04 (build/38: production may never
   be the frame); only the job-ticket strip remains, and its contents are
   years, jobs, and the phone, which is fine. The band's shared video + scrim
   are hidden and replaced with milled metal at ~7% over #0e0f11 (band-level,
   .wb-hero-v6 only; !important beats the section's inline background-image).
   Giant <p> rows need font-family !important because fonts-modern.css pins
   p to Inter. Under 640px (spec mobile plan): the counter-shear and the ink
   pan are dropped; the pill goes full-width with a square arrow submit; the
   ticket strip becomes three ruled single-line rows. */
.wb-scope .wb-hero-v6 .wb-band__video-wrap,
.wb-scope .wb-hero-v6 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v6.wb-band--video{
  background:linear-gradient(rgba(14,15,17,.93), rgba(14,15,17,.93)),
             #0e0f11 url("../images/overhaul/tex-metallic-lines.webp") center/420px repeat !important;
}
.wb-scope .wb-hv--6{ position:relative; padding:clamp(.4rem, 1vw, 1.2rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--6 .wb-hv6-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule. */
.wb-scope .wb-hv--6 .wb-hv6-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(.7rem, .5rem + .7vw, 1.2rem); padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--6 .wb-hv6-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel + sheen),
   flush left, fills the column. Stamps in (scale 1.06 to 1) when revealed; the
   switcher force-adds .is-in, so it replays on flip and never gates legibility. */
.wb-scope .wb-hv--6 .wb-hv6-we{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(3rem, 9.5vw, 8.25rem); line-height:.92; letter-spacing:-.03em;
  transform-origin:left center;
}
@keyframes wb-hv6-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--6 .wb-hv6-we.is-in{ animation:wb-hv6-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost deliverable types in red 900 caps (JS swaps the PLACEHOLDER only,
   styled below, so the caret glyph reads red too). z-index lifts the form's
   stacking context (data-reveal will-change) above the DONE. row so the live
   AJAX dropdown is never painted under it. */
.wb-scope .wb-hv--6 .wb-hero-ask{ max-width:none; margin-top:clamp(.9rem, .6rem + 1vw, 1.6rem); position:relative; z-index:5; }
.wb-scope .wb-hv--6 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.76rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#ff5a61; margin:0 0 .5rem; text-shadow:none; }
.wb-scope .wb-hv--6 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--6 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--6 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.7rem .2rem; }
.wb-scope .wb-hv--6 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--6 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.85rem, .6rem + .8vw, 1.25rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--6 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
.wb-scope .wb-hv--6 .wb-hero-ask__note{ margin-top:.65rem; }
/* Row two: DONE. filled with the ink photo, the period a solid red block,
   the WGSD seal rubber-stamped on its shoulder. Base = solid red (the
   no-clip fallback); @supports upgrades to the photo ink + slow pan. */
.wb-scope .wb-hv--6 .wb-hv6-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.8rem, .5rem + .9vw, 1.4rem) 0 0; }
.wb-scope .wb-hv--6 .wb-hv6-done{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(3.4rem, 11.5vw, 9.5rem); line-height:.88; letter-spacing:-.03em;
  color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* Owner 2026-07-03: a DIFFERENT real photo inks each letter (D press floor,
     O the CMYK ink system, N the Karns truck wrap, E a booth). Staggered pan
     delays so the four never move in lockstep. */
  .wb-scope .wb-hv--6 .wb-hv6-l{
    background:#15161a center 42%/cover no-repeat;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    -webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
    animation:wb-hv6-inkpan 26s ease-in-out infinite alternate;
  }
  .wb-scope .wb-hv--6 .wb-hv6-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
  .wb-scope .wb-hv--6 .wb-hv6-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
  .wb-scope .wb-hv--6 .wb-hv6-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
  .wb-scope .wb-hv--6 .wb-hv6-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
  .wb-scope .wb-hv--6 .wb-hv6-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
  @media (max-width:640px){
    .wb-scope .wb-hv--6 .wb-hv6-l{ animation:none; }
  }
}
@keyframes wb-hv6-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv6-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--6 .wb-hv6-donerow.is-in .wb-hv6-done{ animation:wb-hv6-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--6 .wb-hv6-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--6 .wb-hv6-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv6-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--6 .wb-hv6-donerow.is-in .wb-hv6-seal{ animation:wb-hv6-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* Lead, 44ch measure. */
.wb-scope .wb-hv--6 .wb-hv6-lead{ max-width:44ch; margin-top:clamp(.9rem, .6rem + .9vw, 1.4rem); }
/* Job-ticket strip: three ruled cells under a hairline. */
.wb-scope .wb-hv--6 .wb-hv6-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(1rem, .7rem + 1vw, 1.6rem); padding-top:clamp(.9rem, .6rem + 1vw, 1.4rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--6 .wb-hv6-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--6 .wb-hv6-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-hv--6 .wb-hv6-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--6 .wb-hv6-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--6 .wb-hv6-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; counter-shear and ink pan dropped (retention lives
   in the ticket strip at every width). */
@media (max-width:640px){
  .wb-scope .wb-hv--6 .wb-hv6-go-txt{ display:none; }
  .wb-scope .wb-hv--6 .wb-hv6-we,
  .wb-scope .wb-hv--6 .wb-hv6-donerow{ transform:none !important; }
  .wb-scope .wb-hv--6 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
  .wb-scope .wb-hv--6 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1.05rem, 4.2vw, 1.5rem); padding:.55rem .1rem; }
  .wb-scope .wb-hv--6 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
  .wb-scope .wb-hv--6 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
  .wb-scope .wb-hv--6 .wb-hv6-seal img{ width:84px; }
  .wb-scope .wb-hv--6 .wb-hv6-ticket{ gap:0; }
  .wb-scope .wb-hv--6 .wb-hv6-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
  .wb-scope .wb-hv--6 .wb-hv6-ticket__cell + .wb-hv6-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
  .wb-scope .wb-hv--6 .wb-hv6-ticket__num{ font-size:1.15rem; }
  .wb-scope .wb-hv--6 .wb-hv6-ticket__label{ margin-top:0; max-width:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt,
   no ink pan (the reveal/count systems already stand down globally). */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--6 .wb-hv6-we.is-in,
  .wb-scope .wb-hv--6 .wb-hv6-done,
  .wb-scope .wb-hv--6 .wb-hv6-l,
  .wb-scope .wb-hv--6 .wb-hv6-donerow.is-in .wb-hv6-done,
  .wb-scope .wb-hv--6 .wb-hv6-donerow.is-in .wb-hv6-seal{ animation:none !important; }
}

/* Review fix (blocker): the mobile plan drops the ink pan, but the .is-in rule
   above is (0,5,0) and outguns the @supports mobile animation:none at (0,3,0).
   Same selector, later in the cascade, inside max-640: keep the jolt, kill the
   26s background-position pan on phones. */
@media (max-width:640px){
  .wb-scope .wb-hv--6 .wb-hv6-donerow.is-in .wb-hv6-done{ animation:wb-hv6-jolt .3s cubic-bezier(.3,.9,.4,1); }
  .wb-scope .wb-hv--6 .wb-hv6-donerow.is-in .wb-hv6-l{ animation:none; }
}


/* ---- Variant 7 "The Job Board War Room" (build/37, war-room, Content winner 92.0).
   The working agency as the hero: a dimmed board of real finished job tickets on
   the right, the live jobs-done odometer huge in chrome on the left, and exactly
   ONE bright paper object on screen, the open ticket that IS the search. All new
   motion is CSS keyed to display (so it replays on every switcher flip) and fully
   gated behind prefers-reduced-motion; the odometer/reveal/ask reuse shared JS. */

/* Band level: kill the shared video + scrim, hang the dark shop wall (honeycomb
   under a dark wash + the red radial glow upper-left). !important is required,
   the section carries an inline background-image. */
.wb-scope .wb-hero-v7 .wb-band__video-wrap, .wb-scope .wb-hero-v7 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v7.wb-band--video{
  background:
    radial-gradient(52rem 30rem at 8% 0%, rgba(216,35,42,.34), transparent 62%) no-repeat,
    linear-gradient(rgba(5,6,9,.58), rgba(5,6,9,.58)) no-repeat,
    #0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}

/* Layout: copy + the open ticket left (calm and bright), the board right. */
.wb-scope .wb-hv--7 .wb-hv7-grid{ display:grid; grid-template-columns:minmax(0, 54fr) minmax(0, 46fr); gap:clamp(1.75rem, 1rem + 3vw, 4.25rem); align-items:center; }

/* Kicker with the live red pulse dot (the board is on, right now). */
.wb-scope .wb-hv--7 .wb-hv7-kicker{ display:flex; align-items:center; gap:.6em; margin:0 0 .9rem; }
.wb-scope .wb-hv--7 .wb-hv7-live{ flex:0 0 auto; width:.6em; height:.6em; border-radius:50%; background:#ff4a52; box-shadow:0 0 0 0 rgba(255,74,82,.55); animation:wb-hv7-pulse 2.4s ease-out infinite; }
@keyframes wb-hv7-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,74,82,.55); }
  70%{ box-shadow:0 0 0 .6em rgba(255,74,82,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,74,82,0); }
}

/* The hero figure: the live jobs-done odometer, huge chrome, tabular digits so
   the shared count-up never jitters the layout. */
.wb-scope .wb-hv--7 .wb-hv7-count{ margin:0; }
.wb-scope .wb-hv--7 .wb-hv7-count__num{ display:block; font-family:var(--wb-display); font-weight:900; font-size:clamp(3.4rem, 1.2rem + 6.6vw, 7.4rem); line-height:.95; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--7 .wb-hv7-count__label{ display:block; margin-top:.45rem; font-family:var(--wb-display); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* The H1 steps DOWN from the number: the number is the argument. DONE gets the
   red stamp treatment (border + tilt), the page's verb made visible. */
.wb-scope .wb-hv--7 .wb-h1{ font-family:var(--wb-display) !important; /* fonts-modern pins p to Inter */ font-size:clamp(1.55rem, 1.1rem + 1.5vw, 2.35rem); line-height:1.12; margin:clamp(1.1rem, .8rem + 1vw, 1.7rem) 0 0; }
.wb-scope .wb-hv--7 .wb-hv7-doneword{ display:inline-block; padding:.04em .22em; margin-left:.05em; border:.1em solid #ff4a52; border-radius:.14em; color:#ff4a52; letter-spacing:.05em; text-transform:uppercase; transform:rotate(-4deg); }
.wb-scope .wb-hv--7 .wb-hv7-lead{ margin:.9rem 0 0; max-width:56ch; }

/* THE OPEN TICKET: the one paper-white object on the screen; the search IS the
   ticket. Grid areas let the WGSD chop jump into the header strip on a phone
   without duplicate markup. */
.wb-scope .wb-hv--7 .wb-hv7-open{ position:relative; z-index:5; /* review fix: paint the AJAX dropdown above the will-change ticket board */ margin-top:clamp(1.5rem, 1rem + 1.8vw, 2.5rem); max-width:44rem; background:#fdfcf7; border-radius:12px; padding:clamp(1.05rem, .85rem + .9vw, 1.6rem); box-shadow:0 30px 70px -18px rgba(0,0,0,.66), 0 0 0 1px rgba(20,24,31,.08); display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"head head" "wgsd form"; column-gap:clamp(.9rem, .6rem + 1vw, 1.35rem); row-gap:.85rem; align-items:center; }
.wb-scope .wb-hv--7 .wb-hv7-open:focus-within{ box-shadow:0 30px 70px -18px rgba(0,0,0,.66), 0 0 0 1px rgba(20,24,31,.08), 0 0 0 4px rgba(216,35,42,.25); }
.wb-scope .wb-hv--7 .wb-hv7-open__head{ grid-area:head; margin:0; padding-bottom:.6rem; border-bottom:2px dashed rgba(20,24,31,.24); font-family:var(--wb-display) !important; font-weight:800; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--wb-ink); }
.wb-scope .wb-hv--7 .wb-hv7-open__no{ color:var(--wb-red); }
.wb-scope .wb-hv--7 .wb-hv7-open__eq{ color:rgba(20,24,31,.35); letter-spacing:0; }
.wb-scope .wb-hv--7 .wb-hv7-wgsd{ grid-area:wgsd; display:block; transform:rotate(-4deg); }
.wb-scope .wb-hv--7 .wb-hv7-wgsd img{ display:block; width:clamp(84px, 5vw + 44px, 110px); height:auto; }
.wb-scope .wb-hv--7 .wb-hero-ask{ grid-area:form; margin-top:0; max-width:none; }
/* The shared ask restyled for the paper ticket (it ships white-on-dark). */
.wb-scope .wb-hv--7 .wb-hero-ask__q{ color:var(--wb-ink); font-size:clamp(1.08rem, .95rem + .5vw, 1.38rem); margin-bottom:.5rem; }
.wb-scope .wb-hv--7 .wb-hero-ask__q-em{ color:var(--wb-red); }
.wb-scope .wb-hv--7 .wb-hero-ask__row{ background:#fff; box-shadow:0 10px 24px -14px rgba(0,0,0,.4), 0 0 0 1px rgba(20,24,31,.16); }
.wb-scope .wb-hv--7 .wb-hero-ask__note{ color:var(--wb-ink-2); }
.wb-scope .wb-hv--7 .wb-hero-ask__note a{ color:var(--wb-red); }
/* The stamp hand, poised over the ticket's top-right corner; it nudges toward
   the paper when the field takes focus (about to stamp you DONE). */
.wb-scope .wb-hv--7 .wb-hv7-hand{ position:absolute; top:-52px; right:-44px; width:clamp(140px, 9vw + 60px, 200px); height:auto; z-index:3; pointer-events:none; filter:drop-shadow(0 10px 14px rgba(0,0,0,.35)); transform-origin:78% 92%; transition:transform .25s ease; }
/* Owner 2026-07-03: the hand periodically rocks down like it is stamping. */
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-hv--7 .wb-hv7-hand{ animation:wb-hv7-stamprock 3.4s ease-in-out infinite; }
}
@keyframes wb-hv7-stamprock{
  0%, 52%{ transform:rotate(-9deg) translateY(-7px); }
  60%{ transform:rotate(3deg) translateY(5px); }
  66%{ transform:rotate(-1deg) translateY(0); }
  74%, 100%{ transform:rotate(-9deg) translateY(-7px); }
}
.wb-scope .wb-hv--7 .wb-hv7-open:focus-within .wb-hv7-hand{ transform:translate(-7px, 8px) rotate(-3deg); }

/* THE BOARD: four real jobs pinned up, tilted, dimmed to .6 so the open ticket
   stays the only bright object; hover lifts a ticket to full brightness. */
.wb-scope .wb-hv--7 .wb-hv7-board{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(1rem, .7rem + 1.4vw, 1.9rem); align-items:start; }
@media (min-width:1200px){ .wb-scope .wb-hv--7 .wb-hv7-board{ margin-right:-3vw; } }
.wb-scope .wb-hv--7 .wb-hv7-ticket{ --hv7-tilt:-2.2deg; --hv7-y:0px; position:relative; margin:0; background:#f4f1e9; border-radius:6px; padding:.5rem .5rem .55rem; box-shadow:0 18px 40px -16px rgba(0,0,0,.7); transform:rotate(var(--hv7-tilt)) translateY(var(--hv7-y)); filter:none; /* owner 2026-07-03: bright by default */ transition:filter .25s ease, transform .25s ease; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(2){ --hv7-tilt:1.8deg; --hv7-y:16px; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(3){ --hv7-tilt:1.3deg; --hv7-y:-4px; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(4){ --hv7-tilt:-1.6deg; --hv7-y:12px; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:hover{ filter:brightness(1.06); transform:rotate(calc(var(--hv7-tilt) * -1.2)) translateY(calc(var(--hv7-y) - 5px)); z-index:2; /* owner: rotate on hover for interaction */ }
/* the pushpin */
.wb-scope .wb-hv--7 .wb-hv7-ticket::before{ content:""; position:absolute; top:-7px; left:50%; margin-left:-7px; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #f4f6f9, #9aa1ab 65%, #676e78); box-shadow:0 2px 4px rgba(0,0,0,.45); z-index:2; }
.wb-scope .wb-hv--7 .wb-hv7-ticket img{ display:block; width:100%; height:auto; border-radius:3px; }
.wb-scope .wb-hv--7 .wb-hv7-ticket figcaption{ margin-top:.5rem; font-family:var(--wb-display) !important; font-weight:700; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:#43484f; }
/* The DONE stamps thump onto the tickets in a cascade as the board assembles,
   the shift closing out. Keyed to display, so it replays on every switcher
   flip; decorative (aria-hidden) so the pre-thump opacity never hides content. */
.wb-scope .wb-hv--7 .wb-hv7-stamp{ position:absolute; top:.85rem; right:.7rem; z-index:1; padding:.06em .4em; border:3px solid rgba(216,35,42,.92); border-radius:5px; color:#e6303a; background:rgba(253,252,247,.14); font-family:var(--wb-display); font-weight:900; font-size:clamp(.95rem, .8rem + .5vw, 1.25rem); letter-spacing:.16em; text-transform:uppercase; line-height:1.1; transform:rotate(-12deg); animation:wb-hv7-thump .5s cubic-bezier(.2, .9, .3, 1.35) both; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(1) .wb-hv7-stamp{ animation-delay:.6s; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(2) .wb-hv7-stamp{ animation-delay:.8s; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(3) .wb-hv7-stamp{ animation-delay:1s; }
.wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(4) .wb-hv7-stamp{ animation-delay:1.2s; }
@keyframes wb-hv7-thump{
  0%{ opacity:0; transform:rotate(-12deg) scale(1.7); }
  60%{ opacity:1; transform:rotate(-12deg) scale(.92); }
  80%{ transform:rotate(-12deg) scale(1.05); }
  100%{ opacity:1; transform:rotate(-12deg) scale(1); }
}

/* ALWAYS ON THE BOARD: the full-bleed red ticker. Pure CSS marquee (translateX
   0 to -50% over four identical runs = a two-run period, seamless even at
   ultrawide); negative delay so it is already rolling at first paint. */
.wb-scope .wb-hv--7 .wb-hv7-ticker{ display:flex; align-items:stretch; width:100vw; margin-left:calc(50% - 50vw); margin-top:clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem); background:var(--wb-red); color:#fff; overflow:hidden; }
.wb-scope .wb-hv--7 .wb-hv7-ticker__tag{ flex:0 0 auto; display:flex; align-items:center; background:#a3161c; font-family:var(--wb-display); font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding:.6rem 1rem; padding-left:max(1.25rem, calc(50vw - 590px)); white-space:nowrap; }
.wb-scope .wb-hv--7 .wb-hv7-ticker__clip{ flex:1 1 auto; min-width:0; overflow:hidden; display:flex; align-items:center; -webkit-mask-image:linear-gradient(90deg, transparent, #000 3rem); mask-image:linear-gradient(90deg, transparent, #000 3rem); }
.wb-scope .wb-hv--7 .wb-hv7-ticker__track{ display:inline-flex; white-space:nowrap; animation:wb-hv7-ticker 44s linear infinite; animation-delay:-8s; will-change:transform; }
.wb-scope .wb-hv--7 .wb-hv7-ticker:hover .wb-hv7-ticker__track,
.wb-scope .wb-hv--7 .wb-hv7-ticker:focus-within .wb-hv7-ticker__track{ animation-play-state:paused; }
.wb-scope .wb-hv--7 .wb-hv7-ticker__run{ flex:0 0 auto; padding:.6rem 0 .6rem 1.1rem; font-weight:600; font-size:.86rem; letter-spacing:.04em; }
@keyframes wb-hv7-ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Tablet: one column, the board follows the copy. */
@media (max-width:1023px){
  .wb-scope .wb-hv--7 .wb-hv7-grid{ grid-template-columns:minmax(0, 1fr); gap:2.2rem; }
  .wb-scope .wb-hv--7 .wb-hv7-board{ max-width:40rem; }
}

/* Phone (390 plan): odometer at ~15vw stays the biggest thing; lead trims to
   two sentences ending on the retention line; TWO tickets, full brightness
   (they are the proof here, not wallpaper), tilt eased. */
@media (max-width:560px){
  .wb-scope .wb-hv--7 .wb-hv7-count__num{ font-size:clamp(3rem, 15vw, 3.6rem); }
  .wb-scope .wb-hv--7 .wb-hv7-cut{ display:none; }
  /* Review fix: build/37's 390 plan is a swipeable strip of THREE full-bright
     tickets (karns truck, comic book, wallover), not a 2-ticket stack. */
  .wb-scope .wb-hv--7 .wb-hv7-board{ display:flex; overflow-x:auto; gap:.85rem; padding:0 0 .6rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .wb-scope .wb-hv--7 .wb-hv7-ticket{ flex:0 0 74vw; --hv7-tilt:0deg; --hv7-y:0px; filter:none; }
  .wb-scope .wb-hv--7 .wb-hv7-ticket:nth-child(4){ display:none; }
  .wb-scope .wb-hv--7 .wb-hv7-ticker__tag{ padding-left:1rem; }
}

/* Narrow phone: the WGSD chop shrinks into the ticket's header strip, the form
   takes the full row, the hand steps aside (spec's under-480 rule). */
@media (max-width:479px){
  .wb-scope .wb-hv--7 .wb-hv7-open{ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"head wgsd" "form form"; row-gap:.75rem; }
  .wb-scope .wb-hv--7 .wb-hv7-open__head{ align-self:center; border-bottom:0; padding-bottom:0; }
  .wb-scope .wb-hv--7 .wb-hv7-wgsd img{ width:52px; }
  .wb-scope .wb-hv--7 .wb-hero-ask{ border-top:2px dashed rgba(20,24,31,.24); padding-top:.8rem; }
  .wb-scope .wb-hv--7 .wb-hv7-hand{ display:none; }
}

/* Reduced motion: stamps placed, dot still, tickets pinned, hand parked, and
   the ticker becomes one static wrapped line. Nothing depends on any of it. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--7 .wb-hv7-ticker__clip{ -webkit-mask-image:none; mask-image:none; } /* review fix: no fade mask on the static line */
  .wb-scope .wb-hv--7 .wb-hv7-live{ animation:none; }
  .wb-scope .wb-hv--7 .wb-hv7-stamp{ animation:none; }
  .wb-scope .wb-hv--7 .wb-hv7-ticket{ transition:none; }
  .wb-scope .wb-hv--7 .wb-hv7-ticket:hover{ transform:rotate(var(--hv7-tilt)) translateY(var(--hv7-y)); }
  .wb-scope .wb-hv--7 .wb-hv7-hand{ transition:none; }
  .wb-scope .wb-hv--7 .wb-hv7-open:focus-within .wb-hv7-hand{ transform:none; }
  .wb-scope .wb-hv--7 .wb-hv7-ticker__track{ animation:none; display:block; white-space:normal; }
  .wb-scope .wb-hv--7 .wb-hv7-ticker__run{ display:none; }
  .wb-scope .wb-hv--7 .wb-hv7-ticker__run:first-child{ display:block; white-space:normal; padding:.6rem 1.1rem; }
}

/* Review port (WCAG 2.2.2, from v8's motion kit): a visible touch pause for
   the ticker; JS unhides it only when the ticker actually animates. */
.wb-scope .wb-hv--7 .wb-hv7-ticker__pause{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; box-sizing:border-box; padding:0; line-height:0; width:26px; height:26px; min-width:26px; margin-left:.6rem; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(14,16,22,.7); color:#fff; font-size:.6rem; cursor:pointer; vertical-align:middle; transition:background .12s ease; }
.wb-scope .wb-hv--7 .wb-hv7-ticker__pause:hover{ background:rgba(255,255,255,.16); }
.wb-scope .wb-hv--7 .wb-hv7-ticker__pause[hidden]{ display:none; }
.wb-scope .wb-hv--7 .wb-hv7-ticker.is-paused .wb-hv7-ticker__track{ animation-play-state:paused; }


/* ---- Variant 8 "The Conveyor" (build/37 conveyor-line). The shipping dock at
   quitting time: a calm upper zone (kicker / chrome H1 / lead / the owner's ask
   arrangement, untouched) with the live job count hanging top-right as the
   shop-floor sign, then a full-bleed, gently tilted belt of 14 real finished
   jobs rolling toward the delivery van docked at the right edge. The marquee is
   pure CSS, runs ONLY when initHeroV8 adds .is-rolling (so no-JS and reduced
   motion get a static, natively swipeable strip), pauses on hover / focus-within
   / the visible pause button (WCAG 2.2.2), and .is-user hands the belt over as
   a plain scroller while keyboard focus is inside it. */

/* Band level: hide the shared video + scrim, swap the backdrop for the dark
   dock (honeycomb + a red glow upper-left, vignetting down toward the belt).
   !important needed: the section carries an inline background-image poster. */
.wb-scope .wb-hero-v8 .wb-band__video-wrap,
.wb-scope .wb-hero-v8 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v8.wb-band--video{
  background:
    radial-gradient(56rem 34rem at 10% 0%, rgba(216,35,42,.32), transparent 62%),
    linear-gradient(180deg, rgba(4,5,7,.46), rgba(4,5,7,.68) 82%),
    #0a0b0d url("../images/overhaul/tex-honeycomb-dark.webp") center top/cover no-repeat !important;
}
/* The band is a column flexbox and .wb-inner centers with auto margins, so it
   shrink-wraps its widest child (~50-60rem) instead of filling --wb-maxw. This
   variant hangs the job-count sign at the true right edge, so pin the inner to
   the full track while v8 is active (only the active variant displays). */
.wb-scope .wb-hero-v8 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--8{ position:relative; }

/* The shop-floor sign: live jobs odometer on dark glass with a red header rail
   and a slight hang tilt. Absolute top-right only where the 50rem copy column
   leaves the room; in flow below that; ordered after the ask on phones. */
.wb-scope .wb-hv--8 .wb-hv8-count{ height:auto; display:inline-flex; flex-direction:column; gap:.3rem; padding:.9rem 1.3rem 1rem; margin-top:1.4rem; border-top:3px solid var(--wb-red); }
.wb-scope .wb-hv--8 .wb-hv8-count__num{ font-family:var(--wb-display); font-weight:800; font-size:clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); line-height:1; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--8 .wb-hv8-count__label{ font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.75); }
@media (min-width:1200px){
  .wb-scope .wb-hv--8 .wb-hv8-count{ position:absolute; top:.4rem; right:0; margin-top:0; transform:rotate(1.6deg); }
}

/* THE BELT. Full-bleed breakout from the centered .wb-inner (the spaces inside
   the calc are load-bearing); the band's own overflow:hidden clips the tilt. */
.wb-scope .wb-hv--8 .wb-hv8-belt{ position:relative; width:100vw; margin:clamp(2rem, 1.2rem + 2.5vw, 3.4rem) 0 0 calc(50% - 50vw); }
.wb-scope .wb-hv--8 .wb-hv8-belt__win{
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
  transform:rotate(-2deg);
  padding:1.1rem 0 1.6rem;
  background:
    repeating-linear-gradient(-45deg, rgba(216,35,42,.85) 0 14px, rgba(18,20,24,.9) 14px 28px) left bottom/100% 9px no-repeat,
    #363b42 url("../images/overhaul/tex-metallic-lines.webp") center/360px repeat;
  box-shadow:0 -14px 34px -18px rgba(0,0,0,.7), 0 24px 50px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.09);
}
.wb-scope .wb-hv--8 .wb-hv8-belt__roll{ display:flex; width:max-content; }
/* Static strip (no JS, reduced motion, or keyboard .is-user): give the first
   card a left inset. Never applied while rolling, where the loop math needs
   the roll box to be exactly two tracks wide. */
.wb-scope .wb-hv--8 .wb-hv8-belt:not(.is-rolling) .wb-hv8-belt__roll,
.wb-scope .wb-hv--8 .wb-hv8-belt.is-user .wb-hv8-belt__roll{ padding-left:1.15rem; }
/* Seamless-loop math: the track's right padding must equal its card gap, so
   one track + its trailing gap is exactly 50% of the two-track roll. */
.wb-scope .wb-hv--8 .wb-hv8-track{ display:flex; align-items:flex-end; gap:1.15rem; padding:0 1.15rem 0 0; margin:0; list-style:none; }
.wb-scope .wb-hv--8 .wb-hv8-track--clone{ display:none; }
.wb-scope .wb-hv--8 .wb-hv8-belt.is-rolling:not(.is-user) .wb-hv8-belt__win{ overflow-x:hidden; }
.wb-scope .wb-hv--8 .wb-hv8-belt.is-rolling:not(.is-user) .wb-hv8-track--clone{ display:flex; }
.wb-scope .wb-hv--8 .wb-hv8-belt.is-rolling:not(.is-user) .wb-hv8-belt__roll{ animation:wb-hv8-roll 58s linear infinite; animation-delay:-23s; will-change:transform; }
.wb-scope .wb-hv--8 .wb-hv8-belt.is-paused .wb-hv8-belt__roll{ animation-play-state:paused; }
.wb-scope .wb-hv--8 .wb-hv8-belt:focus-within .wb-hv8-belt__roll{ animation-play-state:paused; }
@media (hover:hover) and (pointer:fine){
  .wb-scope .wb-hv--8 .wb-hv8-belt:hover .wb-hv8-belt__roll{ animation-play-state:paused; }
}
@keyframes wb-hv8-roll{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
/* Belt-and-suspenders: OS-level reduced motion wins even if it flips mid-visit. */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--8 .wb-hv8-belt .wb-hv8-belt__roll{ animation:none !important; }
  .wb-scope .wb-hv--8 .wb-hv8-belt .wb-hv8-belt__win{ overflow-x:auto !important; }
  .wb-scope .wb-hv--8 .wb-hv8-track--clone{ display:none !important; }
}

/* The cards: white-matted prints, alternating tilt, red job-ticket tabs. */
.wb-scope .wb-hv--8 .wb-hv8-card{ flex:0 0 auto; padding:.6rem 0; }
.wb-scope .wb-hv--8 .wb-hv8-card__box{ background:#fff; padding:6px 6px 0; border-radius:8px; box-shadow:0 16px 30px -12px rgba(0,0,0,.7); transform:rotate(1.3deg); transition:transform .18s ease, box-shadow .18s ease; }
.wb-scope .wb-hv--8 .wb-hv8-card__a{ display:block; position:relative; text-decoration:none; }
.wb-scope .wb-hv--8 .wb-hv8-card:nth-child(2n) .wb-hv8-card__box{ transform:rotate(-1.5deg); }
.wb-scope .wb-hv--8 .wb-hv8-card__box:hover,
.wb-scope .wb-hv--8 .wb-hv8-card__box:focus-within{ transform:rotate(0deg) translateY(-6px); box-shadow:0 24px 44px -14px rgba(0,0,0,.8); }
/* zoom cue: appears when the card is hovered/focused, marks the lightbox */
.wb-scope .wb-hv--8 .wb-hv8-zoomcue{ position:absolute; right:8px; bottom:8px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(14,16,22,.78); color:#fff; font-size:.75rem; opacity:0; transition:opacity .15s ease; pointer-events:none; }
.wb-scope .wb-hv--8 .wb-hv8-card__box:hover .wb-hv8-zoomcue,
.wb-scope .wb-hv--8 .wb-hv8-card__a:focus-visible .wb-hv8-zoomcue{ opacity:1; }
.wb-scope .wb-hv--8 .wb-hv8-card__a:focus-visible,
.wb-scope .wb-hv--8 .wb-hv8-tab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wb-scope .wb-hv--8 .wb-hv8-card__a img{ display:block; height:clamp(138px, 96px + 5vw, 188px); width:auto; border-radius:4px 4px 0 0; }
.wb-scope .wb-hv--8 .wb-hv8-tab{ position:relative; display:flex; align-items:center; gap:.3rem; text-decoration:none; cursor:pointer; margin:0 -6px; padding:.34rem .7rem .4rem; background:var(--wb-red); color:#fff; font-family:var(--wb-display); font-weight:700; font-size:.7rem; line-height:1.15; letter-spacing:.07em; text-transform:uppercase; text-align:left; white-space:nowrap; border-radius:0 0 8px 8px; }
.wb-scope .wb-hv--8 .wb-hv8-tab__who{ font-weight:600; opacity:.85; }
.wb-scope .wb-hv--8 .wb-hv8-tab__go{ margin-left:auto; font-size:.68rem; opacity:.9; }
/* hover/focus: the tab swaps to its destination, arrow slides */
.wb-scope .wb-hv--8 .wb-hv8-tab__dest{ display:none; }
.wb-scope .wb-hv--8 .wb-hv8-tab:hover .wb-hv8-tab__what,
.wb-scope .wb-hv--8 .wb-hv8-tab:hover .wb-hv8-tab__who,
.wb-scope .wb-hv--8 .wb-hv8-tab:focus-visible .wb-hv8-tab__what,
.wb-scope .wb-hv--8 .wb-hv8-tab:focus-visible .wb-hv8-tab__who{ display:none; }
.wb-scope .wb-hv--8 .wb-hv8-tab:hover .wb-hv8-tab__dest,
.wb-scope .wb-hv--8 .wb-hv8-tab:focus-visible .wb-hv8-tab__dest{ display:inline; }
.wb-scope .wb-hv--8 .wb-hv8-tab:hover{ background:#b81d23; }
.wb-scope .wb-hv--8 .wb-hv8-tab:hover .wb-hv8-tab__go{ transform:translateX(2px); }
/* Website shots get a CSS browser-chrome bar (three dots) above the screen. */
.wb-scope .wb-hv--8 .wb-hv8-card--site .wb-hv8-card__a::before{
  content:""; display:block; height:13px; margin-bottom:4px; border-radius:4px 4px 0 0;
  background:
    radial-gradient(circle at 9px 6.5px, #ff5f57 2.4px, transparent 3.2px),
    radial-gradient(circle at 21px 6.5px, #febc2e 2.4px, transparent 3.2px),
    radial-gradient(circle at 33px 6.5px, #28c840 2.4px, transparent 3.2px),
    #dfe3e8;
}

/* Belt destination: the right-edge fade and the docked delivery van. Rolling
   mode only, so the static strip is never obscured; the van pulls away right
   on scroll via the shared data-drive rider. */
.wb-scope .wb-hv--8 .wb-hv8-fade{ display:none; position:absolute; top:-8px; bottom:-8px; right:0; width:clamp(110px, 13vw, 240px); z-index:2; pointer-events:none; background:linear-gradient(90deg, rgba(10,11,13,0), rgba(10,11,13,.9)); }
.wb-scope .wb-hv--8 .wb-hv8-belt.is-rolling:not(.is-user) .wb-hv8-fade{ display:block; }
.wb-scope .wb-hv--8 .wb-hv8-van{ display:none; position:absolute; right:1vw; bottom:1rem; width:clamp(150px, 9vw + 60px, 224px); height:auto; z-index:3; pointer-events:none; filter:drop-shadow(0 16px 26px rgba(0,0,0,.6)); }
.wb-scope .wb-hv--8 .wb-hv8-belt.is-rolling:not(.is-user) .wb-hv8-van{ display:block; }

/* The visible pause control (hidden in server markup; JS reveals it only when
   the belt actually rolls). The [hidden] rule matters: display:inline-flex
   would otherwise defeat the attribute. */
.wb-scope .wb-hv--8 .wb-hv8-pause{ position:absolute; right:clamp(.9rem, 2vw, 2rem); top:-2.9rem; z-index:4; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; padding:0; width:34px; height:34px; line-height:0; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(14,16,22,.78); color:#fff; font-family:inherit; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.wb-scope .wb-hv--8 .wb-hv8-pause:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55); }
.wb-scope .wb-hv--8 .wb-hv8-pause:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.wb-scope .wb-hv--8 .wb-hv8-pause[hidden]{ display:none; }

/* The mobile "more" chevron (the van's stand-in under 768px). */
.wb-scope .wb-hv--8 .wb-hv8-more{ display:none; }

/* The because-clause under the belt, back in the content column. */
.wb-scope .wb-hv--8 .wb-hv8-caption{ max-width:62ch; margin:clamp(1.4rem, 1rem + 1.4vw, 2.2rem) 0 0; font-size:.92rem; line-height:1.55; color:rgba(255,255,255,.78); }

/* Mobile plan (build/37): tilt eased to -1deg, ~150px cards, van dropped for
   the fade + chevron, tabs shortened to the deliverable, lead trimmed to the
   handoff + retention lines, odometer as a one-line pill ordered after the ask. */
@media (max-width:767px){
  .wb-scope .wb-hv--8 .wb-hv8-belt__win{ transform:rotate(-1deg); }
  .wb-scope .wb-hv--8 .wb-hv8-card__a img{ height:150px; }
  .wb-scope .wb-hv--8 .wb-hv8-van{ display:none !important; }
  .wb-scope .wb-hv--8 .wb-hv8-more{ display:flex; align-items:center; justify-content:center; position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:3; width:30px; height:30px; border-radius:50%; background:rgba(14,16,22,.72); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:.8rem; pointer-events:none; }
}
@media (max-width:560px){
  .wb-scope .wb-hv--8 .wb-hv8-trim{ display:none; }
  .wb-scope .wb-hv--8 .wb-hv8-tab__who{ display:none; }
  .wb-scope .wb-hv--8 .wb-hv8-top{ display:flex; flex-direction:column; }
  .wb-scope .wb-hv--8 .wb-hv8-top .wb-hv8-count{ order:10; flex-direction:row; align-items:baseline; gap:.6rem; width:fit-content; padding:.55rem 1rem .65rem; margin-top:1.3rem; }
  .wb-scope .wb-hv--8 .wb-hv8-count__num{ font-size:1.5rem; }
  .wb-scope .wb-hv--8 .wb-hv8-pause{ top:-2.3rem; right:.75rem; }
}

/* Review fixes: paint the AJAX dropdown above the will-change belt (blocker),
   and re-assert the display face on the p.wb-h1 (fonts-modern pins p to Inter). */
.wb-scope .wb-hv--8 .wb-hero-ask-row--focal{ position:relative; z-index:5; }
.wb-scope .wb-hv--8 .wb-h1{ font-family:var(--wb-display) !important; }

/* ================================================================
   LIGHTBOX  (generic, [data-wb-lightbox]; built for the conveyor
   cards, reusable anywhere; overhaul.js initLightbox)
   ================================================================ */
.wb-lightbox{ position:fixed; inset:0; z-index:2147481200; display:flex; align-items:center; justify-content:center; padding:4vh 4vw; }
.wb-lightbox__back{ position:absolute; inset:0; background:rgba(8,9,12,.86); backdrop-filter:blur(3px); }
.wb-lightbox__fig{ position:relative; margin:0; max-width:92vw; max-height:88vh; display:flex; flex-direction:column; }
.wb-lightbox__fig img{ display:block; max-width:100%; max-height:78vh; width:auto; height:auto; margin:0 auto; border-radius:10px; box-shadow:0 40px 120px -20px rgba(0,0,0,.9); background:#fff; }
.wb-lightbox__fig figcaption{ margin-top:.9rem; text-align:center; color:#fff; font-size:.95rem; }
.wb-lightbox__fig figcaption a{ color:#ff5a61; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.wb-lightbox__x{ position:absolute; top:-14px; right:-14px; width:38px; height:38px; padding:0; line-height:0; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(14,16,22,.92); color:#fff; font-size:1.15rem; cursor:pointer; }
.wb-lightbox__x:hover{ background:var(--wb-red); }


/* ---- Variant skin 9 "Launch Sequence" (build/37 launch-sequence, slot 6).
   Mission control as the whole room: a dark command deck (honeycomb under a
   dark wash, the red pad glow rising from the seam, the tex-data telemetry
   ghost on desktop only), a T-minus countdown chip that choreographs the
   load, the ask as the one bright mission console, the live job count as
   telemetry, the fly-through in a slanted launch window (desktop-only video
   over a real still of our floor), and the cartoon rocket climbing a -14deg
   exhaust-trail trajectory on scroll. initHeroV9 only writes --wb-hv9-p and
   ticks the chip; every consumer is CSS, so no-JS parks the rocket, reduced
   motion pins it mid-flight, and phones drop the trajectory for a small
   parked rocket with the idle wiggle and a one-time liftoff hop. Launch
   vocabulary is confined to chrome (the Content committee's condition);
   the rocket is capped ~236px so it reads as a mascot, not a toy. */

/* Band level: kill the shared video + scrim, hang the command deck. The
   !important is required, the section carries an inline background-image. */
.wb-scope .wb-hero-v9 .wb-band__video-wrap,
.wb-scope .wb-hero-v9 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v9.wb-band--video{
  background:
    radial-gradient(64rem 24rem at 58% 100%, rgba(216,35,42,.26), transparent 62%),
    linear-gradient(180deg, rgba(4,6,10,.6), rgba(4,6,10,.78)),
    #06070b url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
/* Desktop only: the telemetry ghost hangs faint behind the right column (the
   media query means a phone never downloads the file). */
@media (min-width:961px){
  .wb-scope .wb-hero-v9.wb-band--video{
    background:
      radial-gradient(64rem 24rem at 58% 100%, rgba(216,35,42,.26), transparent 62%),
      linear-gradient(180deg, rgba(4,6,10,.74), rgba(4,6,10,.86)),
      url("../images/overhaul/hero37/tex-data-800.webp") right -4rem top -3rem / 60rem auto no-repeat,
      #06070b url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
  }
}
/* One rocket per page (build/37 build note): the hero->answer seam rider
   stands down while the launch pad is on screen. */
.wb-scope .wb-hero-v9.wb-band--video ~ .wb-seam-rider--rocket{ display:none; }
/* The band's .wb-inner shrink-wraps its widest child; this variant owns the
   full track (full-bleed pad line + the trajectory), v8 precedent. */
.wb-scope .wb-hero-v9 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--9{ position:relative; --wb-hv9-run:min(36vw, 540px); }

/* The countdown chip: mono, dark glass, red pulse dot, blinking cursor. JS
   ticks the text T-3 -> LIFTOFF; the server text "Go for launch" stands for
   no-JS / reduced motion. aria-hidden chrome, never announced. */
.wb-scope .wb-hv--9 .wb-hv9-chip{ display:inline-flex; align-items:center; gap:.55em; margin:0 0 .9rem; padding:.42rem .95rem; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(10,12,18,.62); font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85); transition:color .25s ease, border-color .25s ease; }
.wb-scope .wb-hv--9 .wb-hv9-chip__dot{ flex:0 0 auto; width:.55em; height:.55em; border-radius:50%; background:#ff4a52; box-shadow:0 0 0 0 rgba(255,74,82,.5); animation:wb-hv9-pulse 2.2s ease-out infinite; }
.wb-scope .wb-hv--9 .wb-hv9-chip__txt::after{ content:"_"; margin-left:.15em; animation:wb-hv9-blink 1s steps(1) infinite; }
.wb-scope .wb-hv--9.is-liftoff .wb-hv9-chip{ border-color:rgba(255,74,82,.75); color:#ff5a61; }
.wb-scope .wb-hv--9.is-liftoff .wb-hv9-chip__txt::after{ content:""; }
@keyframes wb-hv9-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,74,82,.5); }
  70%{ box-shadow:0 0 0 .55em rgba(255,74,82,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,74,82,0); }
}
@keyframes wb-hv9-blink{ 0%, 49%{ opacity:1; } 50%, 100%{ opacity:0; } }

/* The chyron kicker under a hairline. */
.wb-scope .wb-hv--9 .wb-hv9-chyron{ margin:0 0 clamp(1.1rem, .8rem + 1.2vw, 1.9rem); padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.16); letter-spacing:.16em; }

/* The deck: copy + console left, launch window + telemetry right. z-index 2
   keeps the whole deck above the trajectory strip (z 1), and the console's
   own z 5 lifts the AJAX dropdown above everything in the band. */
.wb-scope .wb-hv--9 .wb-hv9-grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0, 57fr) minmax(0, 43fr); gap:clamp(1.75rem, 1rem + 3vw, 4rem); align-items:start; }

/* H1, chrome. fonts-modern pins p to Inter, hence the !important. */
.wb-scope .wb-hv--9 .wb-hv9-h1{ font-family:var(--wb-display) !important; font-size:clamp(2.1rem, 1.3rem + 2.7vw, 3.8rem); margin:0; max-width:none; }
.wb-scope .wb-hv--9 .wb-hv9-h1b{ display:block; }

/* THE MISSION CONSOLE: dark glass, red service edge that brightens on focus
   (spec motion note). Grid areas so the WGSD patch drops above the field on
   a phone without duplicate markup. */
.wb-scope .wb-hv--9 .wb-hv9-console{ position:relative; z-index:5; margin-top:clamp(1.2rem, .9rem + 1.2vw, 2rem); padding:clamp(1.05rem, .85rem + .9vw, 1.6rem); border-radius:14px; background:rgba(10,13,20,.66); border:1px solid rgba(216,35,42,.42); border-top:3px solid var(--wb-red); box-shadow:0 30px 70px -18px rgba(0,0,0,.66); -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%); display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"head head" "patch form"; column-gap:clamp(.9rem, .6rem + 1vw, 1.35rem); row-gap:.8rem; align-items:center; transition:border-color .2s ease, box-shadow .2s ease; }
.wb-scope .wb-hv--9 .wb-hv9-console:focus-within{ border-color:rgba(255,74,82,.85); box-shadow:0 30px 70px -18px rgba(0,0,0,.66), 0 0 0 3px rgba(216,35,42,.28); }
.wb-scope .wb-hv--9 .wb-hv9-console__head{ grid-area:head; margin:0; padding-bottom:.55rem; border-bottom:1px dashed rgba(255,255,255,.2); font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.wb-scope .wb-hv--9 .wb-hv9-patch{ grid-area:patch; display:block; transform:rotate(-4deg); }
.wb-scope .wb-hv--9 .wb-hv9-patch img{ display:block; width:clamp(84px, 5vw + 44px, 116px); height:auto; filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.wb-scope .wb-hv--9 .wb-hero-ask{ grid-area:form; margin-top:0; max-width:none; }
.wb-scope .wb-hv--9 .wb-hero-ask__q{ font-size:clamp(1.08rem, .95rem + .5vw, 1.38rem); margin-bottom:.5rem; }
.wb-scope .wb-hv--9 .wb-hero-ask__note{ margin-top:.65rem; }

/* Lead. */
.wb-scope .wb-hv--9 .wb-hv9-lead{ max-width:54ch; margin:clamp(1.2rem, .9rem + 1.2vw, 2rem) 0 0; }

/* THE LAUNCH WINDOW: slanted clip, real still, desktop video fades in over
   it only once it is actually playing (initHeroV9 adds .is-video-live). */
.wb-scope .wb-hv--9 .wb-hv9-window{ margin:0; }
.wb-scope .wb-hv--9 .wb-hv9-window__clip{ position:relative; overflow:hidden; aspect-ratio:16 / 10; clip-path:polygon(7% 0, 100% 0, 93% 100%, 0 100%); border-radius:6px; box-shadow:0 26px 60px -18px rgba(0,0,0,.6); }
.wb-scope .wb-hv--9 .wb-hv9-window__still,
.wb-scope .wb-hv--9 .wb-hv9-window__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wb-scope .wb-hv--9 .wb-hv9-window__video{ opacity:0; transition:opacity .6s ease; }
.wb-scope .wb-hv--9.is-video-live .wb-hv9-window__video{ opacity:1; }
.wb-scope .wb-hv--9 .wb-hv9-window__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(4,6,10,.05), rgba(4,6,10,.4)); pointer-events:none; }
.wb-scope .wb-hv--9 .wb-hv9-window__badge{ position:absolute; top:.7rem; right:9%; padding:.32rem .65rem; background:var(--wb-red); color:#fff; border-radius:4px; font-family:var(--wb-display); font-weight:800; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; transform:rotate(2deg); box-shadow:0 8px 18px -8px rgba(0,0,0,.6); }
.wb-scope .wb-hv--9 .wb-hv9-window__chip{ margin-top:.55rem; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* TELEMETRY: dotted-leader head, three quiet cells (the chrome stays small
   so the console keeps the room, the UI/UX committee's clutter note). */
.wb-scope .wb-hv--9 .wb-hv9-tele{ margin-top:clamp(1.1rem, .8rem + 1vw, 1.7rem); }
.wb-scope .wb-hv--9 .wb-hv9-tele__head{ display:flex; align-items:center; gap:.7rem; margin:0 0 .65rem; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size:.66rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.wb-scope .wb-hv--9 .wb-hv9-tele__head::after{ content:""; flex:1 1 auto; border-bottom:1px dotted rgba(255,255,255,.3); }
.wb-scope .wb-hv--9 .wb-hv9-tele__grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(.8rem, .5rem + 1vw, 1.4rem); }
.wb-scope .wb-hv--9 .wb-hv9-tele__num{ display:block; font-family:var(--wb-display); font-weight:800; font-size:clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--9 .wb-hv9-tele__label{ display:block; margin-top:.35rem; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); }

/* THE CLIMB: the strip reserves the airspace; the track inside is rotated
   -14deg so the rider's X translation reads as a diagonal climb. Everything
   here keys off --wb-hv9-p (JS-written, 0 default = parked on the pad). */
.wb-scope .wb-hv--9 .wb-hv9-flight{ position:relative; z-index:1; height:clamp(110px, 8rem + 2vw, 180px); margin-top:clamp(.6rem, 1vw, 1.4rem); pointer-events:none; }
.wb-scope .wb-hv--9 .wb-hv9-traj{ position:absolute; left:12%; bottom:8px; width:min(52vw, 760px); height:96px; transform:rotate(-14deg); transform-origin:left bottom; }
.wb-scope .wb-hv--9 .wb-hv9-trail{ position:absolute; left:-36px; bottom:30px; width:calc(var(--wb-hv9-run) + 48px); height:12px; border-radius:999px; background:linear-gradient(90deg, rgba(216,35,42,0), rgba(216,35,42,.5) 45%, rgba(255,122,92,.95)); filter:blur(1px); transform:scaleX(var(--wb-hv9-p, 0)); transform-origin:left center; opacity:calc(var(--wb-hv9-p, 0) * 3); }
.wb-scope .wb-hv--9 .wb-hv9-ride{ position:absolute; left:0; bottom:0; display:block; transform:translateX(calc(var(--wb-hv9-p, 0) * var(--wb-hv9-run))); will-change:transform; }
.wb-scope .wb-hv--9 .wb-hv9-rocket{ display:block; width:clamp(150px, 15vw, 236px); height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
/* Liftoff: one ignition wiggle, composed on the img so the ride's translate
   survives. Fires when initHeroV9 adds .is-liftoff at the end of the count. */
.wb-scope .wb-hv--9.is-liftoff .wb-hv9-rocket{ animation:wb-hv9-ignite .7s ease-in-out 1; }
@keyframes wb-hv9-ignite{
  0%, 100%{ transform:translate(0, 0) rotate(0deg); }
  25%{ transform:translate(-2px, 2px) rotate(-1.4deg); }
  55%{ transform:translate(2px, -2px) rotate(1.2deg); }
  80%{ transform:translate(-1px, 1px) rotate(-.6deg); }
}

/* THE PAD + PAYLOAD MANIFEST: full-bleed breakout (the spaces inside the
   calc are load-bearing); the glowing red pad line runs behind the cards so
   they straddle it; it pulses once at liftoff. */
.wb-scope .wb-hv--9 .wb-hv9-pad{ position:relative; width:100vw; margin:0 0 0 calc(50% - 50vw); padding:0 clamp(1rem, 4vw, 4rem) clamp(.4rem, 1vw, 1rem); }
.wb-scope .wb-hv--9 .wb-hv9-pad__head{ display:flex; align-items:baseline; gap:.5rem; margin:0 0 .9rem; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.66); }
.wb-scope .wb-hv--9 .wb-hv9-pad__sub{ color:rgba(255,255,255,.42); }
.wb-scope .wb-hv--9 .wb-hv9-pad__all{ margin-left:auto; color:#ff5a61; font-weight:700; letter-spacing:.14em; text-decoration:none; white-space:nowrap; }
.wb-scope .wb-hv--9 .wb-hv9-pad__all:hover{ color:#fff; }
.wb-scope .wb-hv--9 .wb-hv9-manifest{ position:relative; display:flex; justify-content:center; gap:clamp(.9rem, .6rem + 1.4vw, 1.8rem); list-style:none; margin:0; padding:0; }
.wb-scope .wb-hv--9 .wb-hv9-manifest::before{ content:""; position:absolute; left:calc(-1 * clamp(1rem, 4vw, 4rem)); right:calc(-1 * clamp(1rem, 4vw, 4rem)); top:42%; height:3px; border-radius:999px; background:linear-gradient(90deg, rgba(216,35,42,.05), var(--wb-red) 12%, var(--wb-red) 88%, rgba(216,35,42,.05)); box-shadow:0 0 18px rgba(216,35,42,.55); }
.wb-scope .wb-hv--9.is-liftoff .wb-hv9-manifest::before{ animation:wb-hv9-padpulse 1.2s ease-out 1; }
@keyframes wb-hv9-padpulse{
  0%{ box-shadow:0 0 18px rgba(216,35,42,.55); }
  30%{ box-shadow:0 0 46px 8px rgba(255,90,97,.95); }
  100%{ box-shadow:0 0 18px rgba(216,35,42,.55); }
}
/* Cargo cards: tilted, hover lifts + straightens (spec); red tag corner. */
.wb-scope .wb-hv--9 .wb-hv9-cargo{ position:relative; flex:0 1 220px; min-width:0; transform:rotate(var(--hv9-tilt, -1.6deg)); transition:transform .25s ease; }
.wb-scope .wb-hv--9 .wb-hv9-cargo:nth-child(2){ --hv9-tilt:1.4deg; }
.wb-scope .wb-hv--9 .wb-hv9-cargo:nth-child(3){ --hv9-tilt:-1deg; }
.wb-scope .wb-hv--9 .wb-hv9-cargo:nth-child(4){ --hv9-tilt:1.8deg; }
.wb-scope .wb-hv--9 .wb-hv9-cargo:nth-child(5){ --hv9-tilt:-2deg; }
.wb-scope .wb-hv--9 .wb-hv9-cargo:hover{ transform:rotate(0deg) translateY(-8px); z-index:2; }
.wb-scope .wb-hv--9 .wb-hv9-cargo > a{ display:block; background:#f4f1e9; border-radius:6px; padding:.4rem .4rem 0; box-shadow:0 18px 40px -14px rgba(0,0,0,.7); text-decoration:none; overflow:hidden; }
.wb-scope .wb-hv--9 .wb-hv9-cargo > a::before{ content:""; position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 26px 26px 0; border-color:transparent var(--wb-red) transparent transparent; border-top-right-radius:6px; z-index:1; }
.wb-scope .wb-hv--9 .wb-hv9-cargo img{ display:block; width:100%; height:auto; border-radius:3px; }
.wb-scope .wb-hv--9 .wb-hv9-cargo__tag{ display:block; padding:.45rem .2rem .5rem; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#3c4149; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-scope .wb-hv--9 .wb-hv9-cargo__id{ color:var(--wb-red); margin-right:.4em; }

/* Tablet: one column. display:contents flattens the two cols so the spec's
   mobile order (H1, console, lead, telemetry, window) holds without
   duplicate markup. */
@media (max-width:1023px){
  .wb-scope .wb-hv--9 .wb-hv9-grid{ display:flex; flex-direction:column; gap:0; }
  .wb-scope .wb-hv--9 .wb-hv9-col{ display:contents; }
  .wb-scope .wb-hv--9 .wb-hv9-h1{ order:1; }
  .wb-scope .wb-hv--9 .wb-hv9-console{ order:2; }
  .wb-scope .wb-hv--9 .wb-hv9-lead{ order:3; }
  .wb-scope .wb-hv--9 .wb-hv9-tele{ order:4; margin-top:clamp(1.2rem, 2vw, 1.8rem); }
  .wb-scope .wb-hv--9 .wb-hv9-window{ order:5; margin-top:clamp(1.2rem, 2vw, 1.8rem); max-width:40rem; }
}

/* Under 960: the trajectory and trail are dropped entirely (spec 390 plan);
   the rocket parks small by the pad, right-aligned, still visible. */
@media (max-width:960px){
  .wb-scope .wb-hv--9 .wb-hv9-flight{ height:auto; margin-top:.8rem; }
  .wb-scope .wb-hv--9 .wb-hv9-traj{ position:static; width:auto; height:auto; transform:none; display:flex; justify-content:flex-end; padding-right:6vw; }
  .wb-scope .wb-hv--9 .wb-hv9-trail{ display:none; }
  .wb-scope .wb-hv--9 .wb-hv9-ride{ position:static; transform:none !important; }
  .wb-scope .wb-hv--9 .wb-hv9-rocket{ width:112px; }
}
/* The parked rocket keeps the idle wiggle, and gets a one-time hop at
   liftoff so a phone still sees the signature moment (Design committee
   objection, fixed cheap). wbRocket animates translate/rotate props, the
   hop animates transform, so the .9s-delayed pair composes cleanly. */
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  .wb-js .wb-scope .wb-hv--9 .wb-hv9-rocket{ animation:wbRocket 4s ease-in-out infinite; }
  .wb-js .wb-scope .wb-hv--9.is-liftoff .wb-hv9-rocket{ animation:wb-hv9-hop .9s cubic-bezier(.3, .8, .3, 1) 1, wbRocket 4s ease-in-out .9s infinite; }
}
@keyframes wb-hv9-hop{
  0%{ transform:translateY(0); }
  40%{ transform:translateY(-14px) rotate(-3deg); }
  100%{ transform:translateY(0); }
}

/* Phone (390 plan): shortened chyron, trimmed lead, patch above the field
   (the 70px lockup rule), full-width LAUNCH IT, telemetry as three glass
   chips, a plain 16:9 still in the window (the video is never requested
   here), and a 3-card scroll-snap manifest (Triangle + Kubota dropped). */
@media (max-width:640px){
  .wb-scope .wb-hv--9 .wb-hv9-chyron-more,
  .wb-scope .wb-hv--9 .wb-hv9-trim{ display:none; }
  .wb-scope .wb-hv--9 .wb-hv9-h1{ font-size:clamp(1.8rem, 7.6vw, 2.4rem); }
  .wb-scope .wb-hv--9 .wb-hv9-console{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "patch" "form"; }
  .wb-scope .wb-hv--9 .wb-hv9-patch{ justify-self:start; transform:rotate(-3deg); }
  .wb-scope .wb-hv--9 .wb-hv9-patch img{ width:96px; }
  .wb-scope .wb-hv--9 .wb-hero-ask__row{ flex-wrap:wrap; }
  .wb-scope .wb-hv--9 .wb-hero-ask__go{ flex:1 1 100%; justify-content:center; margin-top:.4rem; }
  .wb-scope .wb-hv--9 .wb-hv9-tele__grid{ display:flex; flex-wrap:wrap; gap:.55rem; }
  .wb-scope .wb-hv--9 .wb-hv9-tele__cell{ flex:1 1 40%; padding:.6rem .75rem; border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .wb-scope .wb-hv--9 .wb-hv9-tele__cell:last-child{ flex:1 1 100%; }
  .wb-scope .wb-hv--9 .wb-hv9-tele__num{ font-size:1.2rem; }
  .wb-scope .wb-hv--9 .wb-hv9-window__clip{ aspect-ratio:16 / 9; clip-path:none; }
  .wb-scope .wb-hv--9 .wb-hv9-window__badge{ right:.7rem; }
  .wb-scope .wb-hv--9 .wb-hv9-manifest{ justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:.5rem; }
  .wb-scope .wb-hv--9 .wb-hv9-cargo{ flex:0 0 64vw; scroll-snap-align:center; transform:none; }
  .wb-scope .wb-hv--9 .wb-hv9-cargo:nth-child(3),
  .wb-scope .wb-hv--9 .wb-hv9-cargo:nth-child(5){ display:none; }
  .wb-scope .wb-hv--9 .wb-hv9-pad__all{ letter-spacing:.08em; }
}

/* Reduced motion: chip static ("Go for launch" stands, cursor gone), dot
   still, rocket pinned mid-flight over a static 40% trail (spec), no pulses,
   no wiggles, cards stay put, the video never fades in (JS never injects
   it either). Nothing here is load-bearing for reading the page. */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--9 .wb-hv9-traj{ --wb-hv9-p:.4; }
  .wb-scope .wb-hv--9 .wb-hv9-chip__dot,
  .wb-scope .wb-hv--9 .wb-hv9-rocket,
  .wb-scope .wb-hv--9 .wb-hv9-manifest::before{ animation:none !important; }
  .wb-scope .wb-hv--9 .wb-hv9-chip__txt::after{ content:""; animation:none; }
  .wb-scope .wb-hv--9 .wb-hv9-cargo{ transition:none; }
  .wb-scope .wb-hv--9 .wb-hv9-cargo:hover{ transform:rotate(var(--hv9-tilt, -1.6deg)); }
  .wb-scope .wb-hv--9 .wb-hv9-console{ transition:none; }
  .wb-scope .wb-hv--9 .wb-hv9-window__video{ display:none; }
}


/* ---- Variant 10 "The Monolith" (build/37 command-center).
   Mission control for your marketing: one glowing glass slab dead-center over
   a darkened aerial glide of OUR production floor (the transcoded flythrough,
   JS-gated; the 145KB poster carries LCP), and the only thing to do is type
   what needs done. Nine satellites orbit it, all in ONE glass-chip chrome
   (the Design committee's "four visual species" fix): two dated photo-coin
   proof chips, the live jobs odometer overlapping the slab's edge z-front,
   and six capability pucks from the house cartoons. The slab's shadow and
   sheen ride the shared --wb-lx/--wb-ly light pipeline; the orbit shears
   1-2deg toward a fine pointer (initHeroV10 writes --wb-hv10-tx/-ty).
   Below 1280px the ring collapses to strips under the slab (the spec's
   1024-1280 chip/slab collision risk, retired by collapsing earlier).
   Reduced motion: poster only, no drift/shear/launch/spin. */

/* Band level: hide the shared video + scrim, hang the flythrough POSTER as
   the backdrop (!important beats the section's inline background-image). The
   variant's own scrim span does the darkening so poster and live video get
   the identical grade. */
.wb-scope .wb-hero-v10 .wb-band__video-wrap,
.wb-scope .wb-hero-v10 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v10.wb-band--video{
  background:#07080b url("../videos/weber-website-video-poster.jpg") center/cover no-repeat !important;
}
/* The inner goes STATIC while v10 is active so the variant's backdrop video
   can anchor to the BAND (position:relative, overflow:hidden) and cover the
   band's padding too. (0,5,0) + later in the file, so it also beats the
   display:block video-hero override and vertically centers the stage. */
.wb-scope .wb-hero-v10 .wb-inner.wb-hero-var.is-active{
  display:flex; flex-direction:column; justify-content:center;
  position:static; width:100%;
  min-height:clamp(30rem, 76vh, 46rem);
}
.wb-scope .wb-hv--10{ width:100%; }

/* The backdrop glide: fills the band, sits under everything (z0 vs the
   stage's z2). The video element is empty until initHeroV10 injects sources
   (768px+, motion ok, Save-Data off, variant actually on screen), then
   crossfades in on canplay. */
.wb-scope .wb-hv--10 .wb-hv10-video{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.wb-scope .wb-hv--10 .wb-hv10-video__el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.wb-scope .wb-hv--10 .wb-hv10-video.is-live .wb-hv10-video__el{ opacity:1; }
/* ~80% dark grade + the faint red radial glow rising from the seam. Kept
   legible-first: the copy never sits on an ungraded frame. */
.wb-scope .wb-hv--10 .wb-hv10-video__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(62% 48% at 50% 100%, rgba(216,35,42,.26), transparent 70%),
    linear-gradient(180deg, rgba(5,6,9,.78), rgba(5,6,9,.64) 45%, rgba(5,6,9,.84));
}
@media (max-width:767px){ .wb-scope .wb-hv--10 .wb-hv10-video__el{ display:none; } }
@media (prefers-reduced-motion:reduce){ .wb-scope .wb-hv--10 .wb-hv10-video__el{ display:none; } }

/* The stage: one positioned box the slab centers in and the orbit anchors to. */
.wb-scope .wb-hv--10 .wb-hv10-stage{ position:relative; z-index:2; width:100%; max-width:74rem; margin:0 auto; padding:clamp(.4rem, 1.2vw, 1.4rem) 0; }

/* THE MONOLITH: oversized dark glass, honeycomb texture inside, shadow riding
   the light pipeline, everything centered ("the Google of getting stuff
   done"). z3 under the proof ring (z4) so the odometer overlaps its edge;
   :has() lifts it to z6 while the ask dropdown is open so results never
   paint under a chip (progressive: without :has you get today's stacking). */
.wb-scope .wb-hv--10 .wb-hv10-slab{
  position:relative; z-index:3; max-width:40rem; margin:0 auto; text-align:center;
  padding:clamp(1.5rem, 1.1rem + 1.5vw, 2.6rem) clamp(1.1rem, .8rem + 1.5vw, 2.3rem) clamp(1.7rem, 1.2rem + 1.7vw, 2.9rem);
  background:
    linear-gradient(160deg, rgba(20,24,31,.68), rgba(11,13,18,.8)),
    url("../images/overhaul/tex-honeycomb-dark.webp") center/460px;
  border:1px solid rgba(255,255,255,.16); border-radius:22px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 90px rgba(216,35,42,.07),
             var(--wb-lx) var(--wb-ly) 70px rgba(0,0,0,.6);
}
.wb-scope .wb-hv--10 .wb-hv10-slab:has(.wb-hero-ask__results.is-open){ z-index:6; }
/* The sheen: a soft light pool that tracks the shared moving light. */
.wb-scope .wb-hv--10 .wb-hv10-slab::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(46rem 18rem at calc(50% + var(--wb-lx) * 12) 0%, rgba(255,255,255,.07), transparent 62%);
}

.wb-scope .wb-hv--10 .wb-hv10-kicker{ margin:0 0 clamp(.8rem, .6rem + .6vw, 1.2rem); font-size:.72rem; letter-spacing:.18em; color:rgba(255,255,255,.72); }
/* WGSD in the Google-logo slot (Jg #85: stacked above the search, owner
   blessing required). */
.wb-scope .wb-hv--10 .wb-hv10-wgsd{ display:block; margin:0 auto; width:clamp(160px, 10vw + 110px, 225px); }
.wb-scope .wb-hv--10 .wb-hv10-wgsd img{ display:block; width:100%; height:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.5)); }
/* fonts-modern pins p to Inter, so the H1 (a p) needs the display face back. */
.wb-scope .wb-hv--10 .wb-hv10-h1{ font-family:var(--wb-display) !important; margin:clamp(.9rem, .7rem + .8vw, 1.5rem) auto 0; }

/* The ask: the shared working component, centered; z5 inside the slab so the
   dropdown paints over the lead and the docked rocket. */
.wb-scope .wb-hv--10 .wb-hero-ask{ position:relative; z-index:5; margin:clamp(1rem, .8rem + .8vw, 1.6rem) auto 0; text-align:left; }
.wb-scope .wb-hv--10 .wb-hv10-q{ text-align:center; font-size:clamp(1.05rem, .95rem + .5vw, 1.3rem); }
.wb-scope .wb-hv--10 .wb-hv10-note{ text-align:center; }
.wb-scope .wb-hv--10 .wb-hv10-lead{ margin:clamp(1rem, .8rem + .8vw, 1.6rem) auto 0; max-width:46ch; font-size:clamp(1rem, .95rem + .3vw, 1.14rem); }

/* The launch gantry: rocket docked on the slab's lower-right corner, nose
   up-right, 2px idle bob; .is-launch (initHeroV10, submit, motion-gated)
   blasts it off screen in 700ms while the GET fires. */
.wb-scope .wb-hv--10 .wb-hv10-rocket{
  position:absolute; right:-3rem; bottom:-1.5rem; width:clamp(120px, 8vw + 60px, 190px); height:auto;
  transform:rotate(-24deg); transform-origin:60% 60%; pointer-events:none;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion:no-preference){
  .wb-js .wb-scope .wb-hv--10 .wb-hv10-rocket{ animation:wb-hv10-bob 3.6s ease-in-out infinite; }
}
@keyframes wb-hv10-bob{ 0%, 100%{ transform:rotate(-24deg) translateY(0); } 50%{ transform:rotate(-24deg) translateY(-4px); } }
.wb-scope .wb-hv--10.is-launch .wb-hv10-rocket{ animation:wb-hv10-launch .7s cubic-bezier(.55, 0, .9, .4) forwards; }
@keyframes wb-hv10-launch{
  0%{ transform:rotate(-24deg) translate(0, 0); opacity:1; }
  14%{ transform:rotate(-27deg) translate(-.5rem, .35rem); opacity:1; }
  100%{ transform:rotate(-30deg) translate(40rem, -36rem); opacity:0; }
}

/* THE ORBIT. Two overlay groups pinned to the stage; chips inside anchor by
   percentage. pointer-events pass through the empty space to the slab. The
   whole ring shears gently toward a fine pointer via the JS-written vars
   (0 when absent, so no-JS renders square). */
.wb-scope .wb-hv--10 .wb-hv10-proof,
.wb-scope .wb-hv--10 .wb-hv10-pucks{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  transform:perspective(1200px) rotateY(calc(var(--wb-hv10-tx, 0) * 1.6deg)) rotateX(calc(var(--wb-hv10-ty, 0) * -1.2deg));
  transition:transform .55s ease-out;
}
.wb-scope .wb-hv--10 .wb-hv10-pucks{ z-index:2; }   /* pucks tuck UNDER the slab edge; proof (odometer) rides over it */
.wb-scope .wb-hv--10 .wb-hv10-chip,
.wb-scope .wb-hv--10 .wb-hv10-puck{ position:absolute; pointer-events:auto; text-decoration:none; }

/* ONE chip chrome for every satellite (the single-species fix): small dark
   glass card, hairline edge, light-pipeline shadow. The idle elliptical
   drift lives on this inner card so the shared reveal transform on the
   outer element never fights it. */
.wb-scope .wb-hv--10 .wb-hv10-chip__drift{
  display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center;
  padding:.85rem .95rem .95rem; border-radius:16px;
  background:linear-gradient(165deg, rgba(20,24,31,.6), rgba(11,13,18,.74));
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--wb-lx) var(--wb-ly) 30px rgba(0,0,0,.45);
}
@media (prefers-reduced-motion:no-preference){
  .wb-js .wb-scope .wb-hv--10 .wb-hv10-chip__drift{ animation:wb-hv10-drift 11s ease-in-out infinite; }
}
@keyframes wb-hv10-drift{
  0%, 100%{ transform:translate(0, 0); }
  25%{ transform:translate(3px, -4px); }
  50%{ transform:translate(0, -7px); }
  75%{ transform:translate(-3px, -3px); }
}
/* Staggered phases so the nine never breathe in lockstep. */
.wb-scope .wb-hv--10 .wb-hv10-chip--y98 .wb-hv10-chip__drift{ animation-delay:-1.6s; }
.wb-scope .wb-hv--10 .wb-hv10-chip--jobs .wb-hv10-chip__drift{ animation-delay:-3.4s; }
.wb-scope .wb-hv--10 .wb-hv10-puck--mega .wb-hv10-chip__drift{ animation-delay:-5.1s; }
.wb-scope .wb-hv--10 .wb-hv10-puck--soc .wb-hv10-chip__drift{ animation-delay:-6.7s; }
.wb-scope .wb-hv--10 .wb-hv10-puck--van .wb-hv10-chip__drift{ animation-delay:-8.2s; }
.wb-scope .wb-hv--10 .wb-hv10-puck--mic .wb-hv10-chip__drift{ animation-delay:-9.6s; }
.wb-scope .wb-hv--10 .wb-hv10-puck--web .wb-hv10-chip__drift{ animation-delay:-2.5s; }
.wb-scope .wb-hv--10 .wb-hv10-puck--cam .wb-hv10-chip__drift{ animation-delay:-7.8s; }

/* Proof chips: 44px photo coins + the claim. */
.wb-scope .wb-hv--10 .wb-hv10-coin{ width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); box-shadow:0 6px 14px rgba(0,0,0,.45); }
.wb-scope .wb-hv--10 .wb-hv10-chip__num{ font-family:var(--wb-display); font-weight:900; font-size:1.15rem; line-height:1; letter-spacing:.01em; text-transform:uppercase; color:#fff; }
.wb-scope .wb-hv--10 .wb-hv10-chip__label{ font-size:.64rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.5; color:rgba(255,255,255,.7); max-width:19ch; }
/* The odometer chip: the one satellite with a red rail + chrome digits, and
   it overlaps the slab's edge z-front (proof group z4 over slab z3). */
.wb-scope .wb-hv--10 .wb-hv10-chip--jobs .wb-hv10-chip__drift{ border-top:3px solid var(--wb-red); }
.wb-scope .wb-hv--10 .wb-hv10-jobs__num{ font-family:var(--wb-display); font-weight:900; font-size:clamp(1.7rem, 1.2rem + 1.2vw, 2.4rem); line-height:1; font-variant-numeric:tabular-nums; }

/* Capability pucks: cartoon art + a service label; the whole chip is the
   link. Hover lifts on the separate translate channel so the drift keyframes
   (transform) keep running underneath. */
.wb-scope .wb-hv--10 .wb-hv10-puck__art{ height:56px; width:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.wb-scope .wb-hv--10 .wb-hv10-puck__label{ font-family:var(--wb-display); font-weight:800; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:#fff; }
.wb-scope .wb-hv--10 .wb-hv10-puck:hover .wb-hv10-chip__drift,
.wb-scope .wb-hv--10 .wb-hv10-puck:focus-visible .wb-hv10-chip__drift{
  translate:0 -3px;
  border-color:rgba(255,90,97,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 18px 40px -12px rgba(0,0,0,.65);
}
/* The laptop puck: the real Karns build seated in the frame's transparent
   screen (screen box measured off laptop.png). */
.wb-scope .wb-hv--10 .wb-hv10-web{ position:relative; display:block; width:120px; }
.wb-scope .wb-hv--10 .wb-hv10-web__frame{ position:relative; z-index:2; display:block; width:100%; height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.wb-scope .wb-hv--10 .wb-hv10-web__site{ position:absolute; z-index:1; left:14%; top:5%; width:72%; height:70%; object-fit:cover; object-position:center top; }

/* Desktop orbit anchors (the ring only exists at 1280px+; below that it
   collapses to strips, which retires the spec's 1024-1280 collision risk). */
.wb-scope .wb-hv--10 .wb-hv10-chip--y96{ left:1%; top:6%; }
.wb-scope .wb-hv--10 .wb-hv10-chip--y98{ right:1%; top:6%; }
.wb-scope .wb-hv--10 .wb-hv10-chip--jobs{ right:14.5%; bottom:17%; }
.wb-scope .wb-hv--10 .wb-hv10-puck--mega{ right:3.5%; top:29%; }
.wb-scope .wb-hv--10 .wb-hv10-puck--soc{ right:0; top:53%; }
.wb-scope .wb-hv--10 .wb-hv10-puck--van{ right:2.5%; bottom:0; }
.wb-scope .wb-hv--10 .wb-hv10-puck--mic{ left:4%; bottom:1%; }
.wb-scope .wb-hv--10 .wb-hv10-puck--web{ left:0; top:47%; }
.wb-scope .wb-hv--10 .wb-hv10-puck--cam{ left:3.5%; top:27%; }

/* The no-stock-footage badge, camera-corner style, lower-left of the stage. */
.wb-scope .wb-hv--10 .wb-hv10-badge{
  position:absolute; left:.25rem; bottom:-2.2rem; margin:0;
  display:flex; align-items:center; gap:.5rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.wb-scope .wb-hv--10 .wb-hv10-badge__dot{ flex:0 0 auto; width:.55rem; height:.55rem; border-radius:50%; background:#ff4a52; }
@media (prefers-reduced-motion:no-preference){
  .wb-js .wb-scope .wb-hv--10 .wb-hv10-badge__dot{ animation:wb-hv10-pulse 2.4s ease-out infinite; }
}
@keyframes wb-hv10-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,74,82,.55); }
  70%{ box-shadow:0 0 0 .55em rgba(255,74,82,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,74,82,0); }
}

/* Under 1280px: the ring collapses. Proof chips become one centered row under
   the slab, pucks a horizontal snap-strip (auto margins on the ends center it
   when it fits), the shear and the drift park, the badge falls into flow. */
@media (max-width:1279px){
  .wb-scope .wb-hv--10 .wb-hv10-proof,
  .wb-scope .wb-hv--10 .wb-hv10-pucks{ position:static; pointer-events:auto; transform:none; transition:none; display:flex; }
  .wb-scope .wb-hv--10 .wb-hv10-chip,
  .wb-scope .wb-hv--10 .wb-hv10-puck{ position:static; }
  .wb-scope .wb-hv--10 .wb-hv10-proof{ flex-wrap:wrap; justify-content:center; align-items:stretch; gap:.8rem; margin-top:1.3rem; }
  .wb-scope .wb-hv--10 .wb-hv10-pucks{ flex-wrap:nowrap; gap:.8rem; margin-top:.9rem; padding:0 .25rem .6rem; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .wb-scope .wb-hv--10 .wb-hv10-puck{ flex:0 0 auto; scroll-snap-align:center; }
  .wb-scope .wb-hv--10 .wb-hv10-puck:first-child{ margin-left:auto; }
  .wb-scope .wb-hv--10 .wb-hv10-puck:last-child{ margin-right:auto; }
  .wb-scope .wb-hv--10 .wb-hv10-chip__drift{ height:100%; }
  .wb-js .wb-scope .wb-hv--10 .wb-hv10-chip__drift{ animation:none; }
  .wb-scope .wb-hv--10 .wb-hv10-badge{ position:static; justify-content:center; margin-top:1rem; }
  .wb-scope .wb-hv--10 .wb-hv10-rocket{ right:-1.2rem; bottom:-1.2rem; width:130px; }
}

/* Mobile (the spec's 390 plan): full-width glass card, WGSD ~200px, 36px
   coins, ~90px rocket on the card corner, full-width input + red button
   (the shared ask already stacks under 640). Poster only; the video element
   is display:none under 768 and initHeroV10 never injects sources there. */
@media (max-width:640px){
  .wb-scope .wb-hv--10 .wb-hv10-stage{ padding:0; }
  .wb-scope .wb-hv--10 .wb-hv10-slab{ padding:1.3rem 1rem 1.7rem; border-radius:16px; }
  .wb-scope .wb-hv--10 .wb-hv10-wgsd{ width:200px; }
  .wb-scope .wb-hv--10 .wb-hv10-coin{ width:36px; height:36px; }
  .wb-scope .wb-hv--10 .wb-hv10-chip__drift{ padding:.6rem .7rem .7rem; }
  .wb-scope .wb-hv--10 .wb-hv10-chip__label{ max-width:16ch; }
  .wb-scope .wb-hv--10 .wb-hv10-jobs__num{ font-size:1.55rem; }
  .wb-scope .wb-hv--10 .wb-hv10-puck__art{ height:44px; }
  .wb-scope .wb-hv--10 .wb-hv10-web{ width:96px; }
  .wb-scope .wb-hv--10 .wb-hv10-rocket{ width:90px; right:-.6rem; bottom:-.9rem; }
}

/* Reduced motion: everything parks in final position (the video is already
   display:none above; initHeroV10 never adds .is-launch under reduce). */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--10 .wb-hv10-rocket,
  .wb-scope .wb-hv--10 .wb-hv10-chip__drift,
  .wb-scope .wb-hv--10 .wb-hv10-badge__dot,
  .wb-scope .wb-hv--10.is-launch .wb-hv10-rocket{ animation:none !important; }
  .wb-scope .wb-hv--10 .wb-hv10-proof,
  .wb-scope .wb-hv--10 .wb-hv10-pucks{ transform:none; transition:none; }
}


/* ================================================================
   HERO VARIANT skin 11 "The 30-Year Ribbon" (build/37 thirty-year-ribbon)
   ----------------------------------------------------------------
   Screen one: the shipped focal ask untouched over a dark chrome
   band; below it, a full-bleed, -1.5deg filmstrip of 12 real dated
   snapshots (white-border prints, red year tabs, STILL A CLIENT
   stamps on Hoober/Donegal/Karns) ending at a live TODAY panel.
   Committee fixes: the strip stays DENSE AND FAST (tight prints, a
   quick pure-CSS tab-pop stagger, no slow theatrics) so the dated
   snapshots read as receipts, not scrapbook; copy up top stays
   execution-first. The scroller is native (JS off = plain swipe,
   van parked at 1996); arrows are .wb-js gated. Tilt is removed
   under 700px to kill x-overflow; frame height clamps against vh
   so short viewports cut the strip, never the ask. */

/* Band level: hide the shared video + scrim, swap the backdrop for the
   dark chrome wall the prints hang on (honeycomb + a red glow upper-right,
   vignetting down toward the strip). !important needed: the section
   carries an inline background-image poster. */
.wb-scope .wb-hero-v11 .wb-band__video-wrap,
.wb-scope .wb-hero-v11 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v11.wb-band--video{
  background:
    radial-gradient(58rem 30rem at 84% 2%, rgba(216,35,42,.22), transparent 62%),
    linear-gradient(180deg, rgba(5,6,9,.44), rgba(5,6,9,.74) 82%),
    #0a0b0e url("../images/overhaul/tex-honeycomb-dark.webp") center top/cover no-repeat !important;
}
/* v8 precedent: pin the shrink-wrapping inner to the full track so the
   ribbon's full-bleed breakout math is stable. */
.wb-scope .wb-hero-v11 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--11{ position:relative; }
/* fonts-modern pins p to Inter (!important); the headline is a p. */
.wb-scope .wb-hv--11 .wb-h1{ font-family:var(--wb-display) !important; }
/* The opaque strip follows below the ask, so the dropdown must stack over it. */
.wb-scope .wb-hv--11 .wb-hero-ask-row--focal{ position:relative; z-index:5; }
.wb-scope .wb-hv--11 .wb-hv11-lead a{ color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:rgba(216,35,42,.85); text-underline-offset:3px; }
.wb-scope .wb-hv--11 .wb-hv11-lead a:hover{ text-decoration-color:#fff; }
.wb-scope .wb-hv--11 .wb-hv11-mob{ display:none; }

/* ---- The ribbon: full-bleed breakout, pulled down over most of the
   band's bottom padding so the strip runs close to the seam. The
   margin-bottom is its own declaration so a missing var can never
   break the breakout margins (it would just sit framed). */
.wb-scope .wb-hv--11 .wb-hv11-ribbon{ position:relative; width:100vw; margin:clamp(1.8rem, 1.2rem + 2vw, 3rem) 0 0 calc(50% - 50vw); }
.wb-scope .wb-hv--11 .wb-hv11-ribbon{ margin-bottom:calc((var(--wb-pad, 2.4rem) - 2.4rem) * -1); }

.wb-scope .wb-hv--11 .wb-hv11-tiltwrap{ position:relative; transform:rotate(-1.5deg); }

/* The window: a native horizontal scroller (timeline grammar: thin red
   scrollbar as the built-in scrub cue, grab cursor, no wheel hijack). */
.wb-scope .wb-hv--11 .wb-hv11-win{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  padding:1.7rem 0 3.4rem;
  scrollbar-width:thin; scrollbar-color:var(--wb-red) rgba(255,255,255,.12);
  cursor:grab;
}
.wb-scope .wb-hv--11 .wb-hv11-win.is-drag{ cursor:grabbing; }
.wb-scope .wb-hv--11 .wb-hv11-win::-webkit-scrollbar{ height:8px; }
.wb-scope .wb-hv--11 .wb-hv11-win::-webkit-scrollbar-thumb{ background:var(--wb-red); border-radius:8px; }
.wb-scope .wb-hv--11 .wb-hv11-win::-webkit-scrollbar-track{ background:rgba(255,255,255,.1); border-radius:8px; }

.wb-scope .wb-hv--11 .wb-hv11-track{
  display:flex; align-items:flex-end; gap:clamp(.9rem, .6rem + 1vw, 1.5rem);
  width:max-content; margin:0; padding:0 clamp(1.2rem, 4vw, 3rem); list-style:none;
}
.wb-scope .wb-hv--11 .wb-hv11-frame{ flex:0 0 auto; position:relative; }

/* The prints: white-border, alternating tilt, hover lifts and straightens.
   Height clamps against vh so a short viewport shrinks the strip. */
.wb-scope .wb-hv--11 .wb-hv11-print{
  display:block; position:relative; background:#fdfdfb; padding:6px 6px 0; border-radius:3px;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.75);
  transform:rotate(2deg); transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none;
}
.wb-scope .wb-hv--11 .wb-hv11-frame:nth-child(2n) .wb-hv11-print{ transform:rotate(-2deg); }
.wb-scope .wb-hv--11 .wb-hv11-print:hover,
.wb-scope .wb-hv--11 .wb-hv11-print:focus-visible{ transform:rotate(0deg) translateY(-6px); box-shadow:0 26px 46px -16px rgba(0,0,0,.85); z-index:3; }
.wb-scope .wb-hv--11 .wb-hv11-print:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wb-scope .wb-hv--11 .wb-hv11-print img{
  display:block; width:auto; border-radius:2px;
  height:clamp(146px, 11vh + 84px, 210px);
}

/* Red year tab, hanging off the print's top-left corner. The pop stagger
   is pure CSS, keyed to the reveal class landing on the ribbon (per-frame
   delay rides the --i inline prop); with JS off the tabs are simply on. */
.wb-scope .wb-hv--11 .wb-hv11-year{
  position:absolute; top:-12px; left:10px; z-index:2;
  padding:.3rem .55rem .32rem; background:var(--wb-red); color:#fff; border-radius:4px;
  font-family:var(--wb-display); font-weight:800; font-size:.78rem; letter-spacing:.08em; line-height:1;
  text-transform:uppercase; box-shadow:0 6px 14px -6px rgba(0,0,0,.6);
}
.wb-js .wb-scope .wb-hv--11 .wb-hv11-ribbon.is-in .wb-hv11-year{
  animation:wb-hv11-pop .32s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay:calc(.25s + .06s * var(--i, 0));
}
@keyframes wb-hv11-pop{
  from{ opacity:0; transform:translateY(8px) scale(.55); }
  to{ opacity:1; transform:none; }
}

/* The caption line in the bottom white border. width:0 + min-width:100%
   keeps a long caption from widening the print past its photo. */
.wb-scope .wb-hv--11 .wb-hv11-cap{
  display:block; width:0; min-width:100%; box-sizing:border-box;
  padding:.44rem .35rem .52rem;
  font-family:var(--wb-display); font-weight:700; font-size:.63rem; letter-spacing:.06em;
  line-height:1.1; text-transform:uppercase; color:#2c3038; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* STILL A CLIENT: a red stamp slapped across the print's lower corner. */
.wb-scope .wb-hv--11 .wb-hv11-still{
  position:absolute; right:-8px; bottom:32px; z-index:2; transform:rotate(-4deg);
  padding:.28rem .5rem; background:var(--wb-red); color:#fff; border-radius:3px;
  font-family:var(--wb-display); font-weight:800; font-size:.6rem; letter-spacing:.12em;
  line-height:1; text-transform:uppercase; box-shadow:0 6px 12px -5px rgba(0,0,0,.65);
}

/* Zoom cue (v8 grammar): quiet until hover/focus. */
.wb-scope .wb-hv--11 .wb-hv11-zoomcue{
  position:absolute; right:12px; top:12px; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:rgba(14,16,22,.78); color:#fff;
  font-size:.75rem; opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.wb-scope .wb-hv--11 .wb-hv11-print:hover .wb-hv11-zoomcue,
.wb-scope .wb-hv--11 .wb-hv11-print:focus-visible .wb-hv11-zoomcue{ opacity:1; }

/* TODAY: the live panel the strip docks into. Deliberately straight and
   glassy against the tilted prints: the one frame that is not a memory. */
.wb-scope .wb-hv--11 .wb-hv11-today{
  position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.4rem;
  min-height:calc(clamp(146px, 11vh + 84px, 210px) + 6px);
  padding:1.1rem 1.5rem 1.2rem;
  background:linear-gradient(160deg, rgba(216,35,42,.18), rgba(255,255,255,.05) 55%), rgba(12,14,19,.92);
  border:1px solid rgba(255,255,255,.16); border-top:3px solid var(--wb-red); border-radius:8px;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.75);
}
.wb-scope .wb-hv--11 .wb-hv11-year--today{ background:#fff; color:var(--wb-red); }
.wb-scope .wb-hv--11 .wb-hv11-today__num{
  font-family:var(--wb-display); font-weight:800; font-size:clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem);
  line-height:1; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.wb-scope .wb-hv--11 .wb-hv11-today__label{
  font-family:var(--wb-display); font-weight:700; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.75);
}
.wb-scope .wb-hv--11 .wb-hv11-today__cta{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.5rem;
  padding:.6rem 1.05rem; background:var(--wb-red); color:#fff; border-radius:999px;
  font-family:var(--wb-display); font-weight:700; font-size:.76rem; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none; transition:background .15s ease, transform .15s ease;
}
.wb-scope .wb-hv--11 .wb-hv11-today__cta:hover{ background:#b81d23; transform:translateY(-1px); color:#fff; }
.wb-scope .wb-hv--11 .wb-hv11-today__cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* The red wire under the prints + the delivery van that rides it (JS maps
   translateX to scroll fraction; parked at 1996 otherwise). delivery-van
   noses LEFT (build/26 rulebook art), so the base transform mirrors it to
   drive left-to-right; the JS re-states scaleX(-1) with every translateX. */
.wb-scope .wb-hv--11 .wb-hv11-wire{
  position:absolute; left:-2vw; right:-2vw; bottom:1.7rem; height:2px; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(216,35,42,0), var(--wb-red) 8%, var(--wb-red) 92%, rgba(216,35,42,0));
}
.wb-scope .wb-hv--11 .wb-hv11-van{
  position:absolute; left:8px; bottom:calc(1.7rem - 4px); width:100px; height:auto; z-index:1;
  transform:scaleX(-1);
  pointer-events:none; will-change:transform; filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));
}

/* Skip-to-today: a plain in-page anchor (scrolls the container natively
   with JS off; initHeroV11 smooths it and swallows the hash). */
.wb-scope .wb-hv--11 .wb-hv11-skip{
  position:absolute; top:-.9rem; right:clamp(1.2rem, 4vw, 3rem); z-index:4;
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--wb-display); font-weight:700; font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.72); text-decoration:none;
}
.wb-scope .wb-hv--11 .wb-hv11-skip:hover{ color:#fff; }
.wb-scope .wb-hv--11 .wb-hv11-skip:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Arrows: the timeline nav circles, re-anchored inside the full-bleed
   strip and .wb-js gated (they are dead weight without JS). The base
   class's own min-width rule would show them, so pin display here. */
.wb-scope .wb-hv--11 .wb-hv11-nav{ display:none; top:calc(50% - 1.6rem); }
.wb-scope .wb-hv--11 .wb-hv11-nav--prev{ left:14px; }
.wb-scope .wb-hv--11 .wb-hv11-nav--next{ right:14px; }
.wb-scope .wb-hv--11 .wb-hv11-nav i{ font-size:1.05rem; }
@media (min-width:640px){
  .wb-js .wb-scope .wb-hv--11 .wb-hv11-nav{ display:flex; }
}

/* ---- Short viewports: the ask owns the fold; the strip shrinks. ---- */
@media (max-height:760px){
  .wb-scope .wb-hv--11 .wb-hv11-ribbon{ margin-top:1.2rem; }
  .wb-scope .wb-hv--11 .wb-hv11-win{ padding-bottom:2.9rem; }
}

/* ---- Under 700px: tilt off (kills x-overflow), van + wire off,
   scroll-snap on, tighter prints (the spec's ~235px cards). ---- */
@media (max-width:699px){
  .wb-scope .wb-hv--11 .wb-hv11-tiltwrap{ transform:none; }
  .wb-scope .wb-hv--11 .wb-hv11-van,
  .wb-scope .wb-hv--11 .wb-hv11-wire{ display:none; }
  .wb-scope .wb-hv--11 .wb-hv11-win{ scroll-snap-type:x proximity; padding:1.4rem 0 1.4rem; }
  .wb-scope .wb-hv--11 .wb-hv11-frame{ scroll-snap-align:center; }
  .wb-scope .wb-hv--11 .wb-hv11-print img{ height:172px; }
  .wb-scope .wb-hv--11 .wb-hv11-today{ min-height:178px; }
  .wb-scope .wb-hv--11 .wb-hv11-skip{ top:-.5rem; }
}
@media (max-width:560px){
  .wb-scope .wb-hv--11 .wb-hv11-desk{ display:none; }
  .wb-scope .wb-hv--11 .wb-hv11-mob{ display:inline; }
}

/* ---- Reduced motion: no tab pop, no hover lift, static strip; the
   scroller, arrows, and lightbox still work; the odometer renders its
   final PHP number via the shared initCount reduce path. ---- */
@media (prefers-reduced-motion:reduce){
  .wb-js .wb-scope .wb-hv--11 .wb-hv11-ribbon.is-in .wb-hv11-year{ animation:none; }
  .wb-scope .wb-hv--11 .wb-hv11-print{ transition:none; }
  .wb-scope .wb-hv--11 .wb-hv11-print:hover,
  .wb-scope .wb-hv--11 .wb-hv11-print:focus-visible{ transform:rotate(0deg); }
  .wb-scope .wb-hv--11 .wb-hv11-today__cta{ transition:none; }
}


/* ---- Variant 12 "The Wall of Work" (build/37, wall-of-work, Content 90.5).
   The shop wall replaces the video: a full-bleed 6x3 grid of 12 real client
   pieces that stagger-assembles on load like jobs being hung as they finish,
   with the kicker / shipped ask / H1 / proof on a dark glass panel over the
   ONE production photo on screen, deliberately blurred BEHIND the promise.
   Committee fixes: tiles rest dimmed (brightness .82) so the panel is the one
   bright object (the war-room dimming discipline grafted per the crossbreed
   note); an idle 24s cycle breathes one tile at a time; hover lifts a tile to
   full color with a slow Ken Burns and a caption chip naming the piece. All
   assembly/breathe motion is pure CSS, gated behind .wb-js AND reduced motion,
   and keyed to display so it replays on every switcher flip; no-JS renders the
   whole wall instantly with a working GET form. NO backdrop-filter anywhere:
   the backdrop photo is CSS-blurred in its own clipped layer and the panel
   face is solid rgba, so ask contrast never rides on filter support. */

/* Band level: kill the shared video + scrim; the wall IS the backdrop, so the
   band just goes near-black behind the 6px grout lines. !important required,
   the section carries an inline background-image poster. */
.wb-scope .wb-hero-v12 .wb-band__video-wrap,
.wb-scope .wb-hero-v12 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v12.wb-band--video{ background:#0b0c10 !important; }
/* Pin the shrink-wrapping inner to the full track (v8 precedent) so the
   full-bleed breakout math is stable. */
.wb-scope .wb-hero-v12 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--12{ position:relative; }

/* THE WALL: full-bleed breakout from the centered inner (the spaces inside the
   calc are load-bearing), pulled up over the hero band's nav-clearance padding
   and down over its bottom padding so the grid meets the band edges like the
   shipped video does; the band's own overflow:hidden clips it clean. If either
   var is missing the margins fall back to 0 and the wall just sits framed. */
.wb-scope .wb-hv--12 .wb-hv12-wall{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-template-rows:clamp(150px, 21vh, 230px) auto clamp(150px, 21vh, 230px);
  gap:6px;
  width:100vw;
  margin:calc((var(--wb-pad) + var(--wb-nav-h)) * -1) 0 calc(var(--wb-pad) * -1) calc(50% - 50vw);
}
.wb-scope .wb-hv--12 .wb-hv12-set{ display:contents; }

/* The tiles: dimmed at rest so the glass panel stays the one bright object;
   hover/focus lifts to full color with a slow Ken Burns; every tile is a
   shared-lightbox link with a caption chip naming the piece and the client. */
.wb-scope .wb-hv--12 .wb-hv12-tile{ position:relative; display:block; overflow:hidden; background:#14171c; }
.wb-scope .wb-hv--12 .wb-hv12-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.82) saturate(.94); transition:filter .3s ease, transform 5s ease; }
.wb-scope .wb-hv--12 .wb-hv12-tile:hover img,
.wb-scope .wb-hv--12 .wb-hv12-tile:focus-visible img{ filter:brightness(1.02) saturate(1); transform:scale(1.06); animation:none; }
.wb-scope .wb-hv--12 .wb-hv12-tile:focus-visible{ outline:2px solid #fff; outline-offset:-3px; }
/* Website tiles get the CSS browser-chrome bar (three dots), v8 grammar. */
.wb-scope .wb-hv--12 .wb-hv12-tile--site::before{
  content:""; position:absolute; top:0; left:0; right:0; height:14px; z-index:1;
  background:
    radial-gradient(circle at 9px 7px, #ff5f57 2.4px, transparent 3.2px),
    radial-gradient(circle at 21px 7px, #febc2e 2.4px, transparent 3.2px),
    radial-gradient(circle at 33px 7px, #28c840 2.4px, transparent 3.2px),
    #dfe3e8;
}
/* The caption chip: hidden until hover/focus on pointer screens; always on
   for touch (hover:none) and under reduced motion, per the build/37 plan. */
.wb-scope .wb-hv--12 .wb-hv12-cap{ position:absolute; left:.55rem; bottom:.55rem; z-index:2; max-width:calc(100% - 1.1rem); padding:.3em .62em; border-radius:5px; background:rgba(10,12,16,.84); color:#fff; font-family:var(--wb-display); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; opacity:0; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
.wb-scope .wb-hv--12 .wb-hv12-cap i{ color:#ff5a61; margin-right:.15em; }
.wb-scope .wb-hv--12 .wb-hv12-tile:hover .wb-hv12-cap,
.wb-scope .wb-hv--12 .wb-hv12-tile:focus-visible .wb-hv12-cap{ opacity:1; transform:none; }
@media (hover: none){
  .wb-scope .wb-hv--12 .wb-hv12-cap{ opacity:1; transform:none; }
}

/* Placement + the shuffled assembly/breathe delays (per tile: --hv12-d = hang
   delay 0-660ms, --hv12-b = breathe phase, --hv12-r = settle tilt). */
.wb-scope .wb-hv--12 .wb-hv12-t-karns{ grid-column:1 / 3; grid-row:1; --hv12-d:.3s; --hv12-b:0s; --hv12-r:-1.2deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-booth{ grid-column:3 / 5; grid-row:1; --hv12-d:.06s; --hv12-b:-2s; --hv12-r:1deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-poster{ grid-column:5 / 6; grid-row:1; --hv12-d:.48s; --hv12-b:-4s; --hv12-r:-.9deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-arch{ grid-column:6 / 7; grid-row:1; --hv12-d:.18s; --hv12-b:-6s; --hv12-r:1.2deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-whoopie{ grid-column:3 / 4; grid-row:3; --hv12-d:0s; --hv12-b:-8s; --hv12-r:1.1deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-golf{ grid-column:5 / 6; grid-row:3; --hv12-d:.36s; --hv12-b:-10s; --hv12-r:-1deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-zimm{ grid-column:1 / 2; grid-row:2; --hv12-d:.6s; --hv12-b:-12s; --hv12-r:.8deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-detect{ grid-column:6 / 7; grid-row:2; --hv12-d:.12s; --hv12-b:-14s; --hv12-r:-1.1deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-signs{ grid-column:1 / 2; grid-row:3; --hv12-d:.54s; --hv12-b:-16s; --hv12-r:1deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-video{ grid-column:2 / 3; grid-row:3; --hv12-d:.24s; --hv12-b:-18s; --hv12-r:-.8deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-boyers{ grid-column:4 / 5; grid-row:3; --hv12-d:.66s; --hv12-b:-20s; --hv12-r:.9deg; }
.wb-scope .wb-hv--12 .wb-hv12-t-wallover{ grid-column:6 / 7; grid-row:3; --hv12-d:.42s; --hv12-b:-22s; --hv12-r:-1.2deg; }

/* The assembly + the idle breathe. .wb-js gated (no-JS renders instantly, no
   pre-hidden state), reduced-motion gated, and keyed to display so both replay
   on every switcher flip. The hang both-fills, so nothing depends on reveal
   or JS timing to end up readable. */
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-hv--12 .wb-hv12-tile{ animation:wb-hv12-hang .55s cubic-bezier(.2, .7, .3, 1) both; animation-delay:var(--hv12-d, 0s); }
  .wb-js .wb-scope .wb-hv--12 .wb-hv12-tile img{ animation:wb-hv12-breathe 24s ease-in-out infinite; animation-delay:var(--hv12-b, 0s); }
}
@keyframes wb-hv12-hang{
  from{ opacity:0; transform:translateY(26px) rotate(var(--hv12-r, 1deg)) scale(.96); }
  to{ opacity:1; transform:none; }
}
@keyframes wb-hv12-breathe{
  0%, 86%, 100%{ filter:brightness(.82) saturate(.94); }
  92%{ filter:brightness(1.05) saturate(1); }
}

/* THE GLASS: the mid cell. The blurred production floor lives in its OWN
   clipped layer (never overflow on the cell itself, so the ask dropdown can
   escape); the panel face is solid dark rgba, no backdrop-filter. */
.wb-scope .wb-hv--12 .wb-hv12-mid{ position:relative; z-index:3; grid-column:2 / 6; grid-row:2; display:flex; align-items:center; justify-content:center; padding:clamp(1.4rem, 1rem + 1.8vw, 3rem) clamp(1.2rem, .8rem + 1.5vw, 2.6rem); }
.wb-scope .wb-hv--12 .wb-hv12-floorwrap{ position:absolute; inset:0; overflow:hidden; background:#14171c; }
.wb-scope .wb-hv--12 .wb-hv12-floor{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(10px) brightness(.52) saturate(.85); transform:scale(1.1); }
.wb-scope .wb-hv--12 .wb-hv12-panel{ position:relative; z-index:2; width:100%; max-width:46rem; background:rgba(11,13,17,.84); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 34px 80px -24px rgba(0,0,0,.75); padding:clamp(1.3rem, 1rem + 1.6vw, 2.3rem); }
.wb-scope .wb-hv--12 .wb-hv12-panel .wb-kicker{ margin:0 0 .9rem; }

/* The shipped focal ask, compacted for the panel; lifted so the open results
   dropdown paints over the panel copy and the row-3 tiles below. */
.wb-scope .wb-hv--12 .wb-hero-ask-row--focal{ position:relative; z-index:5; margin:.2rem 0 clamp(1.2rem, .8rem + 1vw, 1.8rem); max-width:none; }
.wb-scope .wb-hv--12 .wb-hero-ask-row--focal .wb-hero-ask__wgsd img{ height:clamp(76px, 6.5vw, 104px); }
.wb-scope .wb-hv--12 .wb-hero-ask-row--focal .wb-hero-ask__q{ font-size:clamp(1.25rem, 1rem + .9vw, 1.8rem); }

/* fonts-modern pins p to Inter (!important), so the display face must be
   re-asserted on the p.wb-h1. Steps down from the ask, panel-scaled. */
.wb-scope .wb-hv--12 .wb-h1{ font-family:var(--wb-display) !important; font-size:clamp(1.65rem, 1.2rem + 1.5vw, 2.55rem); line-height:1.1; margin:0; }
.wb-scope .wb-hv--12 .wb-hv12-lead{ margin:.9rem 0 0; max-width:58ch; font-size:clamp(1rem, .95rem + .3vw, 1.2rem); }

/* The receipts strip (shared .wb-hv-proof), tightened to panel rhythm. */
.wb-scope .wb-hv--12 .wb-hv-proof{ margin-top:clamp(1.1rem, .8rem + 1vw, 1.6rem); padding-top:clamp(.9rem, .6rem + .8vw, 1.2rem); }
.wb-scope .wb-hv--12 .wb-hv12-tel{ text-decoration:none; }
.wb-scope .wb-hv--12 .wb-hv12-tel:hover{ color:#ff5a61; }

/* The because-clause fine print; the first sentence swaps on phones where the
   blurred backdrop is dropped. */
.wb-scope .wb-hv--12 .wb-hv12-fine{ margin:1rem 0 0; font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.62); }
.wb-scope .wb-hv--12 .wb-hv12-fine-mob{ display:none; }

/* Tablet + phone (the build/37 390 plan, applied below the 6-col grid's
   comfort floor): the wall regroups into the 3x2 mini-wall of the six
   punchiest tiles, the panel as a solid dark card in flow, and the remaining
   six as a lazy scroll-snap shelf with always-on captions. Backdrop and
   breathing are dropped with the layout. */
@media (max-width:1023px){
  .wb-scope .wb-hv--12 .wb-hv12-wall{ display:flex; flex-direction:column; gap:0; }
  .wb-scope .wb-hv--12 .wb-hv12-set{ display:block; }
  .wb-scope .wb-hv--12 .wb-hv12-set--mini{ order:1; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; }
  .wb-scope .wb-hv--12 .wb-hv12-mid{ order:2; display:block; padding:1.1rem .9rem 1.2rem; }
  .wb-scope .wb-hv--12 .wb-hv12-set--strip{ order:3; display:flex; overflow-x:auto; gap:.5rem; padding:.15rem .9rem .8rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .wb-scope .wb-hv--12 .wb-hv12-set--mini .wb-hv12-tile{ grid-column:auto; grid-row:auto; height:clamp(110px, 15vw + 60px, 190px); }
  .wb-scope .wb-hv--12 .wb-hv12-set--strip .wb-hv12-tile{ flex:0 0 62vw; max-width:330px; height:180px; scroll-snap-align:start; grid-column:auto; grid-row:auto; }
  .wb-scope .wb-hv--12 .wb-hv12-set--strip .wb-hv12-cap,
  .wb-scope .wb-hv--12 .wb-hv12-set--mini .wb-hv12-cap{ opacity:1; transform:none; }
  .wb-scope .wb-hv--12 .wb-hv12-tile img{ animation:none; }
  .wb-scope .wb-hv--12 .wb-hv12-floorwrap{ display:none; }
  .wb-scope .wb-hv--12 .wb-hv12-panel{ max-width:none; background:#12151b; }
  .wb-scope .wb-hv--12 .wb-hv12-fine-desk{ display:none; }
  .wb-scope .wb-hv--12 .wb-hv12-fine-mob{ display:inline; }
}
@media (max-width:560px){
  .wb-scope .wb-hv--12 .wb-hv12-trim{ display:none; }
  .wb-scope .wb-hv--12 .wb-hero-ask-row--focal .wb-hero-ask__wgsd img{ height:70px; }
  .wb-scope .wb-hv--12 .wb-hv12-set--strip .wb-hv12-tile{ flex-basis:68vw; height:160px; }
  .wb-scope .wb-hv--12 .wb-hv12-cap{ font-size:.6rem; }
}

/* Reduced motion: no assembly, no breathing, no Ken Burns; tiles static at
   brightness .9 and captions always visible. Nothing depends on any of it. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--12 .wb-hv12-tile img{ filter:brightness(.9) saturate(.96); transition:none; }
  .wb-scope .wb-hv--12 .wb-hv12-tile:hover img,
  .wb-scope .wb-hv--12 .wb-hv12-tile:focus-visible img{ transform:none; filter:brightness(1) saturate(1); }
  .wb-scope .wb-hv--12 .wb-hv12-cap{ opacity:1; transform:none; transition:none; }
}


/* ---- Variant 13 "The Reveal: Drag the Handoff" (build/37 before-after).
   The hero is one giant before/after wipe: two absolutely stacked layers
   rendered from ONE PHP template (identical grid, identical images), the
   BEFORE drained gray under panicked sticky notes, the AFTER full color and
   red-lit off the seam. The only animated property is a single-axis
   clip-path:inset on the AFTER layer driven by --wipe (set on the stage;
   inherited by the layers, the seam, the glow, and the hint, so everything
   tracks one number and registration cannot drift). The floating ask card
   overlaps the stage's bottom edge and is height-budgeted to clear a
   1280x800 fold (stage caps at 58vh/580px). Committee fixes baked in: notes
   capped at four, pills always visible, mobile keeps only the ink panel. */

/* Band level: kill the shared video + scrim, hang a dark pressroom wall
   (milled-metal texture under a dark wash + a red glow upper-left).
   !important is required, the section carries an inline background-image. */
.wb-scope .wb-hero-v13 .wb-band__video-wrap,
.wb-scope .wb-hero-v13 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v13.wb-band--video{
  background:
    radial-gradient(50rem 30rem at 12% 0%, rgba(216,35,42,.26), transparent 62%),
    linear-gradient(180deg, rgba(5,6,9,.66), rgba(5,6,9,.8)),
    #0a0b0d url("../images/overhaul/tex-metallic-lines.webp") center/cover no-repeat !important;
}
/* Pin the inner to the full track (the band's column flexbox lets .wb-inner
   shrink-wrap its widest child) so the full-bleed stage math holds. */
.wb-scope .wb-hero-v13 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--13{ position:relative; }

/* THE STAGE: full-bleed, fold-budgeted (the UI/UX seat's objection answered
   with a cap, not a hope): at 1280x800 the stage is 464px, so the ask card's
   field row lands ~y=700, inside the first viewport. */
.wb-scope .wb-hv--13 .wb-hv13-stage{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(400px, 58vh, 580px);
  margin-top:clamp(.8rem, .5rem + 1vw, 1.4rem);
  overflow:hidden;
  background:#101216;
}

/* The layers: identical flex columns (panels + the H1 row), absolutely
   stacked. Bottom padding leaves the H1 clear of the card overlap. */
.wb-scope .wb-hv--13 .wb-hv13-layer{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:clamp(3rem, 2.4rem + 1.5vw, 3.8rem) clamp(1.25rem, 4vw, 4rem) clamp(4.2rem, 3.4rem + 2vw, 5.4rem);
  background:#14161a;
}
/* BEFORE: drained to gray, dimmed, under the gray-blocks film. The filter
   grayscales the notes with it, that is the point: nothing here is moving. */
.wb-scope .wb-hv--13 .wb-hv13-layer--before{ filter:grayscale(1) brightness(.62) contrast(.92); }
.wb-scope .wb-hv--13 .wb-hv13-layer--before::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:url("../images/overhaul/tex-gray-blocks.webp") center/cover;
  opacity:.38; mix-blend-mode:multiply; pointer-events:none;
}
/* AFTER: full color on top, clipped at the seam; a red scrim pours off the
   clip edge (anchored to the same --wipe, so it always hugs the seam). */
.wb-scope .wb-hv--13 .wb-hv13-layer--after{ clip-path:inset(0 0 0 var(--wipe, 55%)); }
.wb-scope .wb-hv--13 .wb-hv13-layer--after::before{
  content:""; position:absolute; top:0; bottom:0; left:var(--wipe, 55%); width:9rem; z-index:3;
  background:linear-gradient(90deg, rgba(216,35,42,.32), rgba(216,35,42,0));
  pointer-events:none;
}

/* The shared panel grid. One explicit 100% row: the images are absolutely
   fitted, so the row must take its height from the stage, not the content. */
.wb-scope .wb-hv--13 .wb-hv13-panels{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1.18fr 1fr; grid-template-rows:100%;
  gap:clamp(.7rem, 1.2vw, 1.1rem);
}
.wb-scope .wb-hv--13 .wb-hv13-panel{ margin:0; position:relative; overflow:hidden; border-radius:12px; min-height:0; }
.wb-scope .wb-hv--13 .wb-hv13-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Caption chips: real shipped jobs, AFTER layer only. The ink panel's chip
   sits right-aligned so it lives in the color zone at the 55% rest state
   (and it is the one chip phones keep). */
.wb-scope .wb-hv--13 .wb-hv13-cap{
  display:none; position:absolute; left:.7rem; bottom:.7rem; z-index:2; max-width:calc(100% - 1.4rem);
  background:rgba(10,11,13,.8); color:#fff; border-left:3px solid var(--wb-red); border-radius:6px;
  font-family:var(--wb-display) !important; font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.4rem .65rem;
}
.wb-scope .wb-hv--13 .wb-hv13-layer--after .wb-hv13-cap{ display:block; }
.wb-scope .wb-hv--13 .wb-hv13-panel--ink .wb-hv13-cap{ left:auto; right:.7rem; }

/* The panicked sticky notes (BEFORE only, capped at four per build/37).
   All anchored in the left ~55% so the rest state shows the panic; the wipe
   eats them as it crosses. Absolute overlays: zero layout impact, zero
   registration risk. */
.wb-scope .wb-hv--13 .wb-hv13-note{
  position:absolute; z-index:4; max-width:11rem;
  background:#e9e5cf; color:#3c3a30;
  padding:.55rem .7rem .65rem;
  font-family:var(--wb-display); font-weight:700; font-size:clamp(.68rem, .6rem + .3vw, .82rem); line-height:1.25;
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.wb-scope .wb-hv--13 .wb-hv13-note--1{ left:5%; top:16%; transform:rotate(-4deg); }
.wb-scope .wb-hv--13 .wb-hv13-note--2{ left:26%; top:56%; transform:rotate(3deg); }
.wb-scope .wb-hv--13 .wb-hv13-note--3{ left:9%; bottom:20%; transform:rotate(-2deg); }
.wb-scope .wb-hv--13 .wb-hv13-note--4{ left:40%; top:24%; transform:rotate(5deg); }

/* WGSD in the color zone (AFTER layer, aria-hidden art; the clickable lockup
   lives on the ask card per Jg #85). */
.wb-scope .wb-hv--13 .wb-hv13-wgsd{
  position:absolute; right:2.5%; bottom:24%; z-index:4;
  width:clamp(88px, 8.5vw, 132px); height:auto;
  transform:rotate(4deg);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55));
}

/* The in-stage H1, identical metrics in both layers (nowrap so the halves can
   never break differently): dead gray in the before, chrome in the after, so
   the seam literally flips it as it crosses. Both copies are aria-hidden; the
   accessible headline is .wb-hv13-h1 below the stage. p needs the display
   face re-asserted (fonts-modern pins p to Inter). */
.wb-scope .wb-hv--13 .wb-hv13-h1x{
  flex:0 0 auto; margin:clamp(.9rem, .6rem + .8vw, 1.4rem) 0 0;
  font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(1.3rem, .7rem + 1.8vw, 2.2rem); line-height:1; letter-spacing:-.02em;
  text-transform:uppercase; white-space:nowrap;
  color:#63676e;
}

/* The range IS the stage (transparent, full-bleed, on top). .wb-js-gated so
   no-JS never renders a control that does nothing; touch-action:pan-y keeps
   vertical swipes scrolling the page while horizontal drags move the seam. */
.wb-scope .wb-hv--13 .wb-hv13-range{
  display:none;
  position:absolute; inset:0; z-index:7;
  width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; touch-action:pan-y;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.wb-js .wb-scope .wb-hv--13 .wb-hv13-range{ display:block; }

/* The seam + chrome grip (pointer-inert visuals; the range does the work).
   Keyboard focus on the range rings the grip (range sits before the seam in
   the DOM so the sibling combinator can reach it). */
.wb-scope .wb-hv--13 .wb-hv13-seam{
  position:absolute; top:0; bottom:0; left:var(--wipe, 55%); width:3px; margin-left:-1.5px; z-index:6;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
  box-shadow:0 0 18px rgba(216,35,42,.55);
  pointer-events:none;
}
.wb-scope .wb-hv--13 .wb-hv13-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #f4f6f8, #c7cdd4 55%, #eef1f5);
  color:#1a1d21; font-size:.95rem;
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.25);
}
.wb-scope .wb-hv--13 .wb-hv13-range:focus-visible ~ .wb-hv13-seam .wb-hv13-grip{
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 3px #fff, 0 0 0 6px var(--wb-red);
}

/* BEFORE/AFTER pills: always visible, never behind the reveal, they carry
   the which-side-is-Weber read (the build/37 load-bearing note). */
.wb-scope .wb-hv--13 .wb-hv13-pill{
  position:absolute; top:1rem; z-index:5; pointer-events:none; white-space:nowrap;
  font-family:var(--wb-display); font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .85rem; border-radius:999px;
}
.wb-scope .wb-hv--13 .wb-hv13-pill--before{ left:clamp(1.25rem, 4vw, 4rem); background:rgba(20,22,26,.85); color:#b9bec6; border:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--13 .wb-hv13-pill--after{ right:clamp(1.25rem, 4vw, 4rem); background:var(--wb-red); color:#fff; box-shadow:0 8px 22px rgba(216,35,42,.4); }

/* The hint pill: fades in under the grip after the auto-wipe lands
   (.is-landed), gone forever on first input (.is-used). JS-gated: without
   the script the seam does not drag, so the invitation never shows. */
.wb-scope .wb-hv--13 .wb-hv13-hint{
  display:none; position:absolute; top:calc(50% + 2.4rem); left:var(--wipe, 55%); transform:translateX(-50%); z-index:6;
  pointer-events:none; white-space:nowrap;
  font-family:var(--wb-display); font-weight:700; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(10,11,13,.72); border:1px solid rgba(255,255,255,.25);
  padding:.4rem .8rem; border-radius:999px;
  opacity:0; transition:opacity .45s ease;
}
.wb-js .wb-scope .wb-hv--13 .wb-hv13-hint{ display:block; }
.wb-scope .wb-hv--13 .wb-hv13-stage.is-landed .wb-hv13-hint{ opacity:1; }
.wb-scope .wb-hv--13 .wb-hv13-stage.is-used .wb-hv13-hint{ opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .wb-scope .wb-hv--13 .wb-hv13-stage.is-landed:not(.is-used) .wb-hv13-grip{ animation:wb-hv13-pulse 1s ease-out 2; }
}
@keyframes wb-hv13-pulse{
  0%{ box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,.55); }
  100%{ box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 14px rgba(255,255,255,0); }
}

/* The accessible headline: visually hidden on desktop (the stage carries the
   visual), the static chrome H1 below the stage on phones. */
@media (min-width:761px){
  .wb-scope .wb-hv--13 .wb-hv13-h1{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
}
@media (max-width:760px){
  .wb-scope .wb-hv--13 .wb-hv13-h1{ font-family:var(--wb-display) !important; font-size:clamp(1.6rem, 1.2rem + 2.4vw, 2.1rem); line-height:1.05; margin:1.2rem 0 0; max-width:none; }
}

/* THE FLOATING ASK CARD: dark glass overlapping the stage's bottom edge.
   position:relative + z-index:5 keeps the live dropdown above the stage and
   everything after it. */
.wb-scope .wb-hv--13 .wb-hv13-card{
  position:relative; z-index:5;
  max-width:58rem; margin:-52px auto 0;
  background:rgba(13,15,19,.86);
  border:1px solid rgba(255,255,255,.14); border-radius:18px;
  padding:clamp(1.1rem, .9rem + 1vw, 1.8rem) clamp(1.1rem, .9rem + 1.4vw, 2.2rem);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
  .wb-scope .wb-hv--13 .wb-hv13-card{ background:rgba(13,15,19,.97); }
}
.wb-scope .wb-hv--13 .wb-hv13-card .wb-hero-ask-row--focal{ margin:0; max-width:none; }

/* The stamp-of-approval deco on the card corner: static by default, lands
   once (scale-down thump) when the card reveals, motion-gated. */
.wb-scope .wb-hv--13 .wb-hv13-stamp{
  position:absolute; top:-2.4rem; right:-1.4rem; z-index:2; pointer-events:none;
  width:clamp(84px, 8vw, 120px); height:auto;
  transform:rotate(-10deg); opacity:.95;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion:no-preference){
  .wb-scope .wb-hv--13 .wb-hv13-card.is-in .wb-hv13-stamp{ animation:wb-hv13-stampland .38s cubic-bezier(.2,.9,.3,1.2) .55s both; }
}
@keyframes wb-hv13-stampland{
  from{ opacity:0; transform:rotate(-10deg) scale(1.7); }
  to{ opacity:.95; transform:rotate(-10deg) scale(1); }
}

/* Lead + receipts, centered under the card. */
.wb-scope .wb-hv--13 .wb-hv13-lead{ max-width:58rem; margin:clamp(1.2rem, .9rem + 1vw, 1.8rem) auto 0; text-align:center; }
.wb-scope .wb-hv--13 .wb-hv-proof{ max-width:58rem; margin-left:auto; margin-right:auto; }
.wb-scope .wb-hv--13 .wb-hv-proof__cell:last-child{ flex:1.6 1 220px; }
.wb-scope .wb-hv--13 .wb-hv-proof__cell:last-child .wb-hv-proof__label{ max-width:26ch; }

/* Mobile (390 plan, build/37): stage ~46vh with ONLY the ink panel (side
   panels display:none + lazy, never downloaded), bare BEFORE/AFTER pills,
   exactly two notes, 44px grip, no in-stage H1 / WGSD / hint / stamp; the
   chrome H1 goes static below, the lead trims to two sentences, the card
   sits full-width with the WGSD at the 70px rule (shared focal-row CSS). */
@media (max-width:760px){
  .wb-scope .wb-hv--13 .wb-hv13-stage{ height:clamp(280px, 46vh, 380px); }
  .wb-scope .wb-hv--13 .wb-hv13-layer{ padding:3.2rem .9rem .9rem; }
  .wb-scope .wb-hv--13 .wb-hv13-panels{ grid-template-columns:1fr; }
  .wb-scope .wb-hv--13 .wb-hv13-panel--side{ display:none; }
  .wb-scope .wb-hv--13 .wb-hv13-h1x{ display:none; }
  .wb-scope .wb-hv--13 .wb-hv13-wgsd{ display:none; }
  .wb-scope .wb-hv--13 .wb-hv13-hint{ display:none !important; }
  .wb-scope .wb-hv--13 .wb-hv13-note--3, .wb-scope .wb-hv--13 .wb-hv13-note--4{ display:none; }
  .wb-scope .wb-hv--13 .wb-hv13-note--1{ left:6%; top:18%; }
  .wb-scope .wb-hv--13 .wb-hv13-note--2{ left:12%; top:auto; bottom:14%; }
  .wb-scope .wb-hv--13 .wb-hv13-pill__more{ display:none; }
  .wb-scope .wb-hv--13 .wb-hv13-stamp{ display:none; }
  .wb-scope .wb-hv--13 .wb-hv13-card{ margin-top:-36px; }
  .wb-scope .wb-hv--13 .wb-hv13-lead{ text-align:left; }
  .wb-scope .wb-hv--13 .wb-hv13-cut{ display:none; }
}

/* Reduced motion: the stage rests at the server's 55% diptych, no auto-wipe
   (JS bails), no pulse/stamp-land (both gated above); dragging still works,
   it is user-initiated. Kill the transitions so state flips are instant. */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--13 .wb-hv13-hint{ transition:none; }
}


/* ---- Variant 14 "Hot Off The Press" (build/37 magazine-cover). The first
   screen IS a freshly printed magazine cover on the stack: the cover photo as
   the band backdrop (a real Weber pressman rolling up a client poster), a
   chrome WEBER masthead, the live job count as the issue number, cover lines
   down the left rail, the ask as a paper blow-in reply card dropped on the
   photo's real white work table, and a barcode that is the phone number.
   Committee fixes: the ask stays the stock search pill (icon, label, red
   button) merely wrapped in paper; production is only ever a because-clause. */

/* Band level: kill the shared video + scrim. Phones get the honeycomb wall
   (the 390 plan un-stacks the cover); desktop hangs the cover photo with the
   top / left / bottom scrims baked into the same background stack. Media-query
   gating means each device downloads only its own backdrop. !important: the
   section carries an inline background-image. */
.wb-scope .wb-hero-v14 .wb-band__video-wrap, .wb-scope .wb-hero-v14 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v14.wb-band--video{
  background:
    linear-gradient(rgba(8,9,12,.6), rgba(8,9,12,.6)) no-repeat,
    #101216 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
@media (min-width:901px){
  .wb-scope .wb-hero-v14.wb-band--video{
    background:
      linear-gradient(180deg, rgba(8,10,14,.78), rgba(8,10,14,.34) 30%, rgba(8,10,14,0) 54%) no-repeat,
      linear-gradient(97deg, rgba(8,10,14,.72), rgba(8,10,14,.44) 42%, rgba(8,10,14,0) 68%) no-repeat,
      linear-gradient(0deg, rgba(8,10,14,.6), rgba(8,10,14,.26) 22%, rgba(8,10,14,0) 46%) no-repeat,
      #23262c url("../images/overhaul/photos/team-review.webp") center 58% / cover no-repeat !important;
  }
  /* The fresh stack under the cover: layered sheet edges along the band's
     bottom. z-index 0 keeps it under the .wb-inner content (z-index 2). */
  .wb-scope .wb-hero-v14.wb-band--video::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:15px; z-index:0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 5px) no-repeat,
      repeating-linear-gradient(180deg, #f4f1ea 0 3px, #cdc8bc 3px 4px, #e9e5dc 4px 8px, #b8b2a5 8px 9px, #efece4 9px 15px);
  }
}

.wb-scope .wb-hv--14{ position:relative; padding:clamp(.3rem, .8vw, .9rem) 0 clamp(.6rem, 1vw, 1.2rem); }

/* Print furniture cut per the owner 2026-07-04 (build/38): the crop marks and
   the CMYK registration strip were printer-identity garnish and are gone. The
   editorial cover conceits (masthead, issue number, cover lines, blow-in card,
   barcode, price box, colophon, page stack) stay. */

/* Slug line: logo + dateline kicker left, live issue number right. */
.wb-scope .wb-hv--14 .wb-hv14-slug{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem clamp(.9rem, 1.5vw, 1.7rem); margin:0 0 .5rem; padding-bottom:.65rem; border-bottom:1px solid rgba(255,255,255,.26); }
.wb-scope .wb-hv--14 .wb-hv14-slug__logo{ display:block; width:auto; height:26px; }
.wb-scope .wb-hv--14 .wb-hv14-slug__line{ margin:0; color:rgba(255,255,255,.8); }
.wb-scope .wb-hv--14 .wb-hv14-issue{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:.15rem; text-align:right; }
.wb-scope .wb-hv--14 .wb-hv14-issue__no{ font-family:var(--wb-display); font-weight:800; font-size:clamp(.9rem, .8rem + .4vw, 1.15rem); letter-spacing:.06em; text-transform:uppercase; color:#fff; line-height:1; }
.wb-scope .wb-hv--14 .wb-hv14-issue__no b{ font-variant-numeric:tabular-nums; color:#ff5a61; margin-left:.2em; }
.wb-scope .wb-hv--14 .wb-hv14-issue__sub{ font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62); }

/* Masthead row: chrome WEBER + the 30th-year rocket flash + the WGSD sticker.
   The mast is a p, so Montserrat needs !important past the fonts-modern pin. */
.wb-scope .wb-hv--14 .wb-hv14-masthead{ display:flex; align-items:center; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:.35rem 0 clamp(.9rem, .6rem + 1.2vw, 1.7rem); }
.wb-scope .wb-hv--14 .wb-hv14-mast{ margin:0; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(3rem, 1.4rem + 7vw, 7rem); line-height:.95; letter-spacing:.16em; text-transform:uppercase; filter:drop-shadow(0 4px 18px rgba(0,0,0,.45)); }
.wb-scope .wb-hv--14 .wb-hv14-flash{ display:flex; align-items:center; gap:.4rem; margin-top:1rem; }
.wb-scope .wb-hv--14 .wb-hv14-flash__rocket{ display:block; width:clamp(96px, 6vw + 40px, 140px); height:auto; transform:rotate(-6deg); filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.wb-scope .wb-hv--14 .wb-hv14-flash__burst{ display:inline-flex; align-items:center; justify-content:center; width:70px; height:70px; border-radius:50%; background:var(--wb-red); color:#fff; font-family:var(--wb-display); font-weight:800; font-size:.72rem; line-height:1.15; letter-spacing:.08em; text-transform:uppercase; text-align:center; transform:rotate(8deg); box-shadow:0 10px 24px -8px rgba(216,35,42,.6); }
.wb-scope .wb-hv--14 .wb-hv14-wgsd{ display:block; margin-left:auto; flex:0 0 auto; transform:rotate(3deg); transition:transform .2s ease; }
.wb-scope .wb-hv--14 .wb-hv14-wgsd:hover{ transform:rotate(5deg); }
.wb-scope .wb-hv--14 .wb-hv14-wgsd img{ display:block; width:clamp(112px, 11vw, 168px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }

/* Cover lines + the main cover line. The story is a flex column at every
   width; order rules re-stack it per breakpoint, and the wb-hv14-photo wrapper
   is display:contents on desktop so line 2 + the H1 join the same stack. */
.wb-scope .wb-hv--14 .wb-hv14-story{ display:flex; flex-direction:column; align-items:flex-start; max-width:50rem; }
.wb-scope .wb-hv--14 .wb-hv14-photo{ display:contents; }
.wb-scope .wb-hv--14 .wb-hv14-line{ margin:0; padding:.5rem 0; max-width:46ch; font-size:clamp(.95rem, .85rem + .35vw, 1.12rem); font-weight:600; line-height:1.4; color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(0,0,0,.5); }
.wb-scope .wb-hv--14 .wb-hv14-line b{ font-family:var(--wb-display); font-weight:800; font-size:.78em; letter-spacing:.1em; text-transform:uppercase; color:#ff5a61; margin-right:.15em; }
.wb-scope .wb-hv--14 .wb-hv14-h1{ margin:clamp(.8rem, .5rem + 1vw, 1.4rem) 0 0; max-width:20ch; font-family:var(--wb-display) !important; font-size:clamp(1.9rem, 1.1rem + 2.6vw, 3.3rem); line-height:1.04; letter-spacing:-.005em; text-transform:uppercase; color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); }
@media (min-width:901px){
  .wb-scope .wb-hv--14 .wb-hv14-line--1{ order:1; }
  .wb-scope .wb-hv--14 .wb-hv14-line--2{ order:2; }
  .wb-scope .wb-hv--14 .wb-hv14-line--3{ order:3; }
  .wb-scope .wb-hv--14 .wb-hv14-h1{ order:4; }
  /* the red slash rules between the cover lines */
  .wb-scope .wb-hv--14 .wb-hv14-line--2::before, .wb-scope .wb-hv--14 .wb-hv14-line--3::before{ content:""; display:block; width:72px; height:3px; margin-bottom:.7rem; background:var(--wb-red); transform:skewX(-28deg); opacity:.9; }
}

/* The shelf: dek + price/barcode left, the blow-in card right, landing on the
   photo's white table. Grid areas on desktop; plain flow (the spec's mobile
   order) below. z-index 5 keeps the card and its AJAX dropdown painting over
   everything that follows. */
.wb-scope .wb-hv--14 .wb-hv14-shelf{ margin-top:clamp(1.1rem, .8rem + 1.2vw, 1.8rem); }
.wb-scope .wb-hv--14 .wb-hv14-dek{ margin:0; max-width:46ch; text-shadow:0 1px 18px rgba(0,0,0,.5); }
.wb-scope .wb-hv--14 .wb-hv14-priceline{ display:flex; flex-wrap:wrap; align-items:stretch; gap:clamp(.9rem, .7rem + .8vw, 1.5rem); margin-top:1.1rem; }
.wb-scope .wb-hv--14 .wb-hv14-askwrap{ position:relative; z-index:5; margin-top:1.2rem; }
@media (min-width:901px){
  .wb-scope .wb-hv--14 .wb-hv14-shelf{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(340px, 29rem); grid-template-areas:"dek ask" "price ask"; column-gap:clamp(1.6rem, 1rem + 2.4vw, 3.6rem); row-gap:clamp(1rem, .8rem + .8vw, 1.6rem); align-items:start; }
  .wb-scope .wb-hv--14 .wb-hv14-dek{ grid-area:dek; }
  .wb-scope .wb-hv--14 .wb-hv14-priceline{ grid-area:price; margin-top:0; }
  .wb-scope .wb-hv--14 .wb-hv14-askwrap{ grid-area:ask; align-self:end; margin-top:0; }
}

/* Price box (pillar 5, no-contract) + the barcode that is the phone number.
   Both are self-contained paper/ink objects, so they stay legible no matter
   how the photo crops behind them. */
.wb-scope .wb-hv--14 .wb-hv14-price{ margin:0; max-width:20ch; padding:.6rem .8rem; border:2px solid rgba(255,255,255,.85); background:rgba(8,10,14,.28); color:#fff; font-family:var(--wb-display) !important; }
.wb-scope .wb-hv--14 .wb-hv14-price strong{ display:block; font-weight:800; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; }
.wb-scope .wb-hv--14 .wb-hv14-price span{ display:block; margin-top:.25rem; font-weight:600; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.wb-scope .wb-hv--14 .wb-hv14-code{ display:block; text-decoration:none; color:#fff; }
.wb-scope .wb-hv--14 .wb-hv14-code:focus-visible{ outline:2px solid #ff5a61; outline-offset:3px; border-radius:4px; }
.wb-scope .wb-hv--14 .wb-hv14-code__chip{ display:inline-block; background:#fff; padding:.4rem .5rem .3rem; border-radius:3px; box-shadow:0 12px 28px -14px rgba(0,0,0,.6); }
.wb-scope .wb-hv--14 .wb-hv14-code__bars{ display:block; width:128px; height:38px;
  background:
    repeating-linear-gradient(90deg, #14181f 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, #14181f 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, #14181f 0 3px, transparent 3px 11px);
}
.wb-scope .wb-hv--14 .wb-hv14-code__digits{ display:block; margin-top:2px; font-family:var(--wb-display); font-weight:700; font-size:.62rem; letter-spacing:.24em; text-align:center; color:#14181f; }
.wb-scope .wb-hv--14 .wb-hv14-code__cap{ display:block; margin-top:.4rem; max-width:21ch; font-size:.78rem; line-height:1.35; color:rgba(255,255,255,.85); }
.wb-scope .wb-hv--14 .wb-hv14-code__cap strong{ color:#fff; }
.wb-scope .wb-hv--14 .wb-hv14-code:hover .wb-hv14-code__cap{ color:#fff; }

/* THE BLOW-IN CARD: a paper skin AROUND the stock ask (the UI/UX fix: the
   search stays unmistakably a search). Dashed perforation inset, -1.5deg tilt
   that straightens the moment the field takes focus. */
.wb-scope .wb-hv--14 .wb-hv14-card{ position:relative; background:#fdfcf7; border-radius:8px; padding:clamp(1rem, .8rem + .8vw, 1.4rem); box-shadow:0 34px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(20,24,31,.08); transform:rotate(-1.5deg); transition:transform .25s ease, box-shadow .25s ease; }
.wb-scope .wb-hv--14 .wb-hv14-card::before{ content:""; position:absolute; inset:7px; border:1.5px dashed rgba(20,24,31,.26); border-radius:5px; pointer-events:none; }
.wb-scope .wb-hv--14 .wb-hv14-card:focus-within{ transform:rotate(0deg); box-shadow:0 34px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(20,24,31,.08), 0 0 0 4px rgba(216,35,42,.25); }
.wb-scope .wb-hv--14 .wb-hv14-card__tag{ margin:0 0 .75rem; padding-bottom:.5rem; border-bottom:2px dashed rgba(20,24,31,.22); font-family:var(--wb-display) !important; font-weight:800; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(20,24,31,.6); }
/* the shared ask restyled for paper (it ships white-on-dark) */
.wb-scope .wb-hv--14 .wb-hv14-card .wb-hero-ask{ margin-top:0; max-width:none; }
.wb-scope .wb-hv--14 .wb-hv14-card .wb-hero-ask__q{ color:var(--wb-ink); font-size:clamp(1.08rem, .95rem + .5vw, 1.32rem); margin-bottom:.55rem; text-shadow:none; }
.wb-scope .wb-hv--14 .wb-hv14-card .wb-hero-ask__q-em{ color:var(--wb-red); }
.wb-scope .wb-hv--14 .wb-hv14-card .wb-hero-ask__row{ background:#fff; box-shadow:0 10px 24px -14px rgba(0,0,0,.4), 0 0 0 1px rgba(20,24,31,.16); }
.wb-scope .wb-hv--14 .wb-hv14-card .wb-hero-ask__note{ color:var(--wb-ink-2); }
.wb-scope .wb-hv--14 .wb-hv14-card .wb-hero-ask__note a{ color:var(--wb-red); font-weight:700; }

/* Colophon over the page stack. */
.wb-scope .wb-hv--14 .wb-hv14-colo{ margin:clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) 0 0; text-align:center; font-family:var(--wb-display) !important; font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }

/* Load like a press run (all decorative, all keyed to display so they replay
   on every switcher flip, all gated): masthead stamps, sticker pops, and the
   card drops onto the table last, desktop only per the 390 plan. */
@media (prefers-reduced-motion:no-preference){
  .wb-scope .wb-hv--14 .wb-hv14-mast{ animation:wb-hv14-stamp .22s ease-out .05s backwards; }
  .wb-scope .wb-hv--14 .wb-hv14-wgsd{ animation:wb-hv14-sticker .38s cubic-bezier(.2,.9,.3,1.25) .35s backwards; }
  .wb-scope .wb-hv--14 .wb-hv14-code:hover .wb-hv14-code__chip{ animation:wb-hv14-jiggle .32s linear 2; }
}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .wb-scope .wb-hv--14 .wb-hv14-card{ animation:wb-hv14-drop .45s cubic-bezier(.2,.8,.3,1.1) .55s backwards; }
}
@keyframes wb-hv14-stamp{ from{ opacity:0; transform:scale(1.05); } to{ opacity:1; transform:scale(1); } }
@keyframes wb-hv14-sticker{ from{ opacity:0; transform:rotate(11deg) scale(.6); } to{ opacity:1; transform:rotate(3deg) scale(1); } }
@keyframes wb-hv14-drop{ from{ transform:translateY(-18px) rotate(-3deg); } to{ transform:translateY(0) rotate(-1.5deg); } }
@keyframes wb-hv14-jiggle{ 0%{ transform:translateX(0); } 25%{ transform:translateX(1px); } 75%{ transform:translateX(-1px); } 100%{ transform:translateX(0); } }

/* Phone (the spec's 390 plan): un-stack the overlays for bulletproof contrast.
   One-row slug with the live issue number; full-width masthead + shrunk
   sticker; the 4:5 photo panel carries only the H1 and cover line 2 over its
   own bottom-left scrim; lines 1 and 3 (and the dek) sit on the honeycomb
   band; the card goes full width at 0deg; price + barcode tel row last. */
@media (max-width:900px){
  .wb-scope .wb-hv--14 .wb-hv14-photo{ order:1; display:flex; flex-direction:column; justify-content:flex-end; gap:.45rem; width:100%; aspect-ratio:4 / 5; max-height:72vh; margin:.4rem 0 .5rem; padding:clamp(.9rem, 4vw, 1.3rem); border-radius:12px; overflow:hidden; box-shadow:0 18px 44px -18px rgba(0,0,0,.6);
    background:
      linear-gradient(199deg, rgba(8,10,14,0) 34%, rgba(8,10,14,.34) 56%, rgba(8,10,14,.88) 92%) no-repeat,
      #23262c url("../images/overhaul/hero37/cover-mobile-780.webp") center top/cover no-repeat;
  }
  .wb-scope .wb-hv--14 .wb-hv14-line--1{ order:2; }
  .wb-scope .wb-hv--14 .wb-hv14-line--3{ order:3; }
  .wb-scope .wb-hv--14 .wb-hv14-line--1, .wb-scope .wb-hv--14 .wb-hv14-line--3{ border-left:3px solid var(--wb-red); padding:.15rem 0 .15rem .75rem; margin-top:.55rem; text-shadow:none; }
  .wb-scope .wb-hv--14 .wb-hv14-line--2{ padding:0; margin:0; }
  .wb-scope .wb-hv--14 .wb-hv14-h1{ margin:0; max-width:none; font-size:clamp(1.45rem, 6.8vw, 1.9rem); }
  .wb-scope .wb-hv--14 .wb-hv14-masthead{ gap:.9rem; margin:.3rem 0 .6rem; }
  .wb-scope .wb-hv--14 .wb-hv14-mast{ flex:1 1 auto; font-size:clamp(2.5rem, 14.5vw, 3.5rem); letter-spacing:.1em; }
  .wb-scope .wb-hv--14 .wb-hv14-flash{ display:none; }
  .wb-scope .wb-hv--14 .wb-hv14-wgsd img{ width:88px; }
  .wb-scope .wb-hv--14 .wb-hv14-card{ transform:none; }
  .wb-scope .wb-hv--14 .wb-hv14-dek{ text-shadow:none; }
  .wb-scope .wb-hv--14 .wb-hv14-colo{ font-size:.66rem; }
}
@media (max-width:640px){
  .wb-scope .wb-hv--14 .wb-hv14-slug{ flex-wrap:nowrap; }
  .wb-scope .wb-hv--14 .wb-hv14-slug__line, .wb-scope .wb-hv--14 .wb-hv14-issue__sub{ display:none; }
}

/* Reduced motion: belt and suspenders past the gates above; the card sits
   straight-tilted, the sticker sits at +3deg, nothing moves or waits. */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--14 .wb-hv14-mast,
  .wb-scope .wb-hv--14 .wb-hv14-wgsd,
  .wb-scope .wb-hv--14 .wb-hv14-card,
  .wb-scope .wb-hv--14 .wb-hv14-code__chip{ animation:none !important; }
  .wb-scope .wb-hv--14 .wb-hv14-wgsd, .wb-scope .wb-hv--14 .wb-hv14-card{ transition:none; }
  .wb-scope .wb-hv--14 .wb-hv14-wgsd:hover{ transform:rotate(3deg); }
}


/* ---- Variant 15 "The Cleave: Red Road Hero" (build/37 split-diagonal).
   One hard diagonal cuts the first screen in two: dark honeycomb identity
   panel left, a five-frame proof reel of real Weber jobs right, and the seam
   is a 14px brand-red road with a dashed centerline that the delivery van
   drives down. Geometry is the spec's stacked clip-path technique: wedge and
   road run on the SAME two custom props (--hv15-top / --hv15-bot, the seam's
   top and bottom x), so they can never drift; only the van track needs a real
   angle, which initHeroV15 measures and writes back as --hv15-ang/--hv15-len.
   LAYOUT TRAP (learned here): .wb-inner is position:relative, so the cleave
   layer is absolute against the INNER with negative offsets that eat the
   band's padding; it depends on .wb-hv--15 itself staying UNPOSITIONED. */
.wb-scope .wb-hv--15{
  --hv15-top:46%;   /* seam x at the band's top edge  */
  --hv15-bot:66%;   /* seam x at the band's bottom edge */
  width:100%;       /* fill the flex-centered inner (see the is-active rule) */
}

/* Band level: kill the shared video + scrim, hang the near-black honeycomb
   shop wall with a red bloom over the panel side. !important is required,
   the section carries an inline background-image poster. */
.wb-scope .wb-hero-v15 .wb-band__video-wrap,
.wb-scope .wb-hero-v15 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v15.wb-band--video{
  background:
    radial-gradient(44rem 30rem at 8% 4%, rgba(216,35,42,.26), transparent 60%),
    linear-gradient(rgba(6,7,10,.8), rgba(6,7,10,.8)),
    #090a0d url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
/* One vehicle per page (build/37 risk note): the delivery van owns this
   screen, so the page's rocket seam-rider stands down while v15 is active
   (v9 precedent; the rider is the hero section's direct sibling). */
.wb-scope .wb-hero-v15.wb-band--video ~ .wb-seam-rider--rocket{ display:none; }
/* The inner shrink-wraps by default; the cleave needs the full track and a
   taller first screen so the road has length to read. The display:flex rule
   must beat the switcher's is-active display:block at (0,5,0), so it matches
   that specificity and sits later in the file. */
.wb-scope .wb-hero-v15 .wb-inner.wb-hero__summary{ width:100%; max-width:none; min-height:clamp(28rem, 64vh, 44rem); }
.wb-scope .wb-hero-v15 .wb-inner.wb-hero-var.is-active{ display:flex; align-items:center; }

/* THE CLEAVE LAYER: papers the whole band (negative offsets = the band's
   exact padding). Hit-testing is opt-in per interactive child. */
.wb-scope .wb-hv--15 .wb-hv15-cleave{
  position:absolute; z-index:1; pointer-events:none;
  top:calc(-1 * (var(--wb-pad) + var(--wb-nav-h)));
  bottom:calc(-1 * var(--wb-pad));
  left:-1.25rem; right:-1.25rem;
}

/* The photo wedge: clip does the shaping AND clips the link's hit area. */
.wb-scope .wb-hv--15 .wb-hv15-wedge{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  clip-path:polygon(var(--hv15-top, 46%) 0, 100% 0, 100% 100%, var(--hv15-bot, 66%) 100%);
  background:#101215; /* pre-LCP paint behind the frames */
}
/* Frames cover the wedge's bounding box; the clip trims the lower-left. The
   karns night frame (3) is soft at 2x per the spec risk, so nothing here
   upscales: cover crops DOWN from the natural 1100px. */
.wb-scope .wb-hv--15 .wb-hv15-frame{
  position:absolute; top:0; left:var(--hv15-top, 46%);
  width:calc(100% - var(--hv15-top, 46%)); height:100%;
  object-fit:cover; opacity:0; transition:opacity .9s ease;
}
.wb-scope .wb-hv--15 .wb-hv15-frame.is-on{ opacity:1; }
/* The slow 1 to 1.04 settle per frame; replays on every swap (and on every
   switcher flip) because it is keyed to .is-on being re-applied. */
@keyframes wb-hv15-zoom{ from{ transform:scale(1); } to{ transform:scale(1.04); } }
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-hv--15 .wb-hv15-frame.is-on{ animation:wb-hv15-zoom 5.6s linear both; }
}

/* The wedge link + hover cue. */
.wb-scope .wb-hv--15 .wb-hv15-wedge__link{ position:absolute; inset:0; z-index:2; pointer-events:auto; }
.wb-scope .wb-hv--15 .wb-hv15-wedge__link:focus-visible{ outline:3px solid #fff; outline-offset:-3px; }
.wb-scope .wb-hv--15 .wb-hv15-see{
  position:absolute; top:clamp(5.6rem, 12vh, 8.5rem); right:clamp(1.25rem, 3vw, 3rem);
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.05rem; border-radius:999px; background:var(--wb-red); color:#fff;
  font-family:var(--wb-display); font-weight:800; font-size:.86rem; letter-spacing:.05em; text-transform:uppercase;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
}
.wb-scope .wb-hv--15 .wb-hv15-wedge__link:hover .wb-hv15-see,
.wb-scope .wb-hv--15 .wb-hv15-wedge__link:focus-visible .wb-hv15-see{ opacity:1; transform:none; }

/* Caption chip: not-stock tag / caption / dots, stacked dark glass. The chip
   itself passes clicks through to the wedge link; only the dots catch them. */
.wb-scope .wb-hv--15 .wb-hv15-chip{
  position:absolute; z-index:3; right:clamp(1rem, 2.5vw, 2.4rem); bottom:1.15rem;
  display:flex; flex-direction:column; gap:.3rem; max-width:30ch;
  padding:.6rem .85rem .7rem; border-radius:12px;
  background:rgba(9,11,15,.72); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#fff; pointer-events:none;
}
.wb-scope .wb-hv--15 .wb-hv15-chip__tag{ font-family:var(--wb-display); font-weight:800; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#ff5a61; }
.wb-scope .wb-hv--15 .wb-hv15-chip__cap{ font-size:.88rem; font-weight:600; line-height:1.35; }
.wb-scope .wb-hv--15 .wb-hv15-chip__short{ display:none; font-size:.84rem; font-weight:700; }
.wb-scope .wb-hv--15 .wb-hv15-dots{ display:flex; gap:.45rem; margin-top:.25rem; }
.wb-scope .wb-hv--15 .wb-hv15-dots button{
  width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer; pointer-events:auto;
  border:1px solid rgba(255,255,255,.65); background:transparent; transition:background .15s ease;
}
.wb-scope .wb-hv--15 .wb-hv15-dots button:hover{ background:rgba(255,255,255,.4); }
.wb-scope .wb-hv--15 .wb-hv15-dots button.is-on{ background:#fff; }
.wb-scope .wb-hv--15 .wb-hv15-dots button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* THE RED ROAD: one parallelogram on the shared props, overlapping the seam
   by 1px so antialiasing never opens a hairline gap; the dashed centerline is
   a thin inner parallelogram of vertical gradient dashes. */
.wb-scope .wb-hv--15 .wb-hv15-roadclip{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, #e2333a, #b41d23);
  clip-path:polygon(calc(var(--hv15-top, 46%) - 17px) 0, calc(var(--hv15-top, 46%) + 1px) 0, calc(var(--hv15-bot, 66%) + 1px) 100%, calc(var(--hv15-bot, 66%) - 17px) 100%);
}
.wb-scope .wb-hv--15 .wb-hv15-roadclip::after{
  content:""; position:absolute; inset:0;
  clip-path:polygon(calc(var(--hv15-top, 46%) - 11px) 0, calc(var(--hv15-top, 46%) - 6px) 0, calc(var(--hv15-bot, 66%) - 6px) 100%, calc(var(--hv15-bot, 66%) - 11px) 100%);
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.85) 0 20px, transparent 20px 46px);
}
/* The road draws top-to-bottom on load (and on every switcher flip, since the
   animation is keyed to display). Interpolates the clip polygon from a
   zero-height line at the seam top; if a browser refuses the interpolation
   the animation is simply dropped and the road stands drawn. */
@keyframes wb-hv15-draw{
  from{ clip-path:polygon(calc(var(--hv15-top, 46%) - 17px) 0, calc(var(--hv15-top, 46%) + 1px) 0, calc(var(--hv15-top, 46%) + 1px) 0, calc(var(--hv15-top, 46%) - 17px) 0); }
}
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-hv--15 .wb-hv15-roadclip{ animation:wb-hv15-draw .7s ease-out both; }
}

/* THE VAN TRACK: a zero-height ruler hinged at the seam's top point and
   rotated onto the seam (JS writes --hv15-ang/--hv15-len; the fallbacks are
   right for a ~1920x660 first screen). The van rides INSIDE it on the shared
   data-drive engine, so its translateX(vw) runs along the rotated axis, down
   the road and off into the next band. The art faces left, so it is mirrored
   to drive downhill; the W mark is close enough to symmetric not to tell. */
.wb-scope .wb-hv--15 .wb-hv15-track{
  position:absolute; left:var(--hv15-top, 46%); top:0; width:var(--hv15-len, 78vw); height:0;
  z-index:3; pointer-events:none;
  transform:rotate(var(--hv15-ang, 60deg)); transform-origin:0 0;
}
.wb-scope .wb-hv--15 .wb-hv15-vanride{ position:absolute; left:9%; top:0; }
.wb-scope .wb-hv--15 .wb-hv15-vanin{ position:absolute; left:0; bottom:-3px; display:block; }
.wb-scope .wb-hv--15 .wb-hv15-van{
  display:block; width:clamp(110px, 60px + 6vw, 170px); height:auto;
  transform:scaleX(-1); filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));
}
/* Load: the van drives in along the seam to its rest point (the wrapper
   carries the entrance so JS's data-drive transform never fights it). */
@keyframes wb-hv15-drivein{ from{ transform:translateX(-190px); opacity:0; } }
@keyframes wb-hv15-bounce{ 0%, 100%{ transform:scaleX(-1) translateY(0); } 50%{ transform:scaleX(-1) translateY(-4px); } }
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-hv--15 .wb-hv15-vanin{ animation:wb-hv15-drivein .9s cubic-bezier(.2, .7, .25, 1) both; }
  /* Hovering the proof reel gives the van a wheel bounce (spec). */
  .wb-js .wb-scope .wb-hv--15 .wb-hv15-wedge:hover ~ .wb-hv15-track .wb-hv15-van{ animation:wb-hv15-bounce .55s ease-in-out infinite; }
}

/* The mile marker at the road's base: a paper sign with a red rail, the live
   jobs odometer as the number. */
.wb-scope .wb-hv--15 .wb-hv15-marker{
  position:absolute; z-index:3; bottom:1.2rem;
  right:calc(100% - var(--hv15-bot, 66%) + 2.2rem);
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.6rem 1rem .65rem; border-radius:10px; border-top:4px solid var(--wb-red);
  background:#fdfcf7; color:var(--wb-ink); text-align:center;
  transform:rotate(-1.4deg); box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
  pointer-events:none;
}
.wb-scope .wb-hv--15 .wb-hv15-marker__num{ font-family:var(--wb-display); font-weight:900; font-size:clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--15 .wb-hv15-marker__label{ font-family:var(--wb-display); font-weight:700; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#6b7076; }

/* THE DARK PANEL: copy never crosses the seam (the -5vw gutter clears the
   road at the ask's height with room to spare; the seam only moves RIGHT as
   it descends). The ask keeps the contract lift so the AJAX dropdown paints
   over the opaque wedge and road. */
.wb-scope .wb-hv--15 .wb-hv15-panel{
  position:relative; z-index:2;
  max-width:calc(var(--hv15-top, 46%) - 5vw);
  padding:clamp(.5rem, 2vh, 1.5rem) 0 clamp(1.25rem, 3vh, 2.25rem) clamp(0rem, 2.5vw, 3.25rem);
}
.wb-scope .wb-hv--15 .wb-hero-ask-row--focal{ position:relative; z-index:5; }
.wb-scope .wb-hv--15 .wb-h1{ font-family:var(--wb-display) !important; /* fonts-modern pins p to Inter */ }
.wb-scope .wb-hv--15 .wb-lead{ max-width:52ch; }

/* Laptop: pull the seam right so the panel keeps a working ask width. */
@media (max-width:1280px){
  .wb-scope .wb-hv--15{ --hv15-top:52%; --hv15-bot:74%; }
}

/* Mobile (spec's 390 plan, applied under 900px): the cleave rotates
   horizontal. Photo wedge on TOP (~44vh, three frames, two-word chips), then
   the red road as a shallow full-width diagonal with the 92px van riding
   data-drive and the mile marker docked left, then the dark panel (base CSS
   already drops WGSD to 70px and wraps the pill under 560px). */
@media (max-width:900px){
  .wb-scope .wb-hv--15 .wb-hv15-cleave{
    position:relative; inset:auto; pointer-events:auto;
    width:100vw; margin-left:calc(50% - 50vw);
    padding-bottom:8.6rem; /* the road zone the absolute pieces sit in */
  }
  .wb-scope .wb-hv--15 .wb-hv15-wedge{
    position:relative; inset:auto; height:44vh; min-height:280px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 94.5%);
  }
  .wb-scope .wb-hv--15 .wb-hv15-frame{ left:0; width:100%; }
  .wb-scope .wb-hv--15 .wb-hv15-frame:nth-child(4),
  .wb-scope .wb-hv--15 .wb-hv15-frame:nth-child(5),
  .wb-scope .wb-hv--15 .wb-hv15-dots button:nth-child(4),
  .wb-scope .wb-hv--15 .wb-hv15-dots button:nth-child(5){ display:none; }
  .wb-scope .wb-hv--15 .wb-hv15-see{ display:none; }
  .wb-scope .wb-hv--15 .wb-hv15-chip{ left:1rem; right:auto; bottom:2.1rem; flex-direction:row; align-items:center; gap:.55rem; max-width:none; padding:.45rem .7rem; }
  .wb-scope .wb-hv--15 .wb-hv15-chip__cap{ display:none; }
  .wb-scope .wb-hv--15 .wb-hv15-chip__short{ display:inline; }
  .wb-scope .wb-hv--15 .wb-hv15-dots{ margin-top:0; }
  /* The road flattens to a shallow full-width band; dashes turn horizontal. */
  .wb-scope .wb-hv--15 .wb-hv15-roadclip{
    inset:auto; left:-6px; right:-6px; bottom:5rem; height:14px;
    clip-path:none; transform:rotate(-3deg);
  }
  .wb-js .wb-scope .wb-hv--15 .wb-hv15-roadclip{ animation:none; } /* the draw is desktop-only */
  .wb-scope .wb-hv--15 .wb-hv15-roadclip::after{
    clip-path:none; inset:auto; left:0; right:0; top:5px; height:4px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 22px, transparent 22px 50px);
  }
  .wb-scope .wb-hv--15 .wb-hv15-track{
    left:0; top:auto; bottom:5rem; width:100%; height:14px;
    transform:rotate(-3deg); transform-origin:50% 50%;
  }
  .wb-scope .wb-hv--15 .wb-hv15-vanride{ left:4%; top:auto; bottom:0; }
  .wb-scope .wb-hv--15 .wb-hv15-vanin{ bottom:11px; }
  .wb-scope .wb-hv--15 .wb-hv15-van{ width:92px; }
  .wb-scope .wb-hv--15 .wb-hv15-marker{ left:1.1rem; right:auto; bottom:.35rem; transform:none; padding:.5rem .8rem .55rem; }
  .wb-scope .wb-hv--15 .wb-hv15-marker__num{ font-size:1.25rem; }
  .wb-scope .wb-hv--15 .wb-hv15-panel{ max-width:none; padding:1.4rem 0 0; }
}

/* Reduced motion: frame 1 stands, dots still switch (no fade), road drawn,
   van parked on the seam (data-drive stands down globally). Belt-and-
   suspenders on top of the no-preference gates above. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--15 .wb-hv15-frame{ transition:none; }
  .wb-scope .wb-hv--15 .wb-hv15-frame.is-on,
  .wb-scope .wb-hv--15 .wb-hv15-roadclip,
  .wb-scope .wb-hv--15 .wb-hv15-vanin,
  .wb-scope .wb-hv--15 .wb-hv15-van{ animation:none !important; }
  .wb-scope .wb-hv--15 .wb-hv15-see{ transition:none; }
}


/* ---- Variant skin 16 "The Overnight Run" (build/37 pressroom-noir, switcher
   slot 13). A film still from the night shift: the CMYK ink-system macro
   graded near-black in pure CSS (brightness .55 contrast 1.15 saturate 1.25,
   mirrored so the bottles glow center-right), cinema letterbox bars, a
   dailies-slate jobs odometer, the chrome H1 with a faint red edge glow, and
   the search as a glowing red command strip (the printer's crop marks and
   CMYK control strip are cut per the owner 2026-07-04, build/38: the cinema
   letterbox stays, the prepress furniture goes).
   Committee fixes carried in: the copy column sits on a near-opaque left
   scrim so text contrast NEVER depends on the photo grade (UI/UX), the
   kicker/H1/lead stay execution-first with production only as a
   because-clause (Content), and the optional fly-through video (initHeroV16)
   ships the 5MB transcode, desktop-only, Save-Data + reduced-motion gated,
   with a no-stock-footage chip when live. fonts-modern pins p/label/figcaption
   to Inter with !important, hence the display-face re-assertions. */

/* Band level: hide the shared video + scrim; near-black ground; the slim TOP
   letterbox bar rides the band edge (::before; z4 beats .wb-inner's z2).
   !important needed: the section carries an inline background-image poster. */
.wb-scope .wb-hero-v16 .wb-band__video-wrap,
.wb-scope .wb-hero-v16 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v16.wb-band--video{ background:#06070a !important; }
.wb-scope .wb-hero-v16.wb-band--video::before{ content:""; position:absolute; top:0; left:0; right:0; height:clamp(10px, 1.2vw, 18px); background:#030405; z-index:4; pointer-events:none; }
/* The band is a column flexbox and .wb-inner shrink-wraps its widest child;
   pin it to the full track so the slate can sit at the true column edge. */
.wb-scope .wb-hero-v16 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--16{ position:relative; }

/* THE FRAME: the press-sheet-still zone. Everything in it stacks above the
   photo (z2) except the two backdrop layers, whose rules come later and win
   the (0,3,0) tie by order. */
.wb-scope .wb-hv--16 .wb-hv16-frame{ position:relative; padding:clamp(.4rem, 1vw, 1.2rem) 0 clamp(2rem, 1.4rem + 1.8vw, 3rem); }
.wb-scope .wb-hv--16 .wb-hv16-frame > *{ position:relative; z-index:2; }

/* The star photo, full-bleed to the band edges (the overshooting top is
   clipped by the band's own overflow:hidden; bottom stops at the letterbox
   bar). CSS background so it only loads when the variant actually displays.
   scaleX(-1) mirrors the daylight source so the ink bottles glow on the
   RIGHT while the copy column owns the left. */
.wb-scope .wb-hv--16 .wb-hv16-bg{
  position:absolute; z-index:0; left:calc(50% - 50vw); right:calc(50% - 50vw); top:-24rem; bottom:0;
  background:#06070a url("../images/overhaul/photos/story-hero-cmyk-ink-system-production-floor.webp") 35% 30%/cover no-repeat;
  transform:scaleX(-1);
  filter:brightness(.55) contrast(1.15) saturate(1.25);
  pointer-events:none;
}
/* The grade's legibility guarantee: a near-opaque left column + top/bottom
   vignette OVER the photo, so copy contrast is set here, not by the image. */
.wb-scope .wb-hv--16 .wb-hv16-veil{
  position:absolute; z-index:1; left:calc(50% - 50vw); right:calc(50% - 50vw); top:-24rem; bottom:0;
  background:
    linear-gradient(90deg, rgba(3,4,7,.94) 0%, rgba(3,4,7,.86) 36%, rgba(4,5,8,.5) 64%, rgba(3,4,7,.62) 100%),
    linear-gradient(180deg, rgba(2,3,5,.6), rgba(2,3,5,.22) 32%, rgba(2,3,5,.66) 100%);
  pointer-events:none;
}
/* The red beacon, pulsing slowly from lower-left (static under reduced motion). */
.wb-scope .wb-hv--16 .wb-hv16-veil::after{
  content:""; position:absolute; left:-6%; bottom:-14%; width:44rem; height:30rem;
  background:radial-gradient(closest-side, rgba(216,35,42,.34), transparent 70%);
  opacity:.55;
}

/* The optional fly-through (mounted by initHeroV16 between bg and veil; same
   grade, fades up only once it is actually playing). */
.wb-scope .wb-hv--16 .wb-hv16-video{
  position:absolute; z-index:0; left:calc(50% - 50vw); right:calc(50% - 50vw); top:-24rem; bottom:0;
  width:auto; height:auto; max-width:none; object-fit:cover;
  filter:brightness(.5) contrast(1.15) saturate(1.15);
  opacity:0; transition:opacity 1.2s ease; pointer-events:none;
}
.wb-scope .wb-hv--16 .wb-hv16-frame.has-video .wb-hv16-video{ opacity:1; }
.wb-scope .wb-hv--16 .wb-hv16-nostock{
  position:absolute; right:0; bottom:.4rem; z-index:2; display:none;
  font-family:var(--wb-display); font-weight:700; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.75); background:rgba(5,6,10,.55); border:1px solid rgba(255,255,255,.25);
  padding:.3rem .65rem; border-radius:999px; white-space:nowrap;
}
.wb-scope .wb-hv--16 .wb-hv16-frame.has-video .wb-hv16-nostock{ display:inline-flex; }


/* Slate row: red letterspaced kicker left, the dailies timecode top-right. */
.wb-scope .wb-hv--16 .wb-hv16-top{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1rem 2rem; margin-bottom:clamp(1.2rem, .8rem + 1.4vw, 2rem); padding-top:.5rem; }
.wb-scope .wb-hv--16 .wb-hv16-kicker{ margin:0; font-family:var(--wb-display) !important; letter-spacing:.18em; color:#ff5a61; }
.wb-scope .wb-hv--16 .wb-hv16-slate{
  display:inline-flex; align-items:baseline; gap:.55rem; margin:0; padding:.55rem .9rem;
  font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
  border:1px solid rgba(255,255,255,.24); border-radius:6px; background:rgba(5,6,10,.62); white-space:nowrap;
}
.wb-scope .wb-hv--16 .wb-hv16-slate__dot{ align-self:center; width:8px; height:8px; border-radius:50%; background:var(--wb-red-lt); box-shadow:0 0 10px rgba(239,62,70,.8); }
.wb-scope .wb-hv--16 .wb-hv16-slate__label{ font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.wb-scope .wb-hv--16 .wb-hv16-slate__num{ font-size:clamp(1.25rem, 1rem + .9vw, 1.8rem); font-weight:700; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }

/* Chrome H1 with the faint red edge glow (fonts-modern pins p to Inter; the
   filter chain restates .wb-metal-text's shadows and appends the red halo).
   Under 561px the shared summary rule strips the chrome to solid white and
   filter:none, which is exactly the cheap-panel fallback we want. */
.wb-scope .wb-hv--16 .wb-h1{
  font-family:var(--wb-display) !important;
  margin:0; max-width:22ch;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.16))
         drop-shadow(calc(var(--wb-lx) * .3) calc(var(--wb-ly) * .35) 10px rgba(0,0,0,.26))
         drop-shadow(0 0 24px rgba(216,35,42,.3));
}
.wb-scope .wb-hv--16 .wb-hv16-lead{ max-width:46ch; margin-top:.9rem; }

/* THE COMMAND STRIP. Dark glass field, 2px red ring, outer red glow, red
   prompt caret; lifted (z6) so the dropdown paints over the credits/strip. */
.wb-scope .wb-hv--16 .wb-hv16-askrow{ position:relative; z-index:6; margin-top:clamp(1.4rem, 1rem + 1.6vw, 2.4rem); margin-bottom:0; }
.wb-scope .wb-hv--16 .wb-hero-ask__row{
  background:rgba(9,11,16,.9); border:2px solid var(--wb-red); border-radius:10px;
  padding:.5rem .5rem .5rem 1.1rem;
  box-shadow:0 0 0 3px rgba(216,35,42,.14), 0 0 36px rgba(216,35,42,.22), 0 26px 60px -18px rgba(0,0,0,.78);
}
.wb-scope .wb-hv--16 .wb-hero-ask__row:focus-within{
  box-shadow:0 0 0 3px rgba(216,35,42,.4), 0 0 54px rgba(216,35,42,.42), 0 26px 60px -18px rgba(0,0,0,.78);
}
.wb-scope .wb-hv--16 .wb-hv16-prompt{ font-family:ui-monospace, Menlo, monospace; font-weight:700; font-size:1.15rem; line-height:1; color:#ff5a61; }
.wb-scope .wb-hv--16 .wb-hero-ask__input{ color:#fff; caret-color:#ff5a61; }
.wb-scope .wb-hv--16 .wb-hero-ask__input::placeholder{ color:rgba(255,255,255,.55); }
.wb-scope .wb-hv--16 .wb-hero-ask__go{ border-radius:7px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
/* The live results as a dark job-ticket list (colors only; layout is shared). */
.wb-scope .wb-hv--16 .wb-hero-ask__results{ background:#12141b; border-radius:10px; box-shadow:0 30px 70px -18px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12); }
.wb-scope .wb-hv--16 .wb-hero-ask__res{ color:#fff; border-bottom:1px solid rgba(255,255,255,.07); }
.wb-scope .wb-hv--16 .wb-hero-ask__res:hover,
.wb-scope .wb-hv--16 .wb-hero-ask__res.is-active{ background:rgba(216,35,42,.2); }
.wb-scope .wb-hv--16 .wb-hero-ask__res-cat{ color:#ff5a61; }
.wb-scope .wb-hv--16 .wb-hero-ask__res-t{ color:#fff; }
.wb-scope .wb-hv--16 .wb-hero-ask__res-s{ color:rgba(255,255,255,.66); }
.wb-scope .wb-hv--16 .wb-hero-ask__res-all,
.wb-scope .wb-hv--16 .wb-hero-ask__res-empty{ color:rgba(255,255,255,.85); background:#0d0f15; }
.wb-scope .wb-hv--16 .wb-hero-ask__res-all{ color:#ff5a61; }
.wb-scope .wb-hv--16 .wb-hero-ask__res-all:hover,
.wb-scope .wb-hv--16 .wb-hero-ask__res-all.is-active{ background:rgba(216,35,42,.2); }
.wb-scope .wb-hv--16 .wb-hero-ask__res-empty a{ color:#ff5a61; }

/* Credits row: end-titles small caps under a hairline. */
.wb-scope .wb-hv--16 .wb-hv16-credits{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.1rem; margin-top:clamp(1.4rem, 1rem + 1.4vw, 2.2rem); padding-top:clamp(.9rem, .6rem + 1vw, 1.3rem); border-top:1px solid rgba(255,255,255,.16); max-width:54rem; }
.wb-scope .wb-hv--16 .wb-hv16-credits__cell{ font-family:var(--wb-display); font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.wb-scope .wb-hv--16 .wb-hv16-credits__cell + .wb-hv16-credits__cell::before{ content:"\00b7"; margin-right:1.1rem; color:rgba(255,255,255,.4); }

/* Bottom letterbox bar, a plain cinema bar. */
.wb-scope .wb-hv--16 .wb-hv16-bar{ display:flex; align-items:center; justify-content:flex-end; width:100vw; margin-left:calc(50% - 50vw); height:clamp(14px, 1.5vw, 22px); background:#030405; padding-right:max(1.25rem, calc(50vw - 590px)); }

/* THE FILMSTRIP sub-band. Full-bleed; sprocket holes on the non-scrolling
   filmbox so they stay put while the reel scrolls or slides. */
.wb-scope .wb-hv--16 .wb-hv16-strip{ width:100vw; margin-left:calc(50% - 50vw); background:#0b0d12; padding:.9rem 0 1.1rem; }
.wb-scope .wb-hv--16 .wb-hv16-strip__label{ margin:0 0 .6rem; padding-left:max(1.25rem, calc(50vw - 590px)); font-family:var(--wb-display) !important; font-weight:800; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.wb-scope .wb-hv--16 .wb-hv16-filmbox{ position:relative; background:#10121a; }
.wb-scope .wb-hv--16 .wb-hv16-filmbox::before,
.wb-scope .wb-hv--16 .wb-hv16-filmbox::after{ content:""; position:absolute; left:0; right:0; height:6px; z-index:1; pointer-events:none; background-image:radial-gradient(circle at 5px 3px, #05060a 2.2px, transparent 2.9px); background-size:18px 6px; background-repeat:repeat-x; }
.wb-scope .wb-hv--16 .wb-hv16-filmbox::before{ top:5px; }
.wb-scope .wb-hv--16 .wb-hv16-filmbox::after{ bottom:5px; }
.wb-scope .wb-hv--16 .wb-hv16-strip__win{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }
.wb-scope .wb-hv--16 .wb-hv16-reel{ display:flex; align-items:flex-start; gap:clamp(.8rem, 1.5vw, 1.4rem); width:max-content; margin:0; padding:1.1rem max(1.25rem, calc(50vw - 590px)); list-style:none; }
.wb-scope .wb-hv--16 .wb-hv16-fr figure{ margin:0; }
.wb-scope .wb-hv--16 .wb-hv16-fr__a{ display:block; position:relative; text-decoration:none; }
.wb-scope .wb-hv--16 .wb-hv16-fr__a img{ display:block; height:clamp(118px, 7vw + 62px, 186px); width:auto; border-radius:3px; filter:saturate(1.05) contrast(1.05) brightness(.92); box-shadow:0 10px 24px -12px rgba(0,0,0,.8); transition:transform .18s ease, box-shadow .18s ease; }
/* Hover/focus: the frame lifts with a red edge (the spec's noir hover). */
.wb-scope .wb-hv--16 .wb-hv16-fr__a:hover img,
.wb-scope .wb-hv--16 .wb-hv16-fr__a:focus-visible img{ transform:translateY(-4px); box-shadow:0 0 0 2px var(--wb-red), 0 18px 34px -12px rgba(0,0,0,.85); }
.wb-scope .wb-hv--16 .wb-hv16-fr__a:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wb-scope .wb-hv--16 .wb-hv16-zoom{ position:absolute; right:8px; bottom:8px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(14,16,22,.78); color:#fff; font-size:.72rem; opacity:0; transition:opacity .15s ease; pointer-events:none; }
.wb-scope .wb-hv--16 .wb-hv16-fr__a:hover .wb-hv16-zoom,
.wb-scope .wb-hv--16 .wb-hv16-fr__a:focus-visible .wb-hv16-zoom{ opacity:1; }
.wb-scope .wb-hv--16 .wb-hv16-fr figcaption{ margin-top:.5rem; font-family:var(--wb-display) !important; font-weight:700; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* Load choreography + loops, all gated so reduced-motion gets a handsome
   static still: black frame at 0ms, photo fades up at 150ms with the 6s Ken
   Burns settle, the command strip ignites when its
   reveal lands, the beacon breathes on a 9s loop, the prompt blinks until
   the field is focused, the slate dot pulses. */
@media (prefers-reduced-motion: no-preference){
  .wb-scope .wb-hv--16 .wb-hv16-bg{ animation:wb-hv16-fade .9s ease .15s both, wb-hv16-settle 6s cubic-bezier(.22,.61,.36,1) .15s both; }
  .wb-scope .wb-hv--16 .wb-hv16-veil::after{ animation:wb-hv16-beacon 9s ease-in-out infinite; }
  .wb-scope .wb-hv--16 .wb-hero-ask__row:not(:focus-within) .wb-hv16-prompt{ animation:wb-hv16-blink 1.1s steps(1) infinite; }
  .wb-scope .wb-hv--16 .wb-hv16-askrow.is-in .wb-hero-ask__row{ animation:wb-hv16-ignite 1s ease-out .25s backwards; }
  .wb-scope .wb-hv--16 .wb-hv16-slate__dot{ animation:wb-hv16-blink 2.2s steps(1) infinite; }
}
@keyframes wb-hv16-fade{ from{ opacity:0; } }
@keyframes wb-hv16-settle{ from{ transform:scaleX(-1) scale(1.05); } to{ transform:scaleX(-1) scale(1); } }
@keyframes wb-hv16-beacon{ 0%, 100%{ opacity:.35; } 50%{ opacity:.75; } }
@keyframes wb-hv16-blink{ 50%{ opacity:.15; } }
@keyframes wb-hv16-ignite{ from{ box-shadow:0 0 0 0 rgba(216,35,42,0), 0 0 0 rgba(216,35,42,0), 0 26px 60px -18px rgba(0,0,0,.78); } }

/* Phones and small tablets: native scroll-snap reel (the shared data-drive
   inline transform is neutralized; !important beats the inline style). */
@media (max-width: 767px){
  .wb-scope .wb-hv--16 .wb-hv16-reel{ transform:none !important; }
  .wb-scope .wb-hv--16 .wb-hv16-strip__win{ scroll-snap-type:x mandatory; }
  .wb-scope .wb-hv--16 .wb-hv16-fr{ scroll-snap-align:center; }
  .wb-scope .wb-hv--16 .wb-hv16-fr__a img{ height:150px; }
}

/* The spec's 390px plan: 6px letterbox, one-line kicker, slate absorbed into
   the credits chips, 3px bottom bar, stacked chips. */
@media (max-width: 640px){
  .wb-scope .wb-hero-v16.wb-band--video::before{ height:6px; }
  .wb-scope .wb-hv--16 .wb-hv16-kick-more{ display:none; }
  .wb-scope .wb-hv--16 .wb-hv16-slate{ display:none; }
  .wb-scope .wb-hv--16 .wb-hv16-bar{ height:3px; padding:0; }
  .wb-scope .wb-hv--16 .wb-hv16-credits{ flex-direction:column; align-items:flex-start; gap:.5rem; border-top:0; padding-top:0; }
  .wb-scope .wb-hv--16 .wb-hv16-credits__cell{ border:1px solid rgba(255,255,255,.22); background:rgba(8,10,14,.6); padding:.45rem .8rem; border-radius:8px; }
  .wb-scope .wb-hv--16 .wb-hv16-credits__cell + .wb-hv16-credits__cell::before{ content:none; }
}
@media (max-width: 560px){
  .wb-scope .wb-hv--16 .wb-hv16-lead-trim{ display:none; }
}


/* ---- Variant 17 "Under One Roof" (build/37 under-one-roof, slot 14). The
   Weber cross-section: a dollhouse cut of the real building. The actual
   ALL UNDER ONE ROOF lockup is the gable sign inside a warm-lit near-white
   attic (the dark art needs the light interior); four real photo strips are
   the floors, each an <a> to its spoke; a red LED ticker counts the live job
   number; the delivery van rides the curb; the front door IS the ask, warm
   light spilling onto the sidewalk. Lights-on choreography is pure CSS keyed
   to display (replays on every switcher flip), gated html.wb-js + motion-ok,
   so no-JS / reduced motion ship the building fully lit and readable. The
   spec's buried-ask objection is met three ways: phone in the screen-one
   proof strip, a front-door jump link in the copy, and a compact building
   (~610px) so the door clears ~660px on desktop. */

/* Band level: hide the shared video + scrim, hang the night sky (faint
   honeycomb under a dark wash + a red glow upper-left). !important needed,
   the section carries an inline background-image poster. */
.wb-scope .wb-hero-v17 .wb-band__video-wrap,
.wb-scope .wb-hero-v17 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v17.wb-band--video{
  background:
    radial-gradient(50rem 30rem at 10% 2%, rgba(216,35,42,.26), transparent 62%),
    linear-gradient(180deg, rgba(6,7,10,.62), rgba(6,7,10,.8)),
    #0a0b0e url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
/* The band's .wb-inner shrink-wraps its widest child; this variant needs the
   full track for the split grid + full-width street (same fix as v8). */
.wb-scope .wb-hero-v17 .wb-inner.wb-hero__summary{ width:100%; }

/* Layout: copy left (head over sub), the building right spanning both rows,
   then the full-width street and the centered door. */
.wb-scope .wb-hv--17{ display:grid; grid-template-columns:minmax(0, 42fr) minmax(0, 54fr); grid-template-rows:auto 1fr auto auto; grid-template-areas:"head bldg" "sub bldg" "street street" "door door"; column-gap:clamp(1.5rem, 1rem + 2.5vw, 3.75rem); row-gap:0; }
.wb-scope .wb-hv--17 .wb-hv17-head{ grid-area:head; align-self:end; padding-bottom:1rem; }
.wb-scope .wb-hv--17 .wb-hv17-sub{ grid-area:sub; align-self:center; }
.wb-scope .wb-hv--17 .wb-hv17-bldg{ grid-area:bldg; }
.wb-scope .wb-hv--17 .wb-hv17-street{ grid-area:street; }
.wb-scope .wb-hv--17 .wb-hv17-door{ grid-area:door; }

/* Copy column. The H1 is a <p>; fonts-modern pins p to Inter (!important). */
.wb-scope .wb-hv--17 .wb-h1{ font-family:var(--wb-display) !important; font-size:clamp(1.9rem, 1.2rem + 1.9vw, 2.85rem); line-height:1.08; margin:.55rem 0 0; }
.wb-scope .wb-hv--17 .wb-lead--bright{ margin:0; max-width:52ch; }
.wb-scope .wb-hv--17 .wb-hv-proof{ margin-top:clamp(1.1rem, .8rem + 1.2vw, 1.8rem); }
.wb-scope .wb-hv--17 .wb-hv17-callcell .wb-hv-proof__num a{ color:#fff; text-decoration:none; border-bottom:2px solid rgba(255,90,97,.65); transition:border-color .15s ease; }
.wb-scope .wb-hv--17 .wb-hv17-callcell .wb-hv-proof__num a:hover{ border-bottom-color:#ff5a61; }
/* The front-door pointer: a real anchor to #wb-hv17-door (works with JS off);
   initHeroV17 upgrades it to smooth-scroll + focus the ask input. */
.wb-scope .wb-hv--17 .wb-hv17-pointer{ margin:clamp(1rem, .7rem + .9vw, 1.5rem) 0 0; }
.wb-scope .wb-hv--17 .wb-hv17-pointer a{ font-family:var(--wb-display); font-weight:800; font-size:.95rem; letter-spacing:.04em; color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.45); padding-bottom:.15em; transition:color .15s ease, border-color .15s ease; }
.wb-scope .wb-hv--17 .wb-hv17-pointer a:hover{ color:#ff8a8f; border-bottom-color:#ff8a8f; }
.wb-scope .wb-hv--17 .wb-hv17-pointer i{ margin-left:.45em; color:#ff5a61; font-size:.9em; }

/* THE BUILDING. Padding-top leaves headroom for the rocket at the peak. */
.wb-scope .wb-hv--17 .wb-hv17-bldg{ position:relative; padding-top:clamp(26px, 3vw, 44px); }
.wb-scope .wb-hv--17 .wb-hv17-rocket{ position:absolute; top:0; left:50%; width:clamp(88px, 7vw, 132px); height:auto; transform:translateX(-30%) rotate(-6deg); z-index:3; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }

/* The roof: an outer shingle triangle (tex-metallic-lines under a dark tint)
   with an inset near-white warm-lit gable triangle; the lockup sign sits at
   the wide bottom of the gable. Eaves overhang the walls slightly. */
.wb-scope .wb-hv--17 .wb-hv17-roof{ position:relative; width:106%; margin-left:-3%; height:clamp(120px, 8vw + 50px, 176px); z-index:2; }
.wb-scope .wb-hv--17 .wb-hv17-roof::before{ content:""; position:absolute; inset:0; clip-path:polygon(50% 0, 100% 100%, 0 100%); background:linear-gradient(rgba(20,22,27,.74), rgba(20,22,27,.74)), url("../images/overhaul/tex-metallic-lines.webp") center/340px repeat; }
.wb-scope .wb-hv--17 .wb-hv17-gable{ position:absolute; left:clamp(20px, 2.5vw, 34px); right:clamp(20px, 2.5vw, 34px); top:clamp(11px, 1.3vw, 18px); bottom:0; clip-path:polygon(50% 0, 100% 100%, 0 100%); background:radial-gradient(closest-side at 50% 85%, #fff9ec, #f2e9d6 72%, #e8ddc6); display:flex; align-items:flex-end; justify-content:center; }
.wb-scope .wb-hv--17 .wb-hv17-wgsd{ display:block; padding-bottom:clamp(6px, .8vw, 10px); }
/* The sign must inscribe inside the triangle: at the roof's max (158px-tall
   gable, ~590px base) a 0.9:1 portrait lockup fits up to ~118px tall before
   the slopes clip its top corners. Keep the clamp under that line. */
.wb-scope .wb-hv--17 .wb-hv17-wgsd img{ display:block; width:auto; height:clamp(68px, 5vw + 30px, 116px); }
.wb-scope .wb-hv--17 .wb-hv17-wgsd:focus-visible{ outline:3px solid var(--wb-red); outline-offset:2px; }

/* The floors: strip photos between drawn joists, heavy side walls. Each floor
   is a link; the chip names it, the arrow confirms it goes somewhere. */
.wb-scope .wb-hv--17 .wb-hv17-floors{ list-style:none; margin:0; padding:0; border-left:clamp(8px, 1vw, 14px) solid #24272e; border-right:clamp(8px, 1vw, 14px) solid #24272e; border-top:clamp(6px, .7vw, 9px) solid #24272e; background:#0c0d10; }
.wb-scope .wb-hv--17 .wb-hv17-floors li + li{ border-top:clamp(6px, .7vw, 9px) solid #24272e; }
.wb-scope .wb-hv--17 .wb-hv17-floor{ position:relative; display:block; height:clamp(74px, 4.5vw + 30px, 104px); overflow:hidden; }
.wb-scope .wb-hv--17 .wb-hv17-floor img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%; transition:transform .3s ease; }
.wb-scope .wb-hv--17 .wb-hv17-floors li:nth-child(2) .wb-hv17-floor img{ object-position:50% 38%; }
.wb-scope .wb-hv--17 .wb-hv17-floors li:nth-child(4) .wb-hv17-floor img{ object-position:50% 32%; }
.wb-scope .wb-hv--17 .wb-hv17-floor:hover img,
.wb-scope .wb-hv--17 .wb-hv17-floor:focus-visible img{ transform:scale(1.035); }
.wb-scope .wb-hv--17 .wb-hv17-floor:focus-visible{ outline:3px solid #ff5a61; outline-offset:-3px; }
.wb-scope .wb-hv--17 .wb-hv17-tag{ position:absolute; left:.7rem; bottom:.55rem; display:inline-flex; align-items:center; gap:.5rem; padding:.24rem .6rem .24rem .28rem; background:rgba(8,9,12,.82); border:1px solid rgba(255,255,255,.16); border-radius:4px; color:#fff; font-family:var(--wb-display); font-weight:800; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.2; }
.wb-scope .wb-hv--17 .wb-hv17-tag b{ display:inline-flex; align-items:center; justify-content:center; min-width:1.5em; padding:.18em .3em; border-radius:3px; background:var(--wb-red); color:#fff; font-weight:900; font-size:.95em; }
.wb-scope .wb-hv--17 .wb-hv17-floor:hover .wb-hv17-tag,
.wb-scope .wb-hv--17 .wb-hv17-floor:focus-visible .wb-hv17-tag{ background:var(--wb-red); border-color:transparent; }
.wb-scope .wb-hv--17 .wb-hv17-go{ position:absolute; right:.75rem; bottom:.65rem; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(216,35,42,.92); color:#fff; font-size:.8rem; opacity:0; transform:translateX(-6px); transition:opacity .18s ease, transform .18s ease; }
.wb-scope .wb-hv--17 .wb-hv17-floor:hover .wb-hv17-go,
.wb-scope .wb-hv--17 .wb-hv17-floor:focus-visible .wb-hv17-go{ opacity:1; transform:translateX(0); }

/* The LED ticker: the building's foundation line. The number rides the shared
   [data-count] odometer; spans escape the Inter-pinned <p> with plain rules. */
.wb-scope .wb-hv--17 .wb-hv17-led{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .7rem; margin:0; padding:.6rem clamp(.8rem, 1.5vw, 1.3rem); background:#050607; border-left:clamp(8px, 1vw, 14px) solid #24272e; border-right:clamp(8px, 1vw, 14px) solid #24272e; border-top:clamp(6px, .7vw, 9px) solid #24272e; box-shadow:0 30px 60px -22px rgba(0,0,0,.75); }
.wb-scope .wb-hv--17 .wb-hv17-led__num{ font-family:var(--wb-display); font-weight:900; font-size:clamp(1.3rem, .9rem + 1.3vw, 1.9rem); line-height:1; letter-spacing:.08em; font-variant-numeric:tabular-nums; color:#ff3b41; text-shadow:0 0 14px rgba(255,59,65,.55); }
.wb-scope .wb-hv--17 .wb-hv17-led__text{ font-family:var(--wb-display); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:#ff8a8f; }

/* STREET LEVEL: the curb line; the van rides it right-to-left on [data-drive]
   (nose-left asset, leftward reads forward). Base transform parks it near the
   door for reduced motion / no JS; initDrive overrides inline when it runs. */
.wb-scope .wb-hv--17 .wb-hv17-street{ position:relative; height:clamp(34px, 4vw, 54px); border-bottom:4px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--17 .wb-hv17-van{ position:absolute; bottom:-2px; left:0; width:clamp(96px, 9vw, 150px); height:auto; transform:translateX(62vw); filter:drop-shadow(0 8px 16px rgba(0,0,0,.5)); }

/* THE FRONT DOOR: red jamb, warm interior, light spilling onto the sidewalk.
   Hover / focus-within widens the spill. z-index:5 per the ask contract. */
.wb-scope .wb-hv--17 .wb-hv17-door{ position:relative; z-index:5; justify-self:center; width:min(100%, 56rem); margin-top:clamp(.4rem, 1vw, 1rem); padding:clamp(.9rem, .7rem + .8vw, 1.4rem) clamp(1rem, .9rem + 1.4vw, 2rem) clamp(1.1rem, .9rem + 1vw, 1.7rem); border:10px solid var(--wb-red); border-bottom:0; border-radius:14px 14px 0 0; background:radial-gradient(120% 130% at 50% 108%, rgba(255,178,84,.3), rgba(255,178,84,.06) 55%, transparent 78%), linear-gradient(180deg, #221317, #191014); box-shadow:0 26px 64px -18px rgba(255,170,60,.35), 0 30px 70px -20px rgba(0,0,0,.7); transition:box-shadow .25s ease; scroll-margin-top:110px; }
.wb-scope .wb-hv--17 .wb-hv17-door:hover,
.wb-scope .wb-hv--17 .wb-hv17-door:focus-within{ box-shadow:0 30px 90px -12px rgba(255,180,70,.5), 0 30px 70px -20px rgba(0,0,0,.7); }
.wb-scope .wb-hv--17 .wb-hv17-door__transom{ margin:0 0 .9rem; padding-bottom:.55rem; border-bottom:1px solid rgba(255,255,255,.16); text-align:center; font-family:var(--wb-display) !important; font-weight:800; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#ffcf9a; }
.wb-scope .wb-hv--17 .wb-hv17-door__transom a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.wb-scope .wb-hv--17 .wb-hv17-door .wb-hero-ask{ margin-top:0; max-width:none; }
.wb-scope .wb-hv--17 .wb-hero-ask__q{ font-size:clamp(1.15rem, 1rem + .6vw, 1.5rem); }

/* LOAD CHOREOGRAPHY (pure CSS, keyed to display so it replays on every
   switcher flip; JS + motion-ok only, so the default state everywhere else
   is fully lit): the gable tube flickers on at .2s, the floors light down
   the building at .5/.75/1/1.25s, the LED wakes at 1.35s, and the door's
   dark veil lifts at 1.55s, pulling the eye to the ask. */
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-gable{ animation:wb-hv17-tube .7s linear both .2s; }
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-floor{ animation:wb-hv17-lighton .55s ease-out both; }
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-floors li:nth-child(1) .wb-hv17-floor{ animation-delay:.5s; }
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-floors li:nth-child(2) .wb-hv17-floor{ animation-delay:.75s; }
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-floors li:nth-child(3) .wb-hv17-floor{ animation-delay:1s; }
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-floors li:nth-child(4) .wb-hv17-floor{ animation-delay:1.25s; }
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-led{ animation:wb-hv17-lighton .45s ease-out both 1.35s; }
  .wb-js .wb-scope .wb-hv--17 .wb-hv17-door::after{ content:""; position:absolute; inset:-10px; border-radius:inherit; background:#0b0c10; pointer-events:none; z-index:7; animation:wb-hv17-veil .9s ease-out both 1.55s; }
}
@keyframes wb-hv17-lighton{
  from{ filter:brightness(.16) saturate(.55); }
  to{ filter:brightness(1) saturate(1); }
}
@keyframes wb-hv17-tube{
  0%{ opacity:.06; }
  22%{ opacity:.9; }
  34%{ opacity:.2; }
  52%{ opacity:1; }
  64%{ opacity:.35; }
  80%, 100%{ opacity:1; }
}
@keyframes wb-hv17-veil{
  from{ opacity:.88; }
  to{ opacity:0; }
}

/* Tablet and down: single column in the spec's 390 order (head, building,
   street, door, sub); the pointer line is pointless with the door adjacent. */
@media (max-width:1023px){
  .wb-scope .wb-hv--17{ grid-template-columns:minmax(0, 1fr); grid-template-rows:auto auto auto auto auto; grid-template-areas:"head" "bldg" "street" "door" "sub"; }
  .wb-scope .wb-hv--17 .wb-hv17-sub{ margin-top:1.4rem; }
  .wb-scope .wb-hv--17 .wb-hv17-pointer{ display:none; }
  .wb-scope .wb-hv--17 .wb-hv17-bldg{ width:100%; max-width:44rem; }
  .wb-scope .wb-hv--17 .wb-lead--bright{ max-width:none; }
}

/* Phone (390 plan): gable ~110px with the lockup, rocket ~64px, ~84px
   tap-target floors with always-visible chips, LED, then the full-width door
   with the tap-to-call transom; van and street dropped. */
@media (max-width:560px){
  .wb-scope .wb-hv--17 .wb-hv17-street{ display:none; }
  .wb-scope .wb-hv--17 .wb-hv17-bldg{ padding-top:20px; }
  .wb-scope .wb-hv--17 .wb-hv17-rocket{ width:64px; }
  .wb-scope .wb-hv--17 .wb-hv17-roof{ height:110px; }
  .wb-scope .wb-hv--17 .wb-hv17-wgsd img{ height:72px; }
  .wb-scope .wb-hv--17 .wb-hv17-floor{ height:84px; }
  .wb-scope .wb-hv--17 .wb-hv17-tag{ left:.5rem; bottom:.45rem; font-size:.62rem; }
  .wb-scope .wb-hv--17 .wb-hv17-go{ display:none; }
  .wb-scope .wb-hv--17 .wb-hv17-door{ border-width:8px; border-bottom:0; padding-left:.9rem; padding-right:.9rem; }
}


/* ---- Variant 18 "Walk the Floor" (build/37 fly-through, switcher slot 15).
   Screen one is the actual shop: the transcoded GoPro fly-through of the
   production floor, full-bleed at 100svh, one chrome sentence in the lower
   third, the red-dot no-stock-footage badge top-left, and a near-black
   command bar (WGSD left of the search per Jg #85) docked to the frame
   bottom. The band's shared video + scrim are hidden; the flythrough POSTER
   hangs as the band background (LCP + the mobile / no-JS / reduced-motion /
   Save-Data still), and initHeroV18 injects the 4.9MB re-encode on desktop
   only, post-load, once the stage is seen. On scroll the stage PINS for
   ~35svh while the honeycomb curtain rises over the frozen floor like a
   shop door closing (pure CSS; the sticky pin needs the band's overflow to
   be clip, not hidden, because a scroll container kills position:sticky).
   The page's existing seam rocket rides the next seam, so no second rocket.
   Committee fixes carried in: badge + marketing-first copy answer the
   "printer with a homepage" objection; phones get a zero-weight "watch our
   floor run" chip to the mp4 (native player) so the pitch survives there. */

/* Band level: hide the shared video + scrim (this variant brings its own,
   JS-gated); hang the flythrough poster as the backdrop (!important beats
   the section's inline background-image); zero the band padding so the
   stage owns the whole frame (the glass nav floats over the footage). */
.wb-scope .wb-hero-v18 .wb-band__video-wrap,
.wb-scope .wb-hero-v18 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v18.wb-band--video{
  padding:0 !important;
  overflow-x:clip; overflow-y:visible;   /* keeps the sticky pin alive; falls back to the band's hidden (no pin, curtain still overlaps) on old Safari */
  background:#0a0b0d url("../videos/weber-website-video-poster.jpg") center / cover no-repeat !important;
}
@media (max-width:767px){
  /* Spec mobile plan: the poster paints as the background, biased to the
     open floor (derived square crop, 37KB, so the 148KB desktop jpg never
     ships to phones). */
  .wb-scope .wb-hero-v18.wb-band--video{
    background:#0a0b0d url("../images/overhaul/hero37/floor-poster-640.webp") center 30% / cover no-repeat !important;
  }
}
/* Full track: the centered inner must not shrink-wrap; the stage is full-bleed. */
.wb-scope .wb-hero-v18 .wb-inner.wb-hero__summary{ width:100%; max-width:none; min-height:0; }

/* THE PIN: 135svh of track holding a 100svh sticky stage, so the floor
   freezes for ~35svh of runway while the curtain climbs over it. */
.wb-scope .wb-hv--18 .wb-hv18-pin{ height:135vh; height:135svh; }
.wb-scope .wb-hv--18 .wb-hv18-stage{
  position:sticky; top:0; z-index:1;
  height:100vh; height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}

/* Layer 0: the fly-through. JS appends the <video>; it cross-fades in over
   the poster (600ms per spec) only once it actually PLAYS, so a rejected
   play() in Low Power Mode simply leaves the poster standing. */
.wb-scope .wb-hv--18 .wb-hv18-video{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.wb-scope .wb-hv--18 .wb-hv18-video__el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.wb-scope .wb-hv--18 .wb-hv18-video.is-live .wb-hv18-video__el{ opacity:1; }

/* Layer 1: the scrim. Clear through the upper frame (the footage is the
   show), easing to near-black under the copy and the bar; the wood floor is
   bright, so the lower stops are heavy enough to hold white at 4.5:1. */
.wb-scope .wb-hv--18 .wb-hv18-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,7,10,.5) 0%, rgba(6,7,10,.12) 18%, rgba(6,7,10,0) 36%,
    rgba(6,7,10,.18) 52%, rgba(6,7,10,.66) 72%, rgba(8,9,12,.94) 100%);
}

/* The content gutter: the variant is full-bleed, so it carries its own
   .wb-inner-equivalent column. */
.wb-scope .wb-hv--18 .wb-hv18-pad{ width:100%; max-width:var(--wb-maxw); margin-inline:auto; padding-inline:1.25rem; }

/* The badge: mono, red live-dot, top-left under the glass nav. The claim
   the whole variant stands on. */
.wb-scope .wb-hv--18 .wb-hv18-badge{
  position:absolute; z-index:2;
  top:calc(var(--wb-nav-h) + 1.4rem);
  left:max(1.25rem, calc((100% - var(--wb-maxw)) / 2 + 1.25rem));
  display:inline-flex; align-items:center; gap:.55em;
  margin:0; padding:.5rem .9rem;
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  background:rgba(8,9,12,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace !important; /* beats the fonts-modern Inter pin on p */
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
}
.wb-scope .wb-hv--18 .wb-hv18-badge__dot{ flex:0 0 auto; width:.6em; height:.6em; border-radius:50%; background:#ff4a52; }
@media (prefers-reduced-motion:no-preference){
  .wb-scope .wb-hv--18 .wb-hv18-badge__dot{ box-shadow:0 0 0 0 rgba(255,74,82,.55); animation:wb-hv18-pulse 2.4s ease-out infinite; }
}
@keyframes wb-hv18-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,74,82,.55); }
  70%{ box-shadow:0 0 0 .55em rgba(255,74,82,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,74,82,0); }
}

/* The lower third: kicker, two-line chrome H1, lead. Top ~55% of the frame
   stays clean per the spec; nothing here depends on data-reveal to read. */
.wb-scope .wb-hv--18 .wb-hv18-low{ position:relative; z-index:2; padding-bottom:clamp(1.1rem, 2vh, 1.9rem); }
.wb-scope .wb-hv--18 .wb-hv18-kicker{ margin:0 0 .6rem; color:rgba(255,255,255,.85); text-shadow:0 1px 12px rgba(0,0,0,.55); }
.wb-scope .wb-hv--18 .wb-hv18-h1{ font-family:var(--wb-display) !important; /* fonts-modern pins p to Inter */ margin:0; }
.wb-scope .wb-hv--18 .wb-hv18-lead{ margin:.85rem 0 0; max-width:56ch; text-shadow:0 1px 14px rgba(0,0,0,.55); }

/* Mobile-only watch chip (UI/UX objection fix); hidden on desktop where the
   video plays inline. */
.wb-scope .wb-hv--18 .wb-hv18-watch{ display:none; }

/* The scroll cue, right-aligned above the bar. Desktop only per spec. */
.wb-scope .wb-hv--18 .wb-hv18-cue{
  display:flex; width:fit-content; margin:1rem 0 0 auto;
  align-items:center; gap:.5em;
  color:#fff; text-decoration:none;
  font-family:var(--wb-display); font-weight:700; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase;
  opacity:.85; text-shadow:0 1px 10px rgba(0,0,0,.6);
}
.wb-scope .wb-hv--18 .wb-hv18-cue:hover{ opacity:1; }
@media (prefers-reduced-motion:no-preference){
  .wb-scope .wb-hv--18 .wb-hv18-cue i{ animation:wb-hv18-bob 1.8s ease-in-out infinite; }
}
@keyframes wb-hv18-bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(4px); }
}

/* THE COMMAND BAR: near-black glass docked to the frame bottom, full-bleed
   face, contents on the shared content column. */
.wb-scope .wb-hv--18 .wb-hv18-bar{
  position:relative; z-index:3; width:100%;
  background:rgba(8,9,12,.82);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border-top:1px solid rgba(255,255,255,.14);
}
.wb-scope .wb-hv--18 .wb-hv18-bar__in{ display:flex; align-items:center; gap:clamp(1.1rem, 1rem + 1vw, 2rem); padding-block:clamp(.9rem, 1.8vh, 1.4rem); }
.wb-scope .wb-hv--18 .wb-hv18-wgsd{ flex:0 0 auto; display:block; }
.wb-scope .wb-hv--18 .wb-hv18-wgsd img{ display:block; width:auto; height:clamp(74px, 5vw + 40px, 104px); filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
.wb-scope .wb-hv--18 .wb-hero-ask{ flex:1 1 auto; margin-top:0; max-width:none; }
.wb-scope .wb-hv--18 .wb-hero-ask__q{ font-size:clamp(1.05rem, .95rem + .5vw, 1.35rem); margin-bottom:.5rem; }
/* The ask anchor: results position against the field; z-lift so the drop-up
   paints over the lower-third copy. */
.wb-scope .wb-hv--18 .wb-hero-ask__field{ position:relative; z-index:5; }
@media (min-width:768px){
  /* The bar sits on the viewport floor, so results open UPWARD over the
     footage; on phones the bar is in flow and the default drop-down stands
     (the band's :has() lift keeps it un-clipped). */
  .wb-scope .wb-hv--18 .wb-hero-ask__results{ top:auto; bottom:calc(100% + .55rem); }
}

/* The meta rail under the field: phone left, live odometer right. */
.wb-scope .wb-hv--18 .wb-hv18-meta{ display:flex; align-items:center; justify-content:space-between; gap:.8rem 1.4rem; flex-wrap:wrap; margin-top:.65rem; }
.wb-scope .wb-hv--18 .wb-hv18-call{ display:inline-flex; align-items:center; gap:.55rem; color:#fff; text-decoration:none; font-size:.92rem; line-height:1.3; }
.wb-scope .wb-hv--18 .wb-hv18-call i{ color:#ff4a52; font-size:.9rem; }
.wb-scope .wb-hv--18 .wb-hv18-call strong{ font-weight:800; white-space:nowrap; }
.wb-scope .wb-hv--18 .wb-hv18-call:hover{ text-decoration:underline; text-underline-offset:3px; }
.wb-scope .wb-hv--18 .wb-hv18-jobs{ margin:0; font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.wb-scope .wb-hv--18 .wb-hv18-jobs__num{ font-family:var(--wb-display) !important; font-weight:800; font-size:1.05rem; letter-spacing:0; color:#fff; font-variant-numeric:tabular-nums; margin-right:.35rem; }
.wb-scope .wb-hv--18 .wb-hv18-jobs__num--static{ display:none; }

/* THE CURTAIN: the honeycomb shop door. The negative margin parks it over
   the pin's runway, so during the 35svh pin it climbs the frozen floor;
   pure CSS, and with no pin (old Safari / no clip support) it simply
   overlaps the stage bottom statically. Sits above the stage (z 2 vs 1). */
.wb-scope .wb-hv--18 .wb-hv18-curtain{
  position:relative; z-index:2;
  margin-top:-35vh; margin-top:-35svh;
  background:
    radial-gradient(46rem 26rem at 12% 0%, rgba(216,35,42,.3), transparent 62%),
    linear-gradient(rgba(7,8,11,.62), rgba(7,8,11,.62)),
    #0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center / cover no-repeat;
  clip-path:polygon(0 var(--wb-slant), 100% 0, 100% 100%, 0 100%);
  padding:calc(var(--wb-slant) + clamp(2.6rem, 2rem + 2vw, 4rem)) 0 clamp(2.8rem, 2rem + 2.5vw, 4.2rem);
}
.wb-scope .wb-hv--18 .wb-hv18-curtain__k{ margin:0 0 .55rem; color:#ff5a61; }
.wb-scope .wb-hv--18 .wb-hv18-curtain__line{ margin:0; font-family:var(--wb-display) !important; font-weight:800; font-size:clamp(1.25rem, 1rem + 1.1vw, 1.9rem); line-height:1.22; letter-spacing:-.01em; color:#fff; max-width:44ch; }
.wb-scope .wb-hv--18 .wb-hv18-curtain__link{ display:inline-flex; align-items:center; gap:.5em; margin-top:1.1rem; color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.wb-scope .wb-hv--18 .wb-hv18-curtain__link:hover{ color:#ff5a61; }
.wb-scope .wb-hv--18 .wb-hv18-curtain__link i{ font-size:.85em; }

/* Mobile plan (spec, 390px): video never loads (JS gates too); pin, curtain,
   and cue dropped; poster stays as the band background; stack = badge,
   kicker, chrome H1 (the shared 560px rule flattens the metal), trimmed
   lead, watch chip, then the bar as a column: WGSD at the 70px rule above
   the ask, full-width field + button, full-width red call chip, static
   job-count chip (no odometer animation). */
@media (max-width:767px){
  .wb-scope .wb-hv--18 .wb-hv18-pin{ height:auto; }
  .wb-scope .wb-hv--18 .wb-hv18-stage{ position:relative; height:auto; min-height:100vh; min-height:100svh; padding-top:calc(var(--wb-nav-h) + 4.6rem); }
  .wb-scope .wb-hv--18 .wb-hv18-video{ display:none; }
  .wb-scope .wb-hv--18 .wb-hv18-cue{ display:none; }
  .wb-scope .wb-hv--18 .wb-hv18-curtain{ display:none; }
  .wb-scope .wb-hv--18 .wb-hv18-badge{ top:calc(var(--wb-nav-h) + 1rem); font-size:.62rem; letter-spacing:.1em; padding:.42rem .75rem; }
  .wb-scope .wb-hv--18 .wb-hv18-watch{
    display:inline-flex; align-items:center; gap:.6rem; margin-top:1.1rem;
    padding:.55rem 1.05rem; border:1px solid rgba(255,255,255,.32); border-radius:999px;
    background:rgba(8,9,12,.55); color:#fff; text-decoration:none;
    font-weight:700; font-size:.88rem; line-height:1.2;
  }
  .wb-scope .wb-hv--18 .wb-hv18-watch i{ color:#ff4a52; font-size:1.05rem; }
  .wb-scope .wb-hv--18 .wb-hv18-bar__in{ flex-direction:column; align-items:flex-start; gap:.9rem; padding-block:1.1rem 1.35rem; }
  .wb-scope .wb-hv--18 .wb-hv18-wgsd img{ height:70px; }
  .wb-scope .wb-hv--18 .wb-hero-ask{ width:100%; }
  .wb-scope .wb-hv--18 .wb-hv18-meta{ flex-direction:column; align-items:stretch; }
  .wb-scope .wb-hv--18 .wb-hv18-call{
    justify-content:center; text-align:center;
    background:var(--wb-red); border-radius:999px; padding:.8rem 1.2rem;
    font-weight:700; box-shadow:0 14px 30px -14px rgba(216,35,42,.6);
  }
  .wb-scope .wb-hv--18 .wb-hv18-call i{ color:#fff; }
  .wb-scope .wb-hv--18 .wb-hv18-call:hover{ text-decoration:none; }
  .wb-scope .wb-hv--18 .wb-hv18-jobs{
    display:inline-flex; align-items:baseline; gap:.1rem; width:fit-content;
    padding:.5rem .95rem; border:1px solid rgba(255,255,255,.22); border-radius:999px;
    background:rgba(255,255,255,.07);
  }
  .wb-scope .wb-hv--18 .wb-hv18-jobs__num--odo{ display:none; }
  .wb-scope .wb-hv--18 .wb-hv18-jobs__num--static{ display:inline; }
}


/* ================================================================
   SERVICES OVERVIEW page-hero variants (skin prefix svc)
   Briefs: /tmp/wb-page-heroes/brief-svc.md (locked 2026-07-03).
   Staged for merge into css/overhaul.css (image URLs are relative
   to css/). Band-level looks ride .wb-hero-vsvc-N on the section;
   content styles scope under .wb-phv-svc-N. Variant 0 (shipped red
   balance hero) needs nothing here. No em dashes anywhere.
   ================================================================ */

/* Every variant headline is a <p class="wb-h1"> (the real h1 lives in
   variant 0); fonts-modern pins p to Inter, so re-assert the display face. */
.wb-scope [class*="wb-phv-svc-"] .wb-h1{ font-family:var(--wb-display) !important; }

/* ---- svc-1: Six Doors and a Receipt ------------------------------ */
/* Band look unchanged (the shipped red radial). The right frame is the
   six-service composite: six real-work tiles in ONE framed unit, so the
   "six doors" claim is visible in the visual. Media + video are typed
   paper tickets (no honest video still exists yet; same grammar as v3/v4). */
.wb-scope .wb-phv-svc-1 .wb-phv-svc1-media{ display:block; }
.wb-scope .wb-phv-svc1-tiles{
  list-style:none; margin:0; padding:12px; height:100%;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;
  background:rgba(14,16,22,.55); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--wb-radius-lg);
  box-shadow:var(--wb-lx) var(--wb-ly) 60px rgba(0,0,0,.42);
}
.wb-scope .wb-phv-svc1-tile{
  position:relative; overflow:hidden; border-radius:10px;
  aspect-ratio:4/3; background:#101216;
}
.wb-scope .wb-phv-svc1-tile img{
  width:100%; height:100% !important; min-height:0 !important; object-fit:cover;
  border-radius:0 !important; outline:none !important; box-shadow:none !important;
  display:block;
}
.wb-scope .wb-phv-svc1-tag{
  position:absolute; left:8px; bottom:8px; z-index:2;
  font-family:var(--wb-display); font-weight:800; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; line-height:1;
  color:#fff; background:var(--wb-red); padding:.32em .6em; border-radius:4px;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
/* The two typed paper tickets: white stock, red rack tab, mono type. */
.wb-scope .wb-phv-svc1-tile--paper{
  background:#fbfaf3; color:#24262b; padding:.9rem .8rem .8rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.wb-scope .wb-phv-svc1-papertab{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:44%; height:9px; background:var(--wb-red); border-radius:0 0 4px 4px;
}
.wb-scope .wb-phv-svc1-paperhead{
  margin-top:.35rem; font-family:var(--wb-display); font-weight:900;
  font-size:.92rem; letter-spacing:.06em; text-transform:uppercase;
}
.wb-scope .wb-phv-svc1-paperline{
  font-family:'Courier New', ui-monospace, monospace; font-size:.72rem;
  line-height:1.45; color:rgba(36,38,43,.78);
}
/* Co-primary CTA row: the ghost anchor gets real weight so "Jump to your
   service" never reads as the weakest object in the row (committee fix). */
.wb-scope .wb-phv-svc-1 a.wb-phv-svc1-jump{
  border-width:2px; background:rgba(255,255,255,.12); font-weight:800;
}
.wb-scope .wb-phv-svc-1 a.wb-phv-svc1-jump:hover{ background:rgba(255,255,255,.22); }
/* The receipts strip: keep it one glance from the buttons; the retention
   cell may wrap its long label. */
.wb-scope .wb-phv-svc-1 .wb-hv-proof__cell:last-child .wb-hv-proof__label{ max-width:26ch; }
@media (max-width:700px){
  /* Mobile: the strip compresses to three single-line chips under one
     hairline (~90px added), per the build/36 spec. Phone button stacks
     first (already first in DOM). */
  .wb-scope .wb-phv-svc-1 .wb-hv-proof{ gap:.45rem .9rem; }
  .wb-scope .wb-phv-svc-1 .wb-hv-proof__cell{ display:flex; align-items:baseline; gap:.45rem; }
  .wb-scope .wb-phv-svc-1 .wb-hv-proof__cell .wb-hv-proof__num{ font-size:1.15rem; }
  .wb-scope .wb-phv-svc-1 .wb-hv-proof__cell .wb-hv-proof__label{ max-width:none; }
  .wb-scope .wb-phv-svc-1 .wb-phv-svc1-ctas{ flex-direction:column; align-items:stretch; }
  .wb-scope .wb-phv-svc-1 .wb-phv-svc1-ctas .wb-btn{ justify-content:center; }
}

/* ---- svc-2: WE GET ___ DONE., Services Edition ------------------- */
/* Deep-red vault restage of the build/37 press poster (never the same
   stage as the homepage champion one click away). Metallic-lines plate
   under a red radial, near black. */
.wb-scope .wb-hero-vsvc-2[data-wb-hero-band]{
  background:
    radial-gradient(120% 90% at 78% 6%, rgba(216,35,42,.30) 0%, rgba(216,35,42,0) 55%),
    linear-gradient(180deg, rgba(26,9,11,.93), rgba(12,8,9,.97)),
    #120a0b url("../images/overhaul/tex-metallic-lines.webp") center/420px repeat !important;
}
.wb-scope .wb-phv-svc-2{ position:relative; padding:clamp(.4rem, 1vw, 1.2rem) 0; }
/* a11y headline: standard inline clip pattern. */
.wb-scope .wb-phv-svc-2 .wb-phv-svc2-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta row: a plain kicker over its hairline (build/38: the press-proof
   frame, crop marks and CMYK squares, is stripped). */
.wb-scope .wb-phv-svc2-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(1rem, .7rem + 1vw, 1.7rem); padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-phv-svc2-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Row one: WE GET, chrome. A notch smaller than the homepage gag: this
   poster is a router, the chips outrank the type. */
.wb-scope .wb-phv-svc2-we{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(2.6rem, 7.5vw, 6rem); line-height:.92; letter-spacing:-.03em;
  transform-origin:left center;
}
@keyframes wb-svc2-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-phv-svc2-we.is-in{ animation:wb-svc2-stamp .18s ease-out; }
/* The blank: a paper slot the ghost deliverable types into (staged JS,
   65ms/char, user-driven focus clears it). Clicking it focuses the pill. */
.wb-scope .wb-phv-svc2-blankrow{ margin:clamp(.5rem, .4rem + .6vw, 1rem) 0 0; }
.wb-scope .wb-phv-svc2-blank{
  display:inline-block; min-width:min(58vw, 15ch); background:#fbfaf7;
  padding:.28em .5em .22em; cursor:text;
  border-bottom:5px solid var(--wb-red);
  box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
}
.wb-scope .wb-phv-svc2-ghost{
  font-family:var(--wb-display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.01em; color:var(--wb-red);
  font-size:clamp(1.2rem, .9rem + 2.2vw, 2.5rem); line-height:1;
}
/* Row two: DONE. in brand red. */
.wb-scope .wb-phv-svc2-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.2rem); margin:clamp(.7rem, .5rem + .8vw, 1.3rem) 0 0; }
.wb-scope .wb-phv-svc2-done{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(3rem, 8.5vw, 7rem); line-height:.88; letter-spacing:-.03em;
  color:var(--wb-red);
}
.wb-scope .wb-phv-svc2-dot{ color:var(--wb-red); }
.wb-scope .wb-phv-svc2-seal{ display:block; transform:rotate(-6deg); margin-top:.4em; }
/* #106: on desktop the seal pins top-right (under the meta hairline), off the
   DONE row, so the gag column tightens and the right side stops running empty. */
@media (min-width:961px){
	.wb-scope .wb-phv-svc2-seal{ position:absolute; top:3.9rem; right:0; margin-top:0; }
}
.wb-scope .wb-phv-svc2-seal img{ display:block; width:clamp(110px, 13vw, 180px); height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
@keyframes wb-svc2-sealstamp{ from{ transform:rotate(-6deg) scale(1.5); opacity:0; } to{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-phv-svc2-donerow.is-in .wb-phv-svc2-seal{ animation:wb-svc2-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .3s both; }
/* THE SIX DOOR-CHIPS: the primary action, directly under the H1 gag,
   above the fold at 390px. Red, door-scale, unmistakably links. */
.wb-scope .wb-phv-svc2-chips{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.8rem; margin:clamp(1rem, .8rem + 1vw, 1.8rem) 0 0;   /* #107: pills need air so they read as buttons, not one slab */
}
.wb-scope .wb-phv-svc2-chips a{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:var(--wb-red-grad); color:#fff; text-decoration:none;
  font-family:var(--wb-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(.8rem, .72rem + .35vw, .98rem); line-height:1.15;
  padding:.85rem 1.3rem; border-radius:999px;   /* #107: match the site's wb-btn pill */
  box-shadow:0 10px 24px -10px rgba(216,35,42,.6);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.wb-scope .wb-phv-svc2-chips a:hover{ transform:translateY(-2px); filter:brightness(1.07); box-shadow:0 14px 30px -10px rgba(216,35,42,.7); color:#fff; }
.wb-scope .wb-phv-svc2-chips a i{ flex:0 0 auto; }
.wb-scope .wb-phv-svc-2 .wb-phv-svc2-lead{ max-width:56rem; margin-top:clamp(.9rem, .7rem + .8vw, 1.5rem); }
/* The pill: paper slab, red ghost placeholder, red Get it done block. */
.wb-scope .wb-phv-svc-2 .wb-hero-ask{ max-width:none; margin-top:clamp(.9rem, .6rem + 1vw, 1.6rem); position:relative; z-index:5; }
.wb-scope .wb-phv-svc-2 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.76rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#ff5a61; margin:0 0 .5rem; text-shadow:none; }
.wb-scope .wb-phv-svc-2 .wb-hero-ask__row{ border-radius:999px; background:#fbfaf7;   /* #108: the 36D rounding */ gap:.75rem; padding:.5rem .55rem .5rem clamp(1.3rem, 1rem + 1vw, 2rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-phv-svc-2 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-phv-svc-2 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.05rem, .85rem + 1.2vw, 1.7rem); padding:.65rem .2rem; color:#1c1e22; }
.wb-scope .wb-phv-svc-2 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-phv-svc-2 .wb-hero-ask__go{ border-radius:999px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.wb-scope .wb-phv-svc-2 .wb-hero-ask__results{ border-radius:14px; top:calc(100% + 6px); }
/* Ticket strip: years with the approved retention label, the live jobs
   odometer, and the tap-to-call cell in red. */
.wb-scope .wb-phv-svc2-ticket{
  display:flex; flex-wrap:wrap; gap:clamp(1rem, 2vw, 2.6rem);
  margin-top:clamp(1.2rem, .9rem + 1.2vw, 2rem); padding-top:clamp(.9rem, .7rem + .8vw, 1.3rem);
  border-top:1px solid rgba(255,255,255,.18); max-width:60rem;
}
.wb-scope .wb-phv-svc2-ticket__cell{ flex:1 1 180px; min-width:0; }
.wb-scope .wb-phv-svc2-ticket__num{ display:block; font-family:var(--wb-display); font-weight:900; font-size:clamp(1.15rem, 1rem + .8vw, 1.7rem); line-height:1.1; color:#fff; }
.wb-scope a.wb-phv-svc2-ticket__tel{ color:#ff5a61; text-decoration:none; }
.wb-scope a.wb-phv-svc2-ticket__tel:hover{ color:#ff7a80; }
.wb-scope .wb-phv-svc2-ticket__label{ display:block; margin-top:.3rem; font-size:.8rem; line-height:1.4; color:rgba(255,255,255,.66); }
@media (max-width:900px){
  .wb-scope .wb-phv-svc2-chips{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .wb-scope .wb-phv-svc2-chips a{ padding:.7rem .75rem; }
  .wb-scope .wb-phv-svc2-blank{ min-width:76vw; }
  .wb-scope .wb-phv-svc2-ticket{ gap:.6rem 1rem; }
}

/* ---- svc-3: The Job Board, Sorted Into Six Racks ------------------ */
/* Dark board: honeycomb plate under the red radial glow. */
.wb-scope .wb-hero-vsvc-3[data-wb-hero-band]{
  background:
    radial-gradient(90% 70% at 72% 12%, rgba(216,35,42,.32) 0%, rgba(216,35,42,0) 60%),
    linear-gradient(180deg, rgba(13,15,20,.86), rgba(13,15,20,.94)),
    #0d0f14 url("../images/overhaul/tex-honeycomb-dark.webp") center/720px repeat !important;
}
.wb-scope .wb-phv-svc3-grid{
  display:grid; grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
  gap:clamp(1.6rem, 1rem + 3vw, 3.6rem); align-items:start;
}
.wb-scope .wb-phv-svc3-count{ display:flex; align-items:baseline; gap:.7rem; margin:.4rem 0 0; }
.wb-scope .wb-phv-svc3-count__num{ font-family:var(--wb-display); font-weight:900; font-size:clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); line-height:1; letter-spacing:-.02em; }
.wb-scope .wb-phv-svc3-count__label{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.62); }
/* THE OPEN TICKET: the one paper-white object on the board. */
.wb-scope .wb-phv-svc3-open{
  position:relative; z-index:5; margin-top:clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
  max-width:44rem; background:#fdfcf7; border-radius:12px;
  padding:clamp(1.05rem, .85rem + .9vw, 1.6rem);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.66), 0 0 0 1px rgba(20,24,31,.08);
  display:grid; grid-template-columns:auto minmax(0, 1fr);
  grid-template-areas:"head head" "wgsd form";
  column-gap:clamp(.9rem, .6rem + 1vw, 1.35rem); row-gap:.85rem; align-items:center;
}
.wb-scope .wb-phv-svc3-open__head{ grid-area:head; margin:0; text-align:center; font-family:var(--wb-display); font-weight:800; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(30,32,38,.62); border-bottom:1px dashed rgba(30,32,38,.28); padding-bottom:.6rem; }
.wb-scope .wb-phv-svc3-wgsd{ grid-area:wgsd; display:block; transform:rotate(-4deg); }
.wb-scope .wb-phv-svc3-wgsd img{ display:block; width:clamp(84px, 5vw + 44px, 110px); height:auto; }
.wb-scope .wb-phv-svc3-open .wb-hero-ask{ grid-area:form; margin-top:0; max-width:none; }
.wb-scope .wb-phv-svc3-open .wb-hero-ask__q{ color:var(--wb-ink); font-size:clamp(1.05rem, .95rem + .4vw, 1.3rem); margin-bottom:.5rem; text-shadow:none; }
.wb-scope .wb-phv-svc3-open .wb-hero-ask__q-em{ color:var(--wb-red); }
.wb-scope .wb-phv-svc3-open .wb-hero-ask__row{ background:#fff; box-shadow:0 10px 24px -14px rgba(0,0,0,.4), 0 0 0 1px rgba(20,24,31,.16); }
.wb-scope .wb-phv-svc3-open .wb-hero-ask__input{ color:#1c1e22; }
.wb-scope .wb-phv-svc3-open .wb-hero-ask__note{ color:var(--wb-ink-2); }
.wb-scope .wb-phv-svc3-open .wb-hero-ask__note a{ color:var(--wb-red); }
.wb-scope .wb-phv-svc3-hand{
  position:absolute; top:-52px; right:-40px; width:clamp(130px, 8vw + 60px, 190px);
  height:auto; z-index:3; pointer-events:none;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));
  transform-origin:78% 92%; transition:transform .25s ease;
}
.wb-scope .wb-phv-svc3-open:focus-within .wb-phv-svc3-hand{ transform:translate(-7px, 8px) rotate(-3deg); }
/* THE BOARD: six racks, one stamped ticket each. Rack headers are red
   tabs at door scale, unmistakably links (hover lift + underline). */
.wb-scope .wb-phv-svc3-board{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(.9rem, .7rem + .8vw, 1.4rem);
}
.wb-scope .wb-phv-svc3-rack{ min-width:0; }
.wb-scope a.wb-phv-svc3-tab{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:linear-gradient(180deg, #e8323a, #b8161d); color:#fff; text-decoration:none;
  font-family:var(--wb-display); font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; font-size:clamp(.78rem, .7rem + .3vw, .92rem); line-height:1.15;
  padding:.6rem .8rem; border-radius:8px 8px 0 0;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
  transition:transform .12s ease, filter .12s ease;
}
.wb-scope a.wb-phv-svc3-tab:hover,
.wb-scope a.wb-phv-svc3-tab:focus-visible{ transform:translateY(-2px); filter:brightness(1.1); color:#fff; }
.wb-scope a.wb-phv-svc3-tab:hover .wb-phv-svc3-tab__t,
.wb-scope a.wb-phv-svc3-tab:focus-visible .wb-phv-svc3-tab__t{ text-decoration:underline; text-underline-offset:3px; }
.wb-scope .wb-phv-svc3-ticket{
  position:relative; margin:0; background:#191c22; border:1px solid rgba(255,255,255,.14);
  border-top:0; border-radius:0 0 10px 10px; overflow:hidden;
}
.wb-scope .wb-phv-svc3-ticket img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; filter:saturate(1.02) brightness(.92); }
.wb-scope .wb-phv-svc3-ticket figcaption{
  padding:.5rem .7rem; font-size:.74rem; font-weight:600; color:rgba(255,255,255,.72); line-height:1.35;
}
/* The two typed paper tickets: white stock, red tab, mono type, so they
   hold against the photo tickets. */
.wb-scope .wb-phv-svc3-ticket--paper{
  background:#fbfaf3; color:#24262b; padding:1rem .85rem .9rem;
  display:flex; flex-direction:column; gap:.3rem; min-height:100%;
}
.wb-scope .wb-phv-svc3-ptab{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:42%; height:10px; background:var(--wb-red); border-radius:0 0 4px 4px; }
.wb-scope .wb-phv-svc3-phead{ margin:.4rem 0 0; font-family:var(--wb-display); font-weight:900; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; }
.wb-scope .wb-phv-svc3-pline{ margin:0; font-family:'Courier New', ui-monospace, monospace; font-size:.76rem; line-height:1.5; color:rgba(36,38,43,.78); }
/* The stamp: red outline caps, thumped on at a 60ms cascade per rack
   (--svc3-i set inline). Replays each time the variant is flipped on. */
.wb-scope .wb-phv-svc3-stamp{
  position:absolute; right:10px; bottom:10px; z-index:2;
  font-family:var(--wb-display); font-weight:900; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:#ff4d54; border:2px solid #ff4d54; border-radius:4px;
  padding:.3em .5em; transform:rotate(-8deg); background:rgba(10,10,12,.25);
}
.wb-scope .wb-phv-svc3-ticket--paper .wb-phv-svc3-stamp{ color:var(--wb-red); border-color:var(--wb-red); background:rgba(216,35,42,.06); }
@keyframes wb-svc3-thump{ from{ transform:rotate(-8deg) scale(1.7); opacity:0; } to{ transform:rotate(-8deg) scale(1); opacity:1; } }
.wb-scope .wb-phv-svc3-stamp{ animation:wb-svc3-thump .3s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:calc(var(--svc3-i, 1) * 60ms + .2s); }
/* Stacked rack links: mobile only. */
.wb-scope .wb-phv-svc3-racklinks{ display:none; }
@media (max-width:860px){
  .wb-scope .wb-phv-svc3-grid{ grid-template-columns:1fr; }
  /* The accepted mobile collapse: a swipe strip (native scroll snap)
     plus the stacked rack links below. */
  .wb-scope .wb-phv-svc3-board{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; gap:.8rem; padding-bottom:.5rem;
  }
  .wb-scope .wb-phv-svc3-rack{ flex:0 0 72%; max-width:340px; scroll-snap-align:center; }
  .wb-scope .wb-phv-svc3-racklinks{
    display:grid; grid-template-columns:1fr; gap:.5rem; margin-top:1rem;
  }
  .wb-scope .wb-phv-svc3-racklinks a{
    display:flex; align-items:center; justify-content:space-between; gap:.5rem;
    background:linear-gradient(180deg, #e8323a, #b8161d); color:#fff; text-decoration:none;
    font-family:var(--wb-display); font-weight:800; text-transform:uppercase;
    letter-spacing:.05em; font-size:.85rem; padding:.75rem .9rem; border-radius:8px;
  }
  .wb-scope .wb-phv-svc3-hand{ display:none; }
  .wb-scope .wb-phv-svc3-open{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"head wgsd" "form form"; row-gap:.75rem; }
}

/* ---- svc-4: What Needs Done? One-Tap Doors ------------------------ */
/* Owner #127 (2026-07-14): the click-flip preview was removed; the chips
   navigate, the stage is one static payoff. Band: the team-table photo
   under a dark scrim (middle stop deepened so the I NEED accent clears
   4.5:1 on the brightest photo pixels). */
.wb-scope .wb-hero-vsvc-4[data-wb-hero-band]{ background:#0d0f14 !important; }
/* Owner 2026-07-14: Ken Burns crossfade behind the hero, art dept + tech first.
   Children of the band, so they show ONLY while the band wears the vsvc-4 skin
   (herolab flips swap the class and these stand down). 4 frames, 24s loop,
   slow push-in; reduced motion parks on frame one. The scrim span carries the
   old gradient so copy contrast is unchanged. */
.wb-scope .wb-svc4-show, .wb-scope .wb-svc4-scrim{ display:none; }
.wb-scope .wb-hero-vsvc-4 .wb-svc4-show{ display:block; position:absolute; inset:0; overflow:hidden; z-index:0; }
.wb-scope .wb-hero-vsvc-4 .wb-svc4-scrim{ display:block; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,12,16,.88) 0%, rgba(10,12,16,.84) 45%, rgba(10,12,16,.93) 100%); }
.wb-scope .wb-svc4-show img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; animation:wb-svc4-kb 24s linear infinite;
}
.wb-scope .wb-svc4-show img:nth-child(2){ animation-delay:6s; }
.wb-scope .wb-svc4-show img:nth-child(3){ animation-delay:12s; }
.wb-scope .wb-svc4-show img:nth-child(4){ animation-delay:18s; }
@keyframes wb-svc4-kb{
  0%{ opacity:0; transform:scale(1); }
  7%{ opacity:1; }
  29%{ opacity:1; }
  36%{ opacity:0; transform:scale(1.09); }
  100%{ opacity:0; transform:scale(1.09); }
}
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-svc4-show img{ animation:none !important; }
  .wb-scope .wb-svc4-show img:first-child{ opacity:1; }
}
.wb-scope .wb-phv-svc-4 .wb-phv-svc4-lead{ max-width:52rem; }
.wb-scope .wb-phv-svc4-chiprow{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-top:clamp(1.1rem, .9rem + 1vw, 1.8rem);
}
.wb-scope .wb-phv-svc4-need{
  font-family:var(--wb-display); font-weight:900; font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase; color:#ff7078; margin-right:.3rem;
}
.wb-scope a.wb-phv-svc4-chip{
  display:inline-block; padding:.55rem 1.05rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08);
  color:#fff; text-decoration:none; font-family:var(--wb-display);
  font-weight:700; font-size:clamp(.82rem, .76rem + .3vw, .95rem); line-height:1.2;
  transition:background .12s ease, border-color .12s ease, transform .12s ease;
}
.wb-scope a.wb-phv-svc4-chip:hover,
.wb-scope a.wb-phv-svc4-chip:focus-visible{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.6); color:#fff; transform:translateY(-1px); }
.wb-scope a.wb-phv-svc4-chip--all{ border-style:dashed; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
/* Owner 2026-07-14: the WHOLE hero is a two-column grid. Copy + doors (main)
   and the payoff photo stack in the left column; the Start Anywhere card owns
   the right column, spanning both rows, vertically centered. */
.wb-scope .wb-phv-svc4-grid{
  display:grid; grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr);
  gap:clamp(1.2rem, .9rem + 1.6vw, 2rem) clamp(1.6rem, 1.2rem + 2.6vw, 3.2rem);
  align-items:center; margin-top:.4rem;
}
.wb-scope .wb-phv-svc4-main{ min-width:0; }
/* (svc4 payoff photo cut, owner 2026-07-14; the slideshow carries the visuals) */
/* The lockup on the frame shoulder: a dark plate behind the mark so the
   white letters clear 4.5:1 (and the red word 3:1 large-text) even over
   the photo's light spots. Static; the stamp animation left with the flip. */
/* The WGSD mark rides as a TAB off the card's upper right (owner 2026-07-14). */
.wb-scope .wb-phv-svc4-lockup{
  position:absolute; right:16px; top:-38px; z-index:3;
  width:clamp(80px, 7.5vw, 100px); height:auto; transform:rotate(6deg);
  padding:.5rem .6rem; background:rgba(13,15,20,.92);
  border:1px solid rgba(255,255,255,.16); border-radius:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.5); pointer-events:none;
}
/* The path card: phone is the only primary button on it. */
.wb-scope .wb-phv-svc4-card{
  position:relative; align-self:center; min-width:0;
  background:rgba(14,16,22,.7); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--wb-radius-lg); padding:clamp(1.1rem, .9rem + 1vw, 1.8rem);
  padding-top:clamp(2.2rem, 1.8rem + 1vw, 2.9rem);   /* the WGSD tab dips into this pad, never the copy */
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6);
}
.wb-scope .wb-phv-svc4-card__k{
  margin:0; font-family:var(--wb-display); font-weight:800; font-size:.8rem;
  letter-spacing:.16em; text-transform:uppercase; color:#ff7078;
}
.wb-scope .wb-phv-svc4-card__line{ margin:.55rem 0 0; font-size:clamp(1rem, .95rem + .3vw, 1.15rem); line-height:1.55; color:rgba(255,255,255,.92); }
.wb-scope .wb-phv-svc4-proof{ margin:.6rem 0 0; font-size:.8rem; line-height:1.45; color:rgba(255,255,255,.6); }
.wb-scope .wb-hero-vsvc-4[data-wb-hero-band] a.wb-phv-svc4-call.wb-btn{
  display:flex; justify-content:center; margin-top:1rem; width:100%;
  background:linear-gradient(135deg, #d8232a 0%, #9e1632 100%);
  color:#fff; box-shadow:0 10px 26px -8px rgba(216,35,42,.6);
}
.wb-scope .wb-hero-vsvc-4[data-wb-hero-band] a.wb-phv-svc4-call.wb-btn:hover{ color:#fff; filter:brightness(1.06); }
.wb-scope a.wb-phv-svc4-doorlink{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.75rem;
  color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px;
}
.wb-scope a.wb-phv-svc4-doorlink:hover{ color:#ff8a8f; }
.wb-scope .wb-phv-svc-4 .wb-phv-svc4-ask{ margin-top:1rem; max-width:none; }
.wb-scope .wb-phv-svc-4 .wb-phv-svc4-ask .wb-hero-ask__q{ font-size:.8rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:.4rem; }
@media (max-width:900px){
  .wb-scope .wb-phv-svc4-grid{ grid-template-columns:1fr; }
  .wb-scope .wb-phv-svc4-card{ margin-top:1.6rem; }   /* room for the tab */
}
/* No JS involved anywhere in v4: the chips are plain anchors and the
   stage is static, so the no-JS state is the only state. */

/* ---- svc-5: The Cleave, Six Doors on the Red Road ----------------- */
.wb-scope .wb-hero-vsvc-5[data-wb-hero-band]{
  background:
    linear-gradient(180deg, rgba(13,15,20,.9), rgba(13,15,20,.96)),
    #0d0f14 url("../images/overhaul/tex-honeycomb-dark.webp") center/720px repeat !important;
}
/* One vehicle per page: while the Cleave is active, the delivery van owns
   the seam and the page rocket below the hero stands down. */
.wb-scope .wb-hero-vsvc-5[data-wb-hero-band] ~ .wb-seam-rider--rocket{ display:none !important; }
.wb-scope .wb-phv-svc5-grid{
  display:grid; grid-template-columns:minmax(0, .96fr) minmax(0, 1.04fr);
  gap:clamp(1.6rem, 1rem + 3vw, 3.6rem); align-items:center;
}
/* The doors: a tappable stacked list, thumbnail + name + one-line promise.
   No hover dependency anywhere; hover/focus/tap all drive the wedge. */
.wb-scope .wb-phv-svc5-doors{ list-style:none; margin:clamp(1rem, .8rem + .8vw, 1.6rem) 0 0; padding:0; display:grid; gap:.5rem; }
.wb-scope a.wb-phv-svc5-door{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center;
  gap:.75rem; padding:.5rem .7rem .5rem .5rem; text-decoration:none;
  border:1px solid rgba(255,255,255,.14); border-radius:10px;
  background:rgba(255,255,255,.05); color:#fff;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.wb-scope a.wb-phv-svc5-door:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; transform:translateX(2px); }
.wb-scope a.wb-phv-svc5-door.is-active{ background:rgba(216,35,42,.16); border-color:var(--wb-red); }
.wb-scope .wb-phv-svc5-door__th{ display:block; width:64px; height:40px; object-fit:cover; border-radius:6px; outline:1px solid rgba(255,255,255,.16); outline-offset:-1px; }
.wb-scope .wb-phv-svc5-door__body{ min-width:0; }
.wb-scope .wb-phv-svc5-door__name{ display:block; font-family:var(--wb-display); font-weight:800; font-size:.95rem; line-height:1.2; }
.wb-scope .wb-phv-svc5-door__promise{ display:block; margin-top:.15rem; font-size:.78rem; line-height:1.35; color:rgba(255,255,255,.62); }
.wb-scope .wb-phv-svc5-door__go{ color:rgba(255,255,255,.5); transition:color .12s ease, transform .12s ease; }
.wb-scope a.wb-phv-svc5-door.is-active .wb-phv-svc5-door__go,
.wb-scope a.wb-phv-svc5-door:hover .wb-phv-svc5-door__go{ color:#ff5a61; transform:translateX(2px); }
.wb-scope .wb-phv-svc-5 .wb-phv-svc5-ask{ margin-top:clamp(.9rem, .7rem + .6vw, 1.3rem); max-width:none; }
.wb-scope .wb-phv-svc-5 .wb-phv-svc5-ask .wb-hero-ask__q{ font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:.4rem; }
.wb-scope .wb-phv-svc5-phone{ margin:.9rem 0 0; font-size:.95rem; color:rgba(255,255,255,.85); }
.wb-scope .wb-phv-svc5-phone a{ color:#ff5a61; font-weight:700; }
/* THE STAGE: two clip-path wedges split by the 14px red road seam
   (cut top 46%, bottom 66%); the van drives the seam via data-drive. */
.wb-scope .wb-phv-svc5-stage{ position:relative; aspect-ratio:5/4; min-height:380px; }
.wb-scope .wb-phv-svc5-wedge{ position:absolute; inset:0; overflow:hidden; border-radius:var(--wb-radius-lg); }
.wb-scope .wb-phv-svc5-wedge--top{ clip-path:polygon(0 0, 100% 0, 100% 44%, 0 64%); }
.wb-scope .wb-phv-svc5-wedge--btm{ clip-path:polygon(0 68%, 100% 48%, 100% 100%, 0 100%); }
/* All six frames share one crop and one grade (the committee's unified
   treatment), absolutely stacked; only .is-on shows. User-driven only. */
.wb-scope .wb-phv-svc5-frame{
  position:absolute; inset:0; opacity:0; transition:opacity .35s ease; z-index:1;
}
.wb-scope .wb-phv-svc5-frame.is-on{ opacity:1; z-index:2; }
.wb-scope .wb-phv-svc5-wedge img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.04) contrast(1.03); }
/* The web frame rides inside CSS browser chrome, recomposed within the
   standard crop. */
.wb-scope .wb-phv-svc5-frame--chrome{ background:#22252b; }
.wb-scope .wb-phv-svc5-chromebar{
  position:absolute; top:0; left:0; right:0; height:26px; z-index:2;
  display:flex; align-items:center; gap:6px; padding:0 12px;
  background:#22252b; border-bottom:1px solid rgba(255,255,255,.1);
}
.wb-scope .wb-phv-svc5-chromebar i{ width:9px; height:9px; border-radius:50%; background:#ff5f57; }
.wb-scope .wb-phv-svc5-chromebar i:nth-child(2){ background:#febc2e; }
.wb-scope .wb-phv-svc5-chromebar i:nth-child(3){ background:#28c840; }
.wb-scope .wb-phv-svc5-frame--chrome img{ position:absolute; top:26px; left:0; width:100%; height:calc(100% - 26px); }
/* Caption chip: fixed lower-left of the top wedge, so hovers never feel
   like layout jumps. */
.wb-scope .wb-phv-svc5-cap{
  position:absolute; left:12px; top:50%; z-index:3; max-width:62%;
  background:rgba(10,12,16,.82); color:#fff; font-size:.74rem; font-weight:600;
  line-height:1.35; padding:.4em .65em; border-radius:6px;
  border:1px solid rgba(255,255,255,.14);
}
.wb-scope .wb-phv-svc5-cap--btm{ top:auto; bottom:12px; }
.wb-scope a.wb-phv-svc5-walk{
  position:absolute; right:12px; top:12px; z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--wb-red-grad); color:#fff; text-decoration:none;
  font-family:var(--wb-display); font-weight:800; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.05em;
  padding:.5em .85em; border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(216,35,42,.7);
  transition:transform .12s ease, filter .12s ease;
}
.wb-scope a.wb-phv-svc5-walk:hover{ transform:translateY(-2px); filter:brightness(1.08); color:#fff; }
/* The red road: 14px seam with a dashed centerline; the van rides it. */
.wb-scope .wb-phv-svc5-roadwrap{
  position:absolute; left:-6%; right:-6%; top:53%; height:14px; z-index:4;
  transform:rotate(-9deg); transform-origin:center; pointer-events:none;
}
.wb-scope .wb-phv-svc5-road{
  position:absolute; inset:0; background:#c8181f;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 26px, rgba(255,255,255,0) 26px 60px);
  background-size:auto 2px; background-position:center; background-repeat:repeat-x;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.wb-scope .wb-phv-svc5-van{
  position:absolute; bottom:10px; left:0; width:clamp(96px, 11vw, 150px); height:auto;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));
}
/* Mile-marker: the tel: chip, phone-first close on the stage. */
.wb-scope a.wb-phv-svc5-mile{
  position:absolute; right:12px; bottom:12px; z-index:5;
  display:block; text-align:center; text-decoration:none;
  background:#fbfaf7; color:#1c1e22; border:3px solid var(--wb-red);
  border-radius:10px; padding:.5rem .8rem;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  transition:transform .12s ease;
}
.wb-scope a.wb-phv-svc5-mile:hover{ transform:translateY(-2px); color:#1c1e22; }
.wb-scope .wb-phv-svc5-mile__num{ display:block; font-family:var(--wb-display); font-weight:900; font-size:1.25rem; line-height:1; color:var(--wb-red); }
.wb-scope .wb-phv-svc5-mile__label{ display:block; margin-top:.25rem; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(28,30,34,.72); }
@media (max-width:860px){
  /* Touch/mobile-first: the wedge stage sits ABOVE the stacked door list
     (panel display:contents reorders); wedges simplify to one static
     16:10 frame, van parked off, road hidden. First tap swaps the frame,
     the walk-through chip navigates. */
  .wb-scope .wb-phv-svc5-grid{ display:flex; flex-direction:column; align-items:stretch; }
  .wb-scope .wb-phv-svc5-panel{ display:contents; }
  .wb-scope .wb-phv-svc5-copy{ order:1; }
  .wb-scope .wb-phv-svc5-stage{ order:2; aspect-ratio:16/10; min-height:0; margin-top:1.2rem; }
  .wb-scope .wb-phv-svc5-doors{ order:3; margin-top:1.2rem; }
  .wb-scope .wb-phv-svc5-ask{ order:4; }
  .wb-scope .wb-phv-svc5-phone{ order:5; }
  .wb-scope .wb-phv-svc5-wedge--top{ clip-path:none; }
  .wb-scope .wb-phv-svc5-wedge--btm,
  .wb-scope .wb-phv-svc5-roadwrap{ display:none; }
  .wb-scope .wb-phv-svc5-cap{ top:auto; bottom:12px; max-width:70%; }
  .wb-scope .wb-phv-svc5-door__promise{ display:none; }
}

/* ---- Reduced motion: every svc variant goes still ------------------ */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-phv-svc2-we.is-in,
  .wb-scope .wb-phv-svc2-donerow.is-in .wb-phv-svc2-seal,
  .wb-scope .wb-phv-svc3-stamp{ animation:none !important; }
  .wb-scope .wb-phv-svc5-frame{ transition:none !important; }
  .wb-scope .wb-phv-svc3-hand{ transition:none !important; }
}


/* ================================================================
   INDUSTRIES OVERVIEW page-hero variants (skin prefix ind)
   Briefs: /tmp/wb-page-heroes/brief-ind.md (locked 2026-07-03).
   Staged for merge into css/overhaul.css (image URLs are relative
   to css/). Band-level looks ride .wb-hero-vind-N on the section;
   content styles scope under .wb-phv-ind-N. Variant 0 (shipped)
   and variant 3 (keeps the shipped red-radial band) need no band
   override. No em dashes anywhere.
   ================================================================ */

/* Every variant headline is a <p class="wb-h1"> (the real h1 lives in
   variant 0); fonts-modern pins p to Inter, so re-assert the display face,
   and give the non-summary variants the summary's type scale. */
.wb-scope [class*="wb-phv-ind-"] .wb-h1{ font-family:var(--wb-display) !important; }
.wb-scope .wb-phv-ind-2 .wb-h1,
.wb-scope .wb-phv-ind-4 .wb-h1{ font-size:clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height:1.05; max-width:50rem; }
@media (max-width:640px){
  .wb-scope [class*="wb-phv-ind-"] .wb-h1.wb-metal-text{ background:none; -webkit-text-fill-color:currentColor; color:#fff; filter:none; }
  .wb-scope .wb-phv-ind-2 .wb-h1,
  .wb-scope .wb-phv-ind-4 .wb-h1{ font-size:clamp(1.9rem, 8.5vw, 2.6rem); }
}

/* ---- ind-1: Whose World Is This? (the industry qualifier) -------- */
/* Band goes near-black; the backdrop deck inside the variant paints it.
   The variant needs the full band width; content re-caps itself. */
.wb-scope .wb-hero-vind-1[data-wb-hero-band]{ background:#0d0f13 !important; }
.wb-scope .wb-hero-vind-1[data-wb-hero-band] .wb-inner.wb-hero-var.is-active{ width:100%; max-width:none; }

/* The backdrop deck papers the band: overshoot insets ride the band's
   overflow:hidden, so exact padding math is never load-bearing. */
.wb-scope .wb-phv-ind-1{ position:relative; }
.wb-scope .wb-phv-ind-1 .ind1-bg{
  position:absolute; z-index:0; pointer-events:none; overflow:hidden;
  top:calc(-1 * (var(--wb-pad) + var(--wb-nav-h)) - 1rem);
  bottom:calc(-1 * var(--wb-pad) - 1rem);
  left:-1.25rem; right:-1.25rem;
}
.wb-scope .wb-phv-ind-1 .ind1-bg__ph{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease;
}
.wb-scope .wb-phv-ind-1 .ind1-bg__ph.is-on{ opacity:1; }
/* The ticket-payoff texture (gray blocks under a dark tint), crossfaded in
   for the three photo-less chips so no tap reads broken. */
.wb-scope .wb-phv-ind-1 .ind1-bg__tex{
  position:absolute; inset:0; opacity:0; transition:opacity .4s ease;
  background:
    linear-gradient(rgba(13,15,19,.72), rgba(13,15,19,.85)),
    #14161a url("../images/overhaul/tex-gray-blocks.webp") center/460px repeat;
}
.wb-scope .wb-phv-ind-1 .ind1-bg__tex.is-on{ opacity:1; }
/* Dark LEFT scrim so the chrome H1 and the chips always read. */
.wb-scope .wb-phv-ind-1 .ind1-bg__scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(7,8,10,.94) 0%, rgba(7,8,10,.82) 42%, rgba(7,8,10,.48) 72%, rgba(7,8,10,.34) 100%);
}

/* Content: copy left, the docked YOUR PATH card right. */
.wb-scope .wb-phv-ind-1 .ind1-frame{
  position:relative; z-index:1; max-width:var(--wb-maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items:center;
}
.wb-scope .wb-phv-ind-1 .ind1-copy{ position:relative; }

/* One row of 44px red-outline chips. */
.wb-scope .wb-phv-ind-1 .ind1-chips{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top:clamp(1.1rem, .8rem + 1vw, 1.7rem);
}
.wb-scope .wb-phv-ind-1 .ind1-chip{
  min-height:44px; padding:.5rem 1rem; border-radius:999px; cursor:pointer;
  border:2px solid rgba(216,35,42,.85); background:rgba(9,11,15,.55); color:#fff;
  font-family:var(--wb-display); font-weight:700; font-size:.9rem; line-height:1.15;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
}
.wb-scope .wb-phv-ind-1 .ind1-chip:hover{ background:rgba(216,35,42,.28); transform:translateY(-1px); }
.wb-scope .wb-phv-ind-1 .ind1-chip[aria-pressed="true"]{ background:var(--wb-red); border-color:var(--wb-red); }
.wb-scope .wb-phv-ind-1 .ind1-chip:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* The lockup slot: the grocery / unexpected art stamps in over the copy
   column's upper right (absolute, so zero layout shift; hidden on phones). */
.wb-scope .wb-phv-ind-1 .ind1-stamp{
  position:absolute; top:-1.4rem; right:-.5rem; z-index:2;
  width:clamp(110px, 7rem + 3vw, 172px); height:auto; transform:rotate(-7deg);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55)); pointer-events:none;
}
.wb-js .wb-scope .wb-phv-ind-1 .ind1-stamp.is-stamp{ animation:wb-ind1-stamp .2s ease-out both; }
@keyframes wb-ind1-stamp{ from{ opacity:0; transform:rotate(-7deg) scale(1.08); } to{ opacity:1; transform:rotate(-7deg) scale(1); } }

/* #145 (owner 2026-07-14): the industry lockup moved from the copy column to an
   offset badge on the YOUR PATH box's top-right corner (was floating over the H1).
   Grocery's lockup is dropped entirely (#144). Overrides the copy-column
   .ind1-stamp placement above by source order. */
.wb-scope .wb-phv-ind-1 .ind1-path{ position:relative; }
.wb-scope .wb-phv-ind-1 .ind1-stamp{
  top:auto; left:auto;
  bottom:calc(100% - 1.15rem); right:-.6rem; z-index:3;
  width:clamp(104px, 6rem + 4vw, 148px);
  transform:rotate(6deg); transform-origin:bottom right;
}
.wb-scope .wb-phv-ind-1 .ind1-stamp[hidden]{ display:none; }
.wb-js .wb-scope .wb-phv-ind-1 .ind1-stamp.is-stamp{ animation:wb-ind1-badge .2s ease-out both; }
@keyframes wb-ind1-badge{ from{ opacity:0; transform:rotate(6deg) scale(1.08); } to{ opacity:1; transform:rotate(6deg) scale(1); } }
@media (max-width:800px){
  .wb-scope .wb-phv-ind-1 .ind1-stamp{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .wb-js .wb-scope .wb-phv-ind-1 .ind1-stamp.is-stamp{ animation:none; }
}

/* YOUR PATH, the docked glass card. */
.wb-scope .wb-phv-ind-1 .ind1-path{
  padding:clamp(1.2rem, 1rem + 1vw, 1.8rem);
  background:rgba(10,12,16,.62); border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:16px; color:#eef1f5;
}
.wb-scope .wb-phv-ind-1 .ind1-path__tag{
  margin:0 0 .6rem; font-family:var(--wb-display); font-weight:800; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:#ff5a61;
}
.wb-scope .wb-phv-ind-1 .ind1-blurb{ margin:.6rem 0 0; font-size:.98rem; line-height:1.5; color:#d7dce3; }
.wb-scope .wb-phv-ind-1 .ind1-keep{ margin:.7rem 0 0; padding-top:.6rem; border-top:1px solid rgba(255,255,255,.14); font-size:.85rem; line-height:1.45; color:#b9c0c9; }
.wb-scope .wb-phv-ind-1 .ind1-coinrow{ display:flex; align-items:center; gap:.7rem; margin-bottom:.35rem; }
.wb-scope .wb-phv-ind-1 .ind1-coin{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex:0 0 44px;
  outline:2px solid rgba(255,255,255,.4); box-shadow:0 6px 14px rgba(0,0,0,.5);
}
.wb-scope .wb-phv-ind-1 .ind1-coinline{ margin:0; font-weight:700; font-size:.92rem; line-height:1.35; color:#fff; }
/* The typed job-ticket card (the photo-less payoff): paper stub, mono face. */
.wb-scope .wb-phv-ind-1 .ind1-ticket{
  margin-bottom:.5rem; padding:.7rem .85rem; border-radius:6px;
  background:#fbfaf3; color:#24262b; border-left:4px solid var(--wb-red);
  box-shadow:0 10px 22px -10px rgba(0,0,0,.6);
  font-family:'Courier New', ui-monospace, monospace;
}
.wb-js .wb-scope .wb-phv-ind-1 .ind1-ticket.is-slide{ animation:wb-ind1-slide .3s ease-out both; }
@keyframes wb-ind1-slide{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.wb-scope .wb-phv-ind-1 .ind1-ticket__tag{ margin:0; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(36,38,43,.6); }
.wb-scope .wb-phv-ind-1 .ind1-ticket__job{ margin:.3rem 0 0; font-weight:700; font-size:.9rem; line-height:1.35; }
.wb-scope .wb-phv-ind-1 .ind1-ticket__status{ margin:.3rem 0 0; font-size:.78rem; }
.wb-scope .wb-phv-ind-1 .ind1-ticket__status b{ color:var(--wb-red); letter-spacing:.06em; }
.wb-scope .wb-phv-ind-1 .ind1-call{ display:flex; width:100%; justify-content:center; margin-top:1rem; }
.wb-scope .wb-phv-ind-1 .ind1-sub{ margin:.45rem 0 0; text-align:center; font-size:.82rem; color:rgba(255,255,255,.75); }
.wb-scope .wb-phv-ind-1 .ind1-spoke{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.8rem; min-height:44px;
  color:#fff; font-weight:700; font-size:.95rem; text-decoration:underline;
  text-decoration-color:rgba(216,35,42,.85); text-underline-offset:3px;
}
.wb-scope .wb-phv-ind-1 .ind1-spoke:hover{ text-decoration-color:#fff; color:#fff; }
/* #110 (owner, 2026-07-13): the YOUR PATH box hugs its content instead of
   stretching to the grid row (the shared .wb-glass height:100% pooled all the
   slack at the card foot), and the frame's align-items:center keeps the snug
   card vertically centered as panes of different heights swap. */
.wb-scope .wb-phv-ind-1 .ind1-path{ height:auto; }
/* #110: honor [hidden] on the swap panes (the base flex rules beat the UA rule,
   leaking a stray coin row and a premature spoke link pre-tap). */
.wb-scope .wb-phv-ind-1 .ind1-coinrow[hidden],
.wb-scope .wb-phv-ind-1 .ind1-spoke[hidden]{ display:none; }
/* #110: ink the paper job ticket itself so the inset never rides the dark-band
   .wb-glass p re-ink (grey-on-white was the owner's flag). */
.wb-scope .wb-phv-ind-1 .ind1-ticket__tag{ color:#5a5e66; line-height:1.5; }
.wb-scope .wb-phv-ind-1 .ind1-ticket__job{ color:var(--wb-ink); }
.wb-scope .wb-phv-ind-1 .ind1-ticket__status{ color:#24262b; line-height:1.5; }

/* 390 spec: chips become ONE horizontally scrollable row under the H1; the
   YOUR PATH card docks full width directly under the chips. */
@media (max-width:800px){
  .wb-scope .wb-phv-ind-1 .ind1-frame{ grid-template-columns:1fr; gap:1.2rem; }
  .wb-scope .wb-phv-ind-1 .ind1-stamp{ display:none; }
  .wb-scope .wb-phv-ind-1 .ind1-chips{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding-bottom:.35rem; margin-inline:-1.25rem; padding-inline:1.25rem;
  }
  .wb-scope .wb-phv-ind-1 .ind1-chips::-webkit-scrollbar{ display:none; }
  .wb-scope .wb-phv-ind-1 .ind1-chip{ flex:0 0 auto; white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-phv-ind-1 .ind1-bg__ph,
  .wb-scope .wb-phv-ind-1 .ind1-bg__tex{ transition:none; }   /* 0ms swaps (locked) */
  .wb-js .wb-scope .wb-phv-ind-1 .ind1-stamp.is-stamp,
  .wb-js .wb-scope .wb-phv-ind-1 .ind1-ticket.is-slide{ animation:none; }
}

/* ---- ind-2: The Industry Board, restaged ------------------------- */
/* Flat steel-gray pegboard wall in daylight: gray blocks under a light
   steel tint plus a subtle peg-hole dot grid. NO honeycomb, NO red glow. */
.wb-scope .wb-hero-vind-2[data-wb-hero-band]{
  background:
    radial-gradient(rgba(0,0,0,.38) 1.6px, transparent 2.1px) 0 0/44px 44px,
    linear-gradient(180deg, rgba(38,41,47,.92), rgba(30,32,37,.95)),
    #22242a url("../images/overhaul/tex-gray-blocks.webp") center/460px repeat !important;
}
.wb-scope .wb-hero-vind-2[data-wb-hero-band] .wb-inner.wb-hero-var.is-active{ width:100%; max-width:none; }
.wb-scope .wb-phv-ind-2 .ind2-grid{
  max-width:var(--wb-maxw); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:clamp(1.5rem, 1rem + 2.5vw, 3.2rem); align-items:center;
}
/* The DONE stamp inside the lead: red ink, slight tilt, stays inline text. */
.wb-scope .wb-phv-ind-2 .ind2-done{
  display:inline-block; padding:0 .3em; transform:rotate(-3deg);
  font-family:var(--wb-display); font-weight:800; letter-spacing:.05em;
  color:#ff5a61; border:2px solid rgba(255,90,97,.8); border-radius:4px; line-height:1.25;
}

/* The bright object: a paper-white index card with ruled red tab links. */
.wb-scope .wb-phv-ind-2 .ind2-card{
  max-width:26rem; margin-top:clamp(1rem, .7rem + 1vw, 1.6rem);
  background:#fbfaf3; color:#24262b; border-radius:6px; transform:rotate(-1deg);
  padding:1rem 1.1rem 1.15rem;
  box-shadow:0 14px 28px -12px rgba(0,0,0,.55), 0 40px 80px -30px rgba(0,0,0,.6);
}
.wb-scope .wb-phv-ind-2 .ind2-card__head{
  margin:0; padding-bottom:.45rem; border-bottom:3px double rgba(36,38,43,.7);
  font-family:var(--wb-display) !important; font-weight:800; font-size:.95rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--wb-red);
}
.wb-scope .wb-phv-ind-2 .ind2-card__sub{ margin:.4rem 0 .15rem; font-size:.8rem; color:rgba(36,38,43,.65); }
.wb-scope .wb-phv-ind-2 .ind2-card__tabs{ list-style:none; margin:0; padding:0; }
.wb-scope .wb-phv-ind-2 .ind2-card__tabs li{ border-bottom:1px solid rgba(36,38,43,.12); }
.wb-scope .wb-phv-ind-2 .ind2-card__tabs li:last-child{ border-bottom:0; }
.wb-scope .wb-phv-ind-2 .ind2-card__tabs a{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  min-height:44px; padding:.35rem .15rem; color:#24262b; text-decoration:none;
  font-family:var(--wb-display); font-weight:700; font-size:.95rem;
}
.wb-scope .wb-phv-ind-2 .ind2-card__tabs a i{ color:var(--wb-red); transition:transform .15s ease; }
.wb-scope .wb-phv-ind-2 .ind2-card__tabs a:hover{ color:var(--wb-red); }
.wb-scope .wb-phv-ind-2 .ind2-card__tabs a:hover i{ transform:translateX(3px); }
.wb-scope .wb-phv-ind-2 .ind2-skip{ margin-top:1rem; font-size:.95rem; color:rgba(255,255,255,.85); }
.wb-scope .wb-phv-ind-2 .ind2-skip a{ color:#fff; font-weight:700; text-decoration:underline; text-decoration-color:rgba(216,35,42,.85); text-underline-offset:3px; }
.wb-scope .wb-phv-ind-2 .ind2-skip a:hover{ text-decoration-color:#fff; }

/* THE BOARD: racks of dimmed tickets under metal rack tabs. */
.wb-scope .wb-phv-ind-2 .ind2-board{ display:flex; flex-direction:column; gap:1.1rem; }
.wb-scope .wb-phv-ind-2 .ind2-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
/* The metal rack-tab hardware: brushed chip, two screw dots, a real link. */
.wb-scope .wb-phv-ind-2 .ind2-tab{
  position:relative; display:inline-flex; align-items:center; min-height:30px;
  margin-bottom:.5rem; padding:.2rem 1.5rem .2rem 1rem; border-radius:3px;
  background:linear-gradient(180deg, #6a7076, #4a4f55 55%, #5b6167);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 7px rgba(0,0,0,.45);
  color:#f2f4f6; text-decoration:none; font-family:var(--wb-display);
  font-weight:800; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
.wb-scope .wb-phv-ind-2 .ind2-tab::before,
.wb-scope .wb-phv-ind-2 .ind2-tab::after{
  content:""; position:absolute; top:50%; width:5px; height:5px; border-radius:50%;
  background:#23262b; box-shadow:inset 0 1px 1px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(-50%);
}
.wb-scope .wb-phv-ind-2 .ind2-tab::before{ left:5px; }
.wb-scope .wb-phv-ind-2 .ind2-tab::after{ right:5px; }
.wb-scope .wb-phv-ind-2 .ind2-tab:hover{ color:#fff; filter:brightness(1.15); }
.wb-scope .wb-phv-ind-2 .ind2-tickets{ display:grid; grid-template-columns:1fr; gap:.9rem; }
.wb-scope .wb-phv-ind-2 .ind2-tickets--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
/* A ticket: white-border print, dimmed until hover lifts it to full color. */
.wb-scope .wb-phv-ind-2 .ind2-t{
  position:relative; display:block; background:#fff; padding:6px 6px 0; border-radius:3px;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.65); text-decoration:none;
  filter:grayscale(.35) brightness(.78); transition:filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wb-scope .wb-phv-ind-2 .ind2-t:nth-child(2n){ transform:rotate(.8deg); }
.wb-scope .wb-phv-ind-2 .ind2-t:hover,
.wb-scope .wb-phv-ind-2 .ind2-t:focus-visible{
  filter:none; transform:translateY(-5px); z-index:2;
  box-shadow:0 22px 40px -14px rgba(0,0,0,.8);
}
.wb-scope .wb-phv-ind-2 .ind2-t:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wb-scope .wb-phv-ind-2 .ind2-t img{ display:block; width:100%; height:130px; object-fit:cover; }
.wb-scope .wb-phv-ind-2 .ind2-t__cap{
  display:block; padding:.4rem .2rem .45rem; color:#24262b;
  font-size:.72rem; font-weight:600; line-height:1.25;
}
/* Pin-up: the shared reveal engine staggers .is-in (60ms steps in markup);
   this adds the one-time settle thump on top. Never under reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-phv-ind-2 .ind2-t.is-in{ animation:wb-ind2-pin .34s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes wb-ind2-pin{ from{ transform:translateY(-7px) scale(1.03); } }
@media (max-width:1000px){
  .wb-scope .wb-phv-ind-2 .ind2-grid{ grid-template-columns:1fr; gap:1.4rem; }
}
/* Mobile: H1, bright card full width, then a three-ticket swipe strip (one
   grocery, one ag, one construction; the --mob tickets). */
@media (max-width:700px){
  .wb-scope .wb-phv-ind-2 .ind2-card{ max-width:none; transform:none; }
  .wb-scope .wb-phv-ind-2 .ind2-board{
    flex-direction:row; gap:.8rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin-inline:-1.25rem; padding:0 1.25rem .4rem;
  }
  .wb-scope .wb-phv-ind-2 .ind2-board::-webkit-scrollbar{ display:none; }
  .wb-scope .wb-phv-ind-2 .ind2-rack,
  .wb-scope .wb-phv-ind-2 .ind2-row,
  .wb-scope .wb-phv-ind-2 .ind2-tickets{ display:contents; }
  .wb-scope .wb-phv-ind-2 .ind2-tab{ display:none; }
  .wb-scope .wb-phv-ind-2 .ind2-t{ display:none; }
  .wb-scope .wb-phv-ind-2 .ind2-t--mob{ display:block; flex:0 0 72vw; filter:none; }
  .wb-scope .wb-phv-ind-2 .ind2-t--mob img{ height:150px; }
}

/* ---- ind-3: Receipts for Your Aisle (the calm pick) -------------- */
/* Shipped red-radial band untouched. Only the linked receipts strip is
   new: three cells under a hairline, every one a visible route (arrow,
   underlined figure, hover lift, 44px targets). */
.wb-scope .wb-phv-ind-3 .ind3-proof{
  display:flex; flex-wrap:wrap; gap:clamp(.8rem, 1.5vw, 2rem); max-width:54rem;
  margin-top:clamp(1.6rem, 1rem + 2vw, 2.6rem);
  padding-top:clamp(1rem, .7rem + 1vw, 1.5rem);
  border-top:1px solid rgba(255,255,255,.18);
}
.wb-scope .wb-phv-ind-3 .ind3-cell{
  flex:1 1 190px; min-height:44px; display:flex; flex-direction:column; gap:.25rem;
  padding:.55rem .7rem; margin:-.55rem -.7rem 0; border-radius:12px;
  color:#fff; text-decoration:none; transition:background .15s ease, transform .15s ease;
}
.wb-scope .wb-phv-ind-3 .ind3-cell:hover,
.wb-scope .wb-phv-ind-3 .ind3-cell:focus-visible{ background:rgba(255,255,255,.1); transform:translateY(-2px); color:#fff; }
.wb-scope .wb-phv-ind-3 .ind3-cell:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.wb-scope .wb-phv-ind-3 .ind3-cell__num{
  font-family:var(--wb-display); font-weight:800; font-size:clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  line-height:1; text-transform:uppercase; text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.55); text-decoration-thickness:2px; text-underline-offset:5px;
}
.wb-scope .wb-phv-ind-3 .ind3-cell__label{ font-size:.86rem; line-height:1.35; color:rgba(255,244,243,.92); max-width:26ch; }
.wb-scope .wb-phv-ind-3 .ind3-cell__label i{ margin-left:.3rem; color:#fff; opacity:.85; }
.wb-scope .wb-phv-ind-3 .ind3-cell:hover .ind3-cell__label i{ opacity:1; }
/* Mobile: three single-line linked chips (~90px added). */
@media (max-width:640px){
  .wb-scope .wb-phv-ind-3 .ind3-proof{ gap:.5rem; }
  .wb-scope .wb-phv-ind-3 .ind3-cell{ flex:1 1 100%; flex-direction:row; align-items:baseline; gap:.55rem; margin:0; padding:.4rem .2rem; }
  .wb-scope .wb-phv-ind-3 .ind3-cell__num{ font-size:1.15rem; }
  .wb-scope .wb-phv-ind-3 .ind3-cell__label{ max-width:none; }
}

/* ---- ind-4: Still a Client (the signed-on ribbon) ----------------- */
/* Dark honeycomb band; the shipped seam-rider van stands down here (the
   ribbon's own van is the page's one moving accent on this variant). */
.wb-scope .wb-hero-vind-4[data-wb-hero-band]{
  background:
    linear-gradient(rgba(9,10,13,.72), rgba(9,10,13,.86)),
    #0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
.wb-scope .wb-hero-vind-4[data-wb-hero-band] ~ .wb-seam-rider{ display:none; }

/* Full-bleed ribbon, tilted -1.5deg, native overflow scroll (drag, snap,
   arrows, no wheel hijack, no auto-drift, all locked). */
.wb-scope .wb-phv-ind-4 .ind4-ribbon{
  position:relative; width:100vw; margin:clamp(1.8rem, 1.2rem + 2vw, 3rem) 0 0 calc(50% - 50vw);
}
.wb-scope .wb-phv-ind-4 .ind4-tilt{ position:relative; transform:rotate(-1.5deg); }
.wb-scope .wb-phv-ind-4 .ind4-win{
  overflow-x:auto; overscroll-behavior-x:contain; cursor:grab;
  padding:1.4rem 0 2.2rem; scroll-snap-type:x proximity;
  scrollbar-width:thin; scrollbar-color:var(--wb-red) rgba(255,255,255,.1);
}
.wb-scope .wb-phv-ind-4 .ind4-win:focus-visible{ outline:2px solid #fff; outline-offset:-2px; }
.wb-scope .wb-phv-ind-4 .ind4-win::-webkit-scrollbar{ height:8px; }
.wb-scope .wb-phv-ind-4 .ind4-win::-webkit-scrollbar-thumb{ background:var(--wb-red); border-radius:8px; }
.wb-scope .wb-phv-ind-4 .ind4-win::-webkit-scrollbar-track{ background:rgba(255,255,255,.1); border-radius:8px; }
.wb-scope .wb-phv-ind-4 .ind4-track{
  display:flex; align-items:stretch; gap:clamp(1rem, 2vw, 1.9rem);
  list-style:none; margin:0; padding:0 clamp(1.25rem, 4vw, 4rem); width:max-content;
}
.wb-scope .wb-phv-ind-4 .ind4-frame{ flex:0 0 auto; position:relative; scroll-snap-align:center; }
/* A dated print: paper-white border, red year tab, the STILL A CLIENT chip. */
.wb-scope .wb-phv-ind-4 .ind4-print{
  position:relative; display:block; background:#fff; padding:8px 8px 0; border-radius:3px;
  box-shadow:0 16px 30px -12px rgba(0,0,0,.75); text-decoration:none;
  transform:rotate(1.2deg); transition:transform .18s ease, box-shadow .18s ease;
}
.wb-scope .wb-phv-ind-4 .ind4-frame:nth-child(2n) .ind4-print{ transform:rotate(-1.4deg); }
.wb-scope .wb-phv-ind-4 .ind4-print:hover,
.wb-scope .wb-phv-ind-4 .ind4-print:focus-visible{ transform:rotate(0) translateY(-6px); box-shadow:0 26px 46px -16px rgba(0,0,0,.85); z-index:3; }
.wb-scope .wb-phv-ind-4 .ind4-print:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wb-scope .wb-phv-ind-4 .ind4-print img{ display:block; width:auto; height:clamp(200px, 16rem + 4vw, 300px); object-fit:cover; }
.wb-scope .wb-phv-ind-4 .ind4-year{
  position:absolute; top:-12px; left:14px; z-index:2; padding:.18rem .6rem; border-radius:4px;
  background:var(--wb-red); color:#fff; font-family:var(--wb-display); font-weight:800;
  font-size:.85rem; letter-spacing:.06em; box-shadow:0 6px 12px rgba(0,0,0,.5);
}
/* The year tabs pop in a one-time stagger keyed to the reveal engine. */
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-phv-ind-4 .ind4-ribbon.is-in .ind4-year{
    animation:wb-ind4-pop .32s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay:calc(.12s + .09s * var(--i, 0));
  }
}
@keyframes wb-ind4-pop{ from{ opacity:0; transform:scale(1.6); } to{ opacity:1; transform:none; } }
.wb-scope .wb-phv-ind-4 .ind4-still{
  position:absolute; top:10px; right:2px; z-index:2; padding:.16rem .5rem;
  background:#157347; color:#fff; font-family:var(--wb-display); font-weight:800;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  transform:rotate(6deg); border-radius:3px; box-shadow:0 5px 10px rgba(0,0,0,.45);
}
.wb-scope .wb-phv-ind-4 .ind4-cap{
  display:block; padding:.45rem .25rem .5rem; color:#24262b;
  font-size:.78rem; font-weight:600; line-height:1.3; max-width:34ch;
}
.wb-scope .wb-phv-ind-4 .ind4-cap b{ color:var(--wb-red); font-weight:800; }
/* The blank YOUR INDUSTRY frame: same paper, dashed empty print area. */
.wb-scope .wb-phv-ind-4 .ind4-print--blank{ padding:8px 8px 0; }
.wb-scope .wb-phv-ind-4 .ind4-blank__body{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:clamp(200px, 22vw, 280px); height:clamp(200px, 16rem + 4vw, 300px);
  border:2px dashed rgba(36,38,43,.4); color:rgba(36,38,43,.75);
  font-family:var(--wb-display); font-size:.95rem; letter-spacing:.04em; padding:1rem;
}
.wb-scope .wb-phv-ind-4 .ind4-blank__body b{ color:var(--wb-red); text-transform:uppercase; margin-right:.3rem; }
.wb-scope .wb-phv-ind-4 .ind4-year--blank{ background:#fff; color:var(--wb-red); border:2px dashed rgba(216,35,42,.7); }
/* TODAY: the glass panel with the live counter and the repeated button. */
.wb-scope .wb-phv-ind-4 .ind4-today{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; text-align:center; height:100%; min-height:calc(clamp(200px, 16rem + 4vw, 300px) + 44px);
  padding:1.2rem 1.5rem; border-radius:12px;
}
.wb-scope .wb-phv-ind-4 .ind4-year--today{ background:#fff; color:var(--wb-red); }
.wb-scope .wb-phv-ind-4 .ind4-today__num{
  font-family:var(--wb-display); font-weight:800; color:#fff;
  font-size:clamp(2rem, 1.4rem + 2vw, 3rem); line-height:1; font-variant-numeric:tabular-nums;
}
.wb-scope .wb-phv-ind-4 .ind4-today__label{ font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.8); }
.wb-scope .wb-phv-ind-4 .ind4-today__cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:.7rem; min-height:44px;
  padding:.6rem 1.15rem; border-radius:999px; background:var(--wb-red); color:#fff;
  font-family:var(--wb-display); font-weight:800; font-size:.88rem; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.wb-scope .wb-phv-ind-4 .ind4-today__cta:hover{ background:#b81d23; transform:translateY(-1px); color:#fff; }
.wb-scope .wb-phv-ind-4 .ind4-today__cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* The red wire + the van that rides it, mapped to the strip's own scroll
   fraction by initHeroPageInd. Parked at 1998 with JS off. */
.wb-scope .wb-phv-ind-4 .ind4-wire{
  position:absolute; left:0; right:0; bottom:1.35rem; height:4px; border-radius:2px;
  background:linear-gradient(90deg, #e2333a, #b41d23); pointer-events:none;
}
.wb-scope .wb-phv-ind-4 .ind4-van{
  position:absolute; left:clamp(1rem, 3vw, 3rem); bottom:1.55rem; width:clamp(74px, 5rem + 2vw, 116px); height:auto;
  transform:scaleX(-1); pointer-events:none; filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
}
.wb-scope .wb-phv-ind-4 .ind4-nav{ display:none; top:calc(50% - 1.6rem); }
.wb-scope .wb-phv-ind-4 .ind4-nav.wb-timeline__nav--prev{ left:14px; }
.wb-scope .wb-phv-ind-4 .ind4-nav.wb-timeline__nav--next{ right:14px; }
@media (min-width:640px){ .wb-js .wb-scope .wb-phv-ind-4 .ind4-nav{ display:flex; } }
/* Mobile: tilt removed, 235px cards, native snap; wire and van drop. */
@media (max-width:700px){
  .wb-scope .wb-phv-ind-4 .ind4-tilt{ transform:none; }
  .wb-scope .wb-phv-ind-4 .ind4-win{ scroll-snap-type:x mandatory; }
  .wb-scope .wb-phv-ind-4 .ind4-print img,
  .wb-scope .wb-phv-ind-4 .ind4-blank__body{ height:235px; }
  .wb-scope .wb-phv-ind-4 .ind4-today{ min-height:279px; }
  .wb-scope .wb-phv-ind-4 .ind4-wire,
  .wb-scope .wb-phv-ind-4 .ind4-van{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-phv-ind-4 .ind4-van{ display:none; }
}

/* ---- ind-5: Two Worlds, One Road (the double cleave) -------------- */
/* Dark band; the stage paints it. Seam-rider van stands down (the cleave
   van is this screen's vehicle). The inner needs the full band and a
   taller first screen so the roads have length to read. */
.wb-scope .wb-hero-vind-5[data-wb-hero-band]{ background:#0a0b0e !important; }
.wb-scope .wb-hero-vind-5[data-wb-hero-band] ~ .wb-seam-rider{ display:none; }
.wb-scope .wb-hero-vind-5[data-wb-hero-band] .wb-inner.wb-hero-var.is-active{
  display:flex; align-items:center; width:100%; max-width:none;
  min-height:clamp(29rem, 64vh, 44rem);
}
/* Seam geometry, one source of truth: the wedge edges (percent of stage
   width) at the top and bottom of the band. Left seam runs lt -> lb,
   right seam rt -> rb. Roads and wedges all read these. */
.wb-scope .wb-phv-ind-5{
  --ind5-lt:31%; --ind5-lb:24%;
  --ind5-rt:69%; --ind5-rb:76%;
  position:relative; width:100%;
}
/* The stage is a plain wrapper: absolute layers (wedges, roads, van,
   pause) anchor to the INNER (.wb-phv-ind-5, position:relative), whose
   box spans the band content height, so the exact-padding overshoots
   below always reach the band edges. */
.wb-scope .wb-phv-ind-5 .ind5-stage{ width:100%; }
/* The wedges paper the whole band (overshoot insets ride the band's
   overflow clip); each wedge is one big anchor. */
.wb-scope .wb-phv-ind-5 .ind5-wedge{
  position:absolute; z-index:0; overflow:hidden; display:block; background:#101215;
  top:calc(-1 * (var(--wb-pad) + var(--wb-nav-h)) - 1rem);
  bottom:calc(-1 * var(--wb-pad) - 1rem);
  left:-1.25rem; right:-1.25rem;
}
.wb-scope .wb-phv-ind-5 .ind5-wedge--l{ clip-path:polygon(0 0, var(--ind5-lt) 0, var(--ind5-lb) 100%, 0 100%); }
.wb-scope .wb-phv-ind-5 .ind5-wedge--r{ clip-path:polygon(var(--ind5-rt) 0, 100% 0, 100% 100%, var(--ind5-rb) 100%); }
.wb-scope .wb-phv-ind-5 .ind5-wedge:focus-visible{ outline:3px solid #fff; outline-offset:-3px; }
.wb-scope .wb-phv-ind-5 .ind5-frame{
  position:absolute; top:0; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.wb-scope .wb-phv-ind-5 .ind5-wedge--l .ind5-frame{ left:0; width:34%; }
.wb-scope .wb-phv-ind-5 .ind5-wedge--r .ind5-frame{ right:0; width:34%; }
.wb-scope .wb-phv-ind-5 .ind5-frame.is-on{ opacity:1; }
/* Corner chips naming the action (persistent) + the rolling caption. */
.wb-scope .wb-phv-ind-5 .ind5-chip{
  position:absolute; bottom:9.5rem; display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:999px; background:var(--wb-red); color:#fff;
  font-family:var(--wb-display); font-weight:800; font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; box-shadow:0 12px 26px -10px rgba(0,0,0,.65); white-space:nowrap;
}
.wb-scope .wb-phv-ind-5 .ind5-wedge--l .ind5-chip{ left:1.6rem; }
.wb-scope .wb-phv-ind-5 .ind5-wedge--r .ind5-chip{ right:1.6rem; }
.wb-scope .wb-phv-ind-5 .ind5-wedge:hover .ind5-chip{ background:#b81d23; }
.wb-scope .wb-phv-ind-5 .ind5-cap{
  position:absolute; bottom:12.6rem; max-width:24ch; padding:.4rem .7rem; border-radius:8px;
  background:rgba(9,11,15,.72); border:1px solid rgba(255,255,255,.16); color:#fff;
  font-size:.78rem; font-weight:600; line-height:1.3;
}
.wb-scope .wb-phv-ind-5 .ind5-wedge--l .ind5-cap{ left:1.6rem; }
.wb-scope .wb-phv-ind-5 .ind5-wedge--r .ind5-cap{ right:1.6rem; }
/* THE ROADS: 14px brand-red seams with dashed centerlines, drawn on the
   same custom props as the wedges so seam and road can never drift. */
.wb-scope .wb-phv-ind-5 .ind5-road{
  position:absolute; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, #e2333a, #b41d23);
  top:calc(-1 * (var(--wb-pad) + var(--wb-nav-h)) - 1rem);
  bottom:calc(-1 * var(--wb-pad) - 1rem);
  left:-1.25rem; right:-1.25rem;
}
.wb-scope .wb-phv-ind-5 .ind5-road--l{
  clip-path:polygon(calc(var(--ind5-lt) - 1px) 0, calc(var(--ind5-lt) + 14px) 0, calc(var(--ind5-lb) + 14px) 100%, calc(var(--ind5-lb) - 1px) 100%);
}
.wb-scope .wb-phv-ind-5 .ind5-road--r{
  clip-path:polygon(calc(var(--ind5-rt) - 14px) 0, calc(var(--ind5-rt) + 1px) 0, calc(var(--ind5-rb) + 1px) 100%, calc(var(--ind5-rb) - 14px) 100%);
}
.wb-scope .wb-phv-ind-5 .ind5-road::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.85) 0 18px, transparent 18px 42px);
}
.wb-scope .wb-phv-ind-5 .ind5-road--l::after{
  clip-path:polygon(calc(var(--ind5-lt) + 4px) 0, calc(var(--ind5-lt) + 9px) 0, calc(var(--ind5-lb) + 9px) 100%, calc(var(--ind5-lb) + 4px) 100%);
}
.wb-scope .wb-phv-ind-5 .ind5-road--r::after{
  clip-path:polygon(calc(var(--ind5-rt) - 9px) 0, calc(var(--ind5-rt) - 4px) 0, calc(var(--ind5-rb) - 4px) 100%, calc(var(--ind5-rb) - 9px) 100%);
}
/* THE VAN: drives in down the left seam once (900ms), parks at the road's
   base, exits via the shared data-drive engine on scroll. The data-drive
   transform lives on the outer wrapper; the entrance rides the inner span
   so the two never fight. Parked under reduced motion or with JS off. */
.wb-scope .wb-phv-ind-5 .ind5-vanride{
  position:absolute; z-index:3; pointer-events:none;
  left:calc(var(--ind5-lb) + 6vw); bottom:.4rem;
}
.wb-scope .wb-phv-ind-5 .ind5-vanin{ display:block; }
.wb-scope .wb-phv-ind-5 .ind5-van{
  display:block; width:clamp(92px, 6rem + 2vw, 148px); height:auto;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion: no-preference){
  .wb-js .wb-scope .wb-phv-ind-5 .ind5-vanin{ animation:wb-ind5-drivein .9s ease-out both; }
}
@keyframes wb-ind5-drivein{ from{ opacity:0; transform:translate(2.4vw, -38vh) rotate(6deg); } to{ opacity:1; transform:none; } }
/* Pause/play (WCAG 2.2.2): revealed by JS only once the crossfade runs. */
.wb-scope .wb-phv-ind-5 .ind5-pause{
  position:absolute; right:.4rem; bottom:.2rem; z-index:4; width:44px; height:44px;
  border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(9,11,15,.72);
  color:#fff; cursor:pointer; font-size:.85rem;
}
.wb-scope .wb-phv-ind-5 .ind5-pause:hover{ background:rgba(9,11,15,.92); }
.wb-scope .wb-phv-ind-5 .ind5-pause:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* THE CENTER PANEL: dark honeycomb, ~44vw, carries the argument. */
.wb-scope .wb-phv-ind-5 .ind5-center{
  position:relative; z-index:2; width:min(44vw, 46rem); margin-inline:auto;
  padding:clamp(1.2rem, 1rem + 1.5vw, 2.4rem) clamp(1.2rem, 1rem + 2vw, 3rem);
  text-align:center;
  background:
    linear-gradient(rgba(9,10,13,.6), rgba(9,10,13,.78)),
    #0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat;
  border-radius:18px; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
}
.wb-scope .wb-phv-ind-5 .ind5-center .wb-h1{ font-size:clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem); line-height:1.06; }
.wb-scope .wb-phv-ind-5 .ind5-center .wb-lead{ font-size:clamp(.98rem, .9rem + .35vw, 1.12rem); }
/* The breadth escape: a red chip row ABOVE the phone line (locked). */
.wb-scope .wb-phv-ind-5 .ind5-links{ display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-top:clamp(1rem, .8rem + .8vw, 1.5rem); }
.wb-scope .wb-phv-ind-5 .ind5-more{
  display:inline-flex; align-items:center; gap:.5rem; min-height:44px;
  padding:.6rem 1.2rem; border-radius:999px; background:var(--wb-red); color:#fff;
  font-family:var(--wb-display); font-weight:800; font-size:.9rem; text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.wb-scope .wb-phv-ind-5 .ind5-more:hover{ background:#b81d23; transform:translateY(-1px); color:#fff; }
.wb-scope .wb-phv-ind-5 .ind5-tel{ font-size:.92rem; }
/* The mile marker: live count docked to the actions. */
.wb-scope .wb-phv-ind-5 .ind5-marker{
  display:inline-flex; align-items:baseline; gap:.5rem; margin:1.1rem auto 0;
  padding:.55rem 1rem; border-radius:12px;
}
.wb-scope .wb-phv-ind-5 .ind5-marker__num{
  font-family:var(--wb-display); font-weight:800; color:#fff;
  font-size:clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height:1; font-variant-numeric:tabular-nums;
}
.wb-scope .wb-phv-ind-5 .ind5-marker__label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.8); }
/* 768 to 1100: switch early to stacked strips (locked intermediate spec):
   grocery strip ~30vh up top, panel full width, ag strip ~30vh below,
   shallow full-width diagonals, van at ~92px on the top seam. Verify the
   seams with CDP box numbers at 800 and 1024. */
@media (max-width:1100px){
  .wb-scope .wb-hero-vind-5[data-wb-hero-band] .wb-inner.wb-hero-var.is-active{ display:block; min-height:0; }
  .wb-scope .wb-phv-ind-5 .ind5-stage{ display:flex; flex-direction:column; gap:0; }
  .wb-scope .wb-phv-ind-5 .ind5-wedge{
    position:relative; inset:auto; height:30vh; min-height:180px; order:0;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), 0 100%);
    margin:0 -1.25rem;
  }
  .wb-scope .wb-phv-ind-5 .ind5-wedge--r{
    order:2; clip-path:polygon(0 1.6rem, 100% 0, 100% 100%, 0 100%);
  }
  .wb-scope .wb-phv-ind-5 .ind5-frame,
  .wb-scope .wb-phv-ind-5 .ind5-wedge--l .ind5-frame,
  .wb-scope .wb-phv-ind-5 .ind5-wedge--r .ind5-frame{ left:0; right:auto; width:100%; }
  .wb-scope .wb-phv-ind-5 .ind5-chip{ bottom:2.4rem; }
  .wb-scope .wb-phv-ind-5 .ind5-wedge--r .ind5-chip{ right:auto; left:1.6rem; bottom:1.2rem; }
  .wb-scope .wb-phv-ind-5 .ind5-cap{ display:none; }
  .wb-scope .wb-phv-ind-5 .ind5-road{
    position:relative; inset:auto; order:1; height:14px; margin:-.2rem -1.25rem;
    clip-path:polygon(0 0, 100% 20%, 100% 100%, 0 80%);
  }
  .wb-scope .wb-phv-ind-5 .ind5-road--r{ order:3; margin-top:-1rem; }
  .wb-scope .wb-phv-ind-5 .ind5-road::after,
  .wb-scope .wb-phv-ind-5 .ind5-road--l::after,
  .wb-scope .wb-phv-ind-5 .ind5-road--r::after{
    clip-path:none;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 22px, transparent 22px 50px);
    top:5px; bottom:5px;
  }
  .wb-scope .wb-phv-ind-5 .ind5-center{ order:1; width:auto; margin:1.1rem 0; }
  .wb-scope .wb-phv-ind-5 .ind5-vanride{ left:auto; right:8vw; bottom:auto; top:calc(30vh - 3.2rem); }
  .wb-scope .wb-phv-ind-5 .ind5-van{ width:92px; }
  .wb-scope .wb-phv-ind-5 .ind5-pause{ right:1rem; bottom:auto; top:.5rem; }
}
@media (max-width:1100px) and (prefers-reduced-motion: no-preference){
  /* Horizontal drive-in on the stacked seam. */
  @keyframes wb-ind5-drivein{ from{ opacity:0; transform:translateX(16vw); } to{ opacity:1; transform:none; } }
}
@media (max-width:640px){
  .wb-scope .wb-phv-ind-5 .ind5-wedge{ height:24vh; min-height:150px; }
  .wb-scope .wb-phv-ind-5 .ind5-chip{ font-size:.7rem; padding:.45rem .8rem; left:1rem; }
  .wb-scope .wb-phv-ind-5 .ind5-vanride{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-phv-ind-5 .ind5-frame{ transition:none; }
}


/* =====================================================================
   PAGE-HERO VARIANTS: /about/how-we-work/  (skin hww, brief-hww)
   Staged from /tmp/wb-page-heroes/hww.css for merge into overhaul.css.
   Variant 0 is the shipped hero and needs nothing here. Band-level looks
   ride .wb-hero-vhww-N on the section; content rides .wb-phv-hww-N on
   the variant's .wb-inner. All motion is gated behind reduced-motion.
   ===================================================================== */

/* SHARED FIX: the switcher's .is-active rule (display:block, (0,5,0)) was
   flattening split heroes wrapped as variants. Same weight + one more
   class, later in the cascade: split variants keep their grid. */
.wb-scope [data-wb-hero-band] .wb-inner.wb-hero-var.is-active.wb-hero__summary--split{ display:grid; }

/* All five hww variants: headlines are <p class="wb-h1"> (the page's real h1
   lives in variant 0) and fonts-modern pins p to Inter, so re-assert the
   display face. Variant 5's card asserts it on .hww5-h1 below. */
.wb-scope .wb-phv-hww-1 .wb-h1,
.wb-scope .wb-phv-hww-2 .hww2-we,
.wb-scope .wb-phv-hww-2 .hww2-word,
.wb-scope .wb-phv-hww-2 .hww2-done,
.wb-scope .wb-phv-hww-3 .wb-h1,
.wb-scope .wb-phv-hww-4 .wb-h1{ font-family:var(--wb-display) !important; }

/* ---- Variant 1 "Receipts Under the Machine" (Option 1) --------------
   The shipped split hero + the shared .wb-hv-proof receipts strip; only
   additions are the dialing third cell and room for its longer label. */
.wb-scope .wb-phv-hww-1 .wb-hv-proof__cell--tel{ text-decoration:none; }
.wb-scope .wb-phv-hww-1 .wb-hv-proof__cell--tel .wb-hv-proof__num{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-phv-hww-1 .wb-hv-proof__cell--tel:hover .wb-hv-proof__num,
.wb-scope .wb-phv-hww-1 .wb-hv-proof__cell--tel:focus-visible .wb-hv-proof__num{ color:#fff; }
.wb-scope .wb-phv-hww-1 .wb-hv-proof__cell:last-child{ flex:1.6 1 220px; }
.wb-scope .wb-phv-hww-1 .wb-hv-proof__cell:last-child .wb-hv-proof__label{ max-width:30ch; }

/* ---- Variant 2 "STUFF, Defined" (Option 2) --------------------------
   Full-viewport Swiss type poster: milled metal at ~7% over near-black,
   WE GET in chrome, the cycling word in red 900 caps (fixed row height
   = zero CLS), DONE. inked with the real photo crop, the WGSD stamp on
   its shoulder. build/38: crop marks + CMYK squares stripped (print
   garnish may never be the frame or header device). */
.wb-scope .wb-hero-vhww-2[data-wb-hero-band]{
  background:
    linear-gradient(rgba(11,12,15,.93), rgba(11,12,15,.93)),
    #0b0c0f url("../images/overhaul/tex-metallic-lines.webp") center/cover no-repeat !important;
}
.wb-scope .wb-hero-vhww-2[data-wb-hero-band] .wb-band__scrim{ display:none; }

.wb-scope .wb-phv-hww-2{ position:relative; padding:clamp(.5rem, 1vw, 1.4rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip). */
.wb-scope .wb-phv-hww-2 .hww2-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.wb-scope .wb-phv-hww-2 .hww2-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(1rem, .7rem + 1.2vw, 1.8rem); padding-bottom:.7rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-phv-hww-2 .hww2-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Row one: WE GET, chrome. Press-stamps in on reveal (replays per flip). */
.wb-scope .wb-phv-hww-2 .hww2-we{
  margin:0; font-weight:900; font-size:clamp(2.6rem, 8.5vw, 7rem);
  line-height:.92; letter-spacing:-.03em; transform-origin:left center;
}
@keyframes hww2-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-phv-hww-2 .hww2-we.is-in{ animation:hww2-stamp .18s ease-out; }
/* Row two: the word. The row reserves the giant line's height, so the
   smaller cycling words never shift anything (locked: zero CLS). */
.wb-scope .wb-phv-hww-2 .hww2-wordrow{ margin:.04em 0 0; height:calc(clamp(2.6rem, 8.5vw, 7rem) * .98); display:flex; align-items:center; overflow:hidden; }
.wb-scope .wb-phv-hww-2 .hww2-word{
  font-weight:900; text-transform:uppercase; color:#ff3d45;
  white-space:nowrap; line-height:.92; letter-spacing:-.02em;
  font-size:clamp(2.6rem, 8.5vw, 7rem);
}
.wb-scope .wb-phv-hww-2 .hww2-word.is-cycling{ font-size:clamp(1.5rem, 4.4vw, 4rem); letter-spacing:.01em; }
/* Row three: DONE. inked with the real crop (base chrome = the no-clip
   fallback, wb-metal-text in the markup); the period stays solid red. */
.wb-scope .wb-phv-hww-2 .hww2-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:.08em 0 0; }
.wb-scope .wb-phv-hww-2 .hww2-done{ margin:0; font-weight:900; font-size:clamp(3rem, 9.5vw, 8.25rem); line-height:.88; letter-spacing:-.03em; }
/* Owner #112 (2026-07-13): "use a variety of photos in each letter". Replaces the
   whole-word done-ink clip (incl. its 640 swap). Mirrors the homepage hv6 per-letter
   technique; the four letter-*.webp crops are REMAPPED to different letters than the
   homepage so the two posters rhyme, not repeat. No-clip fallback stays the markup's
   wb-metal-text chrome. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wb-scope .wb-phv-hww-2 .hww2-done{ background:none; filter:none; -webkit-text-stroke:0; }
  .wb-scope .wb-phv-hww-2 .hww2-l{
    background:#15161a center 42%/cover no-repeat;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    -webkit-text-stroke:0;   /* owner 2026-07-04 (hv6): a stroke ring reads as a 1-2px slice of the fill image */
    animation:hww2-inkpan 26s ease-in-out infinite alternate;
  }
  /* Remapped from hv6: D truck wrap, O booth, N press floor, E ink system. */
  .wb-scope .wb-phv-hww-2 .hww2-l--d{ background-image:url("../images/overhaul/hero37/letter-n.webp"); }
  .wb-scope .wb-phv-hww-2 .hww2-l--o{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-9s; }
  .wb-scope .wb-phv-hww-2 .hww2-l--n{ background-image:url("../images/overhaul/hero37/letter-d.webp"); animation-delay:-15s; }
  .wb-scope .wb-phv-hww-2 .hww2-l--e{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-21s; }
  .wb-scope .wb-phv-hww-2 .hww2-dot{ -webkit-text-fill-color:#ff3d45; color:#ff3d45; -webkit-text-stroke:0; }
  @media (max-width:640px){
    .wb-scope .wb-phv-hww-2 .hww2-l{ animation:none; }  /* phones: photos yes, 26s pan no (hv6 rule) */
  }
}
@keyframes hww2-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes hww2-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-phv-hww-2 .hww2-donerow.is-in .hww2-done{ animation:hww2-jolt .3s cubic-bezier(.3,.9,.4,1); }
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-phv-hww-2 .hww2-l{ animation:none !important; }   /* #112: photos stay, pan parks */
}
/* The rubber stamp on DONE.'s shoulder, -6deg, slams in after the jolt. */
.wb-scope .wb-phv-hww-2 .hww2-stamp{ flex:0 0 auto; width:clamp(84px, 9vw, 136px); height:auto; margin-top:clamp(.3rem, 1vw, .9rem); transform:rotate(-6deg); filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes hww2-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-phv-hww-2 .hww2-donerow.is-in .hww2-stamp{ animation:hww2-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
.wb-scope .wb-phv-hww-2 .hww2-lead{ max-width:52ch; margin-top:clamp(1.2rem, .9rem + 1.2vw, 2rem); }
/* The red block CTA: hard corners on the press poster. */
.wb-scope .wb-phv-hww-2 .hww2-tel{ border-radius:999px; }   /* owner #130: the site-standard pill, not the square poster button */
/* The ticket row: live years, live odometer, the phone in red. */
.wb-scope .wb-phv-hww-2 .hww2-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(1.4rem, 1rem + 1.4vw, 2.2rem); padding-top:clamp(.9rem, .6rem + 1vw, 1.4rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-phv-hww-2 .hww2-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-phv-hww-2 .hww2-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.3rem, 1rem + 1.1vw, 1.9rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-phv-hww-2 .hww2-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-phv-hww-2 .hww2-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-phv-hww-2 .hww2-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* 390 plan: stacked ticket chips. */
@media (max-width:640px){
  .wb-scope .wb-phv-hww-2 .hww2-ticket{ gap:0; }
  .wb-scope .wb-phv-hww-2 .hww2-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.5rem 0; }
  .wb-scope .wb-phv-hww-2 .hww2-ticket__cell + .hww2-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
  .wb-scope .wb-phv-hww-2 .hww2-ticket__num{ font-size:1.1rem; }
  .wb-scope .wb-phv-hww-2 .hww2-ticket__label{ margin-top:0; max-width:none; }
  .wb-scope .wb-phv-hww-2 .hww2-stamp{ width:78px; }
}
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-phv-hww-2 .hww2-we.is-in,
  .wb-scope .wb-phv-hww-2 .hww2-donerow.is-in .hww2-done,
  .wb-scope .wb-phv-hww-2 .hww2-donerow.is-in .hww2-stamp{ animation:none !important; }
}

/* ---- Variant 3 "The Routing Slip" (Option 3, hero beat) -------------
   Dark honeycomb shop wall, chrome H1 + red tel left; the manila job
   jacket tilted -2deg right with the routing-slip header, the Hoober
   shot peeking from the pocket, and the OPEN THE TICKET cue. */
.wb-scope .wb-hero-vhww-3[data-wb-hero-band]{
  background:
    radial-gradient(50rem 28rem at 10% 0%, rgba(216,35,42,.30), transparent 60%),
    linear-gradient(rgba(6,7,10,.55), rgba(6,7,10,.62)),
    #0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
.wb-scope .wb-hero-vhww-3[data-wb-hero-band] .wb-band__scrim{ display:none; }

.wb-scope .wb-phv-hww-3 .hww3-grid{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(1.8rem, 1rem + 3vw, 4rem); align-items:center; }
.wb-scope .wb-phv-hww-3 .hww3-h1{ font-size:clamp(2rem, 1.3rem + 2.2vw, 3.2rem); line-height:1.05; max-width:20ch; }
.wb-scope .wb-phv-hww-3 .wb-lead{ max-width:56ch; }
/* The jacket. Manila card, punch-dot rail, dashed slip rules. */
.wb-scope .wb-phv-hww-3 .hww3-jacket{
  position:relative; max-width:440px; margin-left:auto; transform:rotate(-2deg);
  background:linear-gradient(160deg, #efe3c0, #e5d5aa); color:#2b2416;
  border-radius:10px; padding:clamp(1.1rem, .8rem + 1vw, 1.7rem) clamp(1.1rem, .8rem + 1.2vw, 1.8rem) clamp(1.2rem, 1rem + 1vw, 1.8rem);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.4);
}
.wb-scope .wb-phv-hww-3 .hww3-jacket::before{
  content:""; position:absolute; top:10px; left:14px; right:14px; height:6px;
  background:radial-gradient(circle 2.5px at 3px 3px, rgba(43,36,22,.35) 2.4px, transparent 2.6px) left center/22px 6px repeat-x;
  pointer-events:none;
}
.wb-scope .wb-phv-hww-3 .hww3-slip__tag{ margin:.6rem 0 0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(43,36,22,.65); }
.wb-scope .wb-phv-hww-3 .hww3-slip__co{ margin:.25rem 0 0; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing:-.01em; text-transform:uppercase; color:#241d10; }
.wb-scope .wb-phv-hww-3 .hww3-slip__meta{ margin:.7rem 0 0; padding:0; }
.wb-scope .wb-phv-hww-3 .hww3-slip__meta > div{ display:flex; align-items:baseline; gap:.8rem; justify-content:space-between; padding:.4rem 0; border-top:1px dashed rgba(43,36,22,.35); }
.wb-scope .wb-phv-hww-3 .hww3-slip__meta dt{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(43,36,22,.6); }
.wb-scope .wb-phv-hww-3 .hww3-slip__meta dd{ margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.86rem; font-weight:700; text-align:right; color:#241d10; }
/* The photo, peeking out of the pocket (top edge shadowed by the flap). */
.wb-scope .wb-phv-hww-3 .hww3-photo{ display:block; position:relative; margin-top:.9rem; border-radius:6px; overflow:hidden; box-shadow:0 14px 30px -12px rgba(0,0,0,.55); }
.wb-scope .wb-phv-hww-3 .hww3-photo::after{ content:""; position:absolute; inset:0 0 auto; height:26%; background:linear-gradient(rgba(43,36,22,.38), transparent); pointer-events:none; }
.wb-scope .wb-phv-hww-3 .hww3-photo img{ display:block; width:100%; height:clamp(140px, 18vw, 200px); object-fit:cover; }
.wb-scope .wb-phv-hww-3 .hww3-open{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  font-family:var(--wb-display) !important; font-weight:900; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--wb-red);
}
.wb-scope .wb-phv-hww-3 .hww3-open:hover{ color:#a3121a; }
.wb-scope .wb-phv-hww-3 .hww3-open i{ animation:hww3-cue 1.6s ease-in-out infinite; }
@keyframes hww3-cue{ 0%,100%{ transform:none; } 50%{ transform:translateY(4px); } }
/* 390 spec (locked): the jacket goes full width below the H1. */
@media (max-width:960px){
  .wb-scope .wb-phv-hww-3 .hww3-grid{ grid-template-columns:1fr; }
  .wb-scope .wb-phv-hww-3 .hww3-jacket{ max-width:520px; margin:0 auto; transform:rotate(-1deg); }
}
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-phv-hww-3 .hww3-open i{ animation:none; }
}

/* ---- Variant 4 "The Line" (Option 4) --------------------------------
   Honeycomb shop wall (glow flipped right so it never twins v3), calm
   copy zone + hang-sign odometer, six red gates, and the full-bleed
   belt tilted -2deg rolling into the docked van. Server-rendered as a
   static swipeable strip; JS adds .is-rolling to start the marquee. */
.wb-scope .wb-hero-vhww-4[data-wb-hero-band]{
  background:
    radial-gradient(50rem 28rem at 92% 0%, rgba(216,35,42,.26), transparent 60%),
    linear-gradient(rgba(6,7,10,.58), rgba(6,7,10,.64)),
    #0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
.wb-scope .wb-hero-vhww-4[data-wb-hero-band] .wb-band__scrim{ display:none; }

.wb-scope .wb-phv-hww-4 .hww4-top{ display:flex; gap:clamp(1.5rem, 1rem + 2vw, 3rem); align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.wb-scope .wb-phv-hww-4 .hww4-copy{ flex:1 1 34rem; min-width:0; }
.wb-scope .wb-phv-hww-4 .hww4-h1{ font-size:clamp(2rem, 1.3rem + 2.2vw, 3.1rem); line-height:1.05; max-width:24ch; }
.wb-scope .wb-phv-hww-4 .wb-lead{ max-width:52ch; }
/* The WGSD stamp beside the kicker: one thump ~600ms after paint (the
   locked motion cap; the odometer waits for it in JS). */
.wb-scope .wb-phv-hww-4 .hww4-kicker{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.wb-scope .wb-phv-hww-4 .hww4-stamp{ width:clamp(64px, 6vw, 92px); height:auto; transform:rotate(-7deg); filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
@keyframes hww4-thump{ 0%{ transform:rotate(-15deg) scale(1.4); opacity:0; } 60%{ transform:rotate(-6deg) scale(.97); opacity:1; } 100%{ transform:rotate(-7deg) scale(1); opacity:1; } }
.wb-scope .wb-phv-hww-4.is-active .hww4-stamp{ animation:hww4-thump .35s cubic-bezier(.2,.9,.3,1.2) .6s both; }
/* The hang sign: live jobs odometer, glass chip upper-right. */
.wb-scope .wb-phv-hww-4 .hww4-count{ flex:0 0 auto; text-align:center; padding:clamp(.9rem, .7rem + .6vw, 1.3rem) clamp(1.1rem, .9rem + .8vw, 1.6rem); }
.wb-scope .wb-phv-hww-4 .hww4-count__num{ display:block; font-family:var(--wb-display); font-weight:900; font-size:clamp(1.7rem, 1.2rem + 1.6vw, 2.7rem); line-height:1; letter-spacing:-.01em; }
.wb-scope .wb-phv-hww-4 .hww4-count__label{ display:block; margin-top:.35rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }
/* The six red station gates over the line. */
.wb-scope .wb-phv-hww-4 .hww4-gates{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin:clamp(1.3rem, 1rem + 1vw, 2rem) 0 0; }
.wb-scope .wb-phv-hww-4 .hww4-gate{
  display:inline-block; padding:.42rem .7rem .38rem; border-radius:5px 5px 0 0;
  background:rgba(216,35,42,.92); color:#fff; text-decoration:none;
  font-family:var(--wb-display) !important; font-weight:800; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 6px 16px -6px rgba(216,35,42,.6); transition:background .15s ease, transform .15s ease;
}
.wb-scope .wb-phv-hww-4 .hww4-gate:hover{ background:var(--wb-red); transform:translateY(-2px); }
/* THE BELT: full bleed, tilted, metal track with the hazard edge. */
.wb-scope .wb-phv-hww-4 .hww4-belt{ position:relative; width:100vw; margin:0 0 0 calc(50% - 50vw); }
.wb-scope .wb-phv-hww-4 .hww4-belt__win{
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
  transform:rotate(-2deg); padding:1rem 0 1.4rem;
  background:linear-gradient(rgba(14,15,19,.86), rgba(14,15,19,.86)), url("../images/overhaul/tex-metallic-lines.webp") center/cover;
  border-top:6px solid transparent; border-bottom:3px solid #16181d;
  border-image:repeating-linear-gradient(-45deg, #d8232a 0 12px, #16181d 12px 24px) 6;
}
.wb-scope .wb-phv-hww-4 .hww4-belt__roll{ display:flex; width:max-content; }
.wb-scope .wb-phv-hww-4 .hww4-track{ display:flex; list-style:none; margin:0; padding:0; }
.wb-scope .wb-phv-hww-4 .hww4-track--clone{ display:none; }
.wb-scope .wb-phv-hww-4 .hww4-card{ margin-right:16px; }
.wb-scope .wb-phv-hww-4 .hww4-card a{ display:block; position:relative; border-radius:8px; overflow:hidden; box-shadow:0 16px 34px -14px rgba(0,0,0,.7); }
/* Re-cropped vs home: shorter tiles, slight zoom = the tighter crop. */
.wb-scope .wb-phv-hww-4 .hww4-card img{ display:block; height:250px; width:auto; transform:scale(1.07); transition:transform .3s ease; }
.wb-scope .wb-phv-hww-4 .hww4-card a:hover img{ transform:scale(1.12); }
.wb-scope .wb-phv-hww-4 .hww4-card__tab{
  position:absolute; left:0; bottom:0; max-width:100%;
  padding:.35rem .65rem; background:rgba(216,35,42,.94); color:#fff;
  font-family:var(--wb-display); font-weight:800; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; border-radius:0 6px 0 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Website tiles get a slim CSS browser chrome. */
.wb-scope .wb-phv-hww-4 .hww4-card--site a{ padding-top:14px; background:#22242a; }
.wb-scope .wb-phv-hww-4 .hww4-card--site a::before{
  content:""; position:absolute; top:5px; left:8px; width:28px; height:5px;
  background:radial-gradient(circle 2.5px at 3px 2.5px, #ff5f57 2.4px, transparent 2.6px),
             radial-gradient(circle 2.5px at 14px 2.5px, #febc2e 2.4px, transparent 2.6px),
             radial-gradient(circle 2.5px at 25px 2.5px, #28c840 2.4px, transparent 2.6px);
}
/* Rolling state (JS-added, never under reduced motion): clone shows,
   window clips, the roll animates; hover/focus/pause hold it. */
.wb-scope .wb-phv-hww-4 .hww4-belt.is-rolling .hww4-track--clone{ display:flex; }
.wb-scope .wb-phv-hww-4 .hww4-belt.is-rolling .hww4-belt__win{ overflow:hidden; }
@keyframes hww4-roll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.wb-scope .wb-phv-hww-4 .hww4-belt.is-rolling .hww4-belt__roll{ animation:hww4-roll 55s linear infinite; animation-delay:-14s; }
.wb-scope .wb-phv-hww-4 .hww4-belt.is-rolling:hover .hww4-belt__roll,
.wb-scope .wb-phv-hww-4 .hww4-belt.is-rolling:focus-within .hww4-belt__roll{ animation-play-state:paused; }
/* The pause chip, "Pause the line". Hidden until the belt rolls. */
.wb-scope .wb-phv-hww-4 .hww4-pause{
  position:absolute; top:-2.4rem; right:clamp(1rem, 4vw, 3rem); z-index:4;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  padding:.4rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:rgba(14,16,22,.85); color:#fff; font-family:var(--wb-display);
  font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.wb-scope .wb-phv-hww-4 .hww4-pause:hover{ background:rgba(216,35,42,.85); }
/* The van, docked at the right edge; data-drive pulls it away on scroll. */
.wb-scope .wb-phv-hww-4 .hww4-fade{ position:absolute; top:0; bottom:0; right:0; width:clamp(90px, 14vw, 240px); background:linear-gradient(to right, transparent, rgba(8,9,12,.9)); pointer-events:none; }
.wb-scope .wb-phv-hww-4 .hww4-van{ position:absolute; right:clamp(-.5rem, 1vw, 1.5rem); bottom:-10px; width:clamp(140px, 16vw, 250px); height:auto; filter:drop-shadow(0 16px 30px rgba(0,0,0,.6)); pointer-events:none; }
.wb-scope .wb-phv-hww-4 .hww4-caption{ margin:clamp(1rem, .8rem + .8vw, 1.6rem) 0 0; font-size:.9rem; color:rgba(255,255,255,.72); max-width:70ch; }
/* Belt spacing above (the gates sit right on the line). */
.wb-scope .wb-phv-hww-4 .hww4-belt{ margin-top:0; }
@media (max-width:960px){
  .wb-scope .wb-phv-hww-4 .hww4-count{ order:2; text-align:left; }
  .wb-scope .wb-phv-hww-4 .hww4-card img{ height:200px; }
  .wb-scope .wb-phv-hww-4 .hww4-van{ display:none; }
  .wb-scope .wb-phv-hww-4 .hww4-fade{ width:60px; }
}
@media (max-width:640px){
  .wb-scope .wb-phv-hww-4 .hww4-gates{ gap:.35rem .4rem; }
  .wb-scope .wb-phv-hww-4 .hww4-gate{ font-size:.62rem; padding:.34rem .5rem .3rem; }
  .wb-scope .wb-phv-hww-4 .hww4-card img{ height:170px; }
  .wb-scope .wb-phv-hww-4 .hww4-pause{ top:auto; bottom:-2.5rem; right:1rem; }
  .wb-scope .wb-phv-hww-4 .hww4-caption{ margin-top:3.4rem; }
}
/* Reduced motion: the static, natively swipeable strip; no thump, no roll
   (JS never adds .is-rolling, this is the belt-and-braces layer). */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-phv-hww-4 .hww4-belt .hww4-belt__roll{ animation:none !important; }
  .wb-scope .wb-phv-hww-4 .hww4-belt .hww4-belt__win{ overflow-x:auto !important; }
  .wb-scope .wb-phv-hww-4 .hww4-belt .hww4-track--clone{ display:none !important; }
  .wb-scope .wb-phv-hww-4.is-active .hww4-stamp{ animation:none !important; }
}

/* ---- Variant 5 "Today's Log" (Option 5, understudy) -----------------
   Flat near-black desk, one plain white live job-log card, one rubber
   stamp. build/38: the register-receipt frame (perforated feed edges,
   thermal fade, full-card mono) was stripped; only the log lines and
   totals keep the mono log face. The card prints downward once when
   the variant lands (pure CSS, keyed to .is-active so it replays per
   flip); reduced motion prints instantly; no-JS is server-rendered in
   reading order. */
.wb-scope .wb-hero-vhww-5[data-wb-hero-band]{ background:#141414 !important; }
.wb-scope .wb-hero-vhww-5[data-wb-hero-band] .wb-band__scrim{ display:none; }

.wb-scope .wb-phv-hww-5 .hww5-tape{
  position:relative; max-width:740px; margin:0 auto;
  background:#fbfaf5; color:#1c1c1c;
  border-radius:16px;
  padding:clamp(1.4rem, 1rem + 2vw, 2.6rem) clamp(1.1rem, .8rem + 2.2vw, 2.6rem) clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  box-shadow:0 44px 90px -30px rgba(0,0,0,.85);
}
.wb-scope .wb-phv-hww-5 .hww5-mast{ margin:0; text-align:center; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#333; line-height:1.7; }
.wb-scope .wb-phv-hww-5 .hww5-mast__tel{ margin:.4rem 0 0; text-align:center; font-size:clamp(1.05rem, 3.4vw, 1.4rem); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.wb-scope .wb-phv-hww-5 .hww5-mast__tel a{ color:#b3121a; text-decoration:none; }
.wb-scope .wb-phv-hww-5 .hww5-mast__tel a:hover{ text-decoration:underline; }
.wb-scope .wb-phv-hww-5 .hww5-h1{
  font-family:var(--wb-display) !important; font-weight:700; text-align:center; color:#111;
  font-size:clamp(1.35rem, 1rem + 1.5vw, 2rem); line-height:1.2; letter-spacing:-.01em;
  margin:clamp(.9rem, .7rem + .6vw, 1.4rem) 0 0; text-wrap:balance;
}
.wb-scope .wb-phv-hww-5 .hww5-lead{ margin:.9rem auto 0; max-width:56ch; text-align:center; font-size:.86rem; line-height:1.6; color:#3a3a3a; }
/* The log: the one place that keeps the mono log face. */
.wb-scope .wb-phv-hww-5 .hww5-log{ list-style:none; margin:clamp(1.1rem, .9rem + .8vw, 1.7rem) 0 0; padding:0; border-bottom:1px dashed rgba(0,0,0,.25); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wb-scope .wb-phv-hww-5 .hww5-line{ display:flex; align-items:baseline; gap:.7rem; padding:.5rem 0; border-top:1px dashed rgba(0,0,0,.18); font-size:clamp(.74rem, 2.6vw, .88rem); }
.wb-scope .wb-phv-hww-5 .hww5-line b{ flex:0 0 5.2em; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#b3121a; }
.wb-scope .wb-phv-hww-5 .hww5-line span{ flex:1 1 auto; min-width:0; }
.wb-scope .wb-phv-hww-5 .hww5-line em{ flex:0 1 auto; font-style:normal; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-align:right; color:#222; }
/* Totals in tabular figures with dotted leaders (log face here too). */
.wb-scope .wb-phv-hww-5 .hww5-tot{ list-style:none; margin:clamp(1rem, .8rem + .6vw, 1.5rem) 0 0; padding:0; font-variant-numeric:tabular-nums; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wb-scope .wb-phv-hww-5 .hww5-tot li{ display:flex; align-items:baseline; gap:.55rem; padding:.35rem 0; font-size:clamp(.8rem, 2.8vw, .95rem); font-weight:700; }
.wb-scope .wb-phv-hww-5 .hww5-tot__k{ letter-spacing:.1em; text-transform:uppercase; }
.wb-scope .wb-phv-hww-5 .hww5-dots{ flex:1 1 auto; border-bottom:2px dotted rgba(0,0,0,.4); transform:translateY(-3px); }
.wb-scope .wb-phv-hww-5 .hww5-tot__v{ font-size:1.05em; }
.wb-scope .wb-phv-hww-5 a.hww5-tot__tel{ color:#b3121a; text-decoration:none; }
.wb-scope .wb-phv-hww-5 a.hww5-tot__tel:hover{ text-decoration:underline; }
/* Desktop: the three totals sit side by side (shorter card, no leaders). */
@media (min-width:700px){
  .wb-scope .wb-phv-hww-5 .hww5-tot{ display:flex; gap:2rem; }
  .wb-scope .wb-phv-hww-5 .hww5-tot li{ flex:1 1 0; display:block; }
  .wb-scope .wb-phv-hww-5 .hww5-dots{ display:none; }
}
/* The one image: the rubber stamp, -8deg, multiply. */
.wb-scope .wb-phv-hww-5 .hww5-stamp{ position:absolute; right:5%; bottom:24%; width:clamp(104px, 16vw, 168px); height:auto; transform:rotate(-8deg); mix-blend-mode:multiply; opacity:.92; pointer-events:none; }
/* The tear-off tab. */
.wb-scope .wb-phv-hww-5 .hww5-tear{ margin-top:clamp(1.2rem, 1rem + .8vw, 1.8rem); text-align:center; }
.wb-scope .wb-phv-hww-5 .hww5-tear__quiet{ display:inline-block; margin-top:.7rem; }
.wb-scope .wb-phv-hww-5 .hww5-tape a.wb-link--quiet{ color:#555; }
.wb-scope .wb-phv-hww-5 .hww5-tape a.wb-link--quiet:hover{ color:#111; }
/* Print-down: each card row feeds in top-to-bottom when the variant is
   active. Keyed to .is-active so it replays. */
@keyframes hww5-print{ from{ opacity:0; transform:translateY(-7px); } }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *{ animation:hww5-print .3s ease-out both; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(1){ animation-delay:.05s; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(2){ animation-delay:.15s; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(3){ animation-delay:.25s; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(4){ animation-delay:.35s; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(5){ animation-delay:.5s; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(6){ animation-delay:.75s; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(7){ animation-delay:.85s; }
.wb-scope .wb-phv-hww-5.is-active .hww5-tape > *:nth-child(8){ animation-delay:.95s; }
/* Mobile (locked): the log trims to one line per station cluster. */
@media (max-width:640px){
  .wb-scope .wb-phv-hww-5 .hww5-line--trim{ display:none; }
  .wb-scope .wb-phv-hww-5 .hww5-stamp{ bottom:30%; right:2%; width:96px; }
  .wb-scope .wb-phv-hww-5 .hww5-tear .wb-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-phv-hww-5.is-active .hww5-tape > *{ animation:none !important; }
}


/* ================================================================
   PRICING page-hero variants (skin prefix prc)
   Briefs: /tmp/wb-page-heroes/brief-prc.md (locked 2026-07-03).
   Staged for merge into css/overhaul.css (image URLs are relative
   to css/). Band-level looks ride .wb-hero-vprc-N on the section;
   content styles scope under .wb-phv-prc-N. Variant 0 (shipped)
   needs nothing here. No em dashes anywhere.
   ================================================================ */

/* Every variant headline is a <p class="wb-h1"> (the real h1 lives in
   variant 0); fonts-modern pins p to Inter, so re-assert the display face.
   prc-2 re-overrides this below (the tape H1 is receipt monospace). */
.wb-scope [class*="wb-phv-prc-"] .wb-h1{ font-family:var(--wb-display) !important; }

/* The one shared stamp thump (v3 card, v4 stage): scales down onto the page
   once and stays. Reduced motion never runs it; each caller settles static. */
@keyframes wb-prc-thump{
  from{ opacity:0; transform:rotate(var(--prc-rot, -8deg)) scale(2.1); }
  70%{ opacity:1; transform:rotate(var(--prc-rot, -8deg)) scale(.94); }
  to{ opacity:.95; transform:rotate(var(--prc-rot, -8deg)) scale(1); }
}

/* ---- prc-1: Three Real Receipts ---------------------------------- */
/* Shipped metal band + scrim kept. The bullets give way to a proof strip of
   three STATIC prices over one hairline rule (locked: no count-up, ever). */
.wb-scope .wb-prc1-strip{
  position:relative; display:flex; flex-wrap:wrap; align-items:flex-start;
  gap:clamp(1.1rem, .8rem + 1.5vw, 2.2rem);
  max-width:50rem; margin-top:clamp(1.3rem, 1rem + 1vw, 1.9rem);
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:clamp(1rem, .8rem + .8vw, 1.5rem);
}
.wb-scope .wb-prc1-cell{ flex:1 1 190px; display:flex; flex-direction:column; gap:.35rem; }
.wb-scope .wb-prc1-num{
  font-family:var(--wb-display); font-weight:800; line-height:1; letter-spacing:-.02em;
  font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem); color:#fff;
  font-variant-numeric:tabular-nums;
}
.wb-scope .wb-prc1-unit{ font-size:.42em; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.72); }
.wb-scope .wb-prc1-label{ font-size:.92rem; line-height:1.35; color:rgba(255,255,255,.78); max-width:24ch; text-wrap:pretty; }
/* The approval stamp docks small at the strip's right end, decor only. */
.wb-scope .wb-prc1-stamp{
  flex:0 0 auto; align-self:center; margin-left:auto;
  width:clamp(76px, 7vw, 106px); height:auto; opacity:.92; transform:rotate(6deg);
}
/* The retention sentence prints exactly once, here (locked). */
.wb-scope .wb-prc1-micro{ margin:.9rem 0 0; max-width:50rem; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.66); }
@media (max-width:700px){
  .wb-scope .wb-prc1-stamp{ display:none; }
  .wb-scope .wb-prc1-cell{ flex:1 1 100%; }
  .wb-scope .wb-prc1-strip{ gap:.9rem; }
}

/* ---- prc-2: The Register Tape, Priced ----------------------------- */
/* Band: flat #141414 desk. Kill the brushed metal, the sheen, and the scrim;
   the tape is the only object in the room. */
.wb-scope .wb-hero-vprc-2[data-wb-hero-band]{ background:#141414 !important; }
.wb-scope .wb-hero-vprc-2[data-wb-hero-band] .wb-band__scrim{ display:none; }

.wb-scope .wb-prc2-tape{
  position:relative; width:min(740px, 100%); margin-inline:auto;
  color:#26262a;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* Paper white with faint horizontal thermal banding. */
  background:
    repeating-linear-gradient(180deg, rgba(31,26,18,.03) 0 2px, rgba(31,26,18,0) 2px 28px),
    linear-gradient(180deg, #f8f6f0, #f3f1e9);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85), 0 10px 24px -10px rgba(0,0,0,.6);
}
/* Perforated feed edge: the desk shows through a row of punched holes. */
.wb-scope .wb-prc2-feed{
  position:absolute; left:0; right:0; top:0; height:14px;
  background:radial-gradient(circle at 11px 7px, #141414 3.2px, rgba(20,20,20,0) 3.9px) repeat-x;
  background-size:22px 14px;
}
/* Torn zigzag bottom: desk-color teeth bite up into the paper. */
.wb-scope .wb-prc2-tear{
  position:absolute; left:0; right:0; bottom:0; height:11px;
  background:
    linear-gradient(-45deg, #141414 5.5px, rgba(20,20,20,0) 0),
    linear-gradient(45deg, #141414 5.5px, rgba(20,20,20,0) 0);
  background-position:left bottom; background-repeat:repeat-x; background-size:11px 11px;
}
.wb-scope .wb-prc2-body{ padding:clamp(1.6rem, 1.1rem + 2vw, 2.6rem) clamp(1rem, .7rem + 2.5vw, 2.3rem) 2.4rem; }
.wb-scope .wb-prc2-shop{
  margin:0; text-align:center; font-weight:800; letter-spacing:.12em;
  font-size:clamp(.98rem, .85rem + .6vw, 1.28rem);
}
.wb-scope .wb-prc2-meta{ margin:.35rem 0 0; text-align:center; font-size:.78rem; letter-spacing:.1em; }
.wb-scope .wb-prc2-meta--soft{ font-size:.68rem; color:#77777e; }
/* The masthead tel is the standing primary CTA: large, red ink, tap-to-call. */
.wb-scope .wb-prc2-meta a{
  color:var(--wb-red); font-weight:800; font-size:1.15em;
  text-decoration:underline; text-underline-offset:3px;
}
.wb-scope .wb-prc2-meta a:hover{ color:#a11318; }
/* The H1 prints at the TOP of the tape (locked), in receipt type: the common
   Montserrat re-assert above is beaten here by file order + higher class count. */
.wb-scope .wb-phv-prc-2 p.wb-prc2-h1{
  font-family:inherit !important; margin:1.5rem 0 .9rem; text-align:center;
  font-weight:700; font-size:clamp(1.45rem, 1.05rem + 1.8vw, 2.25rem);
  line-height:1.15; letter-spacing:.01em; color:#1c1c20; max-width:none;
}
.wb-scope .wb-prc2-lead{
  margin:0 auto 1.5rem; max-width:58ch; font-size:.92rem; line-height:1.6; color:#3d3d44;
}
.wb-scope .wb-prc2-line{
  display:flex; align-items:baseline; gap:.45rem; margin:.34rem 0;
  font-size:clamp(.76rem, .66rem + .5vw, .95rem); letter-spacing:.02em; text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.wb-scope .wb-prc2-line__label{ flex:0 1 auto; }
.wb-scope .wb-prc2-dots{ flex:1 1 1rem; min-width:1rem; align-self:flex-end; margin-bottom:.28em; border-bottom:2px dotted rgba(38,38,42,.35); }
.wb-scope .wb-prc2-line__price{ font-weight:800; white-space:nowrap; }
.wb-scope .wb-prc2-line__price small{ font-weight:700; font-size:.78em; color:#6d6d74; }
.wb-scope .wb-prc2-totals{ margin-top:1.1rem; padding-top:.75rem; border-top:2px dashed rgba(38,38,42,.4); }
.wb-scope .wb-prc2-next{ margin-top:1.3rem; padding-top:.95rem; border-top:2px dashed rgba(38,38,42,.4); }
.wb-scope .wb-prc2-next__head{ margin:0 0 .55rem; font-weight:800; letter-spacing:.08em; font-size:.95rem; }
.wb-scope .wb-prc2-next__lane{ margin:.32rem 0; font-size:.78rem; letter-spacing:.03em; line-height:1.55; }
.wb-scope .wb-prc2-next__lane a{
  color:var(--wb-red); font-weight:800; text-decoration:underline; text-underline-offset:3px;
}
.wb-scope .wb-prc2-next__lane a:hover{ color:#a11318; }
/* The coupon foot, with the red rubber stamp thumped across its right end. */
.wb-scope .wb-prc2-coupon{
  position:relative; margin-top:1.4rem; padding:1.05rem 1rem 1.15rem;
  border:2px dashed rgba(38,38,42,.5); text-align:center;
}
.wb-scope .wb-prc2-coupon__line{ margin:0; font-weight:800; font-size:clamp(.92rem, .8rem + .6vw, 1.1rem); letter-spacing:.06em; }
.wb-scope .wb-prc2-coupon__sub{ margin:.4rem 0 0; font-size:.7rem; letter-spacing:.08em; color:#57575e; }
.wb-scope .wb-prc2-stamp{
  position:absolute; right:-12px; top:50%; z-index:1; pointer-events:none;
  width:clamp(110px, 24%, 168px); height:auto;
  transform:translateY(-50%) rotate(-8deg); mix-blend-mode:multiply; opacity:.92;
}
.wb-scope .wb-prc2-fine{ margin-top:1.25rem; text-align:center; }
.wb-scope .wb-prc2-fine p{ margin:.25rem 0; font-size:.62rem; letter-spacing:.06em; line-height:1.6; color:#6d6d74; text-transform:uppercase; }
/* The tape prints once on load: pure CSS stagger over the --ti groups, gated
   behind .wb-js so a script-free visit gets the finished tape server-side.
   ~1.8s total (12 groups x .14s + the .32s ease). Nothing loops. */
.wb-js .wb-phv-prc-2 .wb-prc2-g{
  animation:wb-prc2-print .32s ease-out both;
  animation-delay:calc(var(--ti, 0) * .14s);
}
@keyframes wb-prc2-print{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
/* The stamp thumps once, after the last line prints. */
.wb-js .wb-phv-prc-2 .wb-prc2-stamp{ animation:wb-prc2-stampin .5s cubic-bezier(.2,1.4,.4,1) 1.95s both; }
@keyframes wb-prc2-stampin{
  from{ opacity:0; transform:translateY(-50%) rotate(-8deg) scale(2.1); }
  70%{ opacity:1; transform:translateY(-50%) rotate(-8deg) scale(.94); }
  to{ opacity:.92; transform:translateY(-50%) rotate(-8deg) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .wb-js .wb-phv-prc-2 .wb-prc2-g,
  .wb-js .wb-phv-prc-2 .wb-prc2-stamp{ animation:none !important; }
}
@media (max-width:560px){
  .wb-scope .wb-prc2-stamp{ right:-8px; width:98px; }
  .wb-scope .wb-prc2-coupon{ padding-right:4.6rem; }
}

/* ---- prc-3: What Needs Pricing? ----------------------------------- */
/* Shipped metal band kept. Left: copy + six 44px chips. Right: the YOUR PRICE
   glass card; its states stack in one grid cell so the card's height is
   reserved at the tallest state (the itemized mail drop) and taps never
   shift layout (locked). */
.wb-scope .wb-phv-prc-3{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.6rem, 1rem + 3vw, 3.2rem); align-items:center;
}
.wb-scope .wb-prc3-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; max-width:44rem; }
.wb-scope a.wb-prc3-chip{
  display:inline-flex; align-items:center; min-height:44px; padding:0 1.05rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.07); color:#fff; font-weight:700; font-size:.95rem;
  text-decoration:none; transition:background .15s ease, border-color .15s ease;
}
.wb-scope a.wb-prc3-chip:hover{ background:rgba(255,255,255,.16); }
.wb-scope a.wb-prc3-chip.is-on{ background:var(--wb-red); border-color:transparent; }
.wb-scope .wb-prc3-planner{ margin:1rem 0 0; }
.wb-scope .wb-prc3-card{ position:relative; }
/* #137 (owner 2026-07-14): dropped the grey brushed-metal background bar on the
   "Your price" card label; it read heavy. Now a clean uppercase label on the
   glass card, separated by a hairline so it still reads as the card header. */
.wb-scope .wb-prc3-card__head{
  display:block; margin:0 0 1rem; padding:0 0 .6rem;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85); font-family:var(--wb-display); font-weight:800;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
}
/* The default (pre-tap) invite state: a short phrase, not a dollar figure, so it
   sizes smaller than the numeric states and never wraps. */
.wb-scope .wb-prc3-fig--invite{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); color:#fff; }
.wb-scope .wb-prc3-states{ display:grid; }
.wb-scope .wb-prc3-state{
  grid-area:1 / 1; min-width:0;
  opacity:0; visibility:hidden;
  transition:opacity .15s ease, visibility 0s linear .15s;
}
.wb-scope .wb-prc3-state.is-on{ opacity:1; visibility:visible; transition:opacity .15s ease; }
.wb-scope .wb-prc3-fig{
  display:block; font-family:var(--wb-display); font-weight:800; line-height:1;
  letter-spacing:-.02em; font-size:clamp(2.1rem, 1.6rem + 1.6vw, 3rem); color:#ff5f66;
  font-variant-numeric:tabular-nums;
}
.wb-scope .wb-prc3-fig small{ font-size:.4em; font-weight:700; letter-spacing:.01em; color:rgba(255,255,255,.68); }
.wb-scope .wb-prc3-line{ margin:.55rem 0 0; font-size:.98rem; line-height:1.45; color:rgba(255,255,255,.88); }
.wb-scope .wb-prc3-micro{ margin:.75rem 0 0; font-size:.85rem; line-height:1.5; color:rgba(255,255,255,.62); }
.wb-scope .wb-prc3-thumb{
  display:block; width:100%; height:118px; object-fit:cover;
  border-radius:10px; margin-bottom:.85rem;
}
.wb-scope .wb-prc3-stack{ list-style:none; margin:.7rem 0 .8rem; padding:0; }
.wb-scope .wb-prc3-stack li{
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.32rem 0; border-bottom:1px dotted rgba(255,255,255,.28);
  font-size:.92rem; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums;
}
.wb-scope .wb-prc3-stack li b{ font-weight:800; color:#fff; }
.wb-scope .wb-prc3-card .wb-prc3-call{ width:100%; justify-content:center; text-align:center; margin-top:1.1rem; }
/* The stamp: hidden until the first tap, then one thump (the page's one
   lavish moment). JS adds .is-stamped once; reduced motion settles static. */
.wb-scope .wb-prc3-stamp{
  position:absolute; top:-16px; right:-12px; z-index:2; pointer-events:none;
  width:clamp(88px, 18%, 126px); height:auto; opacity:0; --prc-rot:8deg;
}
.wb-scope .wb-prc3-card.is-stamped .wb-prc3-stamp{ animation:wb-prc-thump .5s cubic-bezier(.2,1.4,.4,1) both; }
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-prc3-state,
  .wb-scope .wb-prc3-state.is-on{ transition:none; }
  .wb-scope .wb-prc3-card.is-stamped .wb-prc3-stamp{ animation:none !important; opacity:.95; transform:rotate(8deg); }
}
@media (max-width:960px){
  .wb-scope .wb-phv-prc-3{ grid-template-columns:1fr; }
  .wb-scope .wb-prc3-card{ max-width:34rem; }
}
@media (max-width:560px){
  .wb-scope a.wb-prc3-chip{ font-size:.9rem; padding:0 .9rem; }
  .wb-scope .wb-prc3-stamp{ top:-12px; right:-6px; width:84px; }
}

/* ---- prc-4: One Number, Not Four Invoices (the drag) --------------- */
/* Shipped metal band kept above and below the stage. Both layers render the
   SAME panel grid (registration holds by construction); the only mover is the
   clip-path on the AFTER layer, driven by --wipe on the stage. */
.wb-scope .wb-prc4-lead{ max-width:56rem; }
.wb-scope .wb-prc4-stage{
  position:relative; margin-top:clamp(1.2rem, .9rem + 1.2vw, 1.8rem);
  height:clamp(300px, 56vh, 500px);
  border-radius:14px; overflow:hidden;
  box-shadow:0 26px 60px -24px rgba(0,0,0,.7);
}
.wb-scope .wb-prc4-layer{ position:absolute; inset:0; }
.wb-scope .wb-prc4-panels{ display:grid; grid-template-columns:1.35fr 1fr; height:100%; }
.wb-scope .wb-prc4-panel{ position:relative; margin:0; min-width:0; overflow:hidden; }
.wb-scope .wb-prc4-panel img{ display:block; width:100%; height:100%; object-fit:cover; }
.wb-scope .wb-prc4-cap{
  position:absolute; left:0; right:0; bottom:0; padding:.55rem .75rem;
  font-size:.72rem; line-height:1.4; color:rgba(255,255,255,.92);
  background:linear-gradient(180deg, rgba(8,10,13,0), rgba(8,10,13,.78));
}
/* BEFORE: the vendor pile. Gray ink, the blocks texture, three sticky notes,
   the ??? total. Everything lives in the left ~55% so the resting wipe shows it. */
.wb-scope .wb-prc4-layer--before{ filter:grayscale(1) contrast(.96); }
.wb-scope .wb-prc4-layer--before::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../images/overhaul/tex-gray-blocks.webp") center/420px repeat;
  mix-blend-mode:multiply; opacity:.45;
}
.wb-scope .wb-prc4-note{
  position:absolute; z-index:1; max-width:150px; padding:.55rem .7rem;
  background:#f2e386; color:#3a3323; font-size:.76rem; font-weight:600; line-height:1.35;
  box-shadow:0 10px 18px -6px rgba(0,0,0,.45);
}
.wb-scope .wb-prc4-note--1{ left:5%; top:11%; transform:rotate(-4deg); }
.wb-scope .wb-prc4-note--2{ left:17%; top:56%; transform:rotate(2.5deg); }
.wb-scope .wb-prc4-note--3{ left:36%; top:28%; transform:rotate(-2deg); }
.wb-scope .wb-prc4-total{
  position:absolute; left:7%; bottom:9%; z-index:1; padding:.5rem .85rem;
  background:#1b1e24; color:#fff; border-radius:8px;
  font-family:var(--wb-display); font-weight:800; letter-spacing:.08em; font-size:.95rem;
}
/* AFTER: color pours back in; the receipt chip, the pointer chip, the stamp. */
.wb-scope .wb-prc4-layer--after{ z-index:2; clip-path:inset(0 0 0 var(--wipe, 55%)); }
.wb-scope .wb-prc4-receipt{
  position:absolute; right:3.5%; top:9%; z-index:1; padding:.6rem .9rem;
  background:#fbfaf3; color:#1c1e23; border-radius:4px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:700; font-size:clamp(.8rem, .7rem + .5vw, 1rem); letter-spacing:.04em;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.55);
}
.wb-scope .wb-prc4-more{
  position:absolute; right:3.5%; bottom:8%; z-index:1; padding:.45rem .75rem;
  background:rgba(14,16,22,.82); color:#fff; border-radius:999px;
  font-size:.78rem; font-weight:600;
}
.wb-scope .wb-prc4-stamp{
  position:absolute; right:12%; top:36%; z-index:1; pointer-events:none;
  width:clamp(96px, 12vw, 136px); height:auto; opacity:0; --prc-rot:-8deg;
}
.wb-js .wb-phv-prc-4 .wb-prc4-stamp{ animation:wb-prc-thump .5s cubic-bezier(.2,1.4,.4,1) 1.7s both; }
/* The seam + grip track --wipe; the full-bleed range is pointer-fine only
   (locked: touch drags the visible grip, handled in JS). */
.wb-scope .wb-prc4-range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none;
}
@media (pointer:coarse){ .wb-scope .wb-prc4-range{ display:none; } }
.wb-scope .wb-prc4-seam{
  position:absolute; top:0; bottom:0; left:var(--wipe, 55%); z-index:6;
  width:3px; transform:translateX(-50%); background:#fff;
  box-shadow:0 0 14px rgba(0,0,0,.55); pointer-events:none;
}
.wb-scope .wb-prc4-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wb-red); color:#fff; font-size:1rem;
  box-shadow:0 10px 22px -8px rgba(0,0,0,.6);
  pointer-events:auto; touch-action:none; cursor:grab;
}
.wb-scope .wb-prc4-grip:active{ cursor:grabbing; }
.wb-scope .wb-prc4-hint{
  position:absolute; left:var(--wipe, 55%); top:calc(50% - 56px); z-index:6;
  transform:translateX(-50%); padding:.35rem .75rem; border-radius:999px;
  background:#fff; color:#1b1e24; font-family:var(--wb-display); font-weight:800;
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  pointer-events:none; transition:opacity .3s ease;
}
.wb-scope .wb-prc4-hint.is-hidden{ opacity:0; }
/* The floating price card clears the fold at 1280x800 (see the page comment):
   it overlaps the stage bottom by 56px and holds every number as live text. */
.wb-scope .wb-prc4-card{
  position:relative; z-index:7; margin:-56px auto 0; max-width:900px;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:1.1rem clamp(1.1rem, 2vw, 1.8rem);
  padding:clamp(1.1rem, .9rem + 1vw, 1.6rem);
  background:rgba(18,20,26,.92); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; backdrop-filter:blur(8px);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.75);
}
.wb-scope .wb-prc4-stack{ list-style:none; margin:.7rem 0 0; padding:0; }
.wb-scope .wb-prc4-stack li{
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.3rem 0; border-bottom:1px dotted rgba(255,255,255,.28);
  font-size:.92rem; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums;
}
.wb-scope .wb-prc4-stack li b{ font-weight:800; color:#fff; }
.wb-scope .wb-prc4-fig{ margin:.7rem 0 0; }
.wb-scope .wb-prc4-fig__num{
  display:block; font-family:var(--wb-display); font-weight:800; line-height:1;
  letter-spacing:-.02em; font-size:clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); color:#fff;
}
.wb-scope .wb-prc4-fig__sub{ display:block; margin-top:.3rem; font-size:.85rem; color:rgba(255,255,255,.66); }
.wb-scope .wb-prc4-samples__head{
  display:block; margin:0 0 .55rem; font-family:var(--wb-display); font-weight:700;
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.wb-scope .wb-prc4-samples{ align-self:center; }
.wb-scope .wb-prc4-samples a{
  display:inline-flex; flex-direction:column; gap:.1rem; min-width:104px;
  margin:0 .45rem .5rem 0; padding:.5rem .7rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; color:#fff; text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.wb-scope .wb-prc4-samples a:hover{ border-color:var(--wb-red); background:rgba(255,255,255,.1); }
.wb-scope .wb-prc4-samples a b{ font-family:var(--wb-display); font-weight:800; font-size:1.12rem; font-variant-numeric:tabular-nums; }
.wb-scope .wb-prc4-samples a span{ font-size:.74rem; color:rgba(255,255,255,.66); }
.wb-scope .wb-prc4-ctas{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.3rem; }
.wb-scope .wb-prc4-micro{ flex:1 1 100%; margin:0; font-size:.85rem; line-height:1.5; color:rgba(255,255,255,.66); }
@media (prefers-reduced-motion:reduce){
  /* Static 55% diptych; the drag still works (locked). The stamp sits placed. */
  .wb-js .wb-phv-prc-4 .wb-prc4-stamp{ animation:none !important; opacity:.95; transform:rotate(-8deg); }
  .wb-scope .wb-prc4-hint{ transition:none; }
}
@media (max-width:820px){
  .wb-scope .wb-prc4-card{ grid-template-columns:1fr; margin-top:-32px; }
}
@media (max-width:640px){
  .wb-scope .wb-prc4-stage{ height:300px; border-radius:12px; }
  .wb-scope .wb-prc4-panels{ grid-template-columns:1fr; } /* both layers change together, registration holds */
  .wb-scope .wb-prc4-panel--piece{ display:none; }
  .wb-scope .wb-prc4-note{ max-width:118px; font-size:.68rem; padding:.42rem .55rem; }
  .wb-scope .wb-prc4-note--3{ left:auto; right:26%; top:16%; }
  .wb-scope .wb-prc4-stamp{ right:6%; top:40%; width:88px; }
  .wb-scope .wb-prc4-receipt{ right:3%; top:6%; }
}

/* ---- prc-5: The Price Tag Board (the sample wall) ------------------ */
/* Band: flat neutral sample wall in light steel (locked restage: no honeycomb,
   no red glow, no stamp hand). The dark band's light text flips to ink. */
.wb-scope .wb-hero-vprc-5[data-wb-hero-band]{
  background:linear-gradient(180deg, #e9ebef 0%, #dbdee4 100%) !important;
  color:#1c2027 !important;
}
.wb-scope .wb-hero-vprc-5[data-wb-hero-band] .wb-band__scrim{ display:none; }
.wb-scope .wb-phv-prc-5 .wb-kicker{ color:var(--wb-red); }
.wb-scope .wb-phv-prc-5 .wb-lead{ color:#3a4048; }
.wb-scope .wb-phv-prc-5{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem, 1rem + 3vw, 3rem); align-items:start;
}
.wb-scope .wb-phv-prc-5 .wb-prc5-h1{ color:#171a1f; }
/* The one bright paper ticket: the CTA, the planner lane, the merged 15%
   offer, the retention microline. Band 6 below is cut if this ships. */
.wb-scope .wb-prc5-ticket{
  margin-top:clamp(1.2rem, .9rem + 1.2vw, 1.8rem); padding:1.3rem 1.3rem 1.2rem;
  max-width:26rem; background:#fffdf4; border-top:6px solid var(--wb-red);
  border-radius:8px; transform:rotate(-.5deg);
  box-shadow:0 20px 44px -18px rgba(15,18,24,.4);
}
.wb-scope .wb-prc5-ticket__open{
  margin:0 0 .9rem; font-family:var(--wb-display); font-weight:800;
  font-size:.95rem; letter-spacing:.1em; color:#171a1f;
}
.wb-scope .wb-prc5-ticket .wb-prc5-ticket__call{ width:100%; justify-content:center; text-align:center; }
.wb-scope .wb-prc5-ticket__pickup{ margin:.5rem 0 0; font-size:.85rem; color:#5a616b; }
.wb-scope .wb-prc5-ticket__planner{ margin:.8rem 0 0; }
/* The quiet link's default is light-on-dark; on the paper ticket it flips to ink. */
.wb-scope .wb-prc5-ticket a.wb-link--quiet{ color:#5a616b; }
.wb-scope .wb-prc5-ticket a.wb-link--quiet:hover{ color:#1c2027; }
.wb-scope .wb-prc5-ticket__offer{
  margin:1rem 0 0; padding-top:.9rem; border-top:2px dashed rgba(28,32,39,.25);
  font-size:.95rem; line-height:1.5; color:#2a2f36;
}
.wb-scope .wb-prc5-ticket__offer b{ color:var(--wb-red); }
.wb-scope .wb-prc5-ticket__micro{ margin:.6rem 0 0; font-size:.8rem; line-height:1.5; color:#6b727c; }
/* The wall: five gently tilted sample cards, red price tags as LIVE text. */
.wb-scope .wb-prc5-wall{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(.9rem, 1.5vw, 1.4rem); }
.wb-scope a.wb-prc5-card{
  position:relative; display:block; padding:.5rem .5rem 1rem; text-decoration:none;
  background:#fff; border-radius:6px;
  box-shadow:0 14px 28px -14px rgba(15,18,24,.4);
  filter:saturate(.92) brightness(.97);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.wb-scope a.wb-prc5-card img{
  display:block; width:100%; height:auto; aspect-ratio:560/400; object-fit:cover; border-radius:4px;
}
.wb-scope .wb-prc5-card--1{ transform:rotate(-1.6deg); }
.wb-scope .wb-prc5-card--2{ transform:rotate(1.2deg); }
.wb-scope .wb-prc5-card--3{ transform:rotate(-.8deg); }
.wb-scope .wb-prc5-card--4{ transform:rotate(1.6deg); }
.wb-scope .wb-prc5-card--5{ transform:rotate(-.6deg); }
.wb-scope .wb-prc5-card--wide{ grid-column:1 / -1; }
.wb-scope .wb-prc5-card--wide img{ aspect-ratio:1180/400; }
/* Hover lifts to full brightness; nothing loops. */
.wb-scope a.wb-prc5-card:hover{
  transform:rotate(0) translateY(-4px); filter:none;
  box-shadow:0 22px 40px -16px rgba(15,18,24,.5);
}
.wb-scope .wb-prc5-tag{
  position:absolute; left:.9rem; bottom:.85rem; z-index:1; padding:.45rem .7rem;
  background:var(--wb-red); color:#fff; border-radius:6px; transform:rotate(-2deg);
  box-shadow:0 10px 20px -8px rgba(15,18,24,.5);
}
.wb-scope .wb-prc5-tag b{
  display:block; font-family:var(--wb-display); font-weight:800; line-height:1;
  font-size:clamp(1.15rem, .95rem + .7vw, 1.5rem); letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.wb-scope .wb-prc5-tag i{
  display:block; margin-top:.18rem; font-style:normal; font-weight:600;
  font-size:.72rem; letter-spacing:.03em; opacity:.94;
}
/* Each tag thumps once as its card pins up; reduced motion sits still. */
.wb-js .wb-phv-prc-5 .wb-prc5-tag{ animation:wb-prc5-tagpop .4s cubic-bezier(.2,1.4,.4,1) both; }
.wb-js .wb-phv-prc-5 .wb-prc5-card--1 .wb-prc5-tag{ animation-delay:.5s; }
.wb-js .wb-phv-prc-5 .wb-prc5-card--2 .wb-prc5-tag{ animation-delay:.62s; }
.wb-js .wb-phv-prc-5 .wb-prc5-card--3 .wb-prc5-tag{ animation-delay:.74s; }
.wb-js .wb-phv-prc-5 .wb-prc5-card--4 .wb-prc5-tag{ animation-delay:.86s; }
.wb-js .wb-phv-prc-5 .wb-prc5-card--5 .wb-prc5-tag{ animation-delay:.98s; }
@keyframes wb-prc5-tagpop{
  from{ opacity:0; transform:rotate(-2deg) scale(1.5); }
  70%{ opacity:1; transform:rotate(-2deg) scale(.95); }
  to{ opacity:1; transform:rotate(-2deg) scale(1); }
}
@media (prefers-reduced-motion:reduce){
  .wb-js .wb-phv-prc-5 .wb-prc5-tag{ animation:none !important; }
  .wb-scope a.wb-prc5-card{ transition:none; }
}
.wb-scope .wb-prc5-why{
  position:absolute; right:.9rem; bottom:.85rem; z-index:1; max-width:46%;
  padding:.32rem .5rem; background:rgba(255,255,255,.94); border-radius:6px;
  font-size:.68rem; font-weight:600; line-height:1.3; color:#3a4048;
}
.wb-scope .wb-prc5-done{
  position:absolute; top:.85rem; right:.85rem; z-index:1; padding:.16rem .42rem;
  font-family:var(--wb-display); font-weight:800; font-size:.72rem; letter-spacing:.14em;
  color:var(--wb-red); border:2px solid var(--wb-red); border-radius:4px;
  background:rgba(255,255,255,.72); transform:rotate(6deg); opacity:.9;
}
.wb-scope .wb-prc5-fine{ grid-column:1 / -1; margin:.4rem 0 0; font-size:.78rem; line-height:1.5; color:#6b727c; }
@media (max-width:960px){
  .wb-scope .wb-phv-prc-5{ grid-template-columns:1fr; }
  .wb-scope .wb-prc5-ticket{ max-width:none; } /* bright ticket full width first (locked) */
}
@media (max-width:640px){
  /* The 3-card swipe strip: only the --mob cards ride it; tags stay live text
     (legibility CDP-verified at the 280w crop before ship, per the lock). */
  .wb-scope .wb-prc5-wall{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:78%;
    overflow-x:auto; padding-bottom:.6rem;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .wb-scope a.wb-prc5-card{ scroll-snap-align:center; }
  .wb-scope .wb-prc5-card:not(.wb-prc5-card--mob){ display:none; }
  .wb-scope .wb-prc5-card--wide img{ aspect-ratio:560/400; }
  .wb-scope .wb-prc5-fine{ grid-column:auto; align-self:center; min-width:70%; }
}


/* =====================================================================
     PAGE-HERO VARIANTS: /contact/  (skin cnt, brief-cnt)
     Staged from /tmp/wb-page-heroes/cnt.css for merge into overhaul.css.
     Variant 0 is the shipped hero and needs nothing here. Band-level looks
     ride .wb-hero-vcnt-N on the section; content rides .wb-phv-cnt-N on
     the variant's .wb-inner. All motion is gated behind reduced-motion.
     ===================================================================== */

  /* Variant headlines are <p class="wb-h1"> (the page's real h1 lives in
     variant 0) and fonts-modern pins p to Inter, so re-assert the display
     face. Variant 2's tape overrides to the register mono below. */
  .wb-scope .wb-phv-cnt-1 .wb-h1,
  .wb-scope .wb-phv-cnt-3 .wb-h1,
  .wb-scope .wb-phv-cnt-4 .wb-h1,
  .wb-scope .wb-phv-cnt-5 .wb-h1{ font-family:var(--wb-display) !important; }

  /* ---- Variant 1 "Say It Out Loud, Front Desk Edition" (Option 1) -----
     The shipped split hero on the shipped metal band (no band override).
     Two pills of identical width and height stacked over a hairline "or"
     divider, then one quiet proof line, the exact build/36 pattern. */
  .wb-scope .wb-phv-cnt-1 .cnt1-pills{ display:flex; flex-direction:column; align-items:stretch; max-width:23rem; }
  .wb-scope .wb-phv-cnt-1 .cnt1-pills .wb-btn{ width:100%; justify-content:center; text-align:center; min-height:56px; display:inline-flex; align-items:center; gap:.6rem; }
  .wb-scope .wb-phv-cnt-1 .cnt1-or{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.7rem 0; }
  .wb-scope .wb-phv-cnt-1 .cnt1-or::before,
  .wb-scope .wb-phv-cnt-1 .cnt1-or::after{ content:""; flex:1 1 auto; max-width:88px; height:1px; background:rgba(255,255,255,.28); }
  .wb-scope .wb-phv-cnt-1 .cnt1-or span{ font-size:.74rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); line-height:1; }
  .wb-scope .wb-phv-cnt-1 .cnt1-proof{ margin-top:clamp(.9rem, .6rem + .8vw, 1.3rem); font-size:.85rem; letter-spacing:.02em; color:rgba(255,255,255,.75); }

  /* ---- Variant 2 "The Front-Desk Tape" (Option 2, understudy) ---------
     Flat #141414 desk, no photos, no texture; one paper-white register
     tape centered at 740px with radial-gradient scalloped feed edges and
     system monospace throughout. LCP is text. */
  .wb-scope .wb-hero-vcnt-2[data-wb-hero-band]{ background:#141414 !important; }
  .wb-scope .wb-phv-cnt-2 .cnt2-kicker{ text-align:center; color:rgba(255,255,255,.72); }
  .wb-scope .wb-phv-cnt-2 .cnt2-tape{
    position:relative; max-width:740px; margin:clamp(1.2rem, .8rem + 1.4vw, 2rem) auto 0;
    background:#f8f6ef; color:#17181b;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    padding:clamp(1.4rem, 1rem + 1.4vw, 2.2rem) clamp(1.2rem, .9rem + 1.6vw, 2.4rem);
    box-shadow:0 30px 60px rgba(0,0,0,.55);
  }
  .wb-scope .wb-phv-cnt-2 .cnt2-tape::before,
  .wb-scope .wb-phv-cnt-2 .cnt2-tape::after{
    content:""; position:absolute; left:0; right:0; height:12px;
    background:radial-gradient(circle at 10px 0, #f8f6ef 8px, transparent 9px);
    background-size:20px 12px; background-repeat:repeat-x;
  }
  .wb-scope .wb-phv-cnt-2 .cnt2-tape::before{ top:-11px; transform:scaleY(-1); }
  .wb-scope .wb-phv-cnt-2 .cnt2-tape::after{ bottom:-11px; }
  .wb-scope .wb-phv-cnt-2 .cnt2-stamp{ position:absolute; top:16px; right:12px; width:92px; height:94px; transform:rotate(-8deg); mix-blend-mode:multiply; opacity:.85; pointer-events:none; }
  .wb-scope .wb-phv-cnt-2 .cnt2-stamp img{ width:100%; height:auto; display:block; opacity:.8; }
  @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
    .wb-scope .wb-phv-cnt-2 .cnt2-stamp{
      background:#e50a2d;
      -webkit-mask:url("../images/text/we-get-stuff-done.png") center / contain no-repeat;
      mask:url("../images/text/we-get-stuff-done.png") center / contain no-repeat;
    }
    .wb-scope .wb-phv-cnt-2 .cnt2-stamp img{ display:none; }
  }
  .wb-scope .wb-phv-cnt-2 .cnt2-shop{ margin:0; text-align:center; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.95rem; }
  .wb-scope .wb-phv-cnt-2 .cnt2-addr{ margin:.3rem 0 0; text-align:center; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:#4a4b4f; }
  /* The tel target is this line alone, never the whole masthead (locked). */
  .wb-scope .wb-phv-cnt-2 .cnt2-tel{
    display:block; width:fit-content; margin:.65rem auto .2rem; text-align:center;
    font-size:clamp(1.6rem, 1.1rem + 2.6vw, 2.7rem); font-weight:800; letter-spacing:.02em;
    color:#17181b; text-decoration:none; font-variant-numeric:tabular-nums;
  }
  .wb-scope .wb-phv-cnt-2 .cnt2-tel:hover,
  .wb-scope .wb-phv-cnt-2 .cnt2-tel:focus-visible{ color:#c40824; }
  .wb-scope .wb-phv-cnt-2 .cnt2-h1{
    margin:1.1rem 0 0; padding-top:1rem; border-top:1px dashed #b9b4a4;
    font-family:inherit !important; font-weight:800; text-transform:uppercase;
    font-size:clamp(1.15rem, .9rem + 1.5vw, 1.8rem); line-height:1.25; letter-spacing:.01em; color:#17181b;
  }
  .wb-scope .wb-phv-cnt-2 .cnt2-lead{ margin:.8rem 0 0; font-size:.92rem; line-height:1.65; color:#2b2c30; }
  .wb-scope .wb-phv-cnt-2 .cnt2-slug{ margin:1rem 0 .2rem; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7a7a72; }
  .wb-scope .wb-phv-cnt-2 .cnt2-log{ list-style:none; margin:0; padding:0; }
  .wb-scope .wb-phv-cnt-2 .cnt2-log li{
    display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
    padding:.5rem 0; border-bottom:1px dotted #c9c4b4;
    font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  }
  /* The oldest lines thermal-fade down the tape. */
  .wb-scope .wb-phv-cnt-2 .cnt2-log li:nth-child(5){ opacity:.7; }
  .wb-scope .wb-phv-cnt-2 .cnt2-log li:nth-child(6){ opacity:.5; }
  .wb-scope .wb-phv-cnt-2 .cnt2-done{ color:#e50a2d; font-weight:800; display:inline-block; }
  @media (prefers-reduced-motion: no-preference){
    .wb-scope .wb-phv-cnt-2 .cnt2-done{ animation:cnt2-thump .45s ease-out .6s backwards; }
  }
  @keyframes cnt2-thump{
    0%{ transform:scale(2.1) rotate(-6deg); opacity:0; }
    60%{ transform:scale(.94); opacity:1; }
    100%{ transform:none; opacity:1; }
  }
  .wb-scope .wb-phv-cnt-2 .cnt2-next{
    display:block; margin:1.1rem auto 0; width:fit-content; text-align:center;
    padding:.65rem 1.2rem; border:2px dashed #17181b;
    font-size:clamp(.85rem, .7rem + .8vw, 1.05rem); font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#17181b; text-decoration:none;
  }
  .wb-scope .wb-phv-cnt-2 .cnt2-next:hover,
  .wb-scope .wb-phv-cnt-2 .cnt2-next:focus-visible{ color:#c40824; border-color:#c40824; }
  .wb-scope .wb-phv-cnt-2 .cnt2-totals{ margin:1rem 0 0; padding-top:.9rem; border-top:1px dashed #b9b4a4; display:grid; gap:.35rem; }
  .wb-scope .wb-phv-cnt-2 .cnt2-totals div{ display:flex; justify-content:space-between; gap:1rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
  .wb-scope .wb-phv-cnt-2 .cnt2-totals dt{ margin:0; font-weight:600; color:#4a4b4f; }
  .wb-scope .wb-phv-cnt-2 .cnt2-totals dd{ margin:0; font-weight:800; font-variant-numeric:tabular-nums; }
  .wb-scope .wb-phv-cnt-2 .cnt2-quiet{ margin:1rem 0 0; text-align:center; font-size:.8rem; color:#4a4b4f; }
  .wb-scope .wb-phv-cnt-2 .cnt2-quiet a{ color:#c40824; text-decoration:underline; }
  /* Mobile: three log lines so the number and message pad sit within the
     first two screens (locked). */
  @media (max-width:560px){
    .wb-scope .wb-phv-cnt-2 .cnt2-log li:nth-child(n+4){ display:none; }
    .wb-scope .wb-phv-cnt-2 .cnt2-stamp{ width:64px; height:66px; top:10px; right:8px; }
  }

  /* ---- Variant 3 "Pick Your Door" (Option 3) --------------------------
     Full-bleed team-table backdrop under a dark left scrim; the two
     crossfade layers live inside the variant but position against the
     band (.wb-band is relative + overflow:hidden). Chips are 44px pills;
     the glass card floats right and swaps per door. */
  .wb-scope .wb-hero-vcnt-3[data-wb-hero-band]{
    background:#0b0c10 !important;
    min-height:clamp(560px, 78vh, 820px); display:flex; flex-direction:column; justify-content:center;
  }
  .wb-scope .wb-phv-cnt-3 .cnt3-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
  .wb-scope .wb-phv-cnt-3 .cnt3-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; }
  .wb-scope .wb-phv-cnt-3 .cnt3-bg img.is-on{ opacity:1; }
  .wb-scope .wb-phv-cnt-3 .cnt3-scrim{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(8,9,12,.93) 0%, rgba(8,9,12,.74) 45%, rgba(8,9,12,.42) 100%); }
  .wb-scope .wb-phv-cnt-3 .cnt3-stage{
    position:relative; z-index:1; display:grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr);
    gap:clamp(1.6rem, 1rem + 2.5vw, 3.5rem); align-items:center;
  }
  .wb-scope .wb-phv-cnt-3 .cnt3-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:clamp(1.1rem, .8rem + 1vw, 1.6rem); }
  .wb-scope .wb-phv-cnt-3 .cnt3-chip{
    display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.4rem 1.1rem;
    border-radius:999px; border:1px solid rgba(255,255,255,.38);
    background:rgba(12,13,16,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    color:#fff; text-decoration:none; font-weight:700; font-size:.9rem; letter-spacing:.01em;
    transition:background .15s ease, border-color .15s ease;
  }
  .wb-scope .wb-phv-cnt-3 .cnt3-chip:hover,
  .wb-scope .wb-phv-cnt-3 .cnt3-chip:focus-visible{ border-color:#fff; background:rgba(12,13,16,.66); }
  .wb-scope .wb-phv-cnt-3 .cnt3-chip.is-on{ background:#e50a2d; border-color:#e50a2d; }
  .wb-scope .wb-phv-cnt-3 .cnt3-stand{ margin-top:clamp(.9rem, .6rem + .8vw, 1.3rem); font-size:.9rem; color:rgba(255,255,255,.85); }
  .wb-scope .wb-phv-cnt-3 .cnt3-stand a{ color:#fff; font-weight:800; text-decoration:underline; }
  .wb-scope .wb-inner.wb-phv-cnt-3{ position:static; }   /* owner #115: frees .cnt3-bg to fill the BAND, not the centered column */
  .wb-scope .wb-phv-cnt-3 .cnt3-card{ position:relative; padding:clamp(1.4rem, 1rem + 1.4vw, 2.2rem); justify-content:center; }   /* #116: center the pane, kill the foot void */
  .wb-scope .wb-phv-cnt-3 .cnt3-card__pane{ display:none; }
  .wb-scope .wb-phv-cnt-3 .cnt3-card__pane.is-on{ display:block; }
  .wb-scope .wb-phv-cnt-3 .cnt3-card__k{ margin:0 0 .6rem; }
  .wb-scope .wb-phv-cnt-3 .cnt3-card__p{ margin:.4rem 0 0; color:rgba(255,255,255,.88); line-height:1.6; }
  .wb-scope .wb-phv-cnt-3 .cnt3-cardbtn{ margin-top:clamp(1rem, .7rem + 1vw, 1.5rem); width:100%; justify-content:center; }   /* #116: the button anchors the card foot */
  .wb-scope .wb-phv-cnt-3 .cnt3-bignum{
    display:block; margin:.3rem 0 .2rem; font-family:var(--wb-display); font-weight:900;
    font-size:clamp(1.9rem, 1.2rem + 3vw, 2.9rem); letter-spacing:-.01em; line-height:1.1;
    color:#fff; text-decoration:none; font-variant-numeric:tabular-nums;
  }
  .wb-scope .wb-phv-cnt-3 .cnt3-bignum:hover,
  .wb-scope .wb-phv-cnt-3 .cnt3-bignum:focus-visible{ color:#ff5a61; }
  /* The proof row reuses the shared .wb-hv-proof chrome, tightened to card
     rhythm; the retention cell gets breathing room for its longer label. */
  .wb-scope .wb-phv-cnt-3 .cnt3-proof{ margin-top:.4rem; padding-top:.8rem; max-width:none; gap:1rem 1.5rem; }
  /* Owner #116: the retention line drops to a full-width lead-in row so
     "Decades" stops competing with the two true numbers above it. */
  .wb-scope .wb-phv-cnt-3 .cnt3-proof .wb-hv-proof__cell:last-child{
    flex:1 1 100%; display:flex; align-items:baseline; gap:.7rem;
    padding-top:.9rem; border-top:1px solid rgba(255,255,255,.14);
  }
  .wb-scope .wb-phv-cnt-3 .cnt3-proof .wb-hv-proof__cell:last-child .wb-hv-proof__num{ font-size:clamp(1.1rem, .9rem + .7vw, 1.4rem); }
  .wb-scope .wb-phv-cnt-3 .cnt3-proof .wb-hv-proof__cell:last-child .wb-hv-proof__label{ max-width:none; margin-top:0; }
  /* The one lavish moment: the stamp scales in ONCE on the first choice. */
  .wb-scope .wb-phv-cnt-3 .cnt3-stamp{ position:absolute; top:-26px; right:-16px; width:112px; height:auto; opacity:0; transform:scale(1.6) rotate(-14deg); pointer-events:none; }
  .wb-scope .wb-phv-cnt-3 .cnt3-card.is-stamped .cnt3-stamp{ animation:cnt3-stamp .5s ease-out forwards; }
  @keyframes cnt3-stamp{
    0%{ opacity:0; transform:scale(1.6) rotate(-14deg); }
    100%{ opacity:1; transform:scale(1) rotate(-8deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .wb-scope .wb-phv-cnt-3 .cnt3-bg img{ transition:none; }   /* instant swaps (locked) */
    .wb-scope .wb-phv-cnt-3 .cnt3-card.is-stamped .cnt3-stamp{ animation:none; opacity:1; transform:rotate(-8deg); }
  }
  @media (max-width:900px){
    .wb-scope .wb-phv-cnt-3 .cnt3-stage{ grid-template-columns:1fr; }
    .wb-scope .wb-phv-cnt-3 .cnt3-stamp{ width:84px; top:-20px; right:-8px; }
  }

  /* ---- Variant 4 "The Number They All Still Call" (Option 4) ----------
     Honeycomb over the dark metal, the phone block in the focal slot, and
     the -1.5deg ribbon as a NATIVE overflow-x scroller (no auto-drift,
     locked): drag, swipe, and JS-revealed arrows only. The delivery van
     rides the red wire as you scrub (JS maps scrollLeft to translateX);
     it noses left so it is mirrored to drive left-to-right. */
  .wb-scope .wb-hero-vcnt-4[data-wb-hero-band]{
    background:linear-gradient(rgba(13,14,17,.88), rgba(13,14,17,.93)),
               #0d0e11 url("../images/overhaul/tex-honeycomb-dark.webp") center / cover no-repeat !important;
  }
  .wb-scope .wb-phv-cnt-4 .cnt4-copy{ max-width:50rem; }
  .wb-scope .wb-phv-cnt-4 .cnt4-h1{ max-width:22ch; text-wrap:balance; }
  .wb-scope .wb-phv-cnt-4 .cnt4-focal{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:clamp(1.2rem, .9rem + 1vw, 1.8rem); }
  .wb-scope .wb-phv-cnt-4 .cnt4-stripwrap{ position:relative; margin-top:clamp(2rem, 1.4rem + 2vw, 3.2rem); transform:rotate(-1.5deg); }
  .wb-scope .wb-phv-cnt-4 .cnt4-wire{ position:absolute; top:-12px; left:-6vw; right:-6vw; height:3px; background:#e50a2d; box-shadow:0 0 12px rgba(229,10,45,.5); }
  .wb-scope .wb-phv-cnt-4 .cnt4-van{ position:absolute; top:-58px; left:0; width:96px; height:auto; transform:scaleX(-1); will-change:transform; pointer-events:none; z-index:2; }
  .wb-scope .wb-phv-cnt-4 .cnt4-strip{
    list-style:none; margin:0; padding:1.4rem .25rem 1rem; display:flex; gap:1rem;
    overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  .wb-scope .wb-phv-cnt-4 .cnt4-strip > li{ flex:0 0 auto; scroll-snap-align:center; }
  .wb-scope .wb-phv-cnt-4 .cnt4-frame{
    display:block; width:min(300px, 74vw); text-decoration:none; color:#fff;
    background:#fff; padding:.5rem .5rem 0; border-radius:6px;
    box-shadow:0 16px 34px rgba(0,0,0,.45); transition:transform .15s ease;
  }
  .wb-scope .wb-phv-cnt-4 .cnt4-frame:hover,
  .wb-scope .wb-phv-cnt-4 .cnt4-frame:focus-visible{ transform:translateY(-4px); }
  @media (prefers-reduced-motion: reduce){
    .wb-scope .wb-phv-cnt-4 .cnt4-frame{ transition:none; }
    .wb-scope .wb-phv-cnt-4 .cnt4-frame:hover{ transform:none; }
  }
  .wb-scope .wb-phv-cnt-4 .cnt4-frame img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:3px; }
  .wb-scope .wb-phv-cnt-4 .cnt4-frame__meta{ display:block; padding:.55rem .3rem .65rem; color:#17181b; font-size:.8rem; font-weight:600; line-height:1.35; }
  .wb-scope .wb-phv-cnt-4 .cnt4-frame__meta b{ color:#c40824; font-family:var(--wb-display); font-weight:900; margin-right:.35rem; }
  .wb-scope .wb-phv-cnt-4 .cnt4-still{
    display:inline-block; margin-left:.4rem; padding:.1rem .5rem; border-radius:999px;
    background:#e50a2d; color:#fff; font-style:normal; font-size:.62rem; font-weight:800;
    letter-spacing:.08em; text-transform:uppercase; vertical-align:1px;
  }
  .wb-scope .wb-phv-cnt-4 .cnt4-today{ width:min(300px, 74vw); height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.3rem; padding:1.2rem 1.3rem; }
  .wb-scope .wb-phv-cnt-4 .cnt4-today__year{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#ff5a61; }
  .wb-scope .wb-phv-cnt-4 .cnt4-today__num{ font-family:var(--wb-display); font-weight:900; font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
  .wb-scope .wb-phv-cnt-4 .cnt4-today__label{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.75); }
  .wb-scope .wb-phv-cnt-4 .cnt4-today__btn{ margin-top:.7rem; }
  .wb-scope .wb-phv-cnt-4 .cnt4-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:3;
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
    background:rgba(12,13,16,.72); color:#fff; cursor:pointer; font-size:1rem;
  }
  .wb-scope .wb-phv-cnt-4 .cnt4-arrow:hover,
  .wb-scope .wb-phv-cnt-4 .cnt4-arrow:focus-visible{ background:#e50a2d; border-color:#e50a2d; }
  .wb-scope .wb-phv-cnt-4 .cnt4-arrow--prev{ left:-8px; }
  .wb-scope .wb-phv-cnt-4 .cnt4-arrow--next{ right:-8px; }
  @media (max-width:700px){
    .wb-scope .wb-phv-cnt-4 .cnt4-stripwrap{ transform:none; }   /* straighten on phones */
    .wb-scope .wb-phv-cnt-4 .cnt4-van{ display:none; }
    .wb-scope .wb-phv-cnt-4 .cnt4-wire{ left:-1.25rem; right:-1.25rem; }
  }

  /* ---- Variant 5 "The One Number Monolith" (Option 5) -----------------
     Full-viewport band; the poster IS the band background (the LCP) under
     an ~80% scrim baked into the same shorthand; the staged JS injects the
     fly-through only at 768px+, motion-ok, Save-Data off, crossfading via
     .is-live. Dead center, one oversized glass slab with the honeycomb
     inner panel; the static proof chip row docks beneath. */
  .wb-scope .wb-hero-vcnt-5[data-wb-hero-band]{
    background:linear-gradient(rgba(8,9,11,.8), rgba(8,9,11,.8)),
               #0b0c0f url("../videos/wam-flythrough-hero-poster.jpg") center / cover no-repeat !important;
    min-height:clamp(560px, 78vh, 820px); display:flex; flex-direction:column; justify-content:center;
  }
  .wb-scope .wb-phv-cnt-5 .cnt5-video{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .8s ease; }
  .wb-scope .wb-phv-cnt-5 .cnt5-video.is-live{ opacity:1; }
  .wb-scope .wb-phv-cnt-5 .cnt5-video__el{ width:100%; height:100%; object-fit:cover; }
  .wb-scope .wb-phv-cnt-5 .cnt5-scrim{ position:absolute; inset:0; background:rgba(8,9,11,.8); }
  .wb-scope .wb-phv-cnt-5 .cnt5-stage{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
  .wb-scope .wb-phv-cnt-5 .cnt5-slab{
    position:relative; width:100%; max-width:640px; text-align:center;
    padding:clamp(1.8rem, 1.3rem + 2vw, 3rem) clamp(1.3rem, 1rem + 1.6vw, 2.4rem);
  }
  .wb-scope .wb-phv-cnt-5 .cnt5-slab::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
    background:url("../images/overhaul/tex-honeycomb-dark.webp") center / cover no-repeat; opacity:.28;
  }
  .wb-scope .wb-phv-cnt-5 .cnt5-kicker{ margin:0; }
  .wb-scope .wb-phv-cnt-5 .cnt5-wgsd{ display:inline-block; margin-top:.9rem; }
  .wb-scope .wb-phv-cnt-5 .cnt5-wgsd img{ width:min(132px, 34vw); height:auto; display:block; }
  .wb-scope .wb-phv-cnt-5 .cnt5-h1{ margin:1rem 0 0; font-weight:800; font-size:clamp(1.2rem, 1rem + 1.1vw, 1.65rem); line-height:1.3; color:#fff; }
  /* The number at display scale, itself the tel link (the slab's primary). */
  .wb-scope .wb-phv-cnt-5 .cnt5-num{
    display:block; margin-top:.4rem; font-family:var(--wb-display) !important; font-weight:900;
    font-size:clamp(2.3rem, 1.2rem + 6.4vw, 4.6rem); letter-spacing:-.01em; line-height:1.05;
    text-decoration:none; font-variant-numeric:tabular-nums;
  }
  .wb-scope .wb-phv-cnt-5 .cnt5-lead{ margin:1rem auto 0; max-width:34rem; color:rgba(255,255,255,.88); line-height:1.6; font-size:.98rem; }
  .wb-scope .wb-phv-cnt-5 .cnt5-btns{ display:flex; flex-direction:column; align-items:center; gap:.7rem; margin-top:clamp(1.1rem, .8rem + 1vw, 1.6rem); }
  .wb-scope .wb-phv-cnt-5 .cnt5-btns .wb-btn{ min-width:16rem; justify-content:center; }
  .wb-scope .wb-phv-cnt-5 .cnt5-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:clamp(1.2rem, .9rem + 1vw, 1.8rem); }
  .wb-scope .wb-phv-cnt-5 .cnt5-chip{
    display:inline-flex; align-items:center; gap:.6rem;
    background:rgba(16,17,20,.74); border:1px solid rgba(255,255,255,.16); border-radius:999px;
    padding:.35rem 1rem .35rem .45rem; color:#fff;
  }
  .wb-scope .wb-phv-cnt-5 .cnt5-chip > img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
  .wb-scope .wb-phv-cnt-5 .cnt5-chip__txt{ display:flex; flex-direction:column; text-align:left; }
  .wb-scope .wb-phv-cnt-5 .cnt5-chip__txt b{ font-family:var(--wb-display); font-weight:800; font-size:.95rem; line-height:1.15; font-variant-numeric:tabular-nums; }
  .wb-scope .wb-phv-cnt-5 .cnt5-chip__txt i{ font-style:normal; font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72); }
  /* Chips without a coin still align: pad the text-only chips evenly. */
  .wb-scope .wb-phv-cnt-5 .cnt5-chip:not(:has(> img)){ padding:.55rem 1rem; }
  @media (max-width:560px){
    /* Poster-only (JS never injects video under 768), slab full width,
       chips compressed to one scrolling 36px row (locked). */
    .wb-scope .wb-phv-cnt-5 .cnt5-chips{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding-bottom:.4rem; max-width:100%; }
    .wb-scope .wb-phv-cnt-5 .cnt5-chip{ flex:0 0 auto; }
    .wb-scope .wb-phv-cnt-5 .cnt5-chip > img{ width:30px; height:30px; }
    .wb-scope .wb-phv-cnt-5 .cnt5-chip__txt b{ font-size:.82rem; }
    .wb-scope .wb-phv-cnt-5 .cnt5-btns .wb-btn{ min-width:0; width:100%; }
  }


/* ================================================================
   HOW WE DO BUSINESS page-hero variants (skin prefix hdb)
   Briefs: /tmp/wb-page-heroes/brief-hdb.md (locked 2026-07-03).
   Staged for merge into css/overhaul.css (image URLs are relative
   to css/). Band-level looks ride .wb-hero-vhdb-N on the section;
   content styles scope under .wb-phv-hdb-N. Variant 0 (shipped)
   needs nothing here. No em dashes anywhere.
   ================================================================ */

/* Every variant headline is a <p class="wb-h1"> (the real h1 lives in
   variant 0); fonts-modern pins p to Inter, so re-assert the display face. */
.wb-scope [class*="wb-phv-hdb-"] .wb-h1{ font-family:var(--wb-display) !important; }

/* ---- hdb-1: Receipts on the Trust Page --------------------------- */
/* Shipped band look kept; only the photo coin on the retention cell is new
   (the coin device from the Monolith review, 44px, real client photo). */
.wb-scope .wb-phv-hdb-1 .wb-hv-proof__cell:last-child{ flex:1.6 1 220px; }
.wb-scope .wb-phv-hdb-1 .wb-hv-proof__cell:last-child .wb-hv-proof__label{ max-width:26ch; }
.wb-scope .wb-phv-hdb1-cell{ position:relative; padding-left:56px; }
.wb-scope .wb-phv-hdb1-coin{
  position:absolute; left:0; top:2px; width:44px; height:44px; border-radius:50%;
  object-fit:cover; outline:2px solid rgba(255,255,255,.35);
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
@media (max-width:700px){
  .wb-scope .wb-phv-hdb1-cell{ padding-left:52px; min-height:44px; }
}

/* ---- hdb-2: The Zero Bill (framed statement) --------------------- */
/* Band: brushed metal (the register tape ships on /pricing/ alone; this is
   the different paper object). The v0 scrim would crush the sheen, hide it. */
/* Owner 2026-07-14: the mid-grey metal read wrong as a hero; the ground goes
   DARK (near-black vault with a faint sheen) so the paper Zero Bill pops and
   the chrome H1 sits on controlled dark pixels. */
.wb-scope .wb-hero-vhdb-2[data-wb-hero-band]{
  background:
    linear-gradient(105deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 24%,
                            rgba(0,0,0,.42) 60%, rgba(255,255,255,.04) 100%),
    linear-gradient(180deg, rgba(23,25,29,.94), rgba(12,13,16,.97)),
    #101215 url("../images/overhaul/tex-metallic-lines.webp") center/360px repeat !important;
}
.wb-scope .wb-hero-vhdb-2[data-wb-hero-band] .wb-band__scrim{ display:none; }

.wb-scope .wb-phv-hdb2-grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items:center;
}
.wb-scope .wb-phv-hdb2-links{ display:flex; flex-direction:column; gap:.55rem; margin-top:clamp(1rem, .7rem + 1vw, 1.6rem); }

/* The letter-size statement: paper-white, slight tilt, two shadow depths,
   tabular figures. LCP stays text; the sheet is pure markup. */
.wb-scope .wb-phv-hdb2-sheet{
  position:relative; max-width:560px; margin-left:auto;
  background:#fbfaf3; color:#24262b; border-radius:4px;
  padding:clamp(1.3rem, 1rem + 1.4vw, 2.1rem);
  transform:rotate(-1deg);
  box-shadow:0 14px 28px -12px rgba(0,0,0,.55), 0 44px 90px -30px rgba(0,0,0,.65);
  font-variant-numeric:tabular-nums;
}
.wb-scope .wb-phv-hdb2-head{ border-bottom:3px double rgba(36,38,43,.7); padding-bottom:.7rem; }
.wb-scope .wb-phv-hdb2-firm{ margin:0; font-family:var(--wb-display) !important; font-weight:800; font-size:1.02rem; letter-spacing:.1em; text-transform:uppercase; }
.wb-scope .wb-phv-hdb2-sub{ margin:.2rem 0 0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(36,38,43,.65); }
/* The tel line is the second-largest thing on the sheet, and tap-to-call. */
.wb-scope a.wb-phv-hdb2-tel{
  display:block; margin-top:.45rem; font-family:var(--wb-display); font-weight:800;
  font-size:clamp(1.05rem, .9rem + .7vw, 1.35rem); color:var(--wb-red); text-decoration:none;
}
.wb-scope a.wb-phv-hdb2-tel:hover{ text-decoration:underline; text-underline-offset:3px; }
.wb-scope .wb-phv-hdb2-tel__note{ font-weight:700; font-size:.72em; color:rgba(36,38,43,.7); text-transform:none; }

.wb-scope .wb-phv-hdb2-title{
  margin:1rem 0 .4rem; padding:.45rem 0; border-block:2px solid rgba(36,38,43,.8);
  font-family:var(--wb-display) !important; font-weight:800; font-size:.82rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.wb-scope .wb-phv-hdb2-lines{ margin:0; }
.wb-scope .wb-phv-hdb2-line{ display:flex; align-items:baseline; gap:.5rem; padding:.42rem 0; border-bottom:1px solid rgba(36,38,43,.08); font-size:.95rem; }
.wb-scope .wb-phv-hdb2-line dt{ font-weight:600; }
.wb-scope .wb-phv-hdb2-dots{ flex:1 1 1.5rem; min-width:1.5rem; align-self:flex-end; margin-bottom:.35em; border-bottom:2px dotted rgba(36,38,43,.3); }
.wb-scope .wb-phv-hdb2-line dd{ margin:0; font-weight:800; white-space:nowrap; }
.wb-scope .wb-phv-hdb2-none{ display:inline-block; color:var(--wb-red); font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

.wb-scope p.wb-phv-hdb2-totals{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.35rem 1.2rem;
  margin:1rem 0 0; padding:.6rem 0 0; border-top:3px double rgba(36,38,43,.65); border-bottom:0;
  font-family:var(--wb-display) !important; font-weight:800; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase;
}
.wb-scope p.wb-phv-hdb2-fine{ margin:.7rem 0 0; padding:0; border-bottom:0; font-size:.8rem; line-height:1.45; color:rgba(36,38,43,.75); display:block; }

/* The WGSD art re-inked as the red rubber stamp, overprinting the corner
   (brightness(0) flattens the art, the chain re-colors it brand red). */
.wb-scope .wb-phv-hdb2-stamp{
  position:absolute; right:4%; top:31%; width:clamp(92px, 6rem + 2vw, 132px); height:auto;
  transform:rotate(-8deg); mix-blend-mode:multiply; opacity:.8; pointer-events:none;
  filter:brightness(0) saturate(100%) invert(21%) sepia(96%) saturate(4500%) hue-rotate(351deg) brightness(92%);
}

/* NEXT ON THE CALENDAR: the statement's last line item is the action. */
.wb-scope .wb-phv-hdb2-next{ display:block; margin-top:1.1rem; padding:0; border-bottom:0; }
.wb-scope .wb-phv-hdb2-nextlabel{ margin:0 0 .55rem; font-family:var(--wb-display) !important; font-weight:800; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; }
.wb-scope a.wb-phv-hdb2-cta{ display:flex; width:100%; justify-content:center; text-align:center; }

/* Print-in: the line groups land once over ~1.5s (.wb-js gated, keyed to the
   shared .is-in on the sheet wrap), one red thump on NONE ON FILE, no loops.
   No-JS and reduced motion read the finished document. */
.wb-js .wb-scope .wb-phv-hdb2-sheetwrap.is-in .wb-phv-hdb2-line{
  animation:wb-hdb2-print .3s ease-out both;
  animation-delay:calc(.18s + .14s * var(--i, 0));
}
@keyframes wb-hdb2-print{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.wb-js .wb-scope .wb-phv-hdb2-sheetwrap.is-in .wb-phv-hdb2-none{
  animation:wb-hdb2-thump .4s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay:1.05s;
}
@keyframes wb-hdb2-thump{ from{ opacity:0; transform:scale(2.1) rotate(-3deg); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .wb-js .wb-scope .wb-phv-hdb2-sheetwrap.is-in .wb-phv-hdb2-line,
  .wb-js .wb-scope .wb-phv-hdb2-sheetwrap.is-in .wb-phv-hdb2-none{ animation:none; }
}
@media (max-width:900px){
  .wb-scope .wb-phv-hdb2-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .wb-scope .wb-phv-hdb2-sheet{ margin:0 auto; }
}
@media (max-width:640px){
  /* The sheet goes full-bleed and phone-shaped. */
  .wb-scope .wb-phv-hdb2-sheet{ width:calc(100% + 2.5rem); max-width:none; margin-left:-1.25rem; border-radius:0; transform:none; }
  .wb-scope .wb-phv-hdb2-stamp{ top:26%; }
}

/* ---- hdb-3: Still a Client (the no-contract wall) ----------------- */
/* Band: honeycomb dark; the ribbon owns the lower half, so the v0 scrim and
   the rocket seam-rider both stand down under this skin. */
.wb-scope .wb-hero-vhdb-3[data-wb-hero-band]{
  background:linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
             #0a0b0d url("../images/overhaul/tex-honeycomb-dark.webp") center top/cover no-repeat !important;
}
.wb-scope .wb-hero-vhdb-3[data-wb-hero-band] .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-vhdb-3[data-wb-hero-band] ~ .wb-seam-rider--rocket{ display:none !important; }

/* The ribbon: full-bleed, tilted, a native overflow-x scroller (thin red
   scrollbar as the scrub cue, no wheel hijack, no auto-drift). The negative
   bottom margin drops the frames onto the slant seam, hero-float style. */
.wb-scope .wb-phv-hdb3-ribbon{
  position:relative; width:100vw; margin:clamp(1.6rem, 1rem + 2vw, 2.8rem) 0 0 calc(50% - 50vw);
  margin-bottom:calc(-1 * (var(--wb-pad, 2.4rem) - 1.4rem));
}
.wb-scope .wb-phv-hdb3-tilt{ position:relative; transform:rotate(-1.5deg); }
.wb-scope .wb-phv-hdb3-win{
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  padding:1.7rem 0 3rem; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--wb-red) rgba(255,255,255,.12);
}
.wb-scope .wb-phv-hdb3-win::-webkit-scrollbar{ height:8px; }
.wb-scope .wb-phv-hdb3-win::-webkit-scrollbar-thumb{ background:var(--wb-red); border-radius:8px; }
.wb-scope .wb-phv-hdb3-win::-webkit-scrollbar-track{ background:rgba(255,255,255,.1); border-radius:8px; }
.wb-scope .wb-phv-hdb3-track{
  display:flex; align-items:flex-end; gap:clamp(.9rem, .6rem + 1vw, 1.5rem);
  width:max-content; margin:0; padding:0 clamp(1.2rem, 4vw, 3rem); list-style:none;
}
.wb-scope .wb-phv-hdb3-frame{ flex:0 0 auto; position:relative; }

/* White print borders, alternating plus and minus 2 degrees, hover lifts. */
.wb-scope .wb-phv-hdb3-print{
  display:block; position:relative; background:#fdfdfb; padding:6px 6px 0; border-radius:3px;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.75);
  transform:rotate(2deg); transition:transform .18s ease, box-shadow .18s ease;
  text-decoration:none;
}
.wb-scope .wb-phv-hdb3-frame:nth-child(2n) .wb-phv-hdb3-print{ transform:rotate(-2deg); }
.wb-scope .wb-phv-hdb3-print:hover,
.wb-scope .wb-phv-hdb3-print:focus-visible{ transform:rotate(0deg) translateY(-6px); box-shadow:0 26px 46px -16px rgba(0,0,0,.85); z-index:3; }
.wb-scope .wb-phv-hdb3-print:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wb-scope .wb-phv-hdb3-print img{ display:block; width:auto; border-radius:2px; height:clamp(150px, 11vh + 88px, 220px); }

/* Red year tabs pop on a pure-CSS stagger (rides --i; simply on with JS off). */
.wb-scope .wb-phv-hdb3-year{
  position:absolute; top:-12px; left:10px; z-index:2;
  padding:.3rem .55rem .32rem; background:var(--wb-red); color:#fff; border-radius:4px;
  font-family:var(--wb-display); font-weight:800; font-size:.78rem; letter-spacing:.08em; line-height:1;
  text-transform:uppercase; box-shadow:0 6px 14px -6px rgba(0,0,0,.6);
}
.wb-js .wb-scope .wb-phv-hdb3-ribbon.is-in .wb-phv-hdb3-year{
  animation:wb-hdb3-pop .32s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay:calc(.25s + .07s * var(--i, 0));
}
@keyframes wb-hdb3-pop{ from{ opacity:0; transform:translateY(8px) scale(.55); } to{ opacity:1; transform:none; } }

.wb-scope .wb-phv-hdb3-cap{
  display:block; width:0; min-width:100%; box-sizing:border-box;
  padding:.44rem .35rem .52rem;
  font-family:var(--wb-display); font-weight:700; font-size:.63rem; letter-spacing:.06em;
  line-height:1.1; text-transform:uppercase; color:#2c3038; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* STILL A CLIENT: the red stamp across the lower corner (confirm-before-launch
   gate rides these; see the PHP comment). */
.wb-scope .wb-phv-hdb3-still{
  position:absolute; right:-8px; bottom:34px; z-index:2; transform:rotate(-4deg);
  padding:.28rem .5rem; background:var(--wb-red); color:#fff; border-radius:3px;
  font-family:var(--wb-display); font-weight:800; font-size:.6rem; letter-spacing:.12em;
  line-height:1; text-transform:uppercase; box-shadow:0 6px 12px -5px rgba(0,0,0,.65);
}

/* TODAY: the reservation card the strip docks into, deliberately straight
   and glassy against the tilted prints. */
.wb-scope .wb-phv-hdb3-today{
  position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:.4rem;
  min-height:calc(clamp(150px, 11vh + 88px, 220px) + 6px);
  padding:1.1rem 1.5rem 1.2rem;
  background:linear-gradient(160deg, rgba(216,35,42,.18), rgba(255,255,255,.05) 55%), rgba(12,14,19,.92);
  border:1px solid rgba(255,255,255,.16); border-top:3px solid var(--wb-red); border-radius:8px;
  box-shadow:0 18px 34px -14px rgba(0,0,0,.75);
}
.wb-scope .wb-phv-hdb3-year--today{ background:#fff; color:var(--wb-red); }
.wb-scope .wb-phv-hdb3-today__head{
  font-family:var(--wb-display); font-weight:800; font-size:clamp(1.25rem, 1rem + .9vw, 1.7rem);
  line-height:1.05; color:#fff;
}
.wb-scope .wb-phv-hdb3-today__label{
  font-family:var(--wb-display); font-weight:700; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.75); max-width:24ch;
}
.wb-scope a.wb-phv-hdb3-today__cta{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.5rem;
  padding:.6rem 1.05rem; background:var(--wb-red); color:#fff; border-radius:999px;
  font-family:var(--wb-display); font-weight:700; font-size:.76rem; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none; transition:background .15s ease, transform .15s ease;
}
.wb-scope a.wb-phv-hdb3-today__cta:hover{ background:#b81d23; transform:translateY(-1px); color:#fff; }
.wb-scope a.wb-phv-hdb3-today__cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* Arrows: the shared .wb-timeline__nav chrome, repositioned for the strip
   and .wb-js gated (the native scroller needs no buttons without JS). */
.wb-scope .wb-phv-hdb3-nav{ display:none; top:calc(50% - 1.4rem); }
.wb-scope .wb-phv-hdb3-nav.wb-timeline__nav--prev{ left:14px; }
.wb-scope .wb-phv-hdb3-nav.wb-timeline__nav--next{ right:14px; }
@media (min-width:701px){ .wb-js .wb-scope .wb-phv-hdb3-nav{ display:flex; } }

@media (max-width:700px){
  /* Tilt straightened, 235px cards, scroll-snap; the strip stays swipeable. */
  .wb-scope .wb-phv-hdb3-ribbon{ margin-top:1.2rem; }
  .wb-scope .wb-phv-hdb3-tilt{ transform:none; }
  .wb-scope .wb-phv-hdb3-win{ scroll-snap-type:x proximity; padding:1.4rem 0 2.4rem; }
  .wb-scope .wb-phv-hdb3-frame{ scroll-snap-align:center; }
  .wb-scope .wb-phv-hdb3-print img{ height:235px; }
  .wb-scope .wb-phv-hdb3-today{ min-height:241px; }
}
@media (prefers-reduced-motion: reduce){
  .wb-js .wb-scope .wb-phv-hdb3-ribbon.is-in .wb-phv-hdb3-year{ animation:none; }
  .wb-scope .wb-phv-hdb3-print{ transition:none; }
  .wb-scope .wb-phv-hdb3-print:hover,
  .wb-scope .wb-phv-hdb3-print:focus-visible{ transform:rotate(0deg); }
}

/* ---- hdb-4: Drag Off the Lease ------------------------------------ */
/* Band stays the shipped dark; the stage is the show. The rocket seam-rider
   stands down (the floating card overlaps the seam). */
.wb-scope .wb-hero-vhdb-4[data-wb-hero-band] ~ .wb-seam-rider--rocket{ display:none !important; }

.wb-scope .wb-phv-hdb4-lead{ max-width:54rem; }

/* The reveal stage: two absolutely stacked layers sharing one box; the only
   mover is the clip-path on the AFTER layer, driven by --wipe. Server bakes
   --wipe:55% inline, so no-JS is a working static diptych. */
.wb-scope .wb-phv-hdb4-stage{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(400px, 54vh, 540px);
  margin-top:clamp(.8rem, .5rem + 1vw, 1.4rem);
  overflow:hidden; background:#101216;
}
.wb-scope .wb-phv-hdb4-layer{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:clamp(2.6rem, 2rem + 1.5vw, 3.4rem) clamp(1.25rem, 4vw, 4rem) clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
}
/* BEFORE: the gray desk of lease paperwork. Non-Weber semantic content only;
   the grayscale filter drains the papers with it. */
.wb-scope .wb-phv-hdb4-layer--before{ background:#3a3d42; filter:grayscale(1) brightness(.74) contrast(.94); }
.wb-scope .wb-phv-hdb4-layer--before::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:url("../images/overhaul/tex-gray-blocks.webp") center/cover;
  opacity:.38; mix-blend-mode:multiply; pointer-events:none;
}
.wb-scope .wb-phv-hdb4-desk{ position:relative; flex:1 1 auto; min-height:0; }

/* The paper artifacts (pure CSS, four objects max). */
.wb-scope .wb-phv-hdb4-paper{
  position:absolute; background:#f2f0e8; color:#2f3136; border-radius:3px;
  box-shadow:0 14px 30px rgba(0,0,0,.5); padding:.9rem 1rem;
  font-family:var(--wb-display);
}
.wb-scope .wb-phv-hdb4-paper--term{ left:4%; top:8%; width:clamp(180px, 20vw, 280px); transform:rotate(-3deg); }
.wb-scope .wb-phv-hdb4-paper__head{ margin:0 0 .5rem; padding-bottom:.35rem; border-bottom:2px solid #2f3136; font-family:var(--wb-display) !important; font-weight:800; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
.wb-scope .wb-phv-hdb4-rules{ display:block; height:30px; margin:.45rem 0; background:repeating-linear-gradient(180deg, transparent 0 7px, rgba(47,49,54,.25) 7px 8px); }
.wb-scope .wb-phv-hdb4-paper__big{ margin:0; display:inline-block; padding:.12rem .32rem; background:rgba(47,49,54,.14); font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1rem, .8rem + .7vw, 1.35rem); text-transform:uppercase; letter-spacing:.02em; }
.wb-scope .wb-phv-hdb4-paper__clause{ margin:0; font-family:var(--wb-display) !important; font-weight:700; font-size:.72rem; text-decoration:underline; text-underline-offset:2px; }
.wb-scope .wb-phv-hdb4-paper--under{ left:27%; top:47%; width:clamp(150px, 16vw, 230px); height:110px; transform:rotate(4deg); }
.wb-scope .wb-phv-hdb4-paper--invoice{ left:24%; top:42%; width:clamp(170px, 18vw, 260px); transform:rotate(-1deg); }
.wb-scope .wb-phv-hdb4-row{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin:0; padding:.28rem 0; border-bottom:1px solid rgba(47,49,54,.15); font-family:var(--wb-display) !important; font-weight:700; font-size:.72rem; }
.wb-scope .wb-phv-hdb4-redact{ display:inline-block; width:3.2rem; height:.7rem; border-radius:2px; background:repeating-linear-gradient(90deg, #565a61 0 6px, #6c7076 6px 10px); }
.wb-scope .wb-phv-hdb4-portal{
  position:absolute; left:46%; top:10%; width:clamp(190px, 20vw, 280px); transform:rotate(2deg);
  background:#e9e9ea; color:#2f3136; border-radius:8px; overflow:hidden;
  box-shadow:0 16px 34px rgba(0,0,0,.5);
}
.wb-scope .wb-phv-hdb4-portal__bar{ display:flex; gap:5px; padding:.45rem .6rem; background:#c9ccd1; }
.wb-scope .wb-phv-hdb4-portal__bar i{ width:9px; height:9px; border-radius:50%; background:#9599a0; }
.wb-scope .wb-phv-hdb4-portal__title{ margin:0; padding:.6rem .8rem .2rem; font-family:var(--wb-display) !important; font-weight:800; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.wb-scope .wb-phv-hdb4-portal__field{ display:block; margin:.4rem .8rem 0; padding:.35rem .5rem; background:#fff; border:1px solid #b9bcc2; border-radius:4px; font-family:var(--wb-display); font-size:.68rem; font-weight:600; color:#7c8087; }
.wb-scope .wb-phv-hdb4-portal__forgot{ margin:0; padding:.45rem .8rem .7rem; font-family:var(--wb-display) !important; font-weight:700; font-size:.64rem; text-decoration:underline; }
.wb-scope .wb-phv-hdb4-slip{
  position:absolute; left:14%; bottom:6%; transform:rotate(-4deg);
  background:#e9e5cf; color:#3c3a30; padding:.5rem .7rem;
  font-family:var(--wb-display); font-weight:700; font-size:.78rem;
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}

/* AFTER: full color, clipped at the seam; a red bloom hugs the clip edge. */
.wb-scope .wb-phv-hdb4-layer--after{ background:#14161a; clip-path:inset(0 0 0 var(--wipe, 55%)); }
.wb-scope .wb-phv-hdb4-layer--after::before{
  content:""; position:absolute; top:0; bottom:0; left:var(--wipe, 55%); width:9rem; z-index:3;
  background:linear-gradient(90deg, rgba(216,35,42,.32), rgba(216,35,42,0));
  pointer-events:none;
}
.wb-scope .wb-phv-hdb4-panels{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1.18fr 1fr; grid-template-rows:100%;
  gap:clamp(.7rem, 1.2vw, 1.1rem);
}
.wb-scope .wb-phv-hdb4-panel{ margin:0; position:relative; overflow:hidden; border-radius:12px; min-height:0; }
.wb-scope .wb-phv-hdb4-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.wb-scope .wb-phv-hdb4-chip{
  position:absolute; left:.7rem; bottom:.7rem; z-index:2; max-width:calc(100% - 1.4rem);
  background:rgba(10,11,13,.8); color:#fff; border-left:3px solid var(--wb-red); border-radius:6px;
  font-family:var(--wb-display) !important; font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  padding:.4rem .65rem;
}
.wb-scope .wb-phv-hdb4-panel--mid .wb-phv-hdb4-chip{ left:auto; right:.7rem; }

/* The in-stage H1, identical metrics both layers (both aria-hidden; the
   accessible copy is .wb-phv-hdb4-h1 below): dead gray flips to chrome as
   the seam crosses it. */
.wb-scope .wb-phv-hdb4-h1x{
  flex:0 0 auto; margin:clamp(.9rem, .6rem + .8vw, 1.4rem) 0 0;
  font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(1.35rem, .7rem + 2vw, 2.3rem); line-height:1.05; letter-spacing:-.02em;
  color:#9aa0a8;
}
.wb-scope .wb-phv-hdb4-h1x--after{ color:#fff; }

/* The full-bleed range: fine pointers only (the committee's touch demand);
   .wb-js gated so no-JS never ships a dead control. Touch drags the grip
   itself (initHeroPageHdb). */
.wb-scope .wb-phv-hdb4-range{
  display:none; position:absolute; inset:0; z-index:7;
  width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; touch-action:pan-y;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.wb-js .wb-scope .wb-phv-hdb4-range{ display:block; }
@media (pointer:coarse){
  .wb-scope .wb-phv-hdb4-range{ pointer-events:none; }
  .wb-scope .wb-phv-hdb4-grip{ pointer-events:auto; touch-action:none; cursor:grab; }
}
.wb-scope .wb-phv-hdb4-seam{
  position:absolute; top:0; bottom:0; left:var(--wipe, 55%); width:3px; margin-left:-1.5px; z-index:6;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
  box-shadow:0 0 18px rgba(216,35,42,.55); pointer-events:none;
}
.wb-scope .wb-phv-hdb4-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, #f4f6f8, #c7cdd4 55%, #eef1f5);
  color:#1a1d21; font-size:.95rem;
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.25);
}
.wb-scope .wb-phv-hdb4-range:focus-visible ~ .wb-phv-hdb4-seam .wb-phv-hdb4-grip{
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 3px #fff, 0 0 0 6px var(--wb-red);
}
/* BEFORE/AFTER pills: always visible, they carry the which-side-is-Weber read. */
.wb-scope .wb-phv-hdb4-pill{
  position:absolute; top:1rem; z-index:5; pointer-events:none; white-space:nowrap;
  font-family:var(--wb-display); font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .85rem; border-radius:999px;
}
.wb-scope .wb-phv-hdb4-pill--before{ left:clamp(1.25rem, 4vw, 4rem); background:rgba(20,22,26,.85); color:#b9bec6; border:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-phv-hdb4-pill--after{ right:clamp(1.25rem, 4vw, 4rem); background:var(--wb-red); color:#fff; box-shadow:0 8px 22px rgba(216,35,42,.4); }
/* One-time hint pill; retires on first grab. */
.wb-scope .wb-phv-hdb4-hint{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%); z-index:5; pointer-events:none;
  background:rgba(10,11,13,.85); color:#fff; border:1px solid rgba(216,35,42,.7); border-radius:999px;
  font-family:var(--wb-display); font-weight:700; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  padding:.45rem .9rem; transition:opacity .25s ease;
}
.wb-scope .wb-phv-hdb4-stage.is-used .wb-phv-hdb4-hint{ opacity:0; }

/* The accessible headline: hidden where the stage carries the visual H1,
   a static chrome H1 under the stage on phones. */
.wb-scope .wb-phv-hdb4-h1{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* The floating meeting card: the one bright object below the stage; the
   stamp lands once (.wb-js + .is-in keyed, motion-safe). */
.wb-scope .wb-phv-hdb4-card{
  position:relative; z-index:5; max-width:640px;
  margin:calc(-1 * clamp(1.6rem, 1rem + 2vw, 2.8rem)) auto 0;
  text-align:center;
}
.wb-scope .wb-phv-hdb4-card .wb-btn-row{ justify-content:center; }
.wb-scope .wb-phv-hdb4-card__head{ margin:0; font-family:var(--wb-display) !important; font-weight:800; font-size:clamp(1.25rem, 1rem + 1vw, 1.7rem); color:#fff; }
.wb-scope .wb-phv-hdb4-card__foot{ margin:1rem 0 0; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.18); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:rgba(238,241,245,.72); font-weight:700; }
.wb-scope .wb-phv-hdb4-stamp{ position:absolute; right:-16px; top:-26px; width:104px; height:auto; transform:rotate(8deg); pointer-events:none; filter:drop-shadow(0 10px 22px rgba(0,0,0,.5)); }
.wb-js .wb-scope .wb-phv-hdb4-card.is-in .wb-phv-hdb4-stamp{ animation:wb-hdb4-stamp .4s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
@keyframes wb-hdb4-stamp{ from{ opacity:0; transform:scale(1.6) rotate(8deg); } to{ opacity:1; transform:scale(1) rotate(8deg); } }
@media (prefers-reduced-motion: reduce){
  .wb-js .wb-scope .wb-phv-hdb4-card.is-in .wb-phv-hdb4-stamp{ animation:none; }
}

@media (max-width:760px){
  /* One AFTER panel (the table), two BEFORE notes, static H1 below. */
  .wb-scope .wb-phv-hdb4-stage{ height:clamp(320px, 46vh, 430px); }
  .wb-scope .wb-phv-hdb4-panels{ grid-template-columns:1fr; }
  .wb-scope .wb-phv-hdb4-panel--side{ display:none; }
  .wb-scope .wb-phv-hdb4-paper--invoice,
  .wb-scope .wb-phv-hdb4-paper--under,
  .wb-scope .wb-phv-hdb4-slip{ display:none; }
  .wb-scope .wb-phv-hdb4-paper--term{ left:5%; top:8%; width:44%; }
  .wb-scope .wb-phv-hdb4-portal{ left:52%; top:14%; width:42%; }
  .wb-scope .wb-phv-hdb4-h1x{ display:none; }
  .wb-scope .wb-phv-hdb4-pill--before .wb-phv-hdb4-pill__more{ display:none; }
  .wb-scope .wb-phv-hdb4-h1{
    position:static; width:auto; height:auto; margin:1.1rem 0 0; clip:auto; clip-path:none;
    overflow:visible; white-space:normal;
  }
  .wb-scope .wb-phv-hdb4-card{ margin-top:1.1rem; }
  .wb-scope .wb-phv-hdb4-stamp{ width:84px; right:-8px; top:-20px; }
}

/* ---- hdb-5: The Standing Invitation -------------------------------- */
.wb-scope .wb-phv-hdb5-grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items:center;
}
.wb-scope .wb-phv-hdb5-lead{ max-width:46rem; }

/* The oversized call pill: the primary CTA, phone-first, red ring. */
.wb-scope a.wb-phv-hdb5-call{
  position:relative; display:flex; align-items:center; gap:1rem; overflow:hidden;
  max-width:34rem; margin-top:clamp(1.2rem, .9rem + 1vw, 1.8rem);
  padding:1rem 1.4rem; border-radius:999px;
  background:rgba(14,16,22,.6); border:2px solid var(--wb-red); color:#fff; text-decoration:none;
  box-shadow:0 0 0 4px rgba(216,35,42,.22), 0 18px 40px -18px rgba(0,0,0,.7);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wb-scope a.wb-phv-hdb5-call:hover{ transform:translateY(-2px); box-shadow:0 0 0 5px rgba(216,35,42,.32), 0 22px 46px -18px rgba(0,0,0,.75); color:#fff; }
.wb-scope a.wb-phv-hdb5-call:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.wb-scope .wb-phv-hdb5-call__icon{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wb-red); color:#fff; font-size:1.15rem;
  box-shadow:0 8px 18px -6px rgba(216,35,42,.7);
}
.wb-scope .wb-phv-hdb5-call__txt strong{
  display:block; font-family:var(--wb-display); font-weight:800;
  font-size:clamp(1.1rem, .95rem + .9vw, 1.55rem); line-height:1.15; letter-spacing:-.01em;
}
.wb-scope .wb-phv-hdb5-call__txt em{
  display:block; margin-top:.3rem; font-style:normal; font-size:.85rem; line-height:1.4;
  color:rgba(238,241,245,.78);
}
/* One 2s sheen sweep after load (.wb-js + .is-in keyed), nothing loops. */
.wb-scope a.wb-phv-hdb5-call::after{
  content:""; position:absolute; top:0; bottom:0; left:-38%; width:30%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.26), transparent);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.wb-js .wb-scope a.wb-phv-hdb5-call.is-in::after{ animation:wb-hdb5-sheen 2s ease .8s 1 both; }
@keyframes wb-hdb5-sheen{
  0%{ transform:translateX(0) skewX(-18deg); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translateX(460%) skewX(-18deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .wb-js .wb-scope a.wb-phv-hdb5-call.is-in::after{ animation:none; }
}

.wb-scope .wb-phv-hdb5-or{ display:flex; align-items:center; gap:.8rem; max-width:34rem; margin:1rem 0; color:rgba(238,241,245,.55); }
.wb-scope .wb-phv-hdb5-or::before,
.wb-scope .wb-phv-hdb5-or::after{ content:""; flex:1 1 auto; border-top:1px solid rgba(255,255,255,.18); }
.wb-scope .wb-phv-hdb5-or span{ font-family:var(--wb-display); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.wb-scope .wb-phv-hdb5-quiet{ margin-top:1rem; }

/* Framed real-people photo (the build/26 framed-photo treatment, portrait). */
.wb-scope .wb-phv-hdb5-frame{ position:relative; max-width:400px; margin:0 0 0 auto; }
.wb-scope .wb-phv-hdb5-frame::before{
  content:""; position:absolute; inset:0; transform:translate(20px, 20px);
  border-radius:18px; background:var(--wb-red); z-index:0;
}
.wb-scope .wb-phv-hdb5-frame img{
  position:relative; z-index:1; display:block; width:100%; height:auto;
  aspect-ratio:3/4; object-fit:cover; border-radius:18px;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  outline:1px solid rgba(255,255,255,.12); outline-offset:-1px;
}

@media (max-width:900px){
  /* One column; the call pill jumps directly under the H1 (flex order) and
     the photo lands below the lead, per the locked mobile plan. */
  .wb-scope .wb-phv-hdb5-grid{ display:flex; flex-direction:column; align-items:stretch; }
  .wb-scope .wb-phv-hdb5-copy{ display:contents; }
  .wb-scope .wb-phv-hdb-5 .wb-kicker{ order:1; }
  .wb-scope .wb-phv-hdb-5 .wb-h1{ order:2; }
  .wb-scope a.wb-phv-hdb5-call{ order:3; margin-top:1.1rem; }
  .wb-scope .wb-phv-hdb5-lead{ order:4; margin-top:1.1rem; }
  .wb-scope .wb-phv-hdb5-media{ order:5; margin-top:1.2rem; }
  .wb-scope .wb-phv-hdb5-or{ order:6; }
  .wb-scope .wb-phv-hdb5-alt{ order:7; }
  .wb-scope .wb-phv-hdb5-quiet{ order:8; }
  .wb-scope .wb-phv-hdb5-frame{ margin:0 auto; max-width:340px; }
}

/* Switcher upgrade (owner 2026-07-04): rich info card + score sort. */
.wb-scope .wb-hero-switch--rich button::after{ display:none !important; }
.wb-hero-switch__info{ position:fixed; left:56px; width:240px; z-index:2147480001; background:rgba(14,16,22,.96); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:.75rem .85rem; box-shadow:0 16px 44px -12px rgba(0,0,0,.7); opacity:0; pointer-events:none; transition:opacity .12s ease; }
.wb-hero-switch__info.is-on{ opacity:1; }
.wb-hero-switch__info strong{ display:block; color:#fff; font-size:.85rem; line-height:1.25; }
.wb-hero-switch__score{ display:block; margin-top:.3rem; color:#ff5a61; font-weight:800; font-size:1.15rem; line-height:1; }
.wb-hero-switch__score em{ font-style:normal; font-weight:600; font-size:.68rem; color:rgba(255,255,255,.6); margin-left:.35rem; }
.wb-hero-switch__note{ display:block; margin-top:.4rem; color:rgba(255,255,255,.82); font-size:.76rem; line-height:1.45; }
.wb-scope .wb-hero-switch__sort{ width:28px; height:22px; padding:0; margin:2px 0 4px; border-radius:8px !important; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); font-size:11px; line-height:0; cursor:pointer; }
.wb-scope .wb-hero-switch__sort:hover{ background:rgba(255,255,255,.16); color:#fff; }
@media (max-width:767px){ .wb-hero-switch__info{ left:44px; width:200px; } }

/* ================================================================
   WORK / CASE STUDIES page-hero variants (skin prefix wrk)
   Briefs: website-overhaul/build/page-hero-briefs/brief-wrk.md
   (locked 2026-07-03), built 2026-07-04 UNDER THE OWNER STANDING
   RULES (build/38): no print-shop garnish as frame or identity
   (option 3 lost its crop marks, CMYK strip, and slug line; the
   gang sheet is an HTML/CSS collage of real work crops), heroes
   run tight, critical copy everywhere.
   Staged for merge into css/overhaul.css (image URLs are relative
   to css/). Band-level looks ride .wb-hero-vwrk-N on the section;
   content styles scope under .wb-phv-wrk-N. Variant 0 (shipped)
   and variant 1 (keeps the shipped dark band) need no band
   override. No em dashes anywhere.
   ================================================================ */

/* Every variant headline is a <p class="wb-h1"> (the real h1 lives in
   variant 0); fonts-modern pins p to Inter, so re-assert the display face. */
.wb-scope [class*="wb-phv-wrk-"] .wb-h1{ font-family:var(--wb-display) !important; }
@media (max-width:640px){
  /* Chrome text on small screens flattens to solid white (site rule). */
  .wb-scope [class*="wb-phv-wrk-"] .wb-h1.wb-metal-text{ background:none; -webkit-text-fill-color:currentColor; color:#fff; filter:none; }
}

/* ---- wrk-1: Receipts You Can Pull --------------------------------- */
/* Shipped dark band + balance layout kept. The three proof cells are
   DOORS (locked): underlined figure, trailing arrow, hover lift, and a
   44px-minimum tap target when they collapse to mobile chips. */
.wb-scope .wb-wrk1-proof{
  display:flex; flex-wrap:wrap; align-items:stretch;
  gap:clamp(.8rem, .6rem + 1vw, 1.4rem);
  max-width:46rem; margin-top:clamp(1.2rem, .9rem + 1vw, 1.8rem);
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:clamp(1rem, .8rem + .8vw, 1.4rem);
}
.wb-scope .wb-wrk1-cell{
  flex:1 1 170px; display:flex; flex-direction:column; gap:.3rem;
  padding:.65rem .8rem; border-radius:10px; text-decoration:none;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.wb-scope .wb-wrk1-cell:hover,
.wb-scope .wb-wrk1-cell:focus-visible{
  transform:translateY(-3px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.32);
}
.wb-scope .wb-wrk1-num{
  font-family:var(--wb-display); font-weight:800; line-height:1.05; letter-spacing:-.02em;
  font-size:clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); color:#fff;
  font-variant-numeric:tabular-nums;
  text-decoration:underline; text-decoration-color:var(--wb-red-lt);
  text-decoration-thickness:3px; text-underline-offset:.22em;
}
.wb-scope .wb-wrk1-label{ font-size:.88rem; line-height:1.4; color:rgba(255,255,255,.78); }
.wb-scope .wb-wrk1-label .fa-arrow-right{ color:var(--wb-red-lt); margin-left:.25em; font-size:.85em; }
.wb-scope .wb-wrk1-micro{ margin:.9rem 0 0; max-width:44rem; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.66); }
.wb-scope .wb-wrk1-micro a{ color:#ff8b90; text-decoration:underline; }
/* Framed-photo treatment on the client truck (build/26 pattern, local copy). */
.wb-scope .wb-wrk1-media img{
  display:block; width:100%; height:auto; border-radius:6px;
  border:10px solid #f7f6f2; box-shadow:0 26px 54px -22px rgba(0,0,0,.8);
  transform:rotate(1.4deg);
}
@media (max-width:700px){
  .wb-scope .wb-wrk1-cell{ flex:1 1 100%; flex-direction:row; align-items:center; gap:.7rem; min-height:44px; padding:.5rem .8rem; }
  .wb-scope .wb-wrk1-num{ font-size:1.35rem; flex:0 0 auto; }
}

/* ---- wrk-2: The DONE Board ----------------------------------------- */
/* Full dark honeycomb board with the red radial glow. The copy column
   sits under a hard left scrim so the chrome odometer and H1 always land
   on controlled pixels. */
.wb-scope .wb-hero-vwrk-2[data-wb-hero-band]{
  background:
    radial-gradient(120% 95% at 76% 0%, rgba(216,35,42,.30) 0%, rgba(216,35,42,0) 58%),
    #0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
.wb-scope .wb-wrk2-grid{
  display:grid; grid-template-columns:minmax(300px, 5fr) 7fr;
  gap:clamp(1.4rem, 1rem + 2vw, 3rem); align-items:center;
}
.wb-scope .wb-wrk2-copy{
  position:relative; padding:clamp(.9rem, .7rem + .8vw, 1.4rem);
  background:linear-gradient(100deg, rgba(6,7,9,.9) 0%, rgba(6,7,9,.62) 72%, rgba(6,7,9,0) 100%);
  border-radius:14px;
}
.wb-scope .wb-wrk2-kicker{ color:rgba(255,255,255,.82); }
.wb-scope .wb-wrk2-count{ margin:.4rem 0 .2rem; display:flex; flex-direction:column; gap:.1rem; }
.wb-scope .wb-wrk2-count__num{
  font-family:var(--wb-display); font-weight:900; line-height:1;
  font-size:clamp(2.4rem, 1.6rem + 3vw, 4rem); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.wb-scope .wb-wrk2-count__label{
  font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.wb-scope .wb-phv-wrk-2 .wb-h1{ font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height:1.08; color:#fff; }
.wb-scope .wb-wrk2-lead{ max-width:34rem; }
.wb-scope .wb-wrk2-phone{ margin:.9rem 0 0; font-size:.92rem; color:rgba(255,255,255,.66); }
.wb-scope .wb-wrk2-phone a{ color:#ff8b90; text-decoration:underline; }

/* THE BOARD: paper tickets, tilted, dimmed; the newest one paper-bright. */
.wb-scope .wb-wrk2-board{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(.7rem, .5rem + 1vw, 1.2rem); align-items:start;
}
.wb-scope .wb-wrk2-ticket{
  position:relative; display:block; text-decoration:none;
  background:#f6f4ee; border-radius:6px; padding:.4rem .4rem 1.7rem;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.75);
  transition:transform .2s ease, box-shadow .2s ease;
}
.wb-scope .wb-wrk2-ticket img{ display:block; width:100%; height:auto; border-radius:3px; filter:brightness(.5) saturate(.85); transition:filter .2s ease; }
.wb-scope .wb-wrk2-ticket__cap{
  position:absolute; left:.55rem; right:.55rem; bottom:.35rem;
  font-size:.74rem; font-weight:700; line-height:1.2; color:#3a4048;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wb-scope .wb-wrk2-ticket__chip{
  position:absolute; left:.65rem; bottom:2rem; max-width:calc(100% - 1.3rem);
  background:var(--wb-red); color:#fff; font-size:.72rem; font-weight:700; line-height:1.25;
  padding:.22rem .55rem; border-radius:5px; box-shadow:0 6px 14px -6px rgba(0,0,0,.6);
  opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease;
}
.wb-scope .wb-wrk2-ticket--chipon .wb-wrk2-ticket__chip,
.wb-scope .wb-wrk2-ticket:hover .wb-wrk2-ticket__chip,
.wb-scope .wb-wrk2-ticket:focus-visible .wb-wrk2-ticket__chip{ opacity:1; transform:none; }
.wb-scope .wb-wrk2-stamp{
  position:absolute; top:9%; right:7%; transform:rotate(-12deg);
  /* #111: DONE stamps in the geared face (owner request; span also carries .wb-wgsd).
     Weight 800 matches the single GearedSlab face so the slab is never faux-bolded. */
  font-family:'GearedSlab', var(--wb-display); font-weight:800; font-size:clamp(.9rem, .7rem + .7vw, 1.3rem);
  letter-spacing:.06em; color:#d8232a; border:3px solid #d8232a; border-radius:.2em;
  /* #129: GearedSlab's face sits ~.11em high in its em box, so with symmetric padding
     DONE hugged the top border. line-height:1 + this measured asymmetric padding centers
     the ink optically; totals (.75em vertical, .8em horizontal) keep the stamp box the
     exact same size as before. */
  line-height:1; padding:.525em .385em .225em .415em; opacity:.9; pointer-events:none;
}
/* Tilts: no two neighbors lean the same way. */
.wb-scope .wb-wrk2-ticket--2{ transform:rotate(-2.2deg); }
.wb-scope .wb-wrk2-ticket--3{ transform:rotate(1.8deg); }
.wb-scope .wb-wrk2-ticket--4{ transform:rotate(1.4deg); }
.wb-scope .wb-wrk2-ticket--5{ transform:rotate(-1.6deg); }
.wb-scope .wb-wrk2-ticket--6{ transform:rotate(2.1deg); }
.wb-scope .wb-wrk2-ticket--7{ transform:rotate(-1.2deg); }
.wb-scope .wb-wrk2-ticket--8{ transform:rotate(1.6deg); }
.wb-scope .wb-wrk2-ticket:hover,
.wb-scope .wb-wrk2-ticket:focus-visible{ transform:translateY(-5px) rotate(0deg); box-shadow:0 26px 48px -18px rgba(0,0,0,.85); z-index:3; }
.wb-scope .wb-wrk2-ticket:hover img,
.wb-scope .wb-wrk2-ticket:focus-visible img{ filter:brightness(.96) saturate(1); }
/* The newest story: paper-bright, front of the stack, stamp hand poised. */
.wb-scope .wb-wrk2-ticket--new{ transform:rotate(-1.2deg) scale(1.04); z-index:2; box-shadow:0 30px 56px -20px rgba(0,0,0,.9); }
.wb-scope .wb-wrk2-ticket--new img{ filter:none; }
.wb-scope .wb-wrk2-hand{
  /* #111: the asset has a light-grey shadow wedge baked into its bottom ~5.5%
     (stamp-hand-300.webp rows 190-201); clip it off. The old width clamp and
     drop-shadow were dead code (outranked by .wb-wrk2-ticket img rules), so the
     locked hero has always shown the 220px no-CSS-shadow hand; dropping them. */
  position:absolute; right:-2.4rem; bottom:-1.9rem; height:auto;
  pointer-events:none; clip-path:inset(0 0 6% 0);
}
/* One-time stamp cascade when the variant flips in; static under reduced motion. */
@keyframes wrk2-thump{
  from{ opacity:0; transform:rotate(-12deg) scale(2.2); }
  70%{ opacity:1; transform:rotate(-12deg) scale(.92); }
  to{ opacity:.9; transform:rotate(-12deg) scale(1); }
}
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-stamp{ animation:wrk2-thump .32s cubic-bezier(.2,1.3,.4,1) both; }
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-ticket--2 .wb-wrk2-stamp{ animation-delay:.12s; }
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-ticket--3 .wb-wrk2-stamp{ animation-delay:.22s; }
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-ticket--4 .wb-wrk2-stamp{ animation-delay:.32s; }
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-ticket--5 .wb-wrk2-stamp{ animation-delay:.4s; }
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-ticket--6 .wb-wrk2-stamp{ animation-delay:.48s; }
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-ticket--7 .wb-wrk2-stamp{ animation-delay:.55s; }
.wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-ticket--8 .wb-wrk2-stamp{ animation-delay:.62s; }
@media (prefers-reduced-motion:reduce){
  .wb-js .wb-hero-var.is-active .wb-phv-wrk-2 .wb-wrk2-stamp{ animation:none !important; }
}
/* Mobile (locked): the board recasts as a three-ticket swipe strip of the
   newest studies, full brightness, chips at rest; copy stacks first. */
@media (max-width:820px){
  .wb-scope .wb-wrk2-grid{ grid-template-columns:1fr; }
  .wb-scope .wb-wrk2-copy{ background:none; padding:0; }
  .wb-scope .wb-wrk2-board{
    display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; padding:.4rem .2rem 1rem;
  }
  .wb-scope .wb-wrk2-ticket{ flex:0 0 76%; max-width:320px; scroll-snap-align:start; transform:none !important; }
  .wb-scope .wb-wrk2-ticket img{ filter:none; }
  .wb-scope .wb-wrk2-ticket .wb-wrk2-ticket__chip{ opacity:1; transform:none; }
  .wb-scope .wb-wrk2-ticket:nth-child(n+4){ display:none; }
  .wb-scope .wb-wrk2-hand{ display:none; }
  /* #133: the right cell flattens on mobile so count + board stack in the single column */
  .wb-scope .wb-wrk2-right{ display:contents; }
  .wb-scope .wb-wrk2-right .wb-wrk2-count{ order:-1; margin:.4rem 0 .2rem; }
}

/* #133 + #134 (owner 2026-07-14): the live count moved from the left copy column
   into the right board column to balance the two column heights, and the stamp-hand
   moved to the far-right edge so it reads as reaching in from off-frame. */
.wb-scope .wb-wrk2-grid{ align-items:stretch; }
.wb-scope .wb-wrk2-right{
  position:relative; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:clamp(.8rem, .5rem + 1.4vw, 1.6rem);
}
.wb-scope .wb-wrk2-right .wb-wrk2-count{ margin:0; align-items:flex-start; }
.wb-scope .wb-wrk2-hand{
  right:clamp(-2.4rem, -2.4vw, -1rem); bottom:auto; top:clamp(4.8rem, 3rem + 7%, 8rem);
  width:clamp(160px, 13vw, 240px); height:auto; z-index:4;
}

/* ---- wrk-3: Check Our Work, the gang sheet under the loupe ---------- */
/* Near-black table; the sheet is the only paper in the room. NO printer
   furniture (standing rule 1): no crop marks, no control strip, no slug. */
.wb-scope .wb-hero-vwrk-3[data-wb-hero-band]{
  background:#0b0c10 url("../images/overhaul/tex-honeycomb-dark.webp") center/cover no-repeat !important;
}
.wb-scope .wb-wrk3-grid2col{
  display:grid; grid-template-columns:minmax(300px, 38fr) 62fr;
  gap:clamp(1.4rem, 1rem + 2.4vw, 3.2rem); align-items:center;
}
.wb-scope .wb-phv-wrk-3 .wb-h1{ font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height:1.08; }
.wb-scope .wb-wrk3-tally{
  margin:.9rem 0 0; font-size:.95rem; font-weight:700; color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums;
}
.wb-scope .wb-wrk3-ask{ max-width:30rem; margin-top:1rem; }
.wb-scope .wb-wrk3-micro{ margin:.8rem 0 0; font-size:.9rem; line-height:1.5; color:rgba(255,255,255,.66); max-width:30rem; }
.wb-scope .wb-wrk3-wgsd{ display:inline-block; margin-top:1rem; }
.wb-scope .wb-wrk3-wgsd img{ display:block; width:clamp(84px, 8vw, 116px); height:auto; opacity:.92; }

/* The sheet. Tilted paper, tight 4x2 collage of real 900x600 crops. */
.wb-scope .wb-wrk3-sheetwrap{ position:relative; }
.wb-scope .wb-wrk3-sheet{
  position:relative; transform:rotate(-2deg);
  background:#f6f4ee; border-radius:5px;
  padding:clamp(10px, .5rem + .8vw, 18px);
  box-shadow:0 36px 70px -26px rgba(0,0,0,.85), 0 12px 26px -12px rgba(0,0,0,.6);
  cursor:zoom-in; overflow:hidden;
}
.wb-scope .wb-wrk3-collage{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;
}
.wb-scope .wb-wrk3-tile{ display:block; position:relative; border-radius:2px; overflow:hidden; }
.wb-scope .wb-wrk3-tile img{ display:block; width:100%; height:auto; }
.wb-scope .wb-wrk3-tile:focus-visible{ outline:3px solid var(--wb-red); outline-offset:2px; }
/* One settle, 300ms, then only the visitor's hand moves. */
@keyframes wrk3-settle{
  from{ opacity:0; transform:rotate(-.6deg) translateY(-10px); }
  to{ opacity:1; transform:rotate(-2deg) translateY(0); }
}
.wb-js .wb-hero-var.is-active .wb-phv-wrk-3 .wb-wrk3-sheet{ animation:wrk3-settle .3s ease-out both; }
@media (prefers-reduced-motion:reduce){
  .wb-js .wb-hero-var.is-active .wb-phv-wrk-3 .wb-wrk3-sheet{ animation:none !important; }
}

/* THE LOUPE: chrome-ringed circular window onto the 2.4x duplicate collage.
   Pointer-events off, so it only ever reveals; JS drives its position. */
.wb-scope .wb-wrk3-loupe{
  position:absolute; width:150px; height:150px; border-radius:50%;
  overflow:hidden; pointer-events:none; z-index:5; top:0; left:0;
  border:3px solid #d9dde2;
  box-shadow:0 0 0 2px rgba(20,22,26,.55), 0 18px 34px -12px rgba(0,0,0,.7), inset 0 0 24px rgba(0,0,0,.28);
  background:#f6f4ee; opacity:0; transition:opacity .15s ease;
}
.wb-scope .wb-wrk3-loupe.is-on{ opacity:1; }
/* The faintest halftone screen inside the glass, an accent, never a frame. */
.wb-scope .wb-wrk3-loupe::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background-image:radial-gradient(rgba(24,24,28,.3) .8px, transparent 1.1px);
  background-size:5px 5px; opacity:.3; mix-blend-mode:multiply;
}
.wb-scope .wb-wrk3-zoom{ position:absolute; top:0; left:0; will-change:transform; }
/* The duplicate must be a TRUE 2.4x of the base collage: JS scales the tile
   widths (offsetWidth * 2.4), so the grid gap scales with it or the glass
   drifts up to 6px at right/lower tile borders. */
.wb-scope .wb-wrk3-zoom .wb-wrk3-collage{ gap:calc(6px * 2.4); }
.wb-scope .wb-wrk3-ztile{ display:block; position:relative; overflow:hidden; border-radius:2px; }
.wb-scope .wb-wrk3-ztile img{ display:block; width:100%; height:auto; }
/* Grease-pencil receipts, visible only under the glass. */
.wb-scope .wb-wrk3-mark{
  position:absolute; left:4%; right:4%; bottom:5%;
  font-size:.72rem; font-weight:800; line-height:1.3; letter-spacing:.01em;
  color:#c11a21; background:rgba(246,244,238,.88);
  border-bottom:2px solid #c11a21; border-radius:3px;
  padding:.18rem .4rem; transform:rotate(-1.2deg);
}
/* Docked affordance chip: "the loupe is yours", fades on first move (JS). */
.wb-scope .wb-wrk3-hint{
  position:absolute; right:4%; bottom:4%; margin:0; z-index:6;
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; color:#2a2f36;
  background:rgba(255,255,255,.92); border-radius:999px; padding:.3rem .8rem .3rem .4rem;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5);
  transition:opacity .3s ease; pointer-events:none;
}
.wb-scope .wb-wrk3-hint img{ width:26px; height:26px; }
.wb-scope .wb-wrk3-hint.is-done{ opacity:0; }
html:not(.wb-js) .wb-scope .wb-wrk3-hint,
html:not(.wb-js) .wb-scope .wb-wrk3-loupe{ display:none; }
/* aria-live line for keyboard/AT users (visually hidden). */
.wb-scope .wb-wrk3-a11y{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* No-JS: the receipts as a plain linked caption strip under the sheet.
   With JS on it goes sr-only (NOT display:none) so AT keeps the brief's
   visually-hidden receipt list; JS drops its links from the tab order
   (tabindex=-1) so it adds no invisible tab stops. */
.wb-js .wb-scope .wb-wrk3-nojs{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.wb-scope .wb-wrk3-nojs{ margin-top:1rem; color:rgba(255,255,255,.8); font-size:.9rem; }
.wb-scope .wb-wrk3-nojs__head{ font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.76rem; color:rgba(255,255,255,.6); margin:0 0 .4rem; }
.wb-scope .wb-wrk3-nojs ul{ margin:0; padding:0 0 0 1.1rem; }
.wb-scope .wb-wrk3-nojs a{ color:#ff8b90; text-decoration:underline; }

/* Mobile tap-loupe overlay: the fixed circular glass + receipt + doors. */
.wb-scope .wb-wrk3-overlay{
  position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; padding:1.2rem;
  background:rgba(8,9,11,.94);
}
.wb-scope .wb-wrk3-overlay[hidden]{ display:none; }
.wb-scope .wb-wrk3-overlay__x{
  position:absolute; top:1rem; right:1rem; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; font-size:1.2rem;
}
.wb-scope .wb-wrk3-overlay__glass{
  width:min(76vw, 330px); aspect-ratio:1; border-radius:50%; overflow:hidden; position:relative;
  border:4px solid #d9dde2; box-shadow:0 0 0 3px rgba(20,22,26,.6), 0 24px 50px -18px rgba(0,0,0,.9);
  background:#f6f4ee;
}
.wb-scope .wb-wrk3-overlay__glass img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.35);
}
.wb-scope .wb-wrk3-overlay__glass::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background-image:radial-gradient(rgba(24,24,28,.3) .8px, transparent 1.1px);
  background-size:5px 5px; opacity:.3; mix-blend-mode:multiply;
}
.wb-scope .wb-wrk3-overlay__receipt{
  margin:0; max-width:30rem; text-align:center; color:#fff; font-weight:700; line-height:1.45;
}
.wb-scope .wb-wrk3-overlay__row{ display:flex; align-items:center; gap:.8rem; }
.wb-scope .wb-wrk3-overlay__nav{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff;
}
@media (max-width:900px){
  .wb-scope .wb-wrk3-grid2col{ grid-template-columns:1fr; }
  .wb-scope .wb-wrk3-sheet{ transform:none; cursor:auto; }
  .wb-js .wb-hero-var.is-active .wb-phv-wrk-3 .wb-wrk3-sheet{ animation:none; }
  .wb-scope .wb-wrk3-collage{ grid-template-columns:repeat(2, 1fr); }
  .wb-scope .wb-wrk3-hint,
  .wb-scope .wb-wrk3-loupe{ display:none; }
}

/* ---- wrk-4: Whose Story Sounds Like Yours? -------------------------- */
/* Near-black band; the photo backdrop deck + hard left scrim paint it.
   The active inner goes full-bleed so the backdrop can own the band. */
.wb-scope .wb-hero-vwrk-4[data-wb-hero-band]{ background:#0d0f13 !important; }
.wb-scope .wb-hero-vwrk-4[data-wb-hero-band] .wb-inner.wb-hero-var.is-active{ width:100%; max-width:none; }
.wb-scope .wb-phv-wrk-4{ position:relative; }
.wb-scope .wb-wrk4-bg{
  position:absolute; z-index:0; pointer-events:none; overflow:hidden;
  top:calc(-1 * (var(--wb-pad) + var(--wb-nav-h)) - 1rem);
  bottom:calc(-1 * var(--wb-pad) - 1rem);
  left:-1.25rem; right:-1.25rem;
}
.wb-scope .wb-wrk4-bg__ph{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s ease;
}
.wb-scope .wb-wrk4-bg__ph.is-on{ opacity:1; }
.wb-scope .wb-wrk4-scrim{
  position:absolute; inset:0;
  background:linear-gradient(95deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.82) 46%, rgba(8,9,11,.5) 100%);
}
.wb-scope .wb-wrk4-cols{
  position:relative; z-index:1; display:grid; grid-template-columns:minmax(300px, 8fr) 5fr;
  gap:clamp(1.4rem, 1rem + 2vw, 3rem); align-items:center;
  max-width:75rem; margin-inline:auto;
}
.wb-scope .wb-phv-wrk-4 .wb-h1{ font-size:clamp(1.9rem, 1.3rem + 2.1vw, 3rem); }
.wb-scope .wb-wrk4-chips{ margin-top:clamp(1rem, .8rem + .8vw, 1.5rem); max-width:44rem; }
.wb-scope .wb-wrk4-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.7rem; }
.wb-scope .wb-wrk4-row__label{
  flex:0 0 auto; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-right:.2rem;
}
.wb-scope .wb-wrk4-chip{
  display:inline-flex; align-items:center; min-height:44px; padding:.5rem 1rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.06); color:#fff; font-size:.92rem; font-weight:600;
  text-decoration:none; transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.wb-scope .wb-wrk4-chip:hover,
.wb-scope .wb-wrk4-chip:focus-visible{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.wb-scope .wb-wrk4-chip.is-on{ background:var(--wb-red); border-color:transparent; }
.wb-scope .wb-wrk4-cue{ margin:1rem 0 0; font-size:.92rem; font-weight:700; color:rgba(255,255,255,.78); }
/* The docked proof card. States stack in one grid cell so no tap ever
   shifts the layout; the tallest state reserves the height. */
.wb-scope .wb-wrk4-card{ position:relative; }
.wb-scope .wb-wrk4-card__head{
  margin:0 0 .6rem; font-size:.76rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.wb-scope .wb-wrk4-states{ display:grid; }
.wb-scope .wb-wrk4-state{
  grid-area:1 / 1; opacity:0; pointer-events:none; transition:opacity .15s ease;
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-start;
}
.wb-scope .wb-wrk4-state.is-on{ opacity:1; pointer-events:auto; }
.wb-scope .wb-wrk4-fig{
  font-family:var(--wb-display); font-weight:900; line-height:1;
  font-size:clamp(2rem, 1.5rem + 1.6vw, 2.9rem); color:#fff; letter-spacing:-.02em;
}
.wb-scope .wb-wrk4-count{ margin:0; font-weight:700; color:rgba(255,255,255,.85); font-variant-numeric:tabular-nums; }
.wb-scope .wb-wrk4-line{ margin:0; color:rgba(255,255,255,.8); line-height:1.5; }
.wb-scope .wb-wrk4-coin{
  width:clamp(110px, 11vw, 150px); height:auto; border-radius:10px;
  border:3px solid #f6f4ee; transform:rotate(-3deg);
  box-shadow:0 14px 28px -12px rgba(0,0,0,.8);
}
.wb-scope .wb-wrk4-phone{ margin:1rem 0 0; padding-top:.8rem; border-top:1px solid rgba(255,255,255,.16); font-size:.9rem; color:rgba(255,255,255,.7); }
.wb-scope .wb-wrk4-phone a{ color:#ff8b90; text-decoration:underline; }
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-wrk4-bg__ph,
  .wb-scope .wb-wrk4-state{ transition:none !important; }
}
@media (max-width:820px){
  .wb-scope .wb-wrk4-cols{ grid-template-columns:1fr; }
}
/* 390px (locked): ONE horizontally scrollable chip row, I RUN facets first,
   I NEEDED appended; the proof card already sits below in source order. */
@media (max-width:480px){
  .wb-scope .wb-wrk4-chips{
    display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:.5rem; padding-bottom:.5rem;
  }
  .wb-scope .wb-wrk4-row{ display:contents; }
  .wb-scope .wb-wrk4-chip{ flex:0 0 auto; }
  .wb-scope .wb-wrk4-row__label{ flex:0 0 auto; align-self:center; white-space:nowrap; }
}

/* ---- wrk-5: Drag the Before and After ------------------------------- */
/* Flat near-black room; the stage is the object. Tight (standing rule 3):
   the stage caps under 460px so the door card clears a 1280x800 fold. */
.wb-scope .wb-hero-vwrk-5[data-wb-hero-band]{ background:#101216 !important; }
.wb-scope .wb-wrk5-lead{ max-width:52rem; }
.wb-scope .wb-wrk5-stage{
  position:relative; width:100%; height:clamp(300px, 46vh, 440px);
  margin-top:clamp(.9rem, .7rem + .8vw, 1.4rem);
  border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85);
  background:#191c21;
}
.wb-scope .wb-wrk5-layer{ position:absolute; inset:0; }
.wb-scope .wb-wrk5-panels{
  position:absolute; inset:0; display:grid;
  grid-template-columns:1fr 1.15fr 1fr; gap:10px;
  padding:clamp(.8rem, .6rem + 1vw, 1.4rem);
}
.wb-scope .wb-wrk5-panel{ position:relative; margin:0; border-radius:10px; overflow:hidden; }
.wb-scope .wb-wrk5-panel img{ width:100%; height:100%; object-fit:cover; display:block; }
.wb-scope .wb-wrk5-cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem .6rem .45rem;
  font-size:.78rem; font-weight:700; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.74));
}
/* BEFORE: generic, unattributed, gray. Sits ON TOP, clipped to the LEFT of
   the seam; the real color AFTER lies full beneath it. */
.wb-scope .wb-wrk5-layer--before{ z-index:2; clip-path:inset(0 calc(100% - var(--wipe)) 0 0); background:#26282d; }
.wb-scope .wb-wrk5-layer--before .wb-wrk5-panel img{ filter:grayscale(1) contrast(.9) brightness(.72); }
.wb-scope .wb-wrk5-layer--before::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url("../images/overhaul/tex-gray-blocks.webp") center/440px repeat;
  mix-blend-mode:multiply; opacity:.5;
}
.wb-scope .wb-wrk5-layer--after{ z-index:1; background:#15181d; }
.wb-scope .wb-wrk5-note{
  position:absolute; z-index:2; max-width:150px;
  background:#f7e27b; color:#4a4426; font-size:.74rem; font-weight:700; line-height:1.3;
  padding:.5rem .6rem; box-shadow:0 8px 16px -8px rgba(0,0,0,.6);
}
.wb-scope .wb-wrk5-note--1{ top:12%; left:6%; transform:rotate(-4deg); }
.wb-scope .wb-wrk5-note--2{ top:52%; left:20%; transform:rotate(3deg); }
.wb-scope .wb-wrk5-note--3{ top:26%; left:33%; transform:rotate(-2deg); }
/* Load-bearing accuracy chip (locked). */
.wb-scope .wb-wrk5-drama{
  position:absolute; z-index:2; top:4%; left:4%;
  background:rgba(10,11,13,.85); color:#fff; font-size:.72rem; font-weight:700;
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.28rem .7rem;
}
/* The H1 lives in BOTH layers so it flips at the seam: dead gray on the
   before, chrome on the after. Both copies are aria-hidden; the accessible
   one renders below the stage. */
.wb-scope .wb-wrk5-h1x{
  position:absolute; z-index:3; left:4%; right:4%; bottom:9%;
  margin:0; font-family:var(--wb-display); font-weight:900; line-height:1.1;
  font-size:clamp(1.3rem, 1rem + 1.6vw, 2.2rem); letter-spacing:-.01em;
  color:#7c8087;
}
.wb-scope .wb-wrk5-h1x.wb-metal-text{ color:inherit; }
.wb-scope .wb-wrk5-h1{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* The seam. The full-bleed range is pointer-fine only (locked); touch gets
   the visible 44px grip. No-JS never renders a dead control. */
.wb-scope .wb-wrk5-range{
  position:absolute; inset:0; z-index:4; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
html:not(.wb-js) .wb-scope .wb-wrk5-range{ display:none; }
/* No-JS also drops the grip and the "Drag it" hint (both dead without JS);
   the bare seam line stays as the static 55% split marker. JS-on keeps the
   grip everywhere: it is the touch drag control, so no pointer:coarse gate. */
html:not(.wb-js) .wb-scope .wb-wrk5-grip,
html:not(.wb-js) .wb-scope .wb-wrk5-hint{ display:none; }
@media (pointer:coarse){ .wb-scope .wb-wrk5-range{ display:none; } }
.wb-scope .wb-wrk5-seam{
  position:absolute; z-index:5; top:0; bottom:0; left:var(--wipe); width:3px;
  background:#fff; box-shadow:0 0 14px rgba(0,0,0,.6); pointer-events:none;
  transform:translateX(-1.5px);
}
.wb-scope .wb-wrk5-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--wb-red); color:#fff; font-size:1rem;
  border:2px solid #fff; box-shadow:0 10px 22px -8px rgba(0,0,0,.7);
  pointer-events:auto; touch-action:none; cursor:grab;
}
.wb-scope .wb-wrk5-pill{
  position:absolute; z-index:5; bottom:4%; pointer-events:none;
  font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; padding:.3rem .8rem;
}
.wb-scope .wb-wrk5-pill--before{ left:4%; background:rgba(10,11,13,.8); color:#c9cdd3; border:1px solid rgba(255,255,255,.3); }
.wb-scope .wb-wrk5-pill--after{ right:4%; background:var(--wb-red); color:#fff; }
.wb-scope .wb-wrk5-hint{
  position:absolute; z-index:5; left:50%; bottom:4%; transform:translateX(-50%);
  background:rgba(255,255,255,.92); color:#1d2025; font-size:.78rem; font-weight:800;
  border-radius:999px; padding:.32rem .9rem; pointer-events:none;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5); transition:opacity .3s ease;
}
.wb-scope .wb-wrk5-hint.is-hidden{ opacity:0; }
/* The door card: overlaps the stage bottom, one clear primary. */
.wb-scope .wb-wrk5-card{
  position:relative; z-index:6; display:flex; align-items:center;
  gap:clamp(1rem, .8rem + 1vw, 1.6rem);
  max-width:62rem; margin:-52px auto 0;
  background:#15181d; border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:clamp(1rem, .8rem + 1vw, 1.5rem);
  box-shadow:0 26px 52px -22px rgba(0,0,0,.9);
}
.wb-scope .wb-wrk5-wgsd{ flex:0 0 auto; width:clamp(84px, 8vw, 112px); height:auto; }
.wb-scope .wb-wrk5-card__result{ margin:0 0 .8rem; color:rgba(255,255,255,.88); line-height:1.55; }
.wb-scope .wb-wrk5-card__result strong{ color:#fff; }
.wb-scope .wb-wrk5-card__micro{ margin:.8rem 0 0; font-size:.9rem; color:rgba(255,255,255,.66); }
.wb-scope .wb-wrk5-card__micro a{ color:#ff8b90; text-decoration:underline; }
@keyframes wrk5-pulse{
  0%{ transform:scale(1); box-shadow:0 26px 52px -22px rgba(0,0,0,.9); }
  45%{ transform:scale(1.015); box-shadow:0 26px 52px -18px rgba(216,35,42,.55); }
  100%{ transform:scale(1); box-shadow:0 26px 52px -22px rgba(0,0,0,.9); }
}
.wb-scope .wb-wrk5-card.is-pulse{ animation:wrk5-pulse .6s ease 1; }
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-wrk5-card.is-pulse{ animation:none !important; }
}
/* Mobile: one panel (the ink towers), two notes, card in flow. The static
   chrome H1 renders under the stage. */
@media (max-width:760px){
  .wb-scope .wb-wrk5-panels{ grid-template-columns:1fr; }
  .wb-scope .wb-wrk5-panel--karns,
  .wb-scope .wb-wrk5-panel--booth{ display:none; }
  .wb-scope .wb-wrk5-note--3{ display:none; }
  .wb-scope .wb-wrk5-h1x{ display:none; }
  .wb-scope .wb-wrk5-h1{
    position:static !important; width:auto; height:auto; margin:1.2rem 0 0; padding:0;
    overflow:visible; clip:auto; clip-path:none; white-space:normal;
    font-size:clamp(1.5rem, 7vw, 2.1rem); line-height:1.1;
  }
  .wb-scope .wb-wrk5-stage{ height:clamp(260px, 42vh, 360px); }
  .wb-scope .wb-wrk5-card{ flex-direction:column; align-items:flex-start; margin-top:1rem; }
}


/* ---- Variant skin 19 "What Needs Done" (build/39 instant-path, switcher
   slot 16). The two-tap qualifier: a chrome question, two chip rows, and a
   right rail holding the WGSD lockup plate + the path card. Tap 1 crossfades
   the two stacked CSS backdrops and reveals the dated retention slug; tap 2
   stamps the lockup over to the matching family art and composes the card.
   Standing rules carried in: no print garnish anywhere (the frame is photo,
   type, chips), the copy column owns a near-opaque left veil so legibility
   never depends on the photo or on reveal, the zero-tap card already docks
   years + live jobs + retention + phone, and the whole thing stays TIGHT
   (one viewport at 1280). fonts-modern pins p to Inter with !important,
   hence the var(--wb-display) re-assertions on p-based labels. */

/* Band level: hide the shared brand video + scrim (this concept is a photo
   qualifier, no video); near-black ground. !important needed because the
   section carries an inline background-image poster. */
.wb-scope .wb-hero-v19 .wb-band__video-wrap,
.wb-scope .wb-hero-v19 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v19.wb-band--video{ background:#0a0c11 !important; }
.wb-scope .wb-hero-v19 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--19{ position:relative; }
.wb-scope .wb-hv--19 [hidden]{ display:none !important; }

/* THE BACKDROP: two stacked full-bleed layers so an industry tap crossfades
   in 400ms. CSS backgrounds, never <img>, so nothing loads while the variant
   is hidden in the switcher; layer B's image is set by initHeroV19 only
   after the file has actually loaded (no half-painted swap). */
.wb-scope .wb-hv--19 .wb-hv19-bg__lay{
  position:absolute; z-index:0; left:calc(50% - 50vw); right:calc(50% - 50vw); top:-24rem; bottom:0;
  background-color:#0a0c11; background-size:cover; background-position:center 30%;
  opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.wb-scope .wb-hv--19 .wb-hv19-bg__lay.is-on{ opacity:1; }
.wb-scope .wb-hv--19 .wb-hv19-bg__a{ background-image:url("../images/overhaul/hero37/ind-bd-team-1400.webp"); }

/* The legibility guarantee: a heavy left column + bottom vignette OVER the
   photo. Copy contrast is set here, not by whichever backdrop is up. */
.wb-scope .wb-hv--19 .wb-hv19-veil{
  position:absolute; z-index:1; left:calc(50% - 50vw); right:calc(50% - 50vw); top:-24rem; bottom:0;
  background:
    linear-gradient(90deg, rgba(6,8,12,.94) 0%, rgba(6,8,12,.84) 34%, rgba(8,10,14,.5) 62%, rgba(6,8,12,.68) 100%),
    linear-gradient(180deg, rgba(4,5,8,.55), rgba(4,5,8,.18) 30%, rgba(6,8,12,.7) 100%);
  pointer-events:none;
}

/* THE GRID: copy column + the right rail. Kept tight (owner rule 3): the
   whole hero reads in one screen at 1280. */
.wb-scope .wb-hv--19 .wb-hv19-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(290px, 28vw, 372px);
  gap:clamp(1.4rem, 1rem + 2.4vw, 3.2rem);
  align-items:start;
  padding:clamp(.4rem, 1vw, 1rem) 0 clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
}

.wb-scope .wb-hv--19 .wb-hv19-kicker{ letter-spacing:.14em; }
.wb-scope .wb-hv--19 .wb-hv19-h1{
  margin-top:clamp(.5rem, .3rem + .8vw, 1rem);
  font-size:clamp(2.7rem, 1.9rem + 3.6vw, 4.6rem);
  line-height:.95; text-transform:uppercase; letter-spacing:.01em;
}
.wb-scope .wb-hv--19 .wb-hv19-lead{ max-width:48ch; margin-top:clamp(.7rem, .5rem + .8vw, 1.1rem); }

/* Chip groups. Labels are <p>; re-pin the display face past fonts-modern. */
.wb-scope .wb-hv--19 .wb-hv19-group{ margin-top:clamp(1rem, .7rem + 1.2vw, 1.7rem); }
.wb-scope .wb-hv--19 .wb-hv19-group__label{
  margin:0; font-family:var(--wb-display) !important; font-weight:800;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:#fff;
}
.wb-scope .wb-hv--19 .wb-hv19-group__label::before{
  content:""; display:inline-block; width:1.1rem; height:3px; margin:0 .55rem 3px 0;
  background:var(--wb-red); border-radius:2px; vertical-align:middle;
}
.wb-scope .wb-hv--19 .wb-hv19-chips{ display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin:.6rem 0 0; max-width:46rem; }
.wb-scope .wb-hv--19 .wb-hv19-chip{
  display:inline-flex; align-items:center; min-height:2.4rem; padding:.4rem 1.05rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.34);
  background:rgba(10,13,20,.5); color:#fff; text-decoration:none;
  font-family:var(--wb-display); font-weight:700; font-size:.92rem; line-height:1.2;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wb-scope .wb-hv--19 .wb-hv19-chip:hover,
.wb-scope .wb-hv--19 .wb-hv19-chip:focus-visible{
  border-color:var(--wb-red-lt); background:rgba(216,35,42,.22); color:#fff; transform:translateY(-1px);
}
.wb-scope .wb-hv--19 .wb-hv19-chip.is-sel{
  background:var(--wb-red-grad); border-color:transparent; transform:none;
  box-shadow:0 8px 22px rgba(216,35,42,.38);
}
.wb-scope .wb-hv--19 .wb-hv19-chip--all{ border-style:dashed; }
.wb-scope .wb-hv--19 .wb-hv19-chip--all.is-sel{ border-style:solid; }

/* The ask keeps its protected seat; z6 so the live dropdown clears the rail. */
.wb-scope .wb-hv--19 .wb-hv19-ask{ position:relative; z-index:6; margin-top:clamp(1.1rem, .8rem + 1.2vw, 1.8rem); max-width:44rem; }

/* RIGHT RAIL. */
.wb-scope .wb-hv--19 .wb-hv19-side{ position:relative; z-index:3; display:flex; flex-direction:column; gap:.9rem; }

/* The lockup plate: paper white so every non-reversed family PNG reads (the
   build/39 legibility risk, solved structurally). The stamp move is the
   page's one lavish moment; nothing here ever loops. */
.wb-scope .wb-hv--19 .wb-hv19-lockup{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:14px; padding:.8rem 1rem;
  height:clamp(118px, 7vw + 66px, 164px);
  box-shadow:0 18px 42px rgba(0,0,0,.5);
  transition:transform .18s ease;
}
.wb-scope .wb-hv--19 .wb-hv19-lockup:hover{ transform:translateY(-2px); }
.wb-scope .wb-hv--19 .wb-hv19-lockup img{ display:block; max-height:100%; width:auto; max-width:100%; }
.wb-scope .wb-hv--19 .wb-hv19-lockup img.is-stamp{ animation:wb19-stamp .22s ease-out 1; }
@keyframes wb19-stamp{ 0%{ transform:scale(1.09); } 100%{ transform:scale(1); } }

/* The path card: dark glass; its default state is the proof row, so the
   rails are on screen before any tap. */
.wb-scope .wb-hv--19 .wb-hv19-card{
  background:rgba(13,16,23,.84); border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:1rem 1.15rem 1.2rem;
  box-shadow:0 18px 42px rgba(0,0,0,.45);
}
.wb-scope .wb-hv--19 .wb-hv19-card.is-complete{ animation:wb19-ring .7s ease-out 1; }
@keyframes wb19-ring{
  0%{ box-shadow:0 18px 42px rgba(0,0,0,.45), 0 0 0 0 rgba(216,35,42,.55); }
  100%{ box-shadow:0 18px 42px rgba(0,0,0,.45), 0 0 0 18px rgba(216,35,42,0); }
}
.wb-scope .wb-hv--19 .wb-hv19-card__tag{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin:0;
  font-family:var(--wb-display) !important; font-weight:800; font-size:.76rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--wb-red-lt);
}
.wb-scope .wb-hv--19 .wb-hv19-card__hint{
  font-weight:600; letter-spacing:.08em; text-transform:none;
  color:rgba(255,255,255,.55); font-size:.74rem; text-align:right;
}
.wb-scope .wb-hv--19 .wb-hv19-card__fig{ margin:.7rem 0 0; }
.wb-scope .wb-hv--19 .wb-hv19-card__fig img{
  display:block; width:100%; height:clamp(120px, 10vw + 60px, 160px);
  object-fit:cover; border-radius:10px;
}
.wb-scope .wb-hv--19 .wb-hv19-card__fig figcaption{
  margin-top:.45rem; font-size:.78rem; line-height:1.35; color:rgba(255,255,255,.82);
}
.wb-scope .wb-hv--19 .wb-hv19-ret{
  display:flex; align-items:center; gap:.65rem; margin:.75rem 0 0;
  font-size:.85rem; line-height:1.4; color:#fff;
}
.wb-scope .wb-hv--19 .wb-hv19-ret__coin{
  flex:none; width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.35);
}
/* Proof row: the shared receipts, compacted for the card. Once a dated
   retention slug is up, the generic third cell stands down. */
.wb-scope .wb-hv--19 .wb-hv19-proof{ margin-top:.85rem; padding-top:.75rem; gap:.55rem .9rem; max-width:none; }
.wb-scope .wb-hv--19 .wb-hv19-proof .wb-hv-proof__cell{ flex:1 1 110px; min-width:104px; }
.wb-scope .wb-hv--19 .wb-hv19-proof .wb-hv-proof__num{ font-size:clamp(1.3rem, 1.05rem + .8vw, 1.7rem); }
.wb-scope .wb-hv--19 .wb-hv19-proof .wb-hv-proof__label{ font-size:.66rem; }
.wb-scope .wb-hv--19 .wb-hv19-proof .wb-hv19-proof__ret{ flex:1.6 1 100%; }
.wb-scope .wb-hv--19 .wb-hv19-proof .wb-hv19-proof__ret .wb-hv-proof__label{ max-width:30ch; }
.wb-scope .wb-hv--19 .wb-hv19-card.has-ind .wb-hv19-proof__ret{ display:none; }

/* The card's one primary action is the phone (radical reachability). */
.wb-scope .wb-hv--19 .wb-hv19-call{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  margin-top:1rem; padding:.78rem 1rem; border-radius:10px;
  background:var(--wb-red-grad); color:#fff; text-decoration:none;
  font-family:var(--wb-display); font-weight:800; font-size:1.02rem; letter-spacing:.02em;
  transition:filter .18s ease, transform .18s ease;
}
.wb-scope .wb-hv--19 .wb-hv19-call:hover{ filter:brightness(1.1); transform:translateY(-1px); color:#fff; }
.wb-scope .wb-hv--19 .wb-hv19-spoke{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.65rem;
  color:rgba(255,255,255,.85); font-size:.9rem; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3); align-self:flex-start; padding-bottom:1px;
}
.wb-scope .wb-hv--19 .wb-hv19-spoke:hover{ color:#fff; border-bottom-color:var(--wb-red-lt); }

/* MOBILE (spec: 390 plan). One column; the backdrop becomes a top layer
   behind kicker + H1 only, fading to solid so the chips sit on near-black;
   the lead trims to its first sentence; chips grow to 44px touch targets;
   the rail stacks inline after the ask (lockup plate, then the card). */
@media (max-width:900px){
  .wb-scope .wb-hv--19 .wb-hv19-grid{ grid-template-columns:minmax(0,1fr); gap:1.3rem; }
  .wb-scope .wb-hv--19 .wb-hv19-side{ max-width:31rem; }
}
@media (max-width:760px){
  .wb-scope .wb-hv--19 .wb-hv19-bg__lay,
  .wb-scope .wb-hv--19 .wb-hv19-veil{ top:-12rem; bottom:auto; height:52vh; }
  .wb-scope .wb-hv--19 .wb-hv19-veil{
    background:
      linear-gradient(180deg, rgba(6,8,12,.62) 0%, rgba(8,10,15,.55) 38%, rgba(10,12,17,.86) 72%, #0a0c11 96%);
  }
  .wb-scope .wb-hv--19 .wb-hv19-lead-trim{ display:none; }
  .wb-scope .wb-hv--19 .wb-hv19-chip{ min-height:44px; font-size:.95rem; }
  .wb-scope .wb-hv--19 .wb-hv19-lockup{ height:96px; padding:.6rem .8rem; }
}
@media (max-width:420px){
  .wb-scope .wb-hv--19 .wb-hv19-h1{ font-size:2.55rem; }
  .wb-scope .wb-hv--19 .wb-hv19-chips{ gap:.45rem .45rem; }
  .wb-scope .wb-hv--19 .wb-hv19-chip{ padding:.4rem .85rem; }
  .wb-scope .wb-hv--19 .wb-hv19-card{ padding:.9rem .95rem 1.05rem; }
}

/* Reduced motion: instant swaps, no stamp, no ring, no chip lift. The
   counter engine renders its final number on its own reduce path. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--19 .wb-hv19-bg__lay{ transition:none; }
  .wb-scope .wb-hv--19 .wb-hv19-chip,
  .wb-scope .wb-hv--19 .wb-hv19-lockup,
  .wb-scope .wb-hv--19 .wb-hv19-call{ transition:none; }
  .wb-scope .wb-hv--19 .wb-hv19-chip:hover{ transform:none; }
  .wb-scope .wb-hv--19 .wb-hv19-lockup img.is-stamp{ animation:none; }
  .wb-scope .wb-hv--19 .wb-hv19-card.is-complete{ animation:none; }
}


/* ---- Variant skin 20 "The Proofing Desk" (build/39 paste-up-desk, switcher
   slot 17). The homepage shot straight down at one charcoal worktable: the
   day's marketing as nine paper objects, all live HTML. Standing rules
   applied over the spec: NO crop marks, NO cyan pre-press grid, no press
   slugs anywhere (the surface is a marketing department's desk, print shows
   up once, as a because-clause tape caption); tape captions read live
   evidence and stay visible (no hover-only captions); heroes stay tight, so
   the desk sizes to its content instead of a forced 94vh. Discipline per the
   spec's own kitsch guard: one paper white (#faf9f6), exactly two shadow
   depths, one glow (on the job ticket, so the desk's only light points at
   the search), zero wood grain. fonts-modern pins p to Inter, hence the
   var(--wb-display) !important re-assertions on display-face paragraphs. */

/* Band level: hide the shared video + scrim; the desk IS the background.
   !important because the section carries an inline background-image poster. */
.wb-scope .wb-hero-v20 .wb-band__video-wrap,
.wb-scope .wb-hero-v20 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v20.wb-band--video{
	background:
		radial-gradient(90% 70% at 58% 42%, rgba(255,242,214,.045), transparent 62%),
		radial-gradient(130% 100% at 50% 6%, #202226 0%, #17181b 52%, #0e0f12 100%) !important;
}
.wb-scope .wb-hero-v20 .wb-inner.wb-hero__summary{ width:100%; }

/* THE DESK GRID. Two shadow tokens only (sh1 flat on the desk, sh2 lifted). */
.wb-scope .wb-hv--20{
	--wb-hv20-paper:#faf9f6;
	--wb-hv20-ink:#22252a;
	--wb-hv20-sh1:0 5px 14px rgba(0,0,0,.38), 0 1px 3px rgba(0,0,0,.3);
	--wb-hv20-sh2:0 16px 34px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.3);
	position:relative;
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	grid-template-rows:auto auto auto auto;
	align-items:start;
	gap:clamp(.75rem, .45rem + 1vw, 1.2rem);
	padding:clamp(.9rem, .5rem + 1.2vw, 1.6rem) 0 clamp(1.1rem, .7rem + 1.4vw, 1.9rem);
	text-align:left;
}
/* The coffee ring: pure CSS, the one wink the discipline allows. It sits on
   the bare desk in the slack under the proof sheet. */
.wb-scope .wb-hv--20::after{
	content:""; position:absolute; bottom:31%; left:37%; width:86px; height:78px;
	border:3px solid rgba(146,108,68,.16); border-radius:50%;
	filter:blur(.6px); transform:rotate(-8deg); pointer-events:none;
}

/* Row 1: the masking-tape kicker + the chrome numberer. */
.wb-scope .wb-hv20-tape{
	grid-column:1 / 8; grid-row:1; justify-self:start; align-self:center;
	margin:0; padding:.5rem .95rem; color:#4a4335; letter-spacing:.08em;
	background:linear-gradient(90deg, rgba(216,209,190,.82), rgba(224,218,201,.94) 12%, rgba(224,218,201,.94) 88%, rgba(216,209,190,.82));
	transform:rotate(-.6deg); box-shadow:var(--wb-hv20-sh1);
}
.wb-scope .wb-hv20-counter{
	grid-column:8 / 13; grid-row:1; justify-self:end; align-self:center;
	display:flex; align-items:baseline; gap:.6rem; margin:0; padding:.5rem .85rem;
	background:linear-gradient(180deg, #3a3d43, #24262b 55%, #303338);
	border-radius:8px; box-shadow:var(--wb-hv20-sh1), inset 0 1px 0 rgba(255,255,255,.14);
}
.wb-scope .wb-hv20-counter__num{
	font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-weight:700; font-size:clamp(1.2rem, 1rem + .8vw, 1.7rem); letter-spacing:.06em;
	color:#f3f4f6; text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.wb-scope .wb-hv20-counter__cap{ font-size:.78rem; line-height:1.25; color:rgba(255,255,255,.66); max-width:15em; }

/* Row 2-3 left: the wide proof sheet, taped at two corners. The H1 in ink.
   It spans both middle rows so the lit ticket and the memo slip stack to its
   right; the desk shows through in the slack below it (flat lays breathe). */
.wb-scope .wb-hv20-sheet{
	grid-column:1 / 7; grid-row:2 / 4; align-self:start; position:relative; z-index:2;
	background:var(--wb-hv20-paper); color:var(--wb-hv20-ink);
	padding:clamp(1rem, .7rem + 1vw, 1.6rem) clamp(1.1rem, .8rem + 1.2vw, 1.9rem);
	box-shadow:var(--wb-hv20-sh1); transform:rotate(-.35deg);
}
.wb-scope .wb-hv20-tapebit{
	position:absolute; width:92px; height:26px; top:-13px;
	background:rgba(226,220,203,.85); box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.wb-scope .wb-hv20-tapebit--tl{ left:8%; transform:rotate(-4deg); }
.wb-scope .wb-hv20-tapebit--tr{ right:8%; transform:rotate(3deg); }
.wb-scope .wb-hv20-h1{
	font-family:var(--wb-display) !important;
	color:var(--wb-hv20-ink); font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);
	margin:0 0 .55em;
}
.wb-scope .wb-hv20-lead{
	color:#3a3f47; font-size:clamp(.98rem, .9rem + .35vw, 1.14rem); line-height:1.55; margin:0;
}

/* The 1996 photo taped under the desk glass (desktop only), on the bottom
   proof row: the 30-year anchor, dated. */
.wb-scope .wb-hv20-glass{
	grid-column:8 / 10; grid-row:4; position:relative; margin:0;
	background:var(--wb-hv20-paper); padding:8px 8px 6px; box-shadow:var(--wb-hv20-sh1);
	transform:rotate(1deg); outline:1px dashed rgba(255,255,255,.22); outline-offset:5px;
}
.wb-scope .wb-hv20-glass::after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 70%, rgba(255,255,255,.09) 100%);
	pointer-events:none;
}
.wb-scope .wb-hv20-glass img{ display:block; width:100%; height:auto; filter:saturate(.82) contrast(.98); }
.wb-scope .wb-hv20-glass figcaption{ font-size:.78rem; line-height:1.35; color:#565b63; padding:.45rem .15rem .15rem; }

/* Row 2 right: THE LIT AREA. The desk's one light source, and the job
   ticket sits in it. z5 so the live dropdown clears the paper below. */
.wb-scope .wb-hv20-lit{ grid-column:7 / 13; grid-row:2; position:relative; z-index:5; padding:.4rem .4rem .6rem; }
.wb-scope .wb-hv20-lit::before{
	content:""; position:absolute; inset:-2.2rem -2.6rem -2rem;
	background:radial-gradient(62% 66% at 50% 46%, rgba(255,243,214,.17), rgba(255,243,214,.05) 62%, transparent 78%);
	pointer-events:none; z-index:0;
}
.wb-scope .wb-hv20-lit:focus-within::before{
	background:radial-gradient(62% 66% at 50% 46%, rgba(255,243,214,.23), rgba(255,243,214,.07) 62%, transparent 78%);
}
.wb-scope .wb-hv20-ticket{
	position:relative; z-index:1; background:var(--wb-hv20-paper); color:var(--wb-hv20-ink);
	padding:1rem 1.2rem 1.15rem; box-shadow:var(--wb-hv20-sh2);
	border-top:6px solid var(--wb-red);
}
.wb-scope .wb-hv20-ticket__head{
	display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem .9rem;
	margin:0 0 .55rem; padding-bottom:.5rem; border-bottom:1px solid rgba(34,37,42,.14);
	font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.8rem; letter-spacing:.04em;
	color:#565b63; text-transform:uppercase;
}
.wb-scope .wb-hv20-ticket__no{ font-weight:700; color:var(--wb-hv20-ink); }
.wb-scope .wb-hv20-ask{ max-width:none; margin-top:0; }
.wb-scope .wb-hv20-ask__q{ color:var(--wb-hv20-ink); font-family:var(--wb-display) !important; font-size:clamp(1.25rem, 1.05rem + .8vw, 1.7rem); }
.wb-scope .wb-hv20-ask .wb-hero-ask__row{ box-shadow:inset 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(34,37,42,.16); }
.wb-scope .wb-hv20-ask__note{ color:#565b63; }
.wb-scope .wb-hv20-ask__note a{ color:var(--wb-red); }
/* The red WGSD impression: lands on the ticket corner when the stamp fires
   (initHeroV20 adds .is-stamped before the GET goes out). The 1px red echo
   is the misregistration wink. */
.wb-scope .wb-hv20-impression{
	position:absolute; right:.7rem; bottom:.55rem; width:112px; opacity:0;
	transform:rotate(-6deg) scale(1.18); pointer-events:none; z-index:2;
}
.wb-scope .wb-hv20-impression img{
	display:block; width:100%; height:auto; opacity:.9;
	filter:drop-shadow(1px 0 0 rgba(216,35,42,.4));
}
.wb-scope .wb-hv20-lit.is-stamped .wb-hv20-impression{
	opacity:1; transform:rotate(-6deg) scale(1);
	transition:opacity .12s ease-out .22s, transform .16s cubic-bezier(.2,1.4,.4,1) .22s;
}
/* The stamp hand parked at the ticket's edge; the thump presses it toward
   the corner once, then it settles. */
.wb-scope .wb-hv20-stamp{
	position:absolute; right:-2.4rem; bottom:-1.6rem; width:clamp(150px, 12vw, 210px); height:auto;
	transform:rotate(8deg); filter:drop-shadow(0 10px 14px rgba(0,0,0,.45)); z-index:2; pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
	.wb-scope .wb-hv20-lit.is-stamped .wb-hv20-stamp{ animation:wbHv20Thump .42s cubic-bezier(.4,0,.2,1) both; }
	@keyframes wbHv20Thump{
		0%{ transform:rotate(8deg); }
		45%{ transform:rotate(2deg) translate(-2.2rem, -.4rem) scale(.96); }
		62%{ transform:rotate(2deg) translate(-2.2rem, -.4rem) scale(.96); }
		100%{ transform:rotate(8deg); }
	}
	/* The glow flickers on once when the variant lands; steady ever after. */
	.wb-scope .wb-hv20-lit::before{ animation:wbHv20Glow .7s ease-out both; }
	@keyframes wbHv20Glow{ 0%{ opacity:0; } 35%{ opacity:.45; } 55%{ opacity:.22; } 100%{ opacity:1; } }
}

/* The proofs: real work as paper on the desk, each one a link. */
.wb-scope .wb-hv20-proof{
	position:relative; display:block; background:var(--wb-hv20-paper);
	padding:8px 8px 10px; box-shadow:var(--wb-hv20-sh1); text-decoration:none;
	transition:transform .18s ease, box-shadow .18s ease;
}
.wb-scope .wb-hv20-proof:hover, .wb-scope .wb-hv20-proof:focus-visible{
	transform:translateY(-6px); box-shadow:var(--wb-hv20-sh2); z-index:3;
}
.wb-scope .wb-hv20-proof img{ display:block; width:100%; height:auto; object-fit:cover; }
.wb-scope .wb-hv20-proof__tape{
	position:absolute; left:50%; bottom:-.65rem; transform:translateX(-50%) rotate(-1.2deg);
	width:max-content; max-width:96%; padding:.28rem .6rem; font-size:.74rem; line-height:1.3;
	text-align:center; color:#4a4335; letter-spacing:.02em;
	background:linear-gradient(90deg, rgba(216,209,190,.85), rgba(224,218,201,.96) 12%, rgba(224,218,201,.96) 88%, rgba(216,209,190,.85));
	box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.wb-scope .wb-hv20-redpen{ font-style:italic; color:var(--wb-red); font-weight:700; text-decoration:underline wavy rgba(216,35,42,.55) 1px; text-underline-offset:2px; }
.wb-scope .wb-hv20-proof__tenure{
	position:absolute; top:-.6rem; right:-.6rem; display:grid; place-items:center;
	width:74px; height:74px; border-radius:50%; text-align:center;
	background:var(--wb-red); color:#fff; font-family:var(--wb-display);
	font-weight:800; font-size:.66rem; line-height:1.15; text-transform:uppercase; letter-spacing:.04em;
	padding:.5rem; box-shadow:var(--wb-hv20-sh1); transform:rotate(6deg);
}
.wb-scope .wb-hv20-proof--karns{ grid-column:1 / 4; grid-row:4; transform:rotate(-1.1deg); }
.wb-scope .wb-hv20-proof--karns:hover, .wb-scope .wb-hv20-proof--karns:focus-visible{ transform:rotate(-1.1deg) translateY(-6px); }

/* Row 3 right: the While You Were Out slip lands directly under the lit
   ticket, so the phone is one glance from the ask (and the thumb order on
   phones matches). */
.wb-scope .wb-hv20-memo{
	grid-column:8 / 12; grid-row:3; align-self:start; position:relative; display:block; z-index:2;
	background:#fff; color:#b8232a; padding:.7rem .95rem .8rem; text-decoration:none;
	transform:rotate(1deg); box-shadow:var(--wb-hv20-sh1);
	background-image:repeating-linear-gradient(180deg, transparent 0, transparent 25px, rgba(216,35,42,.16) 25px, rgba(216,35,42,.16) 26px);
	transition:transform .18s ease, box-shadow .18s ease;
}
.wb-scope .wb-hv20-memo:hover, .wb-scope .wb-hv20-memo:focus-visible{ transform:rotate(1deg) translateY(-6px); box-shadow:var(--wb-hv20-sh2); }
.wb-scope .wb-hv20-memo__head{
	display:block; font-family:var(--wb-display); font-weight:800; text-transform:uppercase;
	letter-spacing:.1em; font-size:.72rem; color:#b8232a;
	border-bottom:2px solid rgba(216,35,42,.5); padding-bottom:.3rem; margin-bottom:.45rem;
}
.wb-scope .wb-hv20-memo__line{ display:block; font-size:.86rem; line-height:1.4; color:#7c2a2e; }
.wb-scope .wb-hv20-memo__num{
	display:block; font-family:var(--wb-display); font-weight:800;
	font-size:clamp(1.12rem, 1rem + .5vw, 1.4rem); color:var(--wb-red); margin:.35rem 0 .25rem;
}
.wb-scope .wb-hv20-memo__foot{ display:block; font-size:.78rem; line-height:1.4; color:#7c2a2e; }

/* Row 4, the bottom proof row: Karns, the Wallover printout, the comic (the
   "yes, really" object), the 1996 photo under glass, and the Triangle booth.
   Photo heights are capped so the row stays shallow (heroes stay tight). */
.wb-scope .wb-hv--20 .wb-hv20-proof img{ max-height:172px; }
.wb-scope .wb-hv20-proof--wallover{ grid-column:4 / 6; grid-row:4; transform:rotate(-1.6deg); }
.wb-scope .wb-hv20-proof--wallover:hover, .wb-scope .wb-hv20-proof--wallover:focus-visible{ transform:rotate(-1.6deg) translateY(-6px); }
.wb-scope .wb-hv20-proof--comic{ grid-column:6 / 8; grid-row:4; transform:rotate(2.4deg); }
.wb-scope .wb-hv20-proof--comic:hover, .wb-scope .wb-hv20-proof--comic:focus-visible{ transform:rotate(2.4deg) translateY(-6px); }
.wb-scope .wb-hv20-proof--triangle{ grid-column:10 / 13; grid-row:4; transform:rotate(1.4deg); }
.wb-scope .wb-hv20-proof--triangle:hover, .wb-scope .wb-hv20-proof--triangle:focus-visible{ transform:rotate(1.4deg) translateY(-6px); }

/* The strip wrapper only exists for phones; desktop dissolves it so each
   proof takes its own grid seat. */
.wb-scope .wb-hv20-strip{ display:contents; }

/* ---- Phones + narrow (<900px): the flat lay becomes a stack of papers on
   the same desk, spec order: tape, sheet, counter, ticket, memo, then the
   swipe strip of exactly three proofs with captions always visible. The
   desktop-only corners (comic, order, 1996 glass, coffee ring, stamp hand)
   never render, and their lazy images never download. */
@media (max-width:899px){
	.wb-scope .wb-hv--20{ display:flex; flex-direction:column; align-items:stretch; }
	.wb-scope .wb-hv--20::after{ display:none; }
	.wb-scope .wb-hv20-tape{ order:1; align-self:flex-start; }
	.wb-scope .wb-hv20-sheet{ order:2; transform:none; }
	.wb-scope .wb-hv20-counter{ order:3; align-self:flex-start; }
	.wb-scope .wb-hv20-lit{ order:4; padding:.4rem 0 .6rem; }
	.wb-scope .wb-hv20-memo{ order:5; transform:none; }
	.wb-scope .wb-hv20-memo:hover, .wb-scope .wb-hv20-memo:focus-visible{ transform:translateY(-6px); }
	.wb-scope .wb-hv20-strip{
		order:6; display:flex; gap:.9rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
		scroll-snap-type:x mandatory; padding:.2rem .2rem 1rem; margin:0 -.2rem;
	}
	.wb-scope .wb-hv20-strip .wb-hv20-proof{ flex:0 0 72%; max-width:20rem; scroll-snap-align:start; transform:none; display:block; }
	.wb-scope .wb-hv20-strip .wb-hv20-proof img{ max-height:190px; width:100%; }
	.wb-scope .wb-hv20-proof__tape{ position:static; display:block; transform:none; max-width:none; white-space:normal; margin-top:.5rem; }
	.wb-scope .wb-hv20-proof__tenure{ top:-.5rem; right:.4rem; }
	.wb-scope .wb-hv20-glass, .wb-scope .wb-hv20-proof--comic{ display:none; }
	.wb-scope .wb-hv20-stamp{ display:none; }
	.wb-scope .wb-hv20-impression{ width:96px; right:.5rem; bottom:.4rem; }
	.wb-scope .wb-hv20-h1{ font-size:clamp(1.7rem, 1.3rem + 3.4vw, 2.4rem); }
}
@media (min-width:480px) and (max-width:899px){
	.wb-scope .wb-hv20-stamp{ display:block; right:.2rem; bottom:-1rem; width:130px; }
}

/* Reduced motion: everything pre-placed and steady; the impression lands
   without theater (initHeroV20 skips the delay entirely). */
@media (prefers-reduced-motion: reduce){
	.wb-scope .wb-hv20-proof, .wb-scope .wb-hv20-memo{ transition:none; }
	.wb-scope .wb-hv20-lit.is-stamped .wb-hv20-impression{ transition:none; }
}


/* ---- Variant skin 21 "The Tape" (build/39 raw-receipts, switcher slot 18).
   Today's job log printed on one strip of paper. Standing-rules build: a TIGHT
   two-column split, design-system copy + metal H1 on the left (so the tape
   never discards the system, Design seat 2's dock) and the evidence tape on
   the right: monospace ledger type, live totals, the shared ask as the tape's
   blank NEXT ON THE LOG line, and small real-work photo chips on the log rows
   (Content seat 2's "zero shown work" fix). The tape reads live evidence, a
   working ledger, never print-shop: no crop marks, no CMYK, no barcode; the
   only red is the WGSD stamp, the DONE status, and the go button. Print-in
   stagger + the DONE thump are pure CSS that plays when the variant becomes
   visible; reduced motion gets a finished static receipt. fonts-modern pins
   p/li/label to Inter with !important, hence the mono re-assertions. */

/* Band level: hide the shared video + scrim; flat dark desk with one soft
   radial glow that points at the tape (the page's light source aims at the
   evidence + the ask). !important: the section has an inline poster image. */
.wb-scope .wb-hero-v21 .wb-band__video-wrap,
.wb-scope .wb-hero-v21 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v21.wb-band--video{ background:#141416 !important; }
.wb-scope .wb-hero-v21.wb-band--video::before{ content:""; position:absolute; inset:0; background:radial-gradient(640px 480px at 68% 42%, rgba(255,246,228,.09), transparent 62%); pointer-events:none; z-index:1; }
.wb-scope .wb-hero-v21 .wb-inner.wb-hero__summary{ width:100%; }

/* The split. Tape column clamps narrow (a register tape is a strip, not a
   sheet); copy column takes the rest. Tight vertical padding per rule 3. */
.wb-scope .wb-hv--21{ display:grid; grid-template-columns:minmax(0, 1fr) clamp(21rem, 18rem + 11vw, 28.5rem); gap:clamp(1.6rem, 1rem + 3vw, 4rem); align-items:center; padding:clamp(.5rem, 1.2vw, 1.3rem) 0; }

/* Left, the design-system copy column. */
.wb-scope .wb-hv--21 .wb-hv21-h1{ font-family:var(--wb-display) !important; /* fonts-modern pins p to Inter */ font-size:clamp(1.85rem, 1.3rem + 2vw, 3rem); line-height:1.08; margin:clamp(.9rem, .6rem + .8vw, 1.3rem) 0 0; max-width:14em; }
.wb-scope .wb-hv--21 .wb-hv21-lead{ max-width:36em; }
.wb-scope .wb-hv--21 .wb-hv21-callrow{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:clamp(1.1rem, .8rem + 1vw, 1.6rem) 0 0; }
.wb-scope .wb-hv--21 .wb-hv21-call{ display:inline-flex; align-items:center; gap:.5em; background:var(--wb-red); color:#fff; font-weight:800; font-size:1.02rem; padding:.62rem 1.25rem; border-radius:999px; text-decoration:none; box-shadow:0 14px 30px -12px rgba(216,35,42,.55); transition:filter .15s ease; }
.wb-scope .wb-hv--21 .wb-hv21-call:hover{ filter:brightness(1.08); }
.wb-scope .wb-hv--21 .wb-hv21-call i{ font-size:.85em; }
.wb-scope .wb-hv--21 .wb-hv21-call-note{ color:rgba(255,255,255,.72); font-size:.88rem; }

/* Right, the tape. A strip of paper on the desk: slight lay-down tilt, one
   soft shadow, torn zigzag bottom (mask; unsupported browsers get a straight
   cut, fine), faint thermal banding + edge shading, sprocket dots up top.
   All the faintest accents; the CONTENT carries the object. */
.wb-scope .wb-hv--21 .wb-hv21-tape{ position:relative; transform:rotate(.5deg); filter:drop-shadow(0 24px 38px rgba(0,0,0,.5)); }
.wb-scope .wb-hv--21 .wb-hv21-paper{
	position:relative; background:#faf8f3; color:#23241f;
	padding:.9rem 1.1rem 1.4rem;
	-webkit-mask:conic-gradient(from -45deg at 50% calc(100% - 9px), #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
	mask:conic-gradient(from -45deg at 50% calc(100% - 9px), #0000, #000 1deg 89deg, #0000 90deg) 50% / 22px 100%;
}
.wb-scope .wb-hv--21 .wb-hv21-paper::before{ content:""; position:absolute; top:.4rem; left:.95rem; right:.95rem; height:5px; background-image:radial-gradient(circle 2px, rgba(20,20,22,.4) 0 1.4px, transparent 2px); background-size:13px 5px; pointer-events:none; }
.wb-scope .wb-hv--21 .wb-hv21-paper::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(31,26,18,.025) 0 2px, transparent 2px 5px), linear-gradient(90deg, rgba(0,0,0,.05), transparent 7%, transparent 93%, rgba(0,0,0,.05)); pointer-events:none; }
.wb-scope .wb-hv--21 .wb-hv21-paper > *{ position:relative; z-index:1; }

/* Ledger type: system monospace, zero webfont downloads. fonts-modern pins
   p/li/label to Inter (!important), so the stack must be asserted harder. */
.wb-scope .wb-hv--21 .wb-hv21-paper,
.wb-scope .wb-hv--21 .wb-hv21-paper p,
.wb-scope .wb-hv--21 .wb-hv21-paper li,
.wb-scope .wb-hv--21 .wb-hv21-paper dt,
.wb-scope .wb-hv--21 .wb-hv21-paper dd,
.wb-scope .wb-hv--21 .wb-hv21-paper label,
.wb-scope .wb-hv--21 .wb-hv21-paper input,
.wb-scope .wb-hv--21 .wb-hv21-paper button{ font-family:ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace !important; }

/* Masthead. The tel line is the tape's second-biggest type on purpose. */
.wb-scope .wb-hv--21 .wb-hv21-mast{ position:relative; padding-right:5.6rem; }
.wb-scope .wb-hv--21 .wb-hv21-shop{ margin:0; font-size:.92rem; font-weight:700; letter-spacing:.13em; }
.wb-scope .wb-hv--21 .wb-hv21-addr{ margin:.18rem 0 0; font-size:.64rem; letter-spacing:.08em; color:rgba(35,36,31,.72); }
.wb-scope .wb-hv--21 .wb-hv21-tel{ margin:.32rem 0 0; font-size:1.02rem; font-weight:700; letter-spacing:.04em; }
.wb-scope .wb-hv--21 .wb-hv21-tel a{ color:#23241f; text-decoration:none; border-bottom:2px solid rgba(216,35,42,.55); }
.wb-scope .wb-hv--21 .wb-hv21-tel a:hover{ color:var(--wb-red); }
.wb-scope .wb-hv--21 .wb-hv21-tel span{ display:block; margin-top:.14rem; font-size:.6rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:rgba(35,36,31,.7); }

/* The WGSD lockup as a red rubber stamp overprinting the corner: CSS filter
   pushes the existing dark PNG to stamp red, multiply blends it into the
   paper. Decorative red, not print garnish; it is the brand mark. */
.wb-scope .wb-hv--21 .wb-hv21-stamp{ position:absolute; top:-.35rem; right:-.4rem; width:clamp(4.4rem, 3.9rem + 1.4vw, 5.4rem); transform:rotate(-8deg); }
.wb-scope .wb-hv--21 .wb-hv21-stamp img{ display:block; width:100%; height:auto; mix-blend-mode:multiply; opacity:.85; filter:brightness(0) saturate(100%) invert(21%) sepia(93%) saturate(4500%) hue-rotate(350deg) brightness(94%) contrast(96%); }
.wb-scope .wb-hv--21 .wb-hv21-stamp:hover{ opacity:.92; }

.wb-scope .wb-hv--21 .wb-hv21-rule{ border:0; border-top:1px dashed rgba(35,36,31,.4); margin:.55rem 0 .5rem; }

/* Log header + the visible feed pause (over-5-seconds motion rule). */
.wb-scope .wb-hv--21 .wb-hv21-loghead{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.wb-scope .wb-hv--21 .wb-hv21-loghead p{ margin:0; font-size:.68rem; font-weight:700; letter-spacing:.14em; }
.wb-scope .wb-hv--21 .wb-hv21-pause{ border:1px solid rgba(35,36,31,.45); background:transparent; color:#54554e; font-size:.56rem; letter-spacing:.14em; padding:.14rem .5rem; border-radius:3px; cursor:pointer; }
.wb-scope .wb-hv--21 .wb-hv21-pause[aria-pressed="true"]{ background:#23241f; color:#faf8f3; }

/* The log rows. */
.wb-scope .wb-hv--21 .wb-hv21-log{ list-style:none; margin:.4rem 0 0; padding:0; }
.wb-scope .wb-hv--21 .wb-hv21-row{ display:grid; grid-template-columns:3.6em 6.4em minmax(0,1fr) auto 1.8rem; gap:.55em; align-items:center; font-size:.7rem; line-height:1.25; padding:.16rem 0; transition:opacity .6s ease; }
.wb-scope .wb-hv--21 .wb-hv21-row[hidden]{ display:none; }
.wb-scope .wb-hv--21 .wb-hv21-row.is-faded{ opacity:.45; }
.wb-scope .wb-hv--21 .wb-hv21-row__t{ color:rgba(35,36,31,.68); }
.wb-scope .wb-hv--21 .wb-hv21-row__job{ font-weight:700; }
.wb-scope .wb-hv--21 .wb-hv21-row__desc{ overflow-wrap:anywhere; }
.wb-scope .wb-hv--21 .wb-hv21-row__st{ text-align:right; font-size:.62rem; font-weight:700; letter-spacing:.09em; white-space:nowrap; color:rgba(35,36,31,.85); }
.wb-scope .wb-hv--21 .wb-hv21-row__st--done{ color:var(--wb-red); font-size:.7rem; }
/* The shown-work chips: small real photos, sharp and full color (evidence,
   not thermal-dither costume); click opens the shared lightbox. */
.wb-scope .wb-hv--21 .wb-hv21-row__pic{ display:block; width:1.8rem; height:1.8rem; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(35,36,31,.25), 0 2px 6px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .15s ease; }
.wb-scope .wb-hv--21 .wb-hv21-row__pic:hover{ transform:scale(1.14); box-shadow:0 0 0 1px rgba(35,36,31,.4), 0 6px 14px rgba(0,0,0,.28); }
.wb-scope .wb-hv--21 .wb-hv21-row__pic img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Totals: dotted leaders, tabular figures, the jobs subtotal set larger. */
.wb-scope .wb-hv--21 .wb-hv21-totals{ margin:.55rem 0 0; }
.wb-scope .wb-hv--21 .wb-hv21-tot{ display:flex; align-items:baseline; gap:.5em; padding:.1rem 0; }
.wb-scope .wb-hv--21 .wb-hv21-tot dt{ display:flex; flex:1; align-items:baseline; margin:0; font-size:.66rem; font-weight:700; letter-spacing:.09em; white-space:nowrap; }
.wb-scope .wb-hv--21 .wb-hv21-tot dt::after{ content:""; flex:1; min-width:1.5em; border-bottom:2px dotted rgba(35,36,31,.4); margin:0 .1em .2em .55em; }
.wb-scope .wb-hv--21 .wb-hv21-tot dd{ margin:0; font-weight:800; font-size:.92rem; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--21 .wb-hv21-tot--big dd{ font-size:1.12rem; }

/* The ask as the tape's blank line: shared component recolored for paper,
   square field with the red blinking caret. Sits above the footer (z5). */
.wb-scope .wb-hv--21 .wb-hv21-askrow{ position:relative; z-index:5; margin:.15rem 0 0; }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask{ max-width:none; margin-top:0; }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__q{ color:#23241f; font-size:.78rem; font-weight:700; letter-spacing:.12em; margin:0 0 .38rem; text-shadow:none; }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__q-em{ color:var(--wb-red); }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__row{ background:#fffdf8; border-radius:6px; box-shadow:none; border:1.5px solid #23241f; padding:.28rem .28rem .28rem .7rem; }
.wb-scope .wb-hv--21 .wb-hv21-prompt{ color:var(--wb-red); font-weight:800; font-size:.95rem; }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__input{ font-size:.9rem; padding:.42rem .2rem; caret-color:var(--wb-red); }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__go{ border-radius:5px; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.62rem .9rem; }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__results{ border-radius:8px; }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__note{ color:rgba(35,36,31,.78); font-size:.68rem; margin-top:.42rem; }
.wb-scope .wb-hv--21 .wb-hv21-askrow .wb-hero-ask__note a{ color:#23241f; }

/* Fine print. */
.wb-scope .wb-hv--21 .wb-hv21-fine{ margin-top:.6rem; }
.wb-scope .wb-hv--21 .wb-hv21-thanks{ margin:0 0 .25rem; text-align:center; font-size:.62rem; font-weight:700; letter-spacing:.2em; color:rgba(35,36,31,.85); }
.wb-scope .wb-hv--21 .wb-hv21-fine p:last-child{ margin:0; text-align:center; font-size:.58rem; line-height:1.55; color:rgba(35,36,31,.68); }
.wb-scope .wb-hv--21 .wb-hv21-fine a{ color:inherit; text-decoration:underline; }

/* Motion: the tape prints. Row stagger + the single DONE thump + the blinking
   prompt run only outside reduced motion; they replay when the switcher flips
   the variant visible (display toggling restarts the CSS animations). Under
   reduce (or with CSS animations off) everything is simply present. */
@media (prefers-reduced-motion: no-preference){
	.wb-scope .wb-hv--21 .wb-hv21-log .wb-hv21-row{ animation:wbHv21Print .3s ease backwards; }
	.wb-scope .wb-hv--21 .wb-hv21-log .wb-hv21-row:nth-child(2){ animation-delay:.12s; }
	.wb-scope .wb-hv--21 .wb-hv21-log .wb-hv21-row:nth-child(3){ animation-delay:.24s; }
	.wb-scope .wb-hv--21 .wb-hv21-log .wb-hv21-row:nth-child(4){ animation-delay:.36s; }
	.wb-scope .wb-hv--21 .wb-hv21-log .wb-hv21-row:nth-child(5){ animation-delay:.48s; }
	.wb-scope .wb-hv--21 .wb-hv21-log .wb-hv21-row:nth-child(6){ animation-delay:.6s; }
	.wb-scope .wb-hv--21 .wb-hv21-log .wb-hv21-row:nth-child(7){ animation-delay:.72s; }
	.wb-scope .wb-hv--21 .wb-hv21-row.is-printing{ animation:wbHv21Print .35s ease backwards; }
	.wb-scope .wb-hv--21 .wb-hv21-row__st--done{ animation:wbHv21Thump .32s cubic-bezier(.2, 1.6, .4, 1) 1.05s backwards; }
	.wb-scope .wb-hv--21 .wb-hv21-prompt{ animation:wbHv21Blink 1.1s steps(1) infinite; }
}
@keyframes wbHv21Print{ from{ opacity:0; transform:translateY(-5px); } }
@keyframes wbHv21Thump{ 0%{ transform:scale(1.55); opacity:0; } 55%{ opacity:1; } 100%{ transform:scale(1); } }
@keyframes wbHv21Blink{ 50%{ opacity:.15; } }

/* Stack: tape under the copy, straightened, capped at strip width. */
@media (max-width: 979px){
	.wb-scope .wb-hv--21{ grid-template-columns:1fr; gap:1.5rem; }
	.wb-scope .wb-hv--21 .wb-hv21-tape{ transform:none; max-width:30rem; width:100%; }
}
/* Phones: the receipt is already phone-shaped; trim the lead's middle
   sentence and the three --trim rows (breadth stays: circular TO PRINT
   PARTNER, mail, website, red DONE), per the build/39 mobile plan. */
@media (max-width: 480px){
	.wb-scope .wb-hv--21 .wb-hv21-lead-trim{ display:none; }
	.wb-scope .wb-hv--21 .wb-hv21-row--trim{ display:none; }
	.wb-scope .wb-hv--21 .wb-hv21-row{ grid-template-columns:6.4em minmax(0,1fr) auto 1.8rem; }
	.wb-scope .wb-hv--21 .wb-hv21-row__t{ display:none; }
	.wb-scope .wb-hv--21 .wb-hv21-paper{ padding:.95rem .85rem 1.5rem; }
	.wb-scope .wb-hv--21 .wb-hv21-mast{ padding-right:4.6rem; }
	.wb-scope .wb-hv--21 .wb-hv21-tot dt{ white-space:normal; }
}


/* ---- Variant skin 22 "The Ticket Machine" (build/39 playable-press,
   switcher slot 19). The 2008 job-ticket intake as a quiet steel panel the
   visitor operates: ask mounted as the ticket's first line, red PRINT MY
   TICKET button with real press travel, the ticket feeding out of a slot
   mouth with steps() dot-matrix chunking, an OPENED stamp thump, and an
   archive tray of four real stubs. Standing rules: marketing-first (no
   press imagery, no crop marks, no CMYK; the one print-native device is
   the ticket's perforation), two-ink steel + red, ONE texture per surface
   (honeycomb on the band, metallic-lines at low opacity on the faceplate),
   tight height. All motion is gated behind .is-motion, which initHeroV22
   adds only when the shared reduce flag is false, so no-JS and
   reduced-motion render a finished, fully readable machine. fonts-modern
   pins p to Inter, hence the !important mono re-assertions on ticket p's. */

/* Band level: no video for this skin (the owner's brand-video rule leaves
   video the default; this variant swaps to the honeycomb texture with a red
   LED glow rising off the machine side). !important beats the inline poster. */
.wb-scope .wb-hero-v22 .wb-band__video-wrap,
.wb-scope .wb-hero-v22 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v22.wb-band--video{
  background:
    radial-gradient(56rem 38rem at 76% 26%, rgba(216,35,42,.17), transparent 66%),
    linear-gradient(180deg, rgba(12,14,18,.86), rgba(12,14,18,.78) 55%, rgba(9,11,14,.93)),
    url("../images/overhaul/tex-honeycomb-dark.webp") center / cover no-repeat #10141a !important;
}

.wb-scope .wb-hv--22{ position:relative; padding:clamp(.6rem, .3rem + .8vw, 1.4rem) 0 clamp(1rem, .6rem + 1.2vw, 1.8rem); }

.wb-scope .wb-hv--22 .wb-hv22-kicker{ margin-bottom:clamp(.8rem, .5rem + .8vw, 1.4rem); }

/* Two columns, copy 5 / machine 6; single column under 960. Tight rows. */
.wb-scope .wb-hv--22 .wb-hv22-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(1.2rem, .8rem + 2vw, 3rem); align-items:start; }

/* Copy column. The H1 keeps the chrome treatment; the live number gets a red
   baseline tick and tabular digits so it reads as the machine's counter. */
.wb-scope .wb-hv--22 .wb-hv22-h1{ font-size:clamp(1.85rem, 1.3rem + 2.2vw, 3rem); line-height:1.08; margin:0 0 clamp(.7rem, .4rem + .8vw, 1.1rem); }
.wb-scope .wb-hv--22 .wb-hv22-num{ font-variant-numeric:tabular-nums; white-space:nowrap; border-bottom:3px solid var(--wb-red); }
.wb-scope .wb-hv--22 .wb-hv22-lead{ max-width:44ch; margin:0 0 clamp(.7rem, .4rem + .7vw, 1rem); }
.wb-scope .wb-hv--22 .wb-hv22-call{ color:#fff; font-size:clamp(.98rem, .9rem + .3vw, 1.1rem); font-weight:600; margin:0; }
.wb-scope .wb-hv--22 .wb-hv22-call a{ color:#fff; font-weight:800; white-space:nowrap; text-decoration:none; border-bottom:2px solid rgba(239,62,70,.75); transition:border-color .15s ease; }
.wb-scope .wb-hv--22 .wb-hv22-call a:hover{ border-bottom-color:#fff; }

/* THE MACHINE. Faceplate: brushed steel gradient with the metallic-lines
   texture held to a whisper (::before), one hairline highlight, no rivets.
   position+z-index 5 keeps the AJAX dropdown above the opaque bay below. */
.wb-scope .wb-hv--22 .wb-hv22-machine{ position:relative; }
.wb-scope .wb-hv--22 .wb-hv22-face{
  position:relative; z-index:5;
  background:linear-gradient(180deg, #3b414b 0%, #262b33 44%, #1d2128 100%);
  border:1px solid rgba(255,255,255,.14); border-radius:14px;
  padding:clamp(.9rem, .6rem + 1vw, 1.5rem) clamp(.9rem, .6rem + 1.2vw, 1.7rem) clamp(1rem, .7rem + 1vw, 1.5rem);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.16);
}
.wb-scope .wb-hv--22 .wb-hv22-face::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:url("../images/overhaul/tex-metallic-lines.webp") center / cover no-repeat;
  opacity:.16;
}
.wb-scope .wb-hv--22 .wb-hv22-face > *{ position:relative; }

.wb-scope .wb-hv--22 .wb-hv22-face__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }
.wb-scope .wb-hv--22 .wb-hv22-wgsd{ display:block; flex:0 1 auto; min-width:0; }
.wb-scope .wb-hv--22 .wb-hv22-wgsd img{ display:block; width:clamp(150px, 12vw + 60px, 220px); height:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* Status lamp: green at rest, red pulse while printing (pulse is motion-gated). */
.wb-scope .wb-hv--22 .wb-hv22-led{ display:inline-flex; align-items:center; gap:.4rem; margin:0; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.wb-scope .wb-hv--22 .wb-hv22-led__dot{ width:8px; height:8px; border-radius:50%; background:#3fd67e; box-shadow:0 0 8px rgba(63,214,126,.8); }
.wb-scope .wb-hv--22 .wb-hv22-led.is-printing .wb-hv22-led__dot{ background:var(--wb-red-lt); box-shadow:0 0 9px rgba(239,62,70,.9); }
.wb-scope .is-motion .wb-hv22-led.is-printing .wb-hv22-led__dot{ animation:wb-hv22-blink .5s steps(2, end) infinite; }
@keyframes wb-hv22-blink{ 50%{ opacity:.35; } }

/* Engraved label: light letterspaced caps with a dark under-shadow. */
.wb-scope .wb-hv--22 .wb-hv22-engrave{ margin:0 0 .8rem; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); text-shadow:0 1px 0 rgba(0,0,0,.75); }
.wb-scope .wb-hv--22 .wb-hv22-engrave [data-count]{ color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }

/* The ask: shared component skin kept intact so it reads SEARCH first (the
   UI/UX seat 2 objection); the slot only adds a recessed mouth shadow. */
.wb-scope .wb-hv--22 .wb-hero-ask__q{ color:#fff; }
.wb-scope .wb-hv--22 .wb-hero-ask__field{ position:relative; z-index:5; }
.wb-scope .wb-hv--22 .wb-hero-ask__row{ box-shadow:0 14px 30px -14px rgba(0,0,0,.75), inset 0 -2px 0 rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.35); }
.wb-scope .wb-hv--22 .wb-hero-ask__note{ margin-bottom:0; }

/* The red button: raised, real press travel on :active (user-initiated, so it
   stays under reduced motion). The base __go transition already covers it. */
.wb-scope .wb-hv--22 .wb-hv22-print{
  background:var(--wb-red-grad);
  box-shadow:0 4px 0 #7a0e15, 0 12px 22px -8px rgba(0,0,0,.6);
}
.wb-scope .wb-hv--22 .wb-hv22-print:hover{ filter:brightness(1.08); }
.wb-scope .wb-hv--22 .wb-hv22-print:active{ transform:translateY(3px); box-shadow:0 1px 0 #7a0e15, 0 6px 12px -6px rgba(0,0,0,.55); }

/* Empty-query nudge + press shudder, both motion-gated. */
.wb-scope .is-motion .wb-hv22-ask.is-nudge .wb-hero-ask__row{ animation:wb-hv22-shudder .16s linear 2; }
.wb-scope .is-motion.is-pressed .wb-hv22-face{ animation:wb-hv22-shudder .18s linear; }
@keyframes wb-hv22-shudder{ 25%{ transform:translateX(-1px); } 75%{ transform:translateX(1px); } }

/* THE BAY. The slot mouth (::before) overhangs the ticket, which slides out
   from under it; overflow:hidden clips the feed. */
.wb-scope .wb-hv--22 .wb-hv22-bay{ position:relative; z-index:1; overflow:hidden; padding:0 0 6px; margin-top:-8px; }
.wb-scope .wb-hv--22 .wb-hv22-bay::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); z-index:2;
  width:min(94%, 31rem); height:14px; border-radius:0 0 9px 9px;
  background:linear-gradient(180deg, #05070a, #262b33);
  box-shadow:0 3px 7px rgba(0,0,0,.55);
}

/* The ticket: warm paper, faint thermal banding, dot perforation at the
   bottom (the concept's one print-native device). Monospace so it reads as
   machine output; !important beats fonts-modern's Inter pin on p. */
.wb-scope .wb-hv--22 .wb-hv22-ticket{
  position:relative; width:min(88%, 29rem); margin:0 auto;
  background-color:#faf8f2;
  background-image:repeating-linear-gradient(180deg, rgba(31,34,40,.028) 0 1px, transparent 1px 5px), linear-gradient(180deg, #fdfcf8, #f7f5ee);
  color:#23262b; border-radius:0 0 3px 3px;
  padding:1rem 1.15rem .8rem;
  box-shadow:0 18px 34px -16px rgba(0,0,0,.75);
}
.wb-scope .wb-hv--22 .wb-hv22-ticket::after{
  content:""; display:block; height:3px; margin:.7rem -1.15rem -0.5rem;
  background:repeating-linear-gradient(90deg, rgba(35,38,43,.3) 0 6px, transparent 6px 13px);
}
.wb-scope .wb-hv--22 .wb-hv22-ticket p,
.wb-scope .wb-hv--22 .wb-hv22-ticket a{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important; }
.wb-scope .wb-hv--22 .wb-hv22-tk__row{ margin:0 0 .5rem; padding-bottom:.5rem; border-bottom:1px dashed rgba(35,38,43,.3); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#3a3e45; }
.wb-scope .wb-hv--22 .wb-hv22-tk__q{ margin:0 0 .55rem; font-size:.92rem; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.wb-scope .wb-hv--22 .wb-hv22-tk__head{ margin:0 0 .25rem; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9e1620; }
.wb-scope .wb-hv--22 .wb-hv22-tk__ln{ display:block; margin:0 0 .18rem; padding-left:1.05rem; position:relative; font-size:.88rem; font-weight:600; color:#23262b; text-decoration:none; border-bottom:0; line-height:1.45; }
.wb-scope .wb-hv--22 .wb-hv22-tk__ln::before{ content:">"; position:absolute; left:0; color:var(--wb-red); font-weight:800; }
.wb-scope .wb-hv--22 .wb-hv22-tk__ln:hover{ color:var(--wb-red-dk); text-decoration:underline; }
.wb-scope .wb-hv--22 .wb-hv22-tk__lane{ margin:.55rem 0 0; padding-top:.5rem; border-top:1px dashed rgba(35,38,43,.3); font-size:.88rem; font-weight:700; }
.wb-scope .wb-hv--22 .wb-hv22-tk__lane a{ color:#9e1620; text-decoration:none; white-space:nowrap; }
.wb-scope .wb-hv--22 .wb-hv22-tk__lane a:hover{ text-decoration:underline; }
.wb-scope .wb-hv--22 .wb-hv22-tk__fine{ margin:.3rem 0 0; font-size:.68rem; line-height:1.5; color:#6a6f77; }

/* The OPENED stamp: hidden until initHeroV22 stamps a printed ticket. */
.wb-scope .wb-hv--22 .wb-hv22-stamp{
  display:none; position:absolute; top:2rem; right:.8rem;
  padding:.18rem .5rem; border:3px double #c21f27; border-radius:4px;
  color:#c21f27; font-family:var(--wb-display) !important; font-size:.82rem; font-weight:900;
  letter-spacing:.2em; text-transform:uppercase;
  transform:rotate(-8deg); opacity:.88;
}
.wb-scope .wb-hv--22 .wb-hv22-ticket.is-stamped .wb-hv22-stamp{ display:inline-block; }
.wb-scope .is-motion .wb-hv22-ticket.is-stamped .wb-hv22-stamp{ animation:wb-hv22-thump .32s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes wb-hv22-thump{ from{ transform:rotate(-8deg) scale(1.55); opacity:0; } to{ transform:rotate(-8deg) scale(1); opacity:.88; } }

/* The feed: steps() gives the dot-matrix chunking; only under .is-motion, so
   reduce and no-JS always see a finished ticket. While printing, lines hide
   and initHeroV22 inks them in order. */
.wb-scope .is-motion .wb-hv22-bay.is-feeding .wb-hv22-ticket{ animation:wb-hv22-feed .95s steps(10, end); }
@keyframes wb-hv22-feed{ from{ transform:translateY(-94%); } to{ transform:translateY(0); } }
.wb-scope .is-motion .wb-hv22-ticket.is-printing .wb-hv22-tk__i{ opacity:0; }
.wb-scope .is-motion .wb-hv22-ticket.is-printing .wb-hv22-tk__i.is-on{ opacity:1; transition:opacity .12s steps(2, end); }

/* Torn: drops out with a small twist, motion-gated; reduce hides instantly. */
.wb-scope .is-motion .wb-hv22-ticket.is-torn{ transform:translateY(30px) rotate(2deg); opacity:0; transition:transform .45s ease-in, opacity .45s ease-in; }
.wb-scope .wb-hv--22 .wb-hv22-ticket.is-torn{ opacity:0; }
.wb-scope .wb-hv--22 .wb-hv22-bay.is-empty .wb-hv22-ticket{ display:none; }
.wb-scope .wb-hv--22 .wb-hv22-bay__reset{ width:min(88%, 29rem); margin:.4rem auto 0; padding:.8rem 1rem; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.28); border-radius:6px; color:rgba(255,255,255,.85); font-size:.88rem; }
.wb-scope .wb-hv--22 .wb-hv22-bay__reset a{ color:#fff; font-weight:700; white-space:nowrap; }

/* Tear control: plain, keyboard-first (the spec's drag demoted per clarity). */
.wb-scope .wb-hv--22 .wb-hv22-tear{
  display:block; margin:.35rem auto 0; padding:.25rem .6rem;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.66); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px dashed rgba(255,255,255,.4);
}
.wb-scope .wb-hv--22 .wb-hv22-tear:hover,
.wb-scope .wb-hv--22 .wb-hv22-tear:focus-visible{ color:#fff; border-bottom-color:#fff; }
.wb-scope .wb-hv--22 .wb-hv22-tear[hidden]{ display:none; }

/* Screen-reader announcer for the print sequence. */
.wb-scope .wb-hv--22 .wb-hv22-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* THE TRAY: four small paper stubs on a thin shelf line. Queued stubs keep
   their layout box (visibility) so the tray never reflows as they print. */
.wb-scope .wb-hv--22 .wb-hv22-tray{ margin-top:clamp(1.1rem, .7rem + 1.2vw, 1.9rem); }
.wb-scope .wb-hv--22 .wb-hv22-tray__head{ margin:0 0 .55rem; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.wb-scope .wb-hv--22 .wb-hv22-stubs{ list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(.6rem, .4rem + .8vw, 1.1rem); margin:0; padding:.9rem 0 0; border-top:1px solid rgba(255,255,255,.16); }
.wb-scope .wb-hv--22 .wb-hv22-stub{ margin:0; }
.wb-scope .wb-hv--22 .wb-hv22-stub.is-queued{ visibility:hidden; }
.wb-scope .is-motion .wb-hv22-stub.is-printed{ animation:wb-hv22-stubfeed .5s steps(6, end); }
@keyframes wb-hv22-stubfeed{ from{ transform:translateY(-12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.wb-scope .wb-hv--22 .wb-hv22-stub a{
  display:block; background:#faf8f2; border-radius:2px; padding:.35rem .35rem .45rem;
  text-decoration:none; box-shadow:0 12px 22px -12px rgba(0,0,0,.7);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wb-scope .wb-hv--22 .wb-hv22-stub a:hover{ transform:translateY(-3px); box-shadow:0 16px 26px -12px rgba(0,0,0,.8); }
.wb-scope .wb-hv--22 .wb-hv22-stub img{ display:block; width:100%; height:auto; border-radius:1px; }
.wb-scope .wb-hv--22 .wb-hv22-stub__cap{ display:block; margin-top:.35rem; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:.68rem; line-height:1.45; color:#3a3e45; }
.wb-scope .wb-hv--22 .wb-hv22-stub__cap b{ color:#9e1620; }

/* ---- Responsive. 960: stack copy over machine. 640: the spec's slot-only
   collapse: trim the lead's middle sentence (retention + years survive),
   Hoober is the single stub, WGSD shrinks, ticket goes near full width. */
@media (max-width: 960px){
  .wb-scope .wb-hv--22 .wb-hv22-grid{ grid-template-columns:1fr; gap:1.3rem; }
  .wb-scope .wb-hv--22 .wb-hv22-stubs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .wb-scope .wb-hv--22 .wb-hv22-trim{ display:none; }
  .wb-scope .wb-hv--22 .wb-hv22-h1{ font-size:clamp(1.55rem, 7vw, 1.9rem); }
  .wb-scope .wb-hv--22 .wb-hv22-face{ padding:.85rem .9rem 1rem; }
  .wb-scope .wb-hv--22 .wb-hv22-wgsd img{ width:120px; }
  .wb-scope .wb-hv--22 .wb-hv22-ticket,
  .wb-scope .wb-hv--22 .wb-hv22-bay__reset{ width:min(94%, 29rem); }
  .wb-scope .is-motion .wb-hv22-bay.is-feeding .wb-hv22-ticket{ animation-duration:.6s; }
  .wb-scope .wb-hv--22 .wb-hv22-stubs{ grid-template-columns:1fr; }
  .wb-scope .wb-hv--22 .wb-hv22-stub:not(:first-child){ display:none; }
  .wb-scope .wb-hv--22 .wb-hv22-stub img{ max-height:150px; object-fit:cover; }
}


/* ================================================================
   HERO VARIANT 20 (skin 23): The Working Board (build/39
   editorial-collage, 244.0). The band drops the brand video for the
   table where a campaign gets assembled: paper-white surface, a
   whisper-faint planning grid (the spec's non-photo-blue device,
   demoted to the faintest accent per the 2026-07-04 standing rules),
   warm light pooling top-center, and real client work taped around
   the one straight, bright index card that carries the shared ask.
   Rails ride BESIDE the center column and the skin undercuts the
   shared band min-height, so the hero stays tight, never tall.
   ================================================================ */
.wb-scope .wb-hero-v23 .wb-band__video-wrap,
.wb-scope .wb-hero-v23 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v23.wb-band--video{
  color:var(--wb-ink-2);
  background:
    linear-gradient(180deg, rgba(16,19,24,.72), rgba(16,19,24,.22) 62px, rgba(16,19,24,0) 132px) no-repeat,
    radial-gradient(110% 72% at 50% 10%, rgba(255,255,255,.85), rgba(255,255,255,0) 62%) no-repeat,
    repeating-linear-gradient(0deg, rgba(96,148,205,.085) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(96,148,205,.085) 0 1px, transparent 1px 32px),
    #f2efe8 !important;
}
/* Tight, not tall (standing rule 3): undercut the shared hero min-height. */
.wb-scope .wb-hero-v23.wb-band--video.wb-band--dark{ min-height:clamp(540px, 72vh, 720px); }
.wb-scope .wb-hero-v23 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--23{ position:relative; padding:clamp(1.1rem, 2.6vh, 2.2rem) 0 clamp(1rem, 2.2vh, 2rem); }
.wb-scope .wb-hv--23 .wb-hv23-board{ position:relative; }
.wb-scope .wb-hv--23 .wb-hv23-center{ position:relative; z-index:5; max-width:660px; margin:0 auto; text-align:center; }

/* --- The job ticket: the one strip pinned dead straight up top. ------- */
.wb-scope .wb-hv--23 .wb-hv23-ticket{ position:relative; display:inline-block; background:#fff; padding:.6rem 1.6rem .65rem; box-shadow:0 12px 26px -16px rgba(20,24,31,.45); }
.wb-scope .wb-hv--23 .wb-hv23-ticket::before,
.wb-scope .wb-hv--23 .wb-hv23-ticket::after{ content:""; position:absolute; top:-8px; width:52px; height:17px; background:rgba(232,226,203,.8); box-shadow:0 2px 5px rgba(20,24,31,.16); }
.wb-scope .wb-hv--23 .wb-hv23-ticket::before{ left:-20px; transform:rotate(-42deg); }
.wb-scope .wb-hv--23 .wb-hv23-ticket::after{ right:-20px; transform:rotate(42deg); }
.wb-scope .wb-hv--23 .wb-hv23-ticket .wb-kicker{ display:block; margin:0; font-size:.68rem; letter-spacing:.16em; color:#5a616b; }
.wb-scope .wb-hv--23 .wb-hv23-ticket__job{ margin:.18rem 0 0; font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; font-size:clamp(.7rem, .6rem + .3vw, .84rem); font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--wb-ink); }
.wb-scope .wb-hv--23 .wb-hv23-ticket__job b{ font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--23 .wb-hv23-never{ color:var(--wb-red); font-weight:800; }

/* --- H1: two taped strips of type (p, so Montserrat needs the bang). -- */
.wb-scope .wb-hv--23 .wb-hv23-h1{ display:flex; flex-direction:column; align-items:center; gap:.5rem; margin:clamp(1rem, .8rem + .9vw, 1.6rem) 0 0; font-family:var(--wb-display) !important; font-weight:900; line-height:1; }
.wb-scope .wb-hv--23 .wb-hv23-strip{ display:inline-block; background:#fff; color:var(--wb-ink); padding:.3em .6em .28em; font-size:clamp(1.55rem, 1rem + 2.2vw, 2.7rem); letter-spacing:-.015em; box-shadow:0 14px 30px -16px rgba(20,24,31,.45); }
.wb-scope .wb-hv--23 .wb-hv23-strip--a{ transform:rotate(-1.1deg); }
.wb-scope .wb-hv--23 .wb-hv23-strip--b{ transform:rotate(.7deg); }
.wb-scope .wb-hv--23 .wb-hv23-strip em{ font-style:normal; color:var(--wb-red); }

/* --- The lead, taped flat. -------------------------------------------- */
.wb-scope .wb-hv--23 .wb-hv23-lead{ position:relative; max-width:58ch; margin:clamp(.9rem, .7rem + .8vw, 1.3rem) auto 0; background:rgba(255,255,255,.93); padding:.75rem 1.05rem .8rem; font-size:clamp(.96rem, .88rem + .3vw, 1.08rem); line-height:1.55; color:var(--wb-ink-2); box-shadow:0 12px 28px -18px rgba(20,24,31,.4); }

/* --- THE INDEX CARD: brightest + only perfectly straight piece. ------- */
.wb-scope .wb-hv--23 .wb-hv23-card{
  position:relative; z-index:6; max-width:600px; margin:clamp(1rem, .8rem + 1vw, 1.6rem) auto 0; padding:1.05rem 1.15rem 1rem; text-align:left;
  background:
    linear-gradient(90deg, transparent 0 24px, rgba(216,35,42,.22) 24px 25px, transparent 25px) no-repeat,
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(96,148,205,.14) 29px 30px),
    #fffef8;
  box-shadow:0 28px 62px -24px rgba(20,24,31,.5), 0 0 0 1px rgba(20,24,31,.06);
}
/* The desk's spotlight graft (UI/UX seat 2): a pool of light behind the card. */
.wb-scope .wb-hv--23 .wb-hv23-card::before{ content:""; position:absolute; inset:-48px -64px; z-index:-1; background:radial-gradient(58% 58% at 50% 45%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%); pointer-events:none; }
.wb-scope .wb-hv--23 .wb-hv23-cardtape{ position:absolute; top:-10px; width:64px; height:19px; background:rgba(232,226,203,.82); box-shadow:0 2px 6px rgba(20,24,31,.18); pointer-events:none; }
.wb-scope .wb-hv--23 .wb-hv23-cardtape--l{ left:22px; transform:rotate(-5deg); }
.wb-scope .wb-hv--23 .wb-hv23-cardtape--r{ right:22px; transform:rotate(4deg); }

/* Shared ask component, restyled for paper (markup + engine untouched). */
.wb-scope .wb-hv--23 .wb-hero-ask{ max-width:none; }
.wb-scope .wb-hv--23 .wb-hero-ask__q{ color:var(--wb-ink); text-shadow:none; font-size:clamp(1.2rem, 1rem + .7vw, 1.6rem); margin-bottom:.55rem; }
.wb-scope .wb-hv--23 .wb-hero-ask__row{ background:#fff; box-shadow:0 12px 26px -16px rgba(20,24,31,.35), 0 0 0 1.5px rgba(20,24,31,.22); }
.wb-scope .wb-hv--23 .wb-hero-ask__note{ color:#565d66; }
.wb-scope .wb-hv--23 .wb-hero-ask__note a{ color:var(--wb-red); }
/* Results paste in like fresh strips: 60ms stagger, entrance only. */
@keyframes wb-hv23-paste{ from{ opacity:0; transform:translateY(6px); } }
.wb-scope .wb-hv--23 .wb-hero-ask__res{ animation:wb-hv23-paste .26s ease-out backwards; }
.wb-scope .wb-hv--23 .wb-hero-ask__res:nth-child(2){ animation-delay:.06s; }
.wb-scope .wb-hv--23 .wb-hero-ask__res:nth-child(3){ animation-delay:.12s; }
.wb-scope .wb-hv--23 .wb-hero-ask__res:nth-child(4){ animation-delay:.18s; }
.wb-scope .wb-hv--23 .wb-hero-ask__res:nth-child(5){ animation-delay:.24s; }
.wb-scope .wb-hv--23 .wb-hero-ask__res:nth-child(6){ animation-delay:.3s; }

/* The one lavish moment: the hand thumps ON IT onto the card corner. */
.wb-scope .wb-hv--23 .wb-hv23-onit{ position:absolute; top:-15px; right:16px; z-index:7; padding:.16rem .5rem; border:3px solid var(--wb-red); border-radius:6px; color:var(--wb-red); font-family:var(--wb-display); font-weight:900; font-size:1.02rem; letter-spacing:.14em; text-transform:uppercase; transform:rotate(-8deg); opacity:0; pointer-events:none; }
.wb-scope .wb-hv--23 .wb-hv23-hand{ position:absolute; top:-66px; right:-34px; z-index:7; width:150px; height:auto; opacity:0; pointer-events:none; }
@keyframes wb-hv23-thump{ 0%{ opacity:0; transform:rotate(-8deg) scale(1.7); } 60%{ opacity:1; transform:rotate(-8deg) scale(.94); } 100%{ opacity:1; transform:rotate(-8deg) scale(1); } }
@keyframes wb-hv23-hand{ 0%{ opacity:0; transform:translate(20px,-28px); } 25%{ opacity:1; transform:none; } 45%{ transform:translate(0,10px); } 62%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translate(26px,-32px); } }
.wb-scope .wb-hv--23 .wb-hv23-card.is-stamped .wb-hv23-onit{ animation:wb-hv23-thump .24s ease-out .28s forwards; }
.wb-scope .wb-hv--23 .wb-hv23-card.is-stamped .wb-hv23-hand{ animation:wb-hv23-hand .85s ease-in-out forwards; }

/* --- The red call stamp + grease-pencil circle. ----------------------- */
.wb-scope .wb-hv--23 .wb-hv23-call{ position:relative; margin:clamp(1.1rem, .9rem + 1vw, 1.7rem) 0 0; }
.wb-scope .wb-hv--23 .wb-hv23-stampwrap{ position:relative; display:inline-block; }
.wb-scope .wb-hv--23 .wb-hv23-tel{ display:inline-block; background:var(--wb-red); color:#fff; font-family:var(--wb-display); font-weight:800; font-size:clamp(1.05rem, .95rem + .5vw, 1.35rem); letter-spacing:.05em; text-transform:uppercase; padding:.72rem 1.5rem; border-radius:10px; transform:rotate(-1.2deg); box-shadow:0 4px 0 var(--wb-red-dk), 0 16px 30px -14px rgba(216,35,42,.55); transition:transform .12s ease, box-shadow .12s ease; }
.wb-scope .wb-hv--23 .wb-hv23-tel:hover{ transform:rotate(-1.2deg) translateY(2px); box-shadow:0 2px 0 var(--wb-red-dk), 0 12px 22px -14px rgba(216,35,42,.55); }
.wb-scope .wb-hv--23 .wb-hv23-circle{ position:absolute; left:-28px; top:-16px; width:calc(100% + 56px); height:calc(100% + 32px); z-index:1; fill:none; stroke:var(--wb-red); stroke-width:3.2; stroke-linecap:round; opacity:.7; pointer-events:none; }
.wb-scope .wb-hv--23 .wb-hv23-circle path{ stroke-dasharray:100; stroke-dashoffset:0; }
@keyframes wb-hv23-draw{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
.wb-js .wb-scope .wb-hv--23 .wb-hv23-call.is-in .wb-hv23-circle path{ animation:wb-hv23-draw .8s ease-out .45s backwards; }
.wb-scope .wb-hv--23 .wb-hv23-tel-sub{ margin:.55rem 0 0; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:#565d66; }

/* --- The taped pieces (hard budget: 8). ------------------------------- */
.wb-scope .wb-hv--23 .wb-hv23-piece{ position:absolute; z-index:2; display:block; }
.wb-scope .wb-hv--23 .wb-hv23-piece:focus-visible{ outline:3px solid var(--wb-red); outline-offset:3px; }
.wb-scope .wb-hv--23 .wb-hv23-ph{ position:relative; display:block; background:#fff; padding:8px 8px 6px; box-shadow:0 18px 34px -18px rgba(20,24,31,.5); transform:rotate(var(--tilt, 0deg)); transition:transform .18s ease, box-shadow .18s ease; }
.wb-scope .wb-hv--23 .wb-hv23-ph::before,
.wb-scope .wb-hv--23 .wb-hv23-ph::after{ content:""; position:absolute; top:-9px; width:50px; height:17px; background:rgba(232,226,203,.8); box-shadow:0 2px 5px rgba(20,24,31,.16); }
.wb-scope .wb-hv--23 .wb-hv23-ph::before{ left:10px; transform:rotate(-7deg); }
.wb-scope .wb-hv--23 .wb-hv23-ph::after{ right:10px; transform:rotate(6deg); }
.wb-scope .wb-hv--23 .wb-hv23-piece img{ display:block; width:100%; height:auto; }
.wb-scope .wb-hv--23 .wb-hv23-cap{ display:block; padding:.35rem .1rem .05rem; font-family:var(--wb-display); font-weight:700; font-size:.67rem; line-height:1.35; letter-spacing:.02em; color:#3f454d; }
.wb-scope .wb-hv--23 .wb-hv23-piece:hover .wb-hv23-ph,
.wb-scope .wb-hv--23 .wb-hv23-piece:focus-visible .wb-hv23-ph{ transform:rotate(0deg) translateY(-4px); box-shadow:0 26px 46px -18px rgba(20,24,31,.55); }
/* The sticker piece: no print border, no tape, its own die-cut shadow. */
.wb-scope .wb-hv--23 .wb-hv23-ph--sticker{ background:transparent; padding:0; box-shadow:none; }
.wb-scope .wb-hv--23 .wb-hv23-ph--sticker::before,
.wb-scope .wb-hv--23 .wb-hv23-ph--sticker::after{ display:none; }
.wb-scope .wb-hv--23 .wb-hv23-ph--sticker img{ filter:drop-shadow(0 10px 18px rgba(20,24,31,.35)); }
/* Press-down entrance keyed to the shared reveal's .is-in (replays on flip). */
@keyframes wb-hv23-press{ from{ transform:rotate(var(--tilt, 0deg)) scale(1.05); } to{ transform:rotate(var(--tilt, 0deg)) scale(1); } }
.wb-js .wb-scope .wb-hv--23 .wb-hv23-piece.is-in .wb-hv23-ph{ animation:wb-hv23-press .3s ease-out backwards; }

/* Per-piece tilt. */
.wb-scope .wb-hv--23 .wb-hv23-karns{ --tilt:2.5deg; }
.wb-scope .wb-hv--23 .wb-hv23-booth{ --tilt:-1.5deg; }
.wb-scope .wb-hv--23 .wb-hv23-p1998{ --tilt:3deg; }
.wb-scope .wb-hv--23 .wb-hv23-p1996{ --tilt:-4deg; }
.wb-scope .wb-hv--23 .wb-hv23-pasoy{ --tilt:1.5deg; }
.wb-scope .wb-hv--23 .wb-hv23-kennies{ --tilt:-2deg; }
.wb-scope .wb-hv--23 .wb-hv23-whoopie{ --tilt:-8deg; }
.wb-scope .wb-hv--23 .wb-hv23-pwgsd{ --tilt:-6deg; }

/* --- Desktop rails: pieces beside the column, never below it. --------- */
@media (min-width:761px){
  /* Mid tier (761-1099): four pieces, two per rail; the rest wait for room. */
  .wb-scope .wb-hv--23 .wb-hv23-center{ max-width:min(600px, 62vw); }
  .wb-scope .wb-hv--23 .wb-hv23-pasoy,
  .wb-scope .wb-hv--23 .wb-hv23-kennies,
  .wb-scope .wb-hv--23 .wb-hv23-whoopie,
  .wb-scope .wb-hv--23 .wb-hv23-pwgsd{ display:none; }
  .wb-scope .wb-hv--23 .wb-hv23-p1996{ left:calc(50% - 50vw + 20px); top:3%; width:clamp(150px, 17vw, 240px); }
  .wb-scope .wb-hv--23 .wb-hv23-p1998{ left:calc(50% - 50vw + 34px); top:46%; width:clamp(150px, 16vw, 235px); }
  .wb-scope .wb-hv--23 .wb-hv23-karns{ right:calc(50% - 50vw + 20px); top:3%; width:clamp(160px, 18vw, 260px); }
  .wb-scope .wb-hv--23 .wb-hv23-booth{ right:calc(50% - 50vw + 32px); top:44%; width:clamp(150px, 17vw, 240px); }
}
@media (min-width:1100px){
  /* Full board: seven pieces; rails of three plus the sticker. */
  .wb-scope .wb-hv--23 .wb-hv23-center{ max-width:660px; }
  .wb-scope .wb-hv--23 .wb-hv23-pasoy,
  .wb-scope .wb-hv--23 .wb-hv23-kennies,
  .wb-scope .wb-hv--23 .wb-hv23-pwgsd{ display:block; }
  .wb-scope .wb-hv--23 .wb-hv23-p1996{ top:1%; }
  .wb-scope .wb-hv--23 .wb-hv23-p1998{ top:32%; }
  .wb-scope .wb-hv--23 .wb-hv23-kennies{ left:calc(50% - 50vw + 26px); bottom:0; width:clamp(140px, 12vw, 170px); }
  .wb-scope .wb-hv--23 .wb-hv23-pwgsd{ left:calc(50% - 50vw + 205px); top:27%; width:120px; z-index:3; }
  .wb-scope .wb-hv--23 .wb-hv23-karns{ top:1%; }
  .wb-scope .wb-hv--23 .wb-hv23-booth{ top:33%; }
  .wb-scope .wb-hv--23 .wb-hv23-pasoy{ right:calc(50% - 50vw + 28px); bottom:1%; width:clamp(170px, 15vw, 225px); }
}
@media (min-width:1400px){
  /* Ultra-wide: the eighth piece half-crops off the table's left edge
     (the board keeps going; left side only, so no scrollbar can appear). */
  .wb-scope .wb-hv--23 .wb-hv23-whoopie{ display:block; left:calc(50% - 50vw - 70px); top:55%; width:210px; z-index:1; }
  .wb-scope .wb-hv--23 .wb-hv23-p1998{ left:calc(50% - 50vw + 60px); }
}

/* --- Mobile (<=760): the board narrows, it does not disappear. -------- */
@media (max-width:760px){
  .wb-scope .wb-hv--23 .wb-hv23-center{ max-width:none; }
  .wb-scope .wb-hv--23 .wb-hv23-ticket{ display:block; padding:.55rem .9rem .6rem; }
  .wb-scope .wb-hv--23 .wb-hv23-strip{ font-size:clamp(1.15rem, 5.2vw, 1.65rem); max-width:100%; }
  .wb-scope .wb-hv--23 .wb-hv23-strip--a{ transform:none; }
  .wb-scope .wb-hv--23 .wb-hv23-strip--b{ transform:rotate(-.5deg); }
  .wb-scope .wb-hv--23 .wb-hv23-lead-trim{ display:none; }
  .wb-scope .wb-hv--23 .wb-hv23-card{ max-width:none; }
  .wb-scope .wb-hv--23 .wb-hv23-hand{ width:120px; top:-54px; right:-10px; }
  .wb-scope .wb-hv--23 .wb-hv23-stampwrap{ display:block; }
  .wb-scope .wb-hv--23 .wb-hv23-tel{ display:block; text-align:center; transform:none; padding:.85rem 1rem; }
  .wb-scope .wb-hv--23 .wb-hv23-tel:hover{ transform:translateY(2px); }
  .wb-scope .wb-hv--23 .wb-hv23-circle{ display:none; }
  /* Exactly three taped pieces, a loose column, captions in plain sight;
     everything else is cut, not shrunk (and lazy, so never fetched). */
  .wb-scope .wb-hv--23 .wb-hv23-piece{ display:none; position:static; margin:1.15rem auto 0; width:min(80vw, 340px); }
  .wb-scope .wb-hv--23 .wb-hv23-karns{ display:block; margin-top:1.7rem; }
  .wb-scope .wb-hv--23 .wb-hv23-booth,
  .wb-scope .wb-hv--23 .wb-hv23-p1998{ display:block; }
  .wb-scope .wb-hv--23 .wb-hv23-cap{ font-size:.74rem; text-align:center; }
}
/* Under 480: decorative motion off (spec); the odometer and the submit
   stamp still fire (one thump, not a loop). */
@media (max-width:480px){
  .wb-js .wb-scope .wb-hv--23 .wb-hv23-piece.is-in .wb-hv23-ph{ animation:none; }
  .wb-js .wb-scope .wb-hv--23 .wb-hv23-call.is-in .wb-hv23-circle path{ animation:none; }
  .wb-scope .wb-hv--23 .wb-hero-ask__res{ animation:none; }
}
/* Reduced motion: every piece pre-settled, the stamp appears without the
   thump, the hand stays home, hover keeps its tilt. */
@media (prefers-reduced-motion: reduce){
  .wb-js .wb-scope .wb-hv--23 .wb-hv23-piece.is-in .wb-hv23-ph,
  .wb-js .wb-scope .wb-hv--23 .wb-hv23-call.is-in .wb-hv23-circle path,
  .wb-scope .wb-hv--23 .wb-hero-ask__res{ animation:none !important; }
  .wb-scope .wb-hv--23 .wb-hv23-hand{ display:none; }
  .wb-scope .wb-hv--23 .wb-hv23-card.is-stamped .wb-hv23-onit{ animation:none; opacity:1; }
  .wb-scope .wb-hv--23 .wb-hv23-piece:hover .wb-hv23-ph{ transform:rotate(var(--tilt, 0deg)); }
}


/* ==================================================================
   HERO VARIANT skin 24 "The Paper Trail" (build/39 scrollytelling-job)
   Chapter one of a job's tracking log. Left: the ask (every Weber job
   for 30 years started with somebody asking, so the visitor's search
   is beat one). Right: a manila job jacket whose four-beat trail,
   RECEIVED -> PROOFED -> ON THE FLOOR -> SHIPPED, plays back once with
   a red routing rail, punch-dot stations, and the stamp slam as the
   single lavish moment. Committee/owner fixes carried in: the spec's
   four full-viewport chapter bands are COMPRESSED into the jacket
   (Design seat 2's three-viewports-of-push-down + the owner's
   stay-tight rule), the phone CTA rides the first viewport instead of
   an epilogue four screens deep (UI/UX seat 1), and the log wears
   step numbers, never invented timestamps or counts (Content seat 1's
   NEEDS-DATA gate; the day labels went with it). The log reads as
   live tracking data, mono + rail + punch dots; zero crop marks, zero
   print garnish; production appears once, as a because-clause.
   DEFAULT CSS STATE IS THE SETTLED LOG (perfect no-JS / reduced
   motion); overhaul.js initHeroV24 arms the one-time playback. */

/* Band level: no video in this concept (the brand video stays variant
   0's); hide wrap + scrim, honeycomb-on-near-black ground (!important
   beats the inline poster background-image on the section). */
.wb-scope .wb-hero-v24 .wb-band__video-wrap,
.wb-scope .wb-hero-v24 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v24.wb-band--video{
  background:
    radial-gradient(120% 130% at 76% -12%, rgba(4,5,8,0) 34%, rgba(4,5,8,.62) 100%),
    url("../images/overhaul/tex-honeycomb-dark.webp") center top/640px auto repeat #10131a !important;
}

.wb-scope .wb-hv--24{ position:relative; }

/* The two columns: copy + ask left, the jacket right. */
.wb-scope .wb-hv--24 .wb-hv24-grid{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(320px, 30rem);
  gap:clamp(1.6rem, 1rem + 2.6vw, 3.6rem); align-items:center;
}
.wb-scope .wb-hv--24 .wb-h1{ max-width:19ch; }
.wb-scope .wb-hv--24 .wb-hv24-lead{ max-width:48ch; }
/* The ask must never lose: lifted so the live results paint over the
   jacket at every width (opaque content follows in the stack). */
.wb-scope .wb-hv--24 .wb-hv24-askrow{ position:relative; z-index:6; margin-bottom:0; }

/* THE JACKET. Manila folder, one soft paper shadow, a slight working
   tilt; the tab is part of the folder, so leave headroom for it. */
.wb-scope .wb-hv--24 .wb-hv24-jacket{
  position:relative; margin-top:1.7rem;
  background:linear-gradient(180deg, #f2e7c6, #e6d5a9);
  color:#443a24; border-radius:10px;
  padding:clamp(1rem, .7rem + 1vw, 1.5rem) clamp(1rem, .7rem + 1.1vw, 1.6rem) clamp(.9rem, .6rem + 1vw, 1.3rem);
  box-shadow:0 34px 70px -28px rgba(0,0,0,.8), 0 10px 24px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55);
  transform:rotate(-1.2deg);
}
.wb-scope .wb-hv--24 .wb-hv24-tab{
  position:absolute; top:-1.55rem; left:1.1rem; margin:0;
  background:#f2e7c6; border-radius:8px 8px 0 0;
  padding:.42rem .95rem .3rem;
  font-family:var(--wb-display) !important; font-weight:800; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:#443a24;
  box-shadow:0 -8px 16px -10px rgba(0,0,0,.45);
}
.wb-scope .wb-hv--24 .wb-hv24-tab .fa-folder-open{ color:var(--wb-red-dk); margin-right:.3rem; }
.wb-scope .wb-hv--24 .wb-hv24-tab__sub{ font-weight:700; color:#6b5c36; letter-spacing:.1em; }
.wb-scope .wb-hv--24 .wb-hv24-slip{
  margin:0 0 .9rem; padding-bottom:.8rem; border-bottom:2px dashed rgba(74,64,40,.3);
  font-size:.9rem; line-height:1.5; color:#4a4028;
}

/* THE LOG: routing rail + punch-dot stations. The rail track is the
   ::before, the red fill is the ::after (transform-origin top, so the
   armed state can wind it to zero and the play state pours it). */
.wb-scope .wb-hv--24 .wb-hv24-log{ position:relative; list-style:none; margin:0; padding:0; }
.wb-scope .wb-hv--24 .wb-hv24-log::before,
.wb-scope .wb-hv--24 .wb-hv24-log::after{
  content:""; position:absolute; left:calc(.95rem - 1px); top:.5rem; bottom:.9rem; width:2px;
}
.wb-scope .wb-hv--24 .wb-hv24-log::before{ background:rgba(74,64,40,.25); }
.wb-scope .wb-hv--24 .wb-hv24-log::after{ background:var(--wb-red-dk); transform-origin:top center; }

.wb-scope .wb-hv--24 .wb-hv24-beat{
  position:relative;
  display:grid; grid-template-columns:1.9rem minmax(0,1fr) auto; grid-template-rows:auto auto;
  column-gap:.8rem; align-items:start;
}
.wb-scope .wb-hv--24 .wb-hv24-beat + .wb-hv24-beat{ margin-top:.85rem; }
.wb-scope .wb-hv--24 .wb-hv24-beat__no{
  grid-row:1; grid-column:1; position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--wb-red-dk); border:2px solid var(--wb-red-dk); color:#fff;
  font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight:700; font-size:.7rem;
}
.wb-scope .wb-hv--24 .wb-hv24-beat__line{
  grid-row:1; grid-column:2; display:flex; align-items:center; gap:.6rem;
  margin:0; min-height:1.9rem;
  font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
}
.wb-scope .wb-hv--24 .wb-hv24-beat__status{
  font-weight:800; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wb-red-dk); white-space:nowrap;
}
.wb-scope .wb-hv--24 .wb-hv24-beat__dots{ flex:1; border-bottom:2px dotted rgba(74,64,40,.4); transform:translateY(-3px); }
.wb-scope .wb-hv--24 .wb-hv24-beat__cap{
  grid-row:2; grid-column:2; margin:.25rem 0 0;
  font-size:.82rem; line-height:1.45; color:#4a4028; text-wrap:pretty;
}

/* The evidence chips: real photos, white print border, shared lightbox. */
.wb-scope .wb-hv--24 .wb-hv24-beat__chip{
  grid-row:1 / span 2; grid-column:3; align-self:center; position:relative;
  display:block; width:96px; border:3px solid #fff; border-radius:4px; overflow:hidden;
  background:#fff; box-shadow:0 10px 22px -10px rgba(0,0,0,.55);
  transform:rotate(1.4deg); transition:transform .18s ease, box-shadow .18s ease;
}
.wb-scope .wb-hv--24 .wb-hv24-beat:nth-child(even) .wb-hv24-beat__chip{ transform:rotate(-1.4deg); }
.wb-scope .wb-hv--24 .wb-hv24-beat__chip:hover,
.wb-scope .wb-hv--24 .wb-hv24-beat__chip:focus-visible{
  transform:rotate(0) translateY(-2px); box-shadow:0 16px 30px -12px rgba(0,0,0,.65);
}
.wb-scope .wb-hv--24 .wb-hv24-beat__chip:focus-visible{ outline:3px solid var(--wb-red); outline-offset:2px; }
.wb-scope .wb-hv--24 .wb-hv24-beat__chip img{ display:block; width:100%; height:auto; }
.wb-scope .wb-hv--24 .wb-hv24-zoom{
  position:absolute; right:2px; bottom:2px; display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:4px; background:rgba(10,12,16,.62); color:#fff; font-size:.6rem;
  opacity:0; transition:opacity .18s ease;
}
.wb-scope .wb-hv--24 .wb-hv24-beat__chip:hover .wb-hv24-zoom,
.wb-scope .wb-hv--24 .wb-hv24-beat__chip:focus-visible .wb-hv24-zoom{ opacity:1; }

/* The one lavish moment: the stamp slamming the SHIPPED beat's corner.
   Anchored to beat 4 itself so it lands on the evidence chip at every
   breakpoint; decorative, never blocks the chip underneath. */
.wb-scope .wb-hv--24 .wb-hv24-stamp{
  position:absolute; right:-10px; top:-18px; z-index:2;
  width:clamp(78px, 6.5vw, 100px); height:auto;
  transform:rotate(-9deg); pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.3));
}

/* The payoff strip: live odometer + the phone, first viewport. */
.wb-scope .wb-hv--24 .wb-hv24-next{
  margin-top:1rem; padding-top:.85rem; border-top:2px dashed rgba(74,64,40,.3);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem;
}
.wb-scope .wb-hv--24 .wb-hv24-next__line{
  margin:0; flex:1 1 200px; font-size:.74rem; line-height:1.45; letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; color:#5c4f2f;
  font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
}
.wb-scope .wb-hv--24 .wb-hv24-next__line strong{
  font-family:var(--wb-display); font-weight:800; font-size:1.18rem;
  color:#2b2416; letter-spacing:0; font-variant-numeric:tabular-nums; margin-right:.15rem;
}
.wb-scope .wb-hv--24 .wb-hv24-call{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--wb-red-grad); color:#fff !important;
  font-family:var(--wb-display); font-weight:800; font-size:.92rem; white-space:nowrap;
  border-radius:999px; padding:.68rem 1.15rem;
  box-shadow:0 12px 26px -10px rgba(158,22,32,.65);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wb-scope .wb-hv--24 .wb-hv24-call:hover{ transform:translateY(-1px); box-shadow:0 16px 30px -10px rgba(158,22,32,.75); }

/* ---- PLAYBACK (JS-armed; the settled rules above are the default,
   so no-JS and prefers-reduced-motion always read a finished slip).
   initHeroV24 adds .wb-hv24-armed up front (pre-states) and
   .wb-hv24-play when the jacket is really in view; one run, ~2.7s,
   nothing loops. Under 481px only the stamp still fires (one frame);
   rail and dots ship settled. ---- */
@media (min-width:481px){
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-log::after{ transform:scaleY(0); }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-beat__no{ background:#efe3c2; border-color:rgba(74,64,40,.4); color:#6b5c36; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-beat__status{ opacity:0; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-log::after{ transform:scaleY(1); transition:transform 2.2s linear .15s; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat__no{ animation:wb-hv24-dot .3s ease-out both; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat__status{ animation:wb-hv24-stampin .25s ease-out both; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(1) .wb-hv24-beat__no,
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(1) .wb-hv24-beat__status{ animation-delay:.2s; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(2) .wb-hv24-beat__no,
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(2) .wb-hv24-beat__status{ animation-delay:.85s; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(3) .wb-hv24-beat__no,
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(3) .wb-hv24-beat__status{ animation-delay:1.5s; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(4) .wb-hv24-beat__no,
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-beat:nth-child(4) .wb-hv24-beat__status{ animation-delay:2.15s; }
}
.wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-stamp{ opacity:0; }
.wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-play .wb-hv24-stamp{ animation:wb-hv24-slam .32s cubic-bezier(.2,1.3,.4,1) 2.45s both; }
@keyframes wb-hv24-dot{
  from{ background:#efe3c2; border-color:rgba(74,64,40,.4); color:#6b5c36; transform:scale(1.12); }
  to{ background:var(--wb-red-dk); border-color:var(--wb-red-dk); color:#fff; transform:scale(1); }
}
@keyframes wb-hv24-stampin{
  from{ opacity:0; transform:scale(1.25); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes wb-hv24-slam{
  from{ opacity:0; transform:scale(1.7) rotate(-2deg); }
  to{ opacity:1; transform:scale(1) rotate(-9deg); }
}
/* Belt and suspenders: if the OS flips to reduced motion after the JS
   gate ran, the armed pre-states must never hide the evidence. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-log::after{ transform:none; transition:none; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-beat__no{ background:var(--wb-red-dk); border-color:var(--wb-red-dk); color:#fff; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-beat__status,
  .wb-scope .wb-hv--24 .wb-hv24-jacket.wb-hv24-armed .wb-hv24-stamp{ opacity:1; animation:none; }
}

/* ---- Breakpoints ---- */
@media (max-width:1120px){
  .wb-scope .wb-hv--24 .wb-hv24-grid{ grid-template-columns:minmax(0, 1.1fr) minmax(300px, 26rem); }
}
@media (max-width:980px){
  .wb-scope .wb-hv--24 .wb-hv24-grid{ grid-template-columns:1fr; gap:1.4rem; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket{ max-width:34rem; }
}
@media (max-width:760px){
  .wb-scope .wb-hv--24 .wb-hv24-cut{ display:none; }
  .wb-scope .wb-hv--24 .wb-hv24-jacket{ transform:none; margin-top:1.9rem; }
}
@media (max-width:480px){
  .wb-scope .wb-hv--24 .wb-hv24-beat__chip{ width:76px; border-width:2px; }
  .wb-scope .wb-hv--24 .wb-hv24-beat__cap{ font-size:.8rem; }
  .wb-scope .wb-hv--24 .wb-hv24-stamp{ width:70px; right:-6px; top:-14px; }
  .wb-scope .wb-hv--24 .wb-hv24-next{ justify-content:flex-start; }
  .wb-scope .wb-hv--24 .wb-hv24-call{ width:100%; justify-content:center; padding:.8rem 1.15rem; }
}


/* ---- Variant skin 25 "Check Our Work" (build/39 cursor-spotlight, switcher
   slot 22). The proof board: eight shipped jobs on one white card over the
   dark honeycomb table, with a printer's loupe as the page's single signature
   interaction. Standing rules applied: no crop marks, no CMYK strip, no press
   slug (the header line is the live job count, data not ink); the tiles run
   marketing breadth (wrap, booth, website, floor, signs, publication,
   install, crew), production appears only inside receipt because-clauses.
   The lens shows a 2.4x clone of the tiles (built by initHeroV25) in which
   the sr-only .wb-hv25-receipt spans turn visible, so the retention receipts
   physically exist nowhere else at page scale; the Hoober tile keeps one
   visible "since '98" scribble at rest (Content seat 1's first-impression
   fix). fonts-modern pins p/label/figcaption to Inter, hence the
   var(--wb-display) !important re-assertions. */

/* Band level: hide the shared video + scrim; the honeycomb table replaces
   them. !important needed: the section carries an inline background-image
   poster. The texture only fetches once the band actually wears this class. */
.wb-scope .wb-hero-v25 .wb-band__video-wrap,
.wb-scope .wb-hero-v25 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v25.wb-band--video{ background:linear-gradient(rgba(10,11,15,.42), rgba(8,9,12,.66)), url("../images/overhaul/tex-honeycomb-dark.webp") center / 460px repeat #0c0d11 !important; }
.wb-scope .wb-hero-v25 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--25{ position:relative; }

/* The split: copy 42 / board 58, vertically centered, TIGHT (the board is
   shorter than the copy column, so the hero never runs taller than the ask
   plus lead plus call row). */
.wb-scope .wb-hv--25 .wb-hv25-split{
  display:grid; grid-template-columns:minmax(0, 42fr) minmax(0, 58fr);
  gap:clamp(1.6rem, 1rem + 2.6vw, 3.6rem); align-items:center;
}

/* Copy column. The ask wrapper rides z5 so the live results dropdown always
   clears the opaque board beside it. */
.wb-scope .wb-hv--25 .wb-hv25-copy{ max-width:36rem; }
.wb-scope .wb-hv--25 .wb-hv25-askwrap{ position:relative; z-index:5; }
.wb-scope .wb-hv--25 .wb-h1{
  font-family:var(--wb-display) !important; /* fonts-modern pins p to Inter */
  font-size:clamp(1.7rem, 1.15rem + 1.9vw, 2.7rem); line-height:1.08;
}

/* The call row: the ONE primary CTA, red, phone-first, human microcopy. */
.wb-scope .wb-hv--25 .wb-hv25-call{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin-top:clamp(1rem, .7rem + 1vw, 1.6rem); }
.wb-scope .wb-hv--25 .wb-hv25-call__btn{
  display:inline-flex; align-items:center; background:var(--wb-red); color:#fff;
  font-family:var(--wb-display); font-weight:800; font-size:clamp(.95rem, .85rem + .35vw, 1.15rem);
  padding:.7rem 1.35rem; border-radius:999px; text-decoration:none; white-space:nowrap;
  box-shadow:0 10px 24px rgba(216,35,42,.32); transition:background .18s ease, transform .18s ease;
}
.wb-scope .wb-hv--25 .wb-hv25-call__btn:hover{ background:#b81d23; transform:translateY(-1px); }
.wb-scope .wb-hv--25 .wb-hv25-call__btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.wb-scope .wb-hv--25 .wb-hv25-call__note{ color:rgba(255,255,255,.74); font-size:.86rem; }

/* THE BOARD: one white evidence card, faintly warm paper, a whisper of tilt
   (JS reads --hv25-tilt for exact loupe math; keep the two in lockstep). */
.wb-scope .wb-hv--25 .wb-hv25-boardwrap{ position:relative; z-index:1; }
.wb-scope .wb-hv--25 .wb-hv25-board{
  --hv25-tilt:-1.4deg;
  position:relative; margin:0; background:#f7f5f0; border-radius:10px;
  padding:clamp(.65rem, .5rem + .5vw, 1rem) clamp(.7rem, .55rem + .55vw, 1.05rem) clamp(.5rem, .4rem + .4vw, .8rem);
  transform:rotate(var(--hv25-tilt));
  box-shadow:0 30px 60px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
}
.wb-scope .wb-hv--25 .wb-hv25-board__head{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin:0 0 .55rem;
  font-family:var(--wb-display) !important; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:#6b6f78;
}
.wb-scope .wb-hv--25 .wb-hv25-board__tally [data-count]{ color:var(--wb-red); font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--25 .wb-hv25-hint{ color:#9a9ea8; font-weight:600; letter-spacing:.1em; white-space:nowrap; }
.wb-scope .wb-hv--25 .wb-hv25-hint--touch{ display:none; }
@media (hover: none), (pointer: coarse){
  .wb-scope .wb-hv--25 .wb-hv25-hint--desk{ display:none; }
  .wb-scope .wb-hv--25 .wb-hv25-hint--touch{ display:inline; }
}
html:not(.wb-js) .wb-scope .wb-hv--25 .wb-hv25-hint{ display:none; } /* no JS, no loupe */

/* The tiles: a plain 4x2 contact grid. Fixed px gap so the JS clone lays out
   identically at the same width. */
.wb-scope .wb-hv--25 .wb-hv25-tiles{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.wb-scope .wb-hv--25 .wb-hv25-tile{ position:relative; display:block; text-decoration:none; background:#e8e5de; }
.wb-scope .wb-hv--25 .wb-hv25-tile img{ display:block; width:100%; height:auto; }
.wb-scope .wb-hv--25 .wb-hv25-tile:focus-visible{ outline:3px solid var(--wb-red); outline-offset:2px; }
.wb-scope .wb-hv--25 .wb-hv25-cap{
  display:block; padding:.28rem .1rem .34rem; font-size:.58rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em; color:#7a7e88; line-height:1.25;
}
/* The one visible grease-pencil note at rest: Hoober's tenure. */
.wb-scope .wb-hv--25 .wb-hv25-scribble{
  position:absolute; right:.3rem; top:.3rem; transform:rotate(-6deg);
  font-family:var(--wb-display); font-style:italic; font-weight:800; font-size:.74rem;
  color:var(--wb-red); text-shadow:0 0 3px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.6);
  pointer-events:none;
}
/* Receipts: sr-only in the base tiles (AT reads them on every tile; the eye
   only earns them under glass). */
.wb-scope .wb-hv--25 .wb-hv25-receipt{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.wb-scope .wb-hv--25 .wb-hv25-board__foot{
  margin:.55rem .1rem 0; font-family:var(--wb-display) !important; font-size:.7rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#6b6f78;
}

/* On hover+fine pointers with JS, the lens replaces tile clicks: the tiles go
   pointer-transparent (keyboard focus and Enter still work) and the cursor
   disappears over the sheet while the glass is up. */
@media (hover: hover) and (pointer: fine){
  html.wb-js .wb-scope .wb-hv--25 .wb-hv25-tiles .wb-hv25-tile{ pointer-events:none; }
  html.wb-js .wb-scope .wb-hv--25 .wb-hv25-tiles.is-lensing{ cursor:none; }
}

/* THE LENS: a chrome-ringed 150px glass, JS-positioned in the tiles' local
   (rotated) space; display gated on .is-on so it costs nothing elsewhere.
   The ::after sheen carries the faintest dot texture, a glass accent only,
   never ink identity. */
.wb-scope .wb-hv--25 .wb-hv25-lens{
  position:absolute; z-index:6; left:0; top:0; width:150px; height:150px;
  border-radius:50%; overflow:hidden; display:none; pointer-events:none; background:#fff;
  box-shadow:0 0 0 3px #dfe2e8, 0 0 0 6px #82868f, 0 18px 34px rgba(0,0,0,.45), inset 0 0 26px rgba(0,0,0,.3);
}
.wb-scope .wb-hv--25 .wb-hv25-lens.is-on{ display:block; }
.wb-scope .wb-hv--25 .wb-hv25-lens::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.26), rgba(255,255,255,0) 44%),
             radial-gradient(rgba(20,22,28,.08) .5px, transparent .6px);
  background-size:auto, 4px 4px;
}
/* The clone keeps .wb-hv25-tiles (identical grid) plus this override. */
.wb-scope .wb-hv--25 .wb-hv25-lensin{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
/* Under the glass the receipts turn visible: red grease pencil pinned to
   each tile's CENTER and sized to the lens window (the glass shows a 62px
   local circle at 2.4x, so a 54px block reads whole in one look; 5.5px type
   lands ~13px apparent). Hover any tile's middle and its receipt fills the
   glass. */
.wb-scope .wb-hv--25 .wb-hv25-lensin .wb-hv25-receipt{
  position:absolute; left:50%; top:48%; width:54px; height:auto; margin:0;
  transform:translate(-50%, -50%) rotate(-2deg);
  overflow:visible; clip:auto; clip-path:none; white-space:normal;
  font-family:var(--wb-display); font-style:italic; font-weight:800; font-size:5.5px; line-height:1.35;
  color:#e02830; text-align:center;
  text-shadow:0 0 2px rgba(255,255,255,.95), 0 0 5px rgba(255,255,255,.75);
}

/* THE TAP-LOUPE (touch + keyboard): a fixed circular disc over the board,
   receipt on a dark shade, prev/next to walk the eight jobs. */
.wb-scope .wb-hv--25 .wb-hv25-pop{ position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; }
.wb-scope .wb-hv--25 .wb-hv25-pop[hidden]{ display:none; }
.wb-scope .wb-hv--25 .wb-hv25-pop__scrim{ position:absolute; inset:0; background:rgba(8,9,12,.38); border:0; border-radius:10px; cursor:pointer; }
.wb-scope .wb-hv--25 .wb-hv25-pop__disc{
  position:relative; width:min(76vw, 320px); aspect-ratio:1/1; border-radius:50%; overflow:hidden; background:#111318;
  box-shadow:0 0 0 4px #dfe2e8, 0 0 0 8px #82868f, 0 24px 48px rgba(0,0,0,.55);
}
.wb-scope .wb-hv--25 .wb-hv25-pop__disc:focus-visible{ outline:3px solid var(--wb-red); outline-offset:6px; }
.wb-scope .wb-hv--25 .wb-hv25-pop__disc img{ position:absolute; inset:-16%; width:132%; height:132%; object-fit:cover; }
.wb-scope .wb-hv--25 .wb-hv25-pop__shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,9,12,.32), transparent 32% 46%, rgba(8,9,12,.86) 82%); }
.wb-scope .wb-hv--25 .wb-hv25-pop__receipt{
  position:absolute; left:12%; right:12%; bottom:22%; margin:0;
  font-family:var(--wb-display) !important; font-style:italic; font-weight:800;
  font-size:clamp(.85rem, .75rem + .5vw, 1.05rem); line-height:1.3; color:#ff6a70;
  text-align:center; transform:rotate(-2deg);
}
.wb-scope .wb-hv--25 .wb-hv25-pop__cap{
  position:absolute; left:14%; right:14%; bottom:11%; margin:0; text-align:center;
  font-family:var(--wb-display) !important; font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.82);
}
.wb-scope .wb-hv--25 .wb-hv25-pop__x{
  position:absolute; top:9%; right:9%; width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(15,17,22,.78); color:#fff; font-size:1.15rem; line-height:1; cursor:pointer;
}
.wb-scope .wb-hv--25 .wb-hv25-pop__nav{
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%;
  background:rgba(15,17,22,.78); color:#fff; font-size:.85rem; cursor:pointer;
}
.wb-scope .wb-hv--25 .wb-hv25-pop__nav--prev{ left:4%; }
.wb-scope .wb-hv--25 .wb-hv25-pop__nav--next{ right:4%; }
.wb-scope .wb-hv--25 .wb-hv25-pop__x:focus-visible,
.wb-scope .wb-hv--25 .wb-hv25-pop__nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* The magnifying-glass guy peeks over the board corner: brand echo of the
   loupe and the tap affordance. Deco only, never blocks a tap. */
.wb-scope .wb-hv--25 .wb-hv25-guy{
  position:absolute; right:-1.1rem; bottom:-1.5rem; width:clamp(76px, 8vw, 118px); height:auto;
  transform:rotate(6deg); filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); pointer-events:none; z-index:5;
}

/* No-JS receipts strip ("what the loupe would have shown you"). */
.wb-scope .wb-hv--25 .wb-hv25-noscript{ margin-top:.9rem; }
.wb-scope .wb-hv--25 .wb-hv25-noscript p{ margin:0; color:rgba(255,255,255,.74); font-size:.85rem; line-height:1.55; }
.wb-scope .wb-hv--25 .wb-hv25-noscript strong{ color:#fff; }

/* Phones + narrow: one column, copy first, board flat (tilt 0 keeps the tap
   targets honest), tiles 2x4, deco guy smaller. 390 verified sizes. */
@media (max-width: 1023px){
  .wb-scope .wb-hv--25 .wb-hv25-split{ grid-template-columns:minmax(0, 1fr); gap:1.6rem; }
  .wb-scope .wb-hv--25 .wb-hv25-copy{ max-width:none; }
  .wb-scope .wb-hv--25 .wb-hv25-board{ --hv25-tilt:0deg; transform:none; }
  .wb-scope .wb-hv--25 .wb-hv25-tiles{ grid-template-columns:repeat(2, 1fr); }
  .wb-scope .wb-hv--25 .wb-hv25-board__head{ flex-wrap:wrap; gap:.2rem .8rem; }
  .wb-scope .wb-hv--25 .wb-hv25-guy{ right:-.4rem; bottom:-.9rem; width:68px; }
}
@media (max-width: 480px){
  .wb-scope .wb-hv--25 .wb-hv25-cap{ font-size:.55rem; }
  .wb-scope .wb-hv--25 .wb-hv25-call{ gap:.6rem; }
}

/* Reduced motion: the call button sits still; the loupe stays (it is
   user-driven) but initHeroV25 snaps it with zero easing. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--25 .wb-hv25-call__btn{ transition:none; }
  .wb-scope .wb-hv--25 .wb-hv25-call__btn:hover{ transform:none; }
}


/* ============================================================
   HERO VARIANT 23 (skin 26): THE HALFTONE (build/39 generative-jobs)
   Paper-white band, black type, red accents only. The right panel is
   the job counter spent as a picture: one dot per finished job, drawn
   in reading order, 1996 top-left to today bottom-right; the grid
   outnumbers the jobs so the open corner ships ringed "room for
   yours". Standing rules: no crop marks, no CMYK strip, no press
   garnish; the dots are data, not ink. First paint = a ~40KB
   near-lossless webp bake; initHeroV26 redraws it live on canvas
   (desktop >=900px only), sweeps it in once behind a red line, and
   hangs the pointer loupe. Under 900px the static picture ships and
   taps into the shared lightbox.
   ============================================================ */
.wb-scope .wb-hero-v26 .wb-band__video-wrap,
.wb-scope .wb-hero-v26 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v26.wb-band--video{
  background:#f8f5ef !important;              /* paper, beats the inline poster bg */
  min-height:clamp(560px, 76vh, 780px);       /* rule 3: tighter than the stock 84vh */
}

.wb-scope .wb-hv--26{ position:relative; color:var(--wb-ink-2); padding:clamp(.5rem, 1vw, 1.2rem) 0; }
.wb-scope .wb-hv--26 .wb-hv26-grid{
  display:grid; grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr);
  gap:clamp(1.6rem, 1rem + 2.6vw, 3.6rem); align-items:center;
}

/* ---- Left column: dark type on paper (the band is .wb-band--dark, so every
   light-on-dark default needs the flip). ---- */
.wb-scope .wb-hv--26 .wb-kicker{ color:var(--wb-red); }
.wb-scope .wb-hv--26 .wb-hv26-h1{
  font-family:var(--wb-display) !important;   /* fonts-modern pins p to Inter */
  color:var(--wb-ink); margin:0 0 .35em; max-width:24ch;
  font-size:clamp(1.9rem, 1.25rem + 1.9vw, 2.8rem); line-height:1.02;
}
.wb-scope .wb-hv--26 .wb-hv26-lead{ color:var(--wb-ink-2); max-width:36rem; margin:0 0 .4rem; }

/* The focal ask on paper: same component, ink flipped, glow lightened. The
   row sits above the sheet in stacking so the live dropdown always lands on
   top of the opaque picture (and above it in DOM order on phones). */
.wb-scope .wb-hv--26 .wb-hv26-askrow{ position:relative; z-index:5; margin-bottom:clamp(.6rem, .4rem + .8vw, 1.2rem); }
.wb-scope .wb-hv--26 .wb-hero-ask__q{ color:var(--wb-ink); text-shadow:none; font-size:clamp(1.15rem, 1rem + .7vw, 1.55rem); }
.wb-scope .wb-hv--26 .wb-hero-ask__q-em{ color:var(--wb-red); }
.wb-scope .wb-hv--26 .wb-hero-ask__row{ box-shadow:0 16px 36px -16px rgba(26,29,33,.38), 0 0 0 1px rgba(26,29,33,.10); }
.wb-scope .wb-hv--26 .wb-hero-ask__note{ color:#565b63; }
.wb-scope .wb-hv--26 .wb-hero-ask__note a{ color:var(--wb-red); }
.wb-scope .wb-hv--26 .wb-hero-ask__wgsd img{ filter:drop-shadow(0 8px 18px rgba(26,29,33,.22)); }

/* ---- The picture. A white print floats at a hair of tilt; the art box owns
   --pad so the live canvas can register exactly over the served image. ---- */
.wb-scope .wb-hv--26 .wb-hv26-sheetcol{ min-width:0; }
.wb-scope .wb-hv--26 .wb-hv26-sheet{ margin:0; transform:rotate(1.2deg); }
.wb-scope .wb-hv--26 .wb-hv26-art{
  --pad:clamp(8px, .9vw, 13px);
  position:relative; background:#fff; padding:var(--pad); border-radius:6px;
  box-shadow:0 34px 64px -26px rgba(26,29,33,.45), 0 0 0 1px rgba(26,29,33,.08);
}
.wb-scope .wb-hv--26 .wb-hv26-zoom{ display:block; line-height:0; cursor:zoom-in; }
.wb-scope .wb-hv--26 .wb-hv26-img{ display:block; width:100%; height:auto; border-radius:2px; }
.wb-scope .wb-hv--26 .wb-hv26-cv{
  position:absolute; left:var(--pad); top:var(--pad); z-index:3;
  width:calc(100% - var(--pad)*2); height:calc(100% - var(--pad)*2);
}
.wb-scope .wb-hv--26 .wb-hv26-art.is-live{ cursor:crosshair; }
/* Once the live canvas mounts, the served bake under it must clear out, or
   the raster sweep paints over an identical picture and reads as nothing.
   visibility (not display) so the img keeps defining the art box height. */
.wb-scope .wb-hv--26 .wb-hv26-art.is-live .wb-hv26-img{ visibility:hidden; }

/* The honest open corner: the grid holds more cells than Weber has jobs, so
   the bottom right is visibly unfinished (faint hollow cells in the bake and
   the live draw). This ring is load-bearing, it says "intentional", and it
   points the reader back at the ask. */
.wb-scope .wb-hv--26 .wb-hv26-room{
  position:absolute; right:3.5%; bottom:3.2%; z-index:4;
  width:min(46%, 230px); padding:.16rem 0; text-align:center;
  border:1.5px dashed var(--wb-red); border-radius:999px;
  font-family:var(--wb-display) !important; font-weight:700; font-size:.6rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--wb-red);
  background:rgba(255,255,255,.74); pointer-events:none;
}

/* Caption: what the picture is + the live number that drew it. */
.wb-scope .wb-hv--26 .wb-hv26-cap{
  display:flex; flex-wrap:wrap; gap:.2rem 1rem; justify-content:space-between;
  margin:.75rem .15rem 0;
  font-family:var(--wb-display) !important; font-weight:700; font-size:.7rem;
  letter-spacing:.09em; text-transform:uppercase; color:#565b63;
}
.wb-scope .wb-hv--26 .wb-hv26-cap__count b{ color:var(--wb-red); font-weight:800; }

/* The loupe (initHeroV26, pointer:fine only): a round window into the master
   canvas, tagged with the device's one line. Direct manipulation, so it stays
   under reduced motion. */
.wb-scope .wb-hv--26 .wb-hv26-loupe{ position:absolute; z-index:6; pointer-events:none; display:none; transform:translate(-50%, -50%); }
.wb-scope .wb-hv--26 .wb-hv26-loupe canvas{
  display:block; width:140px; height:140px; border-radius:50%;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--wb-red), 0 22px 44px -14px rgba(26,29,33,.5);
}
.wb-scope .wb-hv--26 .wb-hv26-loupe span{
  position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%);
  white-space:nowrap; background:var(--wb-ink); color:#fff;
  font-family:var(--wb-display) !important; font-weight:700; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase; padding:.3rem .65rem; border-radius:999px;
}

/* ---- Stack (spec 390 plan): copy, ask, phone, then the straightened picture;
   the canvas/loupe never build under 900px, the bake + lightbox carry it. ---- */
@media (max-width:900px){
  .wb-scope .wb-hv--26 .wb-hv26-grid{ grid-template-columns:1fr; gap:1.5rem; }
  .wb-scope .wb-hv--26 .wb-hv26-sheet{ transform:none; max-width:560px; margin:0 auto; }
}
@media (max-width:700px){
  .wb-scope .wb-hv--26 .wb-hv26-desk{ display:none; }  /* lead trims to two sentences */
  .wb-scope .wb-hv--26 .wb-hv26-cap{ justify-content:center; text-align:center; }
}


/* ---- Variant skin 27 "The Shadowbox" (build/39 depth-scene, switcher slot 24).
   A hand-built paper diorama of Lancaster County mounted in a dark chrome-and-
   honeycomb shadowbox; every piece standing in the model is a real shipped job
   (fleet wrap, event poster, trade show booth, website, frosted storefront,
   grocery price signs, floor decal: marketing breadth, zero press garnish).
   True CSS 3D: one perspective stage, layers at real translateZ, so the damped
   pointer sway (initHeroV27) is a single transform on the scene. Crispness
   guard: the cue card, the die-cut ask flat, and the brass plaque sit OUTSIDE
   the 3D chain, so critical text never rotates and the search works mid-sway.
   Safari guard (Design seat 2's objection): the clip + radius live on the
   PERSPECTIVE element, never on the preserve-3d scene; no filter anywhere in
   the chain; every shadow is box-shadow. Standing rules: execution-partner
   copy up front, production once as the because-clause, phone twice (red
   button + brass plaque), live wb_job_count as the in-scene town billboard
   with weber_years beside it. fonts-modern pins p to Inter, so the display
   pieces re-pin to var(--wb-display) with !important. */
.wb-scope .wb-hero-v27 .wb-band__video-wrap,
.wb-scope .wb-hero-v27 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v27.wb-band--video{
  background:
    radial-gradient(60rem 32rem at 50% -6rem, rgba(216,35,42,.10), transparent 62%),
    linear-gradient(180deg, rgba(6,7,9,.74), rgba(6,7,9,.88)),
    #0a0b0d url("../images/overhaul/tex-honeycomb-dark.webp") center/560px repeat !important;
}
.wb-scope .wb-hero-v27 .wb-inner.wb-hero__summary{ width:100%; }
/* The box frames itself, so the band sheds most of its hero breathing room
   (standing rule 3: heroes stay tight, not tall). */
.wb-scope .wb-hero-v27.wb-band--video{ padding-top:clamp(1.4rem, 3vw, 2.75rem); padding-bottom:clamp(1.4rem, 3vw, 2.75rem); }
.wb-scope .wb-hv--27{ padding:0; }

/* THE BOX: honeycomb mat in a chrome rim (stacked ring shadows, no images
   beyond the shared texture). Grid: cue card | stage, then ask + plaque. */
.wb-scope .wb-hv--27 .wb-hv27-box{
  position:relative;
  display:grid;
  grid-template-columns:minmax(300px, 28rem) minmax(0, 1fr) auto;
  grid-template-areas:
    "card stage stage"
    "ask  ask   plq";
  gap:clamp(.9rem, .5rem + 1.2vw, 1.5rem);
  align-items:stretch;
  padding:clamp(1rem, .7rem + 1vw, 1.6rem);
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(8,9,12,.42), rgba(8,9,12,.72)),
    #101216 url("../images/overhaul/tex-honeycomb-dark.webp") center/420px repeat;
  box-shadow:
    0 0 0 1px #14161a,
    0 0 0 4px #3b4048,
    0 0 0 5px #101216,
    0 34px 80px -30px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 70px rgba(0,0,0,.6);
}

/* THE CUE CARD: flat paper, ink text, a half-degree of hand-placed tilt. */
.wb-scope .wb-hv--27 .wb-hv27-card{
  grid-area:card;
  position:relative;
  z-index:2;
  background:linear-gradient(180deg, #fdfbf6, #f2ecdf);
  border-radius:10px;
  padding:clamp(1.1rem, .9rem + .9vw, 1.7rem);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.75), inset 0 0 0 1px rgba(30,26,16,.08);
  transform:rotate(-.5deg);
}
.wb-scope .wb-hv--27 .wb-hv27-kicker{ color:var(--wb-red); margin-bottom:.7rem; }
.wb-scope .wb-hv--27 .wb-hv27-h1{
  font-family:var(--wb-display) !important;
  color:#17191d;
  font-size:clamp(1.8rem, 1.25rem + 1.6vw, 2.6rem);
  line-height:1.04;
  margin:0 0 .7rem;
}
.wb-scope .wb-hv--27 .wb-hv27-lead{ color:#3b3e44; font-size:clamp(.96rem, .88rem + .28vw, 1.06rem); line-height:1.52; margin:0 0 .95rem; }
.wb-scope .wb-hv--27 .wb-hv27-call{ display:flex; align-items:center; flex-wrap:wrap; gap:.6rem .8rem; margin:0 0 .95rem; }
.wb-scope .wb-hv--27 .wb-hv27-tel{
  display:inline-block;
  font-family:var(--wb-display) !important;
  font-weight:800;
  font-size:1.02rem;
  color:#fff;
  background:var(--wb-red);
  border-radius:999px;
  padding:.62rem 1.15rem;
  text-decoration:none;
  box-shadow:0 12px 26px -12px rgba(216,35,42,.65);
  transition:filter .15s ease, transform .1s ease;
  white-space:nowrap;
}
.wb-scope .wb-hv--27 .wb-hv27-tel:hover{ filter:brightness(1.08); }
.wb-scope .wb-hv--27 .wb-hv27-tel:active{ transform:translateY(1px); }
.wb-scope .wb-hv--27 .wb-hv27-tel i{ font-size:.85em; margin-right:.35em; }
.wb-scope .wb-hv--27 .wb-hv27-call-note{ font-size:.85rem; color:#565b63; }
/* The engraved brass strip at the card's base (display face, so re-pin). */
.wb-scope .wb-hv--27 .wb-hv27-etch{
  display:inline-block;
  font-family:var(--wb-display) !important;
  font-weight:700;
  font-size:.68rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#33290e;
  background:linear-gradient(165deg, #dcbc72, #b28d3e);
  border-radius:4px;
  padding:.42rem .7rem;
  margin:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.25), 0 6px 14px -8px rgba(0,0,0,.6);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}

/* THE STAGE: the perspective element. Sky + ground paint here (crisp, and no
   edge ever shows when the scene sways); clip + radius here too, NEVER on the
   preserve-3d scene (Safari flattening guard). */
.wb-scope .wb-hv--27 .wb-hv27-stage{
  grid-area:stage;
  position:relative;
  min-height:clamp(320px, 26vw, 440px);
  perspective:1200px;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(180deg, #f7f2e8 0%, #f0e8d8 57%, #cfc7b4 57.5%, #b3ab99 100%);
  box-shadow:inset 0 0 0 1px rgba(20,16,8,.35), inset 0 -40px 60px -34px rgba(30,20,8,.4), inset 0 26px 40px -30px rgba(30,20,8,.35);
}
.wb-scope .wb-hv--27 .wb-hv27-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change:transform;
}
.wb-scope .wb-hv--27 .wb-hv27-el{ position:absolute; transform:var(--tf, none); }

/* L0: the paper-cut skyline, oversized so its edges stay outside the frame at
   full sway (at Z-620 the plane renders at ~2/3 scale). */
.wb-scope .wb-hv--27 .wb-hv27-sky{ left:-46%; right:-46%; bottom:-6%; height:86%; --tf:translateZ(-620px); }
.wb-scope .wb-hv--27 .wb-hv27-sky svg{ position:absolute; inset:0; width:100%; height:100%; }

/* The town billboard (Z-360): white board on posts, live odometer. */
.wb-scope .wb-hv--27 .wb-hv27-billboard{
  left:23%; top:5%; width:31%;
  --tf:translateZ(-360px);
  display:flex; align-items:center; gap:.7rem;
  background:#fff;
  border-radius:5px;
  padding:.6rem .8rem;
  box-shadow:0 16px 30px -14px rgba(30,20,8,.55), inset 0 0 0 1px rgba(30,26,16,.1);
  text-decoration:none;
}
.wb-scope .wb-hv--27 .wb-hv27-billboard::before,
.wb-scope .wb-hv--27 .wb-hv27-billboard::after{
  content:""; position:absolute; top:99%; width:6px; height:42px;
  background:linear-gradient(#6b6350, #4d4636); z-index:-1;
}
.wb-scope .wb-hv--27 .wb-hv27-billboard::before{ left:16%; }
.wb-scope .wb-hv--27 .wb-hv27-billboard::after{ right:16%; }
.wb-scope .wb-hv--27 .wb-hv27-bb-lockup{ display:block; width:34%; height:auto; }
.wb-scope .wb-hv--27 .wb-hv27-bb-fig{ display:flex; flex-direction:column; min-width:0; }
.wb-scope .wb-hv--27 .wb-hv27-bb-label{ font-family:var(--wb-display) !important; font-weight:700; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:#565b63; }
.wb-scope .wb-hv--27 .wb-hv27-bb-num{ font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.05rem, .6rem + 1.2vw, 1.7rem); line-height:1.1; letter-spacing:-.01em; color:var(--wb-red); font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--27 .wb-hv27-bb-sub{ font-size:.62rem; color:#565b63; white-space:nowrap; }

/* The die-cut flats: white border, soft box-shadow, a paper foot at the base. */
.wb-scope .wb-hv--27 .wb-hv27-el--card{
  background:#fff;
  padding:5px;
  border-radius:3px;
  box-shadow:0 16px 26px -12px rgba(30,20,8,.5), inset 0 0 0 1px rgba(30,26,16,.08);
  text-decoration:none;
}
.wb-scope .wb-hv--27 .wb-hv27-el--card img{ display:block; width:100%; height:auto; border-radius:2px; }
.wb-scope .wb-hv--27 .wb-hv27-el--card::after{
  content:""; position:absolute; left:34%; bottom:-8px; width:32%; height:8px;
  background:#e6dfcc;
  clip-path:polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  box-shadow:0 10px 14px 4px rgba(30,20,8,.3);
  z-index:-1;
}
/* Hover caption chips (named client + deliverable, the honesty layer). */
.wb-scope .wb-hv--27 .wb-hv27-cap{
  position:absolute; left:6px; bottom:6px; max-width:calc(100% - 12px);
  font-family:var(--wb-display) !important;
  font-size:.6rem; font-weight:700; letter-spacing:.02em;
  color:#fff; background:rgba(18,20,24,.88);
  padding:.22rem .5rem; border-radius:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
.wb-scope .wb-hv--27 .wb-hv27-el--card:hover .wb-hv27-cap,
.wb-scope .wb-hv--27 .wb-hv27-el--card:focus-visible .wb-hv27-cap{ opacity:1; }
.wb-scope .wb-hv--27 .wb-hv27-el--card:hover{ box-shadow:0 20px 32px -12px rgba(30,20,8,.6), inset 0 0 0 1px rgba(216,35,42,.35); }
/* Touch has no hover: the honesty layer renders at rest on every visible
   flat (truck, poster, price signs on phones), same fix as the slot 17/20
   tape captions, instead of hiding until the lightbox opens. */
@media (hover: none){
  .wb-scope .wb-hv--27 .wb-hv27-el--card .wb-hv27-cap{ opacity:1; }
}

/* No paper foot on the pole poster or the hanging signs; they do not stand. */
.wb-scope .wb-hv--27 .wb-hv27-pole::after,
.wb-scope .wb-hv--27 .wb-hv27-signs::after{ display:none; }

/* Placements, back to front. Widths are % of the stage; depth is real Z. */
.wb-scope .wb-hv--27 .wb-hv27-truck{ left:15%; top:44%; width:33%; --tf:translateZ(-340px) rotate(-1.1deg); }
.wb-scope .wb-hv--27 .wb-hv27-pole{ left:63%; top:14%; width:13%; --tf:translateZ(-330px) rotate(1.4deg); }
.wb-scope .wb-hv--27 .wb-hv27-pole::before{
  content:""; position:absolute; left:46%; top:-16%; width:7px; height:210%;
  background:linear-gradient(#8a7a5e, #675b45); border-radius:2px; z-index:-2;
}
.wb-scope .wb-hv--27 .wb-hv27-detective{ left:2.5%; bottom:6%; width:13.5%; --tf:translateZ(-150px) rotate(-1.6deg); }
.wb-scope .wb-hv--27 .wb-hv27-booth{ left:33%; bottom:4%; width:23.5%; --tf:translateZ(-140px) rotate(.8deg); }
.wb-scope .wb-hv--27 .wb-hv27-site{ left:66.5%; bottom:8%; width:21.5%; --tf:translateZ(-130px) rotate(-1.2deg); padding-top:18px; }
/* Browser chrome on the website flat: bar + three dots, pure CSS. */
.wb-scope .wb-hv--27 .wb-hv27-site::before{
  content:""; position:absolute; left:5px; right:5px; top:5px; height:14px;
  border-radius:3px 3px 0 0;
  background:
    radial-gradient(circle at 10px 7px, #d8232a 2.4px, transparent 3px),
    radial-gradient(circle at 22px 7px, #dfa53c 2.4px, transparent 3px),
    radial-gradient(circle at 34px 7px, #5d9c5d 2.4px, transparent 3px),
    #e8e3d7;
}
.wb-scope .wb-hv--27 .wb-hv27-whoopie{
  left:56%; bottom:-2.5%; width:15%; height:auto;
  --tf:translateZ(-60px) rotateX(62deg);
  transform-origin:50% 100%;
  border-radius:6px;
  box-shadow:0 10px 16px rgba(30,20,8,.3);
}
.wb-scope .wb-hv--27 .wb-hv27-van{ left:17.5%; bottom:2.5%; width:16.5%; height:auto; --tf:translateZ(-30px); }
.wb-scope .wb-hv--27 .wb-hv27-signs{ left:80%; top:0; width:17.5%; --tf:translateZ(-20px) rotate(.9deg); }
/* The signs hang on visible paper tabs that run up past the frame edge. */
.wb-scope .wb-hv--27 .wb-hv27-signs::before{
  content:""; position:absolute; top:-30px; left:22%; width:11px; height:32px;
  background:#efe8d6; box-shadow:52px 0 0 #efe8d6, 0 4px 8px rgba(30,20,8,.2);
  z-index:-1;
}

/* Footlights: the red glow along the stage lip, outside the 3D chain. */
.wb-scope .wb-hv--27 .wb-hv27-foot{
  position:absolute; left:0; right:0; bottom:0; height:17%;
  background:linear-gradient(0deg, rgba(216,35,42,.30), rgba(216,35,42,.08) 55%, transparent);
  pointer-events:none; z-index:2;
}

/* THE APRON, the one unprinted flat: dashed die-cut frame AROUND the standard
   ask pill (the input looks like an input; the blank is just its mount). */
.wb-scope .wb-hv--27 .wb-hv27-ask{
  grid-area:ask;
  position:relative;
  z-index:5;
  background:linear-gradient(180deg, #f9f5ec, #f1ebdd);
  border-radius:12px;
  padding:clamp(.85rem, .65rem + .6vw, 1.15rem) clamp(1rem, .8rem + .8vw, 1.5rem);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.7), inset 0 0 0 1px rgba(30,26,16,.07);
}
.wb-scope .wb-hv--27 .wb-hv27-ask::before{
  content:""; position:absolute; inset:7px;
  border:2px dashed rgba(30,32,38,.38);
  border-radius:8px;
  pointer-events:none;
}
/* Signature detail: typing runs a red ink wash down the flat. */
.wb-scope .wb-hv--27 .wb-hv27-ask::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(216,35,42,.14), rgba(216,35,42,.02));
  border-radius:12px;
  transform:scaleY(0); transform-origin:top;
  pointer-events:none;
}
.wb-scope .wb-hv--27 .wb-hv27-ask.is-inked::after{ animation:wb-hv27-ink .7s ease-out both; }
@keyframes wb-hv27-ink{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
/* ...and when live results land, the DONE stamp thumps the corner. */
.wb-scope .wb-hv--27 .wb-hv27-stamp{
  position:absolute; right:14px; top:-16px; width:74px; height:auto;
  transform:rotate(9deg) scale(0); opacity:0; pointer-events:none; z-index:6;
}
.wb-scope .wb-hv--27 .wb-hv27-ask:has(.wb-hero-ask__results.is-open) .wb-hv27-stamp{
  opacity:1; transform:rotate(9deg) scale(1);
  animation:wb-hv27-thump .22s cubic-bezier(.2, 1.9, .4, 1) both;
}
@keyframes wb-hv27-thump{ from{ transform:rotate(9deg) scale(1.9); opacity:0; } to{ transform:rotate(9deg) scale(1); opacity:1; } }
/* Shared ask recolors for the paper flat (light ground, ink text). */
.wb-scope .wb-hv--27 .wb-hero-ask{ max-width:none; margin-top:0; }
.wb-scope .wb-hv--27 .wb-hero-ask__q{ color:#1c1e22; text-shadow:none; font-size:clamp(1.1rem, .95rem + .55vw, 1.4rem); margin-bottom:.5rem; }
.wb-scope .wb-hv--27 .wb-hero-ask__q-em{ color:var(--wb-red); }
.wb-scope .wb-hv--27 .wb-hero-ask__row{ box-shadow:0 14px 30px -14px rgba(0,0,0,.45), inset 0 0 0 1px rgba(30,26,16,.14); }
.wb-scope .wb-hv--27 .wb-hero-ask__note{ color:#4c5058; }
.wb-scope .wb-hv--27 .wb-hero-ask__note a{ color:var(--wb-red); }

/* The brass plaque: retention + the phone number, one designed object. */
.wb-scope .wb-hv--27 .wb-hv27-plaque{
  grid-area:plq;
  align-self:center;
  display:flex; flex-direction:column; gap:.1rem;
  max-width:15rem;
  font-family:var(--wb-display) !important;
  color:#33290e;
  background:linear-gradient(165deg, #dcbc72, #ac883b);
  border-radius:6px;
  padding:.75rem 1rem;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.3), 0 10px 22px -10px rgba(0,0,0,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  transition:filter .15s ease;
}
.wb-scope .wb-hv--27 .wb-hv27-plaque:hover{ filter:brightness(1.06); }
.wb-scope .wb-hv--27 .wb-hv27-plaque strong{ font-size:.82rem; font-weight:800; letter-spacing:.02em; }
.wb-scope .wb-hv--27 .wb-hv27-plaque span{ font-size:.78rem; font-weight:600; }
.wb-scope .wb-hv--27 .wb-hv27-plaque em{ font-style:normal; font-weight:900; font-size:.95rem; letter-spacing:.03em; color:#4a1508; margin-top:.25rem; }

/* Pop-up-book assembly: back-to-front rise with a small settle, once per
   activation, .wb-js gated so no-JS ships the composed scene. Keyframes ride
   each flat's own --tf so placement transforms never get clobbered. */
@keyframes wb-hv27-rise{
  from{ opacity:0; transform:var(--tf, translateZ(0)) translateY(26px); }
  60%{ opacity:1; transform:var(--tf, translateZ(0)) translateY(-5px); }
  to{ opacity:1; transform:var(--tf, translateZ(0)); }
}
.wb-js .wb-scope .wb-hv--27 .wb-hv27-el{ animation:wb-hv27-rise .55s cubic-bezier(.3, 1.2, .4, 1) both; }
.wb-js .wb-scope .wb-hv--27 .wb-hv27-sky{ animation-delay:.02s; }
.wb-js .wb-scope .wb-hv--27 .wb-hv27-l1{ animation-delay:.12s; }
.wb-js .wb-scope .wb-hv--27 .wb-hv27-l2{ animation-delay:.24s; }
.wb-js .wb-scope .wb-hv--27 .wb-hv27-l3{ animation-delay:.36s; }
.wb-js .wb-scope .wb-hv--27 .wb-hv27-l4{ animation-delay:.46s; }

/* The scroll dolly (choreography step 3): a gentle push-in as the hero exits,
   pure CSS where animation-timeline exists, silently absent elsewhere. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference) and (min-width:1024px){
    .wb-scope .wb-hv--27 .wb-hv27-scene{
      animation:wb-hv27-dolly linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes wb-hv27-dolly{
      from{ transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }
      to{ transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(120px); }
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .wb-js .wb-scope .wb-hv--27 .wb-hv27-el{ animation:none; opacity:1; }
  .wb-scope .wb-hv--27 .wb-hv27-ask.is-inked::after{ animation:none; transform:scaleY(1); }
  .wb-scope .wb-hv--27 .wb-hv27-ask:has(.wb-hero-ask__results.is-open) .wb-hv27-stamp{ animation:none; }
}

/* Tablet: single column, full scene kept, plaque joins the ask row's foot. */
@media (max-width:1023px){
  .wb-scope .wb-hv--27 .wb-hv27-box{
    grid-template-columns:minmax(0, 1fr);
    grid-template-areas:"card" "ask" "stage" "plq";
  }
  .wb-scope .wb-hv--27 .wb-hv27-stage{ min-height:clamp(320px, 44vw, 440px); }
  .wb-scope .wb-hv--27 .wb-hv27-plaque{ align-self:start; max-width:none; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:.15rem .45rem; }
}

/* Phone (spec's 390 plan): shallow three-layer scene ~46svh (skyline, truck,
   poster pole, hanging signs, billboard), ask directly under the lead, the
   deeper-scene flats display:none (they are loading=lazy, so never fetched). */
@media (max-width:699px){
  .wb-scope .wb-hv--27 .wb-hv27-m-hide{ display:none; }
  .wb-scope .wb-hv--27 .wb-hv27-stage{ min-height:0; height:46vh; height:46svh; }
  .wb-scope .wb-hv--27 .wb-hv27-card{ transform:none; }
  .wb-scope .wb-hv--27 .wb-hv27-billboard{ left:5%; top:6%; width:56%; }
  .wb-scope .wb-hv--27 .wb-hv27-truck{ left:4%; top:47%; width:56%; }
  .wb-scope .wb-hv--27 .wb-hv27-pole{ left:66%; top:22%; width:20%; }
  .wb-scope .wb-hv--27 .wb-hv27-signs{ left:71%; top:0; width:26%; }
  .wb-scope .wb-hv--27 .wb-hv27-etch{ font-size:.62rem; }
}


/* ---- Variant skin 28 "The Permanent Collection" (build/39 one-object-luxury,
   switcher slot 25). An after-hours gallery: charcoal wall with the honeycomb
   texture at ~5%, brushed-metal WGSD wall letters, one client piece spotlit in
   a chrome frame, a brass placard whose engraved accession number is the live
   job counter, a red gallery dot, and the collection index rail. Committee
   fixes carried in: the five-exhibit rail makes breadth visible with zero
   clicks (Content seat 2 / UI/UX seat 1), and the ask keeps the full focal
   component on the ledger row instead of a demoted hairline (UI/UX seat 2).
   Owner standing rules: no print garnish anywhere (the dot and the placard are
   museum language, not pressroom), copy column tight, phone is the only
   saturated red on the wall. fonts-modern pins p to Inter with !important,
   hence the var(--wb-display) re-assertions on p-based display type. */

/* Band level: hide the shared video + scrim; the wall is flat charcoal with
   the honeycomb texture as a faint painted-drywall grain (::before only
   exists while the skin's band class is active, so the texture never loads
   for other variants; it is also shared with .wb-bg-honeycomb, so usually
   cached). !important: the section carries an inline poster background. */
.wb-scope .wb-hero-v28 .wb-band__video-wrap,
.wb-scope .wb-hero-v28 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v28.wb-band--video{ background:#121212 !important; }
.wb-scope .wb-hero-v28.wb-band--video::before{ content:""; position:absolute; inset:0; background:url("../images/overhaul/tex-honeycomb-dark.webp") center top/cover no-repeat; opacity:.05; pointer-events:none; }
.wb-scope .wb-hero-v28 .wb-inner.wb-hero__summary{ width:100%; }

.wb-scope .wb-hv--28{ position:relative; padding:clamp(.4rem, .8vw, 1rem) 0 clamp(.5rem, 1vw, 1.1rem); }

/* THE ROOM: copy column left, exhibit right, both centered on the wall. */
.wb-scope .wb-hv--28 .wb-hv28-room{ display:grid; grid-template-columns:minmax(0, 1.06fr) minmax(0, 1fr); gap:clamp(1.6rem, 1rem + 3vw, 4rem); align-items:center; }

/* The lobby name: WGSD lockup mounted like metal wall letters. */
.wb-scope .wb-hv--28 .wb-hv28-letters{ display:inline-block; margin-bottom:clamp(.7rem, 1.2vw, 1.1rem); }
.wb-scope .wb-hv--28 .wb-hv28-letters img{ display:block; width:auto; height:clamp(38px, 3.4vw, 52px); filter:drop-shadow(0 3px 6px rgba(0,0,0,.65)) drop-shadow(0 14px 30px rgba(0,0,0,.4)); }

.wb-scope .wb-hv--28 .wb-hv28-kicker{ color:#b6ae9f; }
.wb-scope .wb-hv--28 .wb-hv28-kicker2{ display:block; margin-top:.3rem; color:#8f887b; font-size:.86em; letter-spacing:.14em; }

/* Headline tight (owner rule 3); chrome treatment rides .wb-metal-text. */
.wb-scope .wb-hv--28 .wb-hv28-h1{ font-family:var(--wb-display) !important; font-size:clamp(1.9rem, 1.15rem + 2.3vw, 3rem); line-height:1.07; margin:.35rem 0 0; }
.wb-scope .wb-hv--28 .wb-hv28-lead{ max-width:34rem; margin-top:clamp(.7rem, 1.2vw, 1.1rem); }

/* The phone: the only saturated color on the wall, with a human under it. */
.wb-scope .wb-hv--28 .wb-hv28-callrow{ display:flex; align-items:center; flex-wrap:wrap; gap:.45rem 1rem; margin:clamp(1.1rem, 1.8vw, 1.7rem) 0 0; }
.wb-scope .wb-hv--28 .wb-hv28-call{ display:inline-flex; align-items:center; gap:.6rem; background:var(--wb-red); color:#fff; font-family:var(--wb-display) !important; font-weight:800; font-size:1.02rem; padding:.72rem 1.3rem; border-radius:.45rem; text-decoration:none; box-shadow:0 10px 30px rgba(216,35,42,.38), 0 2px 8px rgba(0,0,0,.5); transition:transform .15s ease, box-shadow .15s ease; }
.wb-scope .wb-hv--28 .wb-hv28-call:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 14px 36px rgba(216,35,42,.52), 0 3px 10px rgba(0,0,0,.5); }
.wb-scope .wb-hv--28 .wb-hv28-call-note{ color:#a89f90; font-size:.88rem; }

/* THE EXHIBIT STAGE. The spotlight is one element, two warm radial washes
   (cone from above + pool behind the frame), faded up with a single subtle
   flicker; compositor-only (opacity), and pure flavor: copy and art are fully
   legible with the light off. */
.wb-scope .wb-hv--28 .wb-hv28-stage{ position:relative; padding-top:clamp(.5rem, 1.2vw, 1.2rem); }
.wb-scope .wb-hv--28 .wb-hv28-cone{ position:absolute; z-index:0; left:-16%; right:-16%; top:-44%; bottom:-6%; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 34% at 50% 20%, rgba(255,236,200,.20), rgba(255,236,200,.06) 55%, transparent 76%),
    radial-gradient(ellipse 62% 46% at 50% 54%, rgba(255,236,200,.10), transparent 70%);
  animation:wbHv28Light 1.15s ease-out .1s both; }
@keyframes wbHv28Light{ 0%{ opacity:0; } 45%{ opacity:.9; } 55%{ opacity:.55; } 66%{ opacity:.95; } 100%{ opacity:1; } }

/* The chrome frame: brushed-metal border via a border-box gradient, warm
   gallery mat via the padding-box fill, deep wall shadow. */
.wb-scope .wb-hv--28 .wb-hv28-frame{ position:relative; z-index:1; border:9px solid transparent; border-radius:3px; padding:clamp(10px, 1.2vw, 16px);
  background:linear-gradient(#efe9dd, #e6dfd0) padding-box, linear-gradient(150deg, #f8fafc 0%, #8e97a2 30%, #e3e9ee 50%, #5c646f 70%, #c6cdd5 100%) border-box;
  box-shadow:0 26px 64px rgba(0,0,0,.62), 0 6px 18px rgba(0,0,0,.5); }
.wb-scope .wb-hv--28 .wb-hv28-art{ position:relative; aspect-ratio:16 / 10; overflow:hidden; background:#0d0d0d; box-shadow:inset 0 1px 6px rgba(0,0,0,.4); }
.wb-scope .wb-hv--28 .wb-hv28-fig{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; }
.wb-scope .wb-hv--28 .wb-hv28-fig.is-on{ opacity:1; visibility:visible; transition:opacity .3s ease; }
.wb-scope .wb-hv--28 .wb-hv28-fig__a{ position:absolute; inset:0; display:block; }
.wb-scope .wb-hv--28 .wb-hv28-fig__a img{ width:100%; height:100%; object-fit:cover; display:block; }
/* The website exhibit hangs in a minimal browser chrome, digital work on the
   same wall; the bar is UI language, not print garnish. */
.wb-scope .wb-hv--28 .wb-hv28-fig--web .wb-hv28-fig__a{ top:22px; }
.wb-scope .wb-hv--28 .wb-hv28-fig--web .wb-hv28-fig__a img{ object-position:top; }
.wb-scope .wb-hv--28 .wb-hv28-webbar{ position:absolute; top:0; left:0; right:0; height:22px; background:#23262b; }
.wb-scope .wb-hv--28 .wb-hv28-webbar::before{ content:""; position:absolute; top:8px; left:11px; width:6px; height:6px; border-radius:50%; background:#8d949e; box-shadow:11px 0 0 #8d949e, 22px 0 0 #8d949e; }

/* The red gallery dot on the frame corner; ticks in last. Tooltip is CSS-only
   (hover + keyboard focus), so the joke never needs JS. */
.wb-scope .wb-hv--28 .wb-hv28-dot{ position:absolute; top:-8px; right:-8px; z-index:2; width:18px; height:18px; padding:0; border:2px solid rgba(255,255,255,.18); border-radius:50%; background:radial-gradient(circle at 35% 30%, #ff6a6f, var(--wb-red) 60%, #8f1015); box-shadow:0 0 14px rgba(216,35,42,.75), 0 2px 6px rgba(0,0,0,.5); cursor:help; animation:wbHv28Dot .45s ease-out 1.5s both; }
@keyframes wbHv28Dot{ 0%{ transform:scale(0); } 65%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.wb-scope .wb-hv--28 .wb-hv28-dot::after{ content:attr(data-tip); position:absolute; right:-6px; top:calc(100% + 10px); width:max-content; max-width:230px; background:#1b1b1b; color:#efe8da; border:1px solid rgba(255,255,255,.14); font-size:.8rem; font-weight:400; line-height:1.4; text-align:left; padding:.5rem .7rem; border-radius:.4rem; box-shadow:0 12px 30px rgba(0,0,0,.55); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }
.wb-scope .wb-hv--28 .wb-hv28-dot:hover::after,
.wb-scope .wb-hv--28 .wb-hv28-dot:focus-visible::after{ opacity:1; transform:none; }

/* THE PLACARD: engraved brass; the accession number is the live job counter
   (shared [data-count] odometer), labeled plainly so the number reads as
   evidence, not decor (owner rule 2: clarity). */
.wb-scope .wb-hv--28 .wb-hv28-plq{ position:relative; z-index:1; margin:clamp(.8rem, 1.2vw, 1.1rem) auto 0; width:92%; background:linear-gradient(160deg, #d3bc8b 0%, #b59a66 45%, #97794b 100%); border-radius:3px; padding:.7rem .95rem .75rem; box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 5px rgba(0,0,0,.28); color:#32281a; }
.wb-scope .wb-hv--28 .wb-hv28-no{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem .45rem; margin:0 0 .4rem; padding-bottom:.4rem; border-bottom:1px solid rgba(50,40,26,.28); font-family:var(--wb-display) !important; font-weight:800; font-size:1.12rem; letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,.3); }
.wb-scope .wb-hv--28 .wb-hv28-no__live{ font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; opacity:.72; }
.wb-scope .wb-hv--28 .wb-hv28-plate{ display:none; }
.wb-scope .wb-hv--28 .wb-hv28-plate.is-on{ display:block; }
.wb-scope .wb-hv--28 .wb-hv28-plate__title{ margin:0; font-family:var(--wb-display) !important; font-weight:800; font-size:.98rem; text-shadow:0 1px 0 rgba(255,255,255,.3); }
.wb-scope .wb-hv--28 .wb-hv28-plate__cred{ margin:.18rem 0 0; font-size:.8rem; line-height:1.45; color:#4a3d29; text-shadow:0 1px 0 rgba(255,255,255,.22); }

/* THE COLLECTION INDEX: prev/next plus all five thumbs, breadth in one glance. */
.wb-scope .wb-hv--28 .wb-hv28-walk{ display:flex; align-items:center; gap:.45rem; margin-top:clamp(.7rem, 1.1vw, 1rem); }
.wb-scope .wb-hv--28 .wb-hv28-nav{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#e9e2d3; font-size:.8rem; text-decoration:none; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.wb-scope .wb-hv--28 .wb-hv28-nav:hover{ border-color:var(--wb-red); color:#fff; background:rgba(216,35,42,.18); }
.wb-scope .wb-hv--28 .wb-hv28-th{ position:relative; flex:1 1 0; min-width:0; display:block; border:1px solid rgba(255,255,255,.16); border-radius:2px; overflow:hidden; background:#000; opacity:.62; transition:opacity .15s ease, box-shadow .15s ease; }
.wb-scope .wb-hv--28 .wb-hv28-th img{ width:100%; height:auto; display:block; }
.wb-scope .wb-hv--28 .wb-hv28-th:hover,
.wb-scope .wb-hv--28 .wb-hv28-th:focus-visible{ opacity:1; }
.wb-scope .wb-hv--28 .wb-hv28-th[aria-current="true"]{ opacity:1; border-color:transparent; box-shadow:0 0 0 2px var(--wb-red); }
.wb-scope .wb-hv--28 .wb-hv28-range{ margin:.5rem 0 0; font-family:var(--wb-display) !important; font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#9c9484; }

/* THE COMMISSION LEDGER: hairline row, full-width; the shared focal ask rides
   it intact (live AJAX + GET fallback). z5 keeps the dropdown over anything
   below the band. The WGSD stamp is scaled to maker's-mark size. */
.wb-scope .wb-hv--28 .wb-hv28-askrow{ position:relative; z-index:5; max-width:none; margin:clamp(1.5rem, 1rem + 1.8vw, 2.6rem) 0 0; padding-top:clamp(1rem, 1.6vw, 1.5rem); border-top:1px solid rgba(255,255,255,.13); }
.wb-scope .wb-hv--28 .wb-hv28-askrow .wb-hero-ask__wgsd img{ height:clamp(56px, 5.4vw, 76px); }
.wb-scope .wb-hv--28 .wb-hv28-askrow .wb-hero-ask__q{ font-size:clamp(1.15rem, 1rem + .8vw, 1.6rem); }

/* Tablet/phone: one column, museum order per the spec (letters, kicker, H1,
   lead, exhibit + placard + rail, then the full-width call button, then the
   ledger). display:contents lifts the copy children into the flex order so
   the phone button can follow the exhibit, the native gesture first. */
@media (max-width:900px){
  .wb-scope .wb-hv--28 .wb-hv28-room{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .wb-scope .wb-hv--28 .wb-hv28-copy{ display:contents; }
  .wb-scope .wb-hv--28 .wb-hv28-letters{ order:1; margin-bottom:.55rem; }
  .wb-scope .wb-hv--28 .wb-hv28-letters img{ height:34px; }
  .wb-scope .wb-hv--28 .wb-hv28-kicker{ order:2; }
  .wb-scope .wb-hv--28 .wb-hv28-h1{ order:3; }
  .wb-scope .wb-hv--28 .wb-hv28-lead{ order:4; }
  .wb-scope .wb-hv--28 .wb-hv28-stage{ order:5; margin-top:1rem; }
  .wb-scope .wb-hv--28 .wb-hv28-callrow{ order:6; margin-top:1.2rem; }
  .wb-scope .wb-hv--28 .wb-hv28-call{ flex:1 1 100%; justify-content:center; }
  .wb-scope .wb-hv--28 .wb-hv28-call-note{ flex:1 1 100%; text-align:center; }
  .wb-scope .wb-hv--28 .wb-hv28-plq{ width:100%; }
  .wb-scope .wb-hv--28 .wb-hv28-cone{ top:-18%; }
}
@media (max-width:560px){
  .wb-scope .wb-hv--28 .wb-hv28-lead-trim{ display:none; } /* lead trims to one idea; the retention line stays */
  .wb-scope .wb-hv--28 .wb-hv28-askrow .wb-hero-ask__wgsd{ display:none; } /* the wall letters already carry the mark */
  .wb-scope .wb-hv--28 .wb-hv28-nav{ width:40px; height:40px; } /* large tap arrows */
  .wb-scope .wb-hv--28 .wb-hv28-kicker2{ letter-spacing:.08em; }
}

/* Reduced motion: lights already on, dot already placed, swaps instant. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--28 .wb-hv28-cone,
  .wb-scope .wb-hv--28 .wb-hv28-dot{ animation:none; }
  .wb-scope .wb-hv--28 .wb-hv28-fig,
  .wb-scope .wb-hv--28 .wb-hv28-fig.is-on,
  .wb-scope .wb-hv--28 .wb-hv28-call{ transition:none; }
}


/* ---- Variant skin 29 "Opening Titles" (build/39 title-sequence, switcher
   slot 26). The homepage opens like the title sequence of a long-running
   production: a letterboxed near-black screen holds six Saul Bass style
   cards for 14s (first visit only; initHeroV29 adds .is-titles), then rests
   forever on the server-rendered end state. The conversion row (WGSD lockup
   + live ask + phone) is in-flow BELOW the screen and never moves a pixel
   between states. Owner standing rules: the progress bar is a plain film
   timeline (data ticks, not a CMYK strip); full-service lands on card one;
   heroes stay tight (the screen is content-sized, min 300px, not 56vh).
   fonts-modern pins p to Inter with !important, hence the var(--wb-display)
   re-assertions on p-based display type. All sequence timing lives here in
   stacked animation-delays; compositor-only opacity/transform, and the
   whole run is pausable by class (.is-paused) and dead under
   prefers-reduced-motion. */

/* Band level: hide the shared video + scrim; the theater is flat near-black
   (!important: the section carries an inline poster background). */
.wb-scope .wb-hero-v29 .wb-band__video-wrap,
.wb-scope .wb-hero-v29 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v29.wb-band--video{ background:#0a0a0c !important; }
.wb-scope .wb-hero-v29 .wb-inner.wb-hero__summary{ width:100%; }

/* Sequence clock: one place to retime (mobile overrides at the bottom). */
.wb-scope .wb-hv--29{ position:relative; padding:clamp(.3rem, .8vw, .9rem) 0 clamp(.4rem, .9vw, 1rem);
  --hv29-end:13.1s;      /* end-state fade-in delay (EndIn runs 1.1s; total 14.2s) */
  --hv29-prog:14.2s;     /* timeline fill duration */
  --hv29-sting:12.55s;   /* rocket sweep delay */
  --hv29-pulse:13.2s;    /* WGSD lockup pulse delay */
}
.wb-scope .wb-hv--29 [hidden]{ display:none !important; }

/* THE SCREEN: slim letterbox bars top/bottom (film language, not print),
   faint honeycomb under everything, content-sized so it stays tight. */
.wb-scope .wb-hv--29 .wb-hv29-screen{ position:relative; overflow:hidden; min-height:300px; border-radius:6px; background:#101014; border-top:10px solid #040405; border-bottom:10px solid #040405; box-shadow:0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4); }
.wb-scope .wb-hv--29 .wb-hv29-screen::before{ content:""; position:absolute; inset:0; background:url("../images/overhaul/tex-honeycomb-dark.webp") center top/cover no-repeat; opacity:.08; pointer-events:none; }

/* THE END STATE: the permanent hero, centered on the screen. */
.wb-scope .wb-hv--29 .wb-hv29-end{ position:relative; z-index:1; text-align:center; max-width:54rem; margin:0 auto; padding:clamp(1.7rem, 2.4vw, 2.7rem) clamp(1.2rem, 3vw, 2.5rem) clamp(1.9rem, 2.6vw, 2.9rem); }
.wb-scope .wb-hv--29 .wb-hv29-kicker{ letter-spacing:.17em; }
.wb-scope .wb-hv--29 .wb-hv29-h1{ font-family:var(--wb-display) !important; font-size:clamp(1.8rem, 1.05rem + 2.4vw, 2.95rem); line-height:1.08; margin:.55rem auto 0; max-width:26ch; }
.wb-scope .wb-hv--29 .wb-hv29-lead{ margin:clamp(.7rem, 1.2vw, 1rem) auto 0; max-width:42rem; }
.wb-scope .wb-hv--29 .wb-hv29-count{ font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--29 .wb-hv29-endrow{ margin:clamp(.7rem, 1.1vw, 1rem) 0 0; min-height:1.6rem; }
.wb-scope .wb-hv--29 .wb-hv29-replay{ display:inline-flex; align-items:center; gap:.45rem; background:none; border:1px solid rgba(255,255,255,.22); color:#c9c4bb; font-size:.8rem; letter-spacing:.06em; padding:.32rem .85rem; border-radius:2rem; cursor:pointer; transition:color .15s ease, border-color .15s ease; }
.wb-scope .wb-hv--29 .wb-hv29-replay:hover{ color:#fff; border-color:rgba(255,255,255,.5); }

/* THE FILM LAYER: absolute over the end state, pointer-events off (the only
   clickable things during the run are the two controls at z3). Nothing in
   here loads until .is-titles flips it to block. */
.wb-scope .wb-hv--29 .wb-hv29-film{ display:none; }
.wb-scope .wb-hv--29.is-titles .wb-hv29-film{ display:block; position:absolute; inset:0; z-index:2; pointer-events:none; }

/* Cards: stacked, opacity-only choreography. */
.wb-scope .wb-hv--29 .wb-hv29-card{ position:absolute; inset:0; margin:0; opacity:0; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.wb-scope .wb-hv--29 .wb-hv29-card > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Caption legibility never depends on timing: photo cards carry a bottom
   grade under the lower-third credits. */
.wb-scope .wb-hv--29 .wb-hv29-card--p2::after,
.wb-scope .wb-hv--29 .wb-hv29-card--p3b::after,
.wb-scope .wb-hv--29 .wb-hv29-card--p4::after,
.wb-scope .wb-hv--29 .wb-hv29-card--p5a::after,
.wb-scope .wb-hv--29 .wb-hv29-card--p5b::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 30%, transparent 52%, rgba(0,0,0,.78) 100%); pointer-events:none; }

/* Card 1, PRESENTS: the five-second-clarity card. Full-service marketing and
   advertising company, Lancaster PA, on screen by second one. */
.wb-scope .wb-hv--29 .wb-hv29-card--p1{ text-align:center; padding:0 1.5rem; }
.wb-scope .wb-hv--29 .wb-hv29-t1{ font-family:var(--wb-display) !important; color:#f4f0e8; font-weight:900; text-transform:uppercase; letter-spacing:.32em; text-indent:.32em; font-size:clamp(1rem, .68rem + 1.4vw, 1.75rem); margin:0; }
.wb-scope .wb-hv--29 .wb-hv29-t2{ font-family:var(--wb-display) !important; color:#c9c4bb; font-weight:600; text-transform:uppercase; letter-spacing:.62em; text-indent:.62em; font-size:clamp(.78rem, .6rem + .5vw, 1rem); margin:.85rem 0 0; }
.wb-scope .wb-hv--29 .wb-hv29-t3{ font-family:var(--wb-display) !important; color:#99938a; font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:clamp(.62rem, .5rem + .35vw, .78rem); margin:1.2rem 0 0; }
.wb-scope .wb-hv--29.is-titles .wb-hv29-t1{ animation:wbHv29Track 2.5s ease-out both; }
@keyframes wbHv29Track{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

/* Card 2, the location card (ink floor, slow drift): production as location,
   never identity; the credit is the because-clause. Desktop only. */
.wb-scope .wb-hv--29.is-titles .wb-hv29-card--p2 > img{ animation:wbHv29Drift 2.9s linear 2.2s both; }
@keyframes wbHv29Drift{ from{ transform:scale(1); } to{ transform:scale(1.045); } }

/* Card 3a, the archival 1996 frame: small-in-frame photo print (the 900px
   source stays sharp), warm border, light sepia; a deliberate artifact. */
.wb-scope .wb-hv--29 .wb-hv29-card--p3a > img{ position:static; width:auto; height:auto; max-width:min(560px, 74%); max-height:72%; object-fit:contain; border:6px solid #f4efe4; box-shadow:0 18px 50px rgba(0,0,0,.6); filter:sepia(.28) contrast(.96); transform:rotate(-1.2deg); }

/* Lower-third credits. */
.wb-scope .wb-hv--29 .wb-hv29-cred{ position:absolute; left:0; right:0; bottom:clamp(1.5rem, 3.4vh, 2.4rem); z-index:1; margin:0; text-align:center; text-transform:uppercase; padding:0 clamp(1rem, 8vw, 7rem); }
.wb-scope .wb-hv--29 .wb-hv29-cred__main{ display:block; font-family:var(--wb-display) !important; color:#f2eee6; font-weight:700; font-size:clamp(.76rem, .58rem + .55vw, 1rem); letter-spacing:.24em; text-shadow:0 2px 10px rgba(0,0,0,.85); }
.wb-scope .wb-hv--29 .wb-hv29-cred__sub{ display:block; margin-top:.45rem; color:#c2bcb1; font-weight:600; font-size:clamp(.6rem, .5rem + .3vw, .74rem); letter-spacing:.17em; text-shadow:0 2px 8px rgba(0,0,0,.85); }

/* Beat 5's shared FEATURING credit rides above both work cuts. */
.wb-scope .wb-hv--29 .wb-hv29-feat{ opacity:0; z-index:2; }

/* Card 6, the sting: dip to black, one 0.7s rocket sweep (the single deco
   appearance), then the screen hands back to the end state underneath. */
.wb-scope .wb-hv--29 .wb-hv29-card--p6{ background:#050506; }
.wb-scope .wb-hv--29 .wb-hv29-card--p6 > img.wb-hv29-rocket{ position:absolute; inset:auto; left:34%; top:38%; width:clamp(180px, 24vw, 300px); height:auto; object-fit:contain; opacity:0; filter:drop-shadow(0 10px 26px rgba(0,0,0,.5)); }
.wb-scope .wb-hv--29.is-titles .wb-hv29-rocket{ animation:wbHv29Sting .7s cubic-bezier(.3,.1,.6,1) var(--hv29-sting) both; }
@keyframes wbHv29Sting{ 0%{ opacity:0; transform:translate(-46vw, 30vh) rotate(-14deg); } 14%{ opacity:1; } 86%{ opacity:1; } 100%{ opacity:0; transform:translate(46vw, -28vh) rotate(-14deg); } }

/* THE CLOCK: each card owns --d (delay) and --l (length); four opacity
   envelopes cover every cut. Fade = dissolve both ends. In = fade up, then
   a true hard cut OFF (fill backwards snaps to base 0 when time is up).
   CutIn = hard cut ON, dissolve out (fill none keeps it dark until its
   frame). Hold = hard cut both ends, a real film cut. */
@keyframes wbHv29Fade{ 0%{ opacity:0; } 14%{ opacity:1; } 86%{ opacity:1; } 100%{ opacity:0; } }
@keyframes wbHv29In{ 0%{ opacity:0; } 30%{ opacity:1; } 100%{ opacity:1; } }
@keyframes wbHv29CutIn{ 0%{ opacity:1; } 78%{ opacity:1; } 100%{ opacity:0; } }
@keyframes wbHv29Hold{ 0%{ opacity:1; } 100%{ opacity:1; } }
@keyframes wbHv29Dip{ 0%{ opacity:0; } 20%{ opacity:1; } 62%{ opacity:1; } 100%{ opacity:0; } }
.wb-scope .wb-hv--29.is-titles .wb-hv29-card{ animation:wbHv29Fade var(--l, 2.5s) linear var(--d, 0s) both; }
.wb-scope .wb-hv--29 .wb-hv29-card--p1{ --d:0s;    --l:2.5s;  }
.wb-scope .wb-hv--29 .wb-hv29-card--p2{ --d:2.2s;  --l:2.8s;  }
.wb-scope .wb-hv--29 .wb-hv29-card--p3a{ --d:4.7s; --l:1.6s;  }
.wb-scope .wb-hv--29 .wb-hv29-card--p3b{ --d:6.3s; --l:1.6s;  }
.wb-scope .wb-hv--29 .wb-hv29-card--p4{ --d:7.5s;  --l:2.5s;  }
.wb-scope .wb-hv--29 .wb-hv29-card--p5a{ --d:9.8s; --l:1.2s;  }
.wb-scope .wb-hv--29 .wb-hv29-card--p5b{ --d:11s;  --l:1.35s; }
.wb-scope .wb-hv--29 .wb-hv29-card--p6{ --d:12.2s; --l:2s;    }
.wb-scope .wb-hv--29.is-titles .wb-hv29-card--p3a{ animation-name:wbHv29In; animation-fill-mode:backwards; }   /* 1996 holds, then the hard cut */
.wb-scope .wb-hv--29.is-titles .wb-hv29-card--p3b{ animation-name:wbHv29CutIn; animation-fill-mode:none; }     /* ...to today */
.wb-scope .wb-hv--29.is-titles .wb-hv29-card--p5a{ animation-name:wbHv29Hold; animation-fill-mode:none; }      /* two 1.2s work cuts */
.wb-scope .wb-hv--29.is-titles .wb-hv29-card--p5b{ animation-name:wbHv29CutIn; animation-fill-mode:none; }
.wb-scope .wb-hv--29.is-titles .wb-hv29-card--p6{ animation-name:wbHv29Dip; animation-fill-mode:both; }
.wb-scope .wb-hv--29.is-titles .wb-hv29-feat{ animation:wbHv29Fade 2.6s linear 9.8s both; }

/* The end state under the film: dark until the dip hands over, then it is
   simply the page (initHeroV29 drops .is-titles on this animation's end). */
.wb-scope .wb-hv--29.is-titles .wb-hv29-end{ animation:wbHv29EndIn 1.1s ease var(--hv29-end) both; }
@keyframes wbHv29EndIn{ from{ opacity:0; } to{ opacity:1; } }

/* The film's title IS the lockup already docked by the search: one pulse at
   the resolve, and it never leaves the row. */
.wb-scope .wb-hv--29.is-titles .wb-hv29-askrow .wb-hero-ask__wgsd img{ animation:wbHv29Pulse .8s ease var(--hv29-pulse); }
@keyframes wbHv29Pulse{ 0%{ transform:scale(1); filter:none; } 45%{ transform:scale(1.07); filter:brightness(1.3); } 100%{ transform:scale(1); filter:none; } }

/* SKIP INTRO: the one lavish signature moment, in at 0.8s, 44px target. */
.wb-scope .wb-hv--29 .wb-hv29-skip{ position:absolute; z-index:3; right:clamp(.8rem, 2vw, 1.5rem); bottom:clamp(1.3rem, 3.2vh, 2rem); min-height:44px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem; background:rgba(10,10,12,.74); border:1px solid rgba(255,255,255,.4); color:#fff; font-family:var(--wb-display); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; line-height:1.2; padding:.5rem 1rem .45rem; border-radius:.35rem; cursor:pointer; opacity:0; visibility:hidden; transition:border-color .15s ease, background .15s ease; }
.wb-scope .wb-hv--29 .wb-hv29-skip:hover{ border-color:#fff; background:rgba(20,20,24,.9); }
.wb-scope .wb-hv--29 .wb-hv29-skip__sub{ font-weight:500; text-transform:none; letter-spacing:.02em; font-size:.66rem; color:#cfc9bf; }
.wb-scope .wb-hv--29.is-titles .wb-hv29-skip{ animation:wbHv29SkipIn .45s ease .8s both; }
@keyframes wbHv29SkipIn{ from{ opacity:0; visibility:hidden; transform:translateY(4px); } to{ opacity:1; visibility:visible; transform:translateY(0); } }

/* THE TIMELINE: a plain scrubber along the bottom letterbox bar; red fill
   keeps the sequence clock, thin white ticks mark the beats (data, not ink;
   deliberately NOT a CMYK control strip). The whole strip is the pause/play
   button; click state is class-driven so pausing freezes its own fill too. */
.wb-scope .wb-hv--29 .wb-hv29-strip{ position:absolute; z-index:3; left:0; right:0; bottom:0; width:100%; height:14px; display:block; padding:0; border:0; border-top:1px solid rgba(255,255,255,.18); background:
  linear-gradient(90deg, transparent 0 15.4%, rgba(255,255,255,.4) 15.4% calc(15.4% + 2px), transparent calc(15.4% + 2px) 33.1%, rgba(255,255,255,.4) 33.1% calc(33.1% + 2px), transparent calc(33.1% + 2px) 52.8%, rgba(255,255,255,.4) 52.8% calc(52.8% + 2px), transparent calc(52.8% + 2px) 69%, rgba(255,255,255,.4) 69% calc(69% + 2px), transparent calc(69% + 2px) 85.9%, rgba(255,255,255,.4) 85.9% calc(85.9% + 2px), transparent calc(85.9% + 2px) 100%),
  rgba(255,255,255,.08); cursor:pointer; }
.wb-scope .wb-hv--29 .wb-hv29-strip__fill{ position:absolute; inset:0; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg, var(--wb-red), #ff5a60); opacity:.9; }
.wb-scope .wb-hv--29.is-titles .wb-hv29-strip__fill{ animation:wbHv29Prog var(--hv29-prog) linear both; }
@keyframes wbHv29Prog{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.wb-scope .wb-hv--29 .wb-hv29-strip[aria-pressed="true"] .wb-hv29-strip__fill{ opacity:.45; }
@media (pointer: coarse){ .wb-scope .wb-hv--29 .wb-hv29-strip{ height:22px; } }

/* Pause: one class freezes the whole run (fill, cards, sting, pulse). */
.wb-scope .wb-hv--29.is-paused *{ animation-play-state:paused !important; }

/* The ask row: static, in-flow, above whatever follows the band. */
.wb-scope .wb-hv--29 .wb-hv29-askrow{ position:relative; z-index:5; margin-top:clamp(1rem, 1.8vw, 1.6rem); }
.wb-scope .wb-hv--29 .wb-hv29-tel{ white-space:nowrap; }
.wb-scope .wb-hv--29 .wb-hv29-note-sub{ opacity:.85; }

/* Reduced motion: the sequence never plays; belt and braces if the class
   ever lands, the film stays dead and the end state stands. */
@media (prefers-reduced-motion: reduce){
	.wb-scope .wb-hv--29.is-titles .wb-hv29-film,
	.wb-scope .wb-hv--29 .wb-hv29-skip,
	.wb-scope .wb-hv--29 .wb-hv29-strip{ display:none !important; }
	.wb-scope .wb-hv--29.is-titles .wb-hv29-end,
	.wb-scope .wb-hv--29.is-titles .wb-hv29-askrow .wb-hero-ask__wgsd img{ animation:none; }
}

/* Mobile (spec: four beats, ~9s; the location card and the second work cut
   drop; the phone line becomes a tap-to-call bar; everything stays inside
   the first viewport of an 812px phone). */
@media (max-width: 640px){
	.wb-scope .wb-hv--29{ --hv29-end:8.4s; --hv29-prog:9.4s; --hv29-sting:7.9s; --hv29-pulse:8.5s; }
	.wb-scope .wb-hv--29 .wb-hv29-card--p2,
	.wb-scope .wb-hv--29 .wb-hv29-card--p5b{ display:none; }
	.wb-scope .wb-hv--29 .wb-hv29-card--p1{ --d:0s;    --l:2s;   }
	.wb-scope .wb-hv--29 .wb-hv29-card--p3a{ --d:1.8s; --l:1.5s; }
	.wb-scope .wb-hv--29 .wb-hv29-card--p3b{ --d:3.3s; --l:1.5s; }
	.wb-scope .wb-hv--29 .wb-hv29-card--p4{ --d:4.6s;  --l:2.2s; }
	.wb-scope .wb-hv--29 .wb-hv29-card--p5a{ --d:6.6s; --l:1.4s; }
	.wb-scope .wb-hv--29 .wb-hv29-card--p6{ --d:7.8s;  --l:1.7s; }
	.wb-scope .wb-hv--29.is-titles .wb-hv29-card--p5a{ animation-name:wbHv29CutIn; }   /* one cut: dissolve out into the dip */
	.wb-scope .wb-hv--29.is-titles .wb-hv29-feat{ animation-delay:6.6s; animation-duration:1.6s; }
	.wb-scope .wb-hv--29 .wb-hv29-strip{ background:rgba(255,255,255,.08); }           /* beat ticks retime; keep the strip plain */
	.wb-scope .wb-hv--29 .wb-hv29-screen{ min-height:min(46svh, 340px); }
	.wb-scope .wb-hv--29 .wb-hv29-end{ padding:1.4rem 1rem 1.6rem; }
	.wb-scope .wb-hv--29 .wb-hv29-cred{ padding:0 .8rem 0 .8rem; bottom:1.2rem; text-align:left; padding-right:8rem; }
	.wb-scope .wb-hv--29 .wb-hv29-tel{ display:block; max-width:22rem; margin:.55rem auto .25rem; background:var(--wb-red); color:#fff !important; text-align:center; font-weight:700; padding:.72rem 1rem; border-radius:.45rem; text-decoration:none; box-shadow:0 8px 22px rgba(216,35,42,.35); }
	.wb-scope .wb-hv--29 .wb-hv29-note-sub{ display:block; text-align:center; }
}


/* ================================================================
   HERO VARIANT 27 (skin 30): Shop Tempo (build/39 rhythm-of-the-shop,
   222.5). Temporal, not spatial: everything on the hero keeps time to
   ONE clock, --beat (1.5s, the calm turnover of the shop), so nothing
   free-runs and phase never drifts. Paper-white, Weber red, real
   photos, and a heartbeat. Standing rules: the tempo strip is a
   neutral red-and-gray metronome (never a press color bar or CMYK),
   the five stations read full-service marketing with exactly one
   production because-clause tile, heroes stay tight (band min-height
   undercut), and every amplitude is whisper-level: 4px/2% caps,
   opacity + transform only, two rest beats per bar, CLS 0. Motion is
   opted IN via .is-motion (added by initHeroV30 when the shared
   reduce flag is false), so no-JS and reduced-motion read a finished
   static page: strip parked, tick at the plan, all captions legible.
   .is-still = the "stop the presses" chip; .is-calm = ask focused.
   ================================================================ */

/* Band level: no video for this skin; the shop runs on paper-white. The
   top gradient keeps the overlay nav legible (white links over a light
   band); !important beats the section's inline poster background. */
.wb-scope .wb-hero-v30 .wb-band__video-wrap,
.wb-scope .wb-hero-v30 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v30.wb-band--video{
  color:var(--wb-ink-2);
  background:
    linear-gradient(180deg, rgba(16,19,24,.74), rgba(16,19,24,.24) 62px, rgba(16,19,24,0) 138px) no-repeat,
    radial-gradient(120% 85% at 30% 6%, rgba(255,255,255,.9), rgba(255,255,255,0) 62%) no-repeat,
    #f4f2ec !important;
}
/* Tight, not tall (standing rule 3): undercut the shared hero min-height AND
   the first-band nav clearance (--wb-pad + --wb-nav-h is ~190px of top pad at
   desktop; the strip only needs to clear the nav itself). Same specificity as
   the shared :first-child rule, later in the cascade, so no !important. */
.wb-scope .wb-hero-v30.wb-band--video.wb-band--dark{ min-height:clamp(500px, 64vh, 660px); padding-top:calc(var(--wb-nav-h) + clamp(1.4rem, 3.5vh, 2.2rem)); padding-bottom:clamp(1.4rem, 3.5vh, 2.2rem); }
.wb-scope .wb-hero-v30 .wb-inner.wb-hero__summary{ width:100%; }

/* One clock rules everything. */
.wb-scope .wb-hv--30{ --beat:1.5s; --bar:calc(var(--beat) * 8); position:relative; padding:clamp(.8rem, 2vh, 1.6rem) 0 clamp(.6rem, 1.6vh, 1.2rem); }

/* --- The tempo strip: 8 cells, one red per beat, steps(8, jump-none) so
   the run cell lands exactly on the space-distributed track cells. Static
   (no JS / reduced motion): a parked red-and-gray bar, first cell lit. --- */
.wb-scope .wb-hv--30 .wb-hv30-strip{ position:relative; height:6px; margin-bottom:clamp(.9rem, .6rem + .8vw, 1.3rem); background-image:linear-gradient(90deg, rgba(26,29,33,.14), rgba(26,29,33,.14)); background-size:calc(12.5% - 3px) 100%; background-repeat:space; }
.wb-scope .wb-hv--30 .wb-hv30-strip__run{ position:absolute; inset:0; background-image:linear-gradient(90deg, var(--wb-red), var(--wb-red)); background-size:calc(12.5% - 3px) 100%; background-repeat:no-repeat; background-position:0% 0; }
.wb-scope .wb-hv--30.is-motion .wb-hv30-strip__run{ animation:wb-hv30-strip var(--bar) steps(8, jump-none) infinite; }
@keyframes wb-hv30-strip{ from{ background-position-x:0%; } to{ background-position-x:100%; } }

/* --- The split: copy left, pulse rail right; single column under 900. --- */
.wb-scope .wb-hv--30 .wb-hv30-grid{ display:grid; grid-template-columns:minmax(0, 1fr) clamp(17rem, 13rem + 12vw, 23.5rem); gap:clamp(1.4rem, 1rem + 2.6vw, 3.6rem); align-items:center; }
.wb-scope .wb-hv--30 .wb-hv30-copy{ position:relative; z-index:5; }

/* Copy column: ink on paper (the shared dark-band lifts must stand down). */
.wb-scope .wb-hv--30 .wb-kicker{ color:var(--wb-red); }
.wb-scope .wb-hv--30 .wb-hv30-h1{ font-family:var(--wb-display) !important; /* fonts-modern pins p to Inter */ color:var(--wb-ink); font-size:clamp(1.85rem, 1.25rem + 2.1vw, 2.8rem); line-height:1.07; margin:0 0 clamp(.6rem, .4rem + .6vw, .95rem); max-width:16em; }
.wb-scope .wb-hv--30 .wb-hv30-lead{ color:var(--wb-ink-2); max-width:38em; margin:0; }
.wb-scope .wb-hv--30 .wb-hv30-lead b{ font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--30 .wb-hv30-callrow{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; margin:clamp(.9rem, .6rem + 1vw, 1.5rem) 0 0; }
.wb-scope .wb-hv--30 .wb-hv30-call{ display:inline-flex; align-items:center; gap:.5em; background:var(--wb-red); color:#fff; font-weight:800; font-size:1.02rem; padding:.62rem 1.25rem; border-radius:999px; text-decoration:none; box-shadow:0 14px 30px -14px rgba(216,35,42,.6); transition:filter .15s ease; }
.wb-scope .wb-hv--30 .wb-hv30-call:hover{ filter:brightness(1.08); }
.wb-scope .wb-hv--30 .wb-hv30-call i{ font-size:.85em; }
.wb-scope .wb-hv--30 .wb-hv30-call-note{ color:rgba(26,29,33,.6); font-size:.88rem; }

/* The downbeat: the H1's period gives one quiet pulse on beat 8, the page's
   single kinetic-type indulgence. Origin at the baseline so it swells in
   place; amplitude stays whisper-level. */
.wb-scope .wb-hv--30 .wb-hv30-dot{ display:inline-block; transform-origin:50% 85%; }
.wb-scope .wb-hv--30.is-motion .wb-hv30-dot{ animation:wb-hv30-down var(--bar) linear infinite; }
@keyframes wb-hv30-down{ 0%, 87.5%, 100%{ transform:scale(1); color:inherit; } 90%, 95%{ transform:scale(1.12); color:var(--wb-red); } }

/* The 1996 coin: the kicker's Easter egg, pops on hover, pure decoration. */
.wb-scope .wb-hv--30 .wb-hv30-coin{ position:relative; white-space:nowrap; }
.wb-scope .wb-hv--30 .wb-hv30-coin img{ position:absolute; left:50%; bottom:1.4em; width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:0 10px 24px -8px rgba(20,24,31,.5), 0 0 0 3px #fff; transform:translate(-50%, 6px) scale(.7); opacity:0; transition:opacity .2s ease, transform .25s ease; pointer-events:none; z-index:6; }
.wb-scope .wb-hv--30 .wb-hv30-coin:hover img{ opacity:1; transform:translate(-50%, 0) scale(1); }

/* Shared ask, re-inked for paper (markup + engine untouched). The field
   keeps z-index 5 so the live results ride over the foot below. */
.wb-scope .wb-hv--30 .wb-hero-ask{ margin-top:clamp(.8rem, .5rem + .8vw, 1.2rem); }
.wb-scope .wb-hv--30 .wb-hero-ask__q{ color:var(--wb-ink); font-size:clamp(1.05rem, .95rem + .5vw, 1.35rem); }
.wb-scope .wb-hv--30 .wb-hero-ask__q-em{ color:var(--wb-red); }
.wb-scope .wb-hv--30 .wb-hero-ask__field{ position:relative; z-index:5; }
.wb-scope .wb-hv--30 .wb-hero-ask__row{ background:#fff; box-shadow:0 12px 26px -16px rgba(20,24,31,.4), 0 0 0 1.5px rgba(20,24,31,.18); }
.wb-scope .wb-hv--30 .wb-hero-ask__note{ color:rgba(26,29,33,.66); }
.wb-scope .wb-hv--30 .wb-hero-ask__note a{ color:var(--wb-ink); }

/* --- The pulse rail: five stations, a thin gray rail, a red tick that
   walks the job through the building one beat at a time. --- */
.wb-scope .wb-hv--30 .wb-hv30-rail-top{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.5rem; }
.wb-scope .wb-hv--30 .wb-hv30-rail-h{ margin:0; font-family:var(--wb-display) !important; font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(26,29,33,.55); }
.wb-scope .wb-hv--30 .wb-hv30-wgsd{ display:block; flex:0 0 auto; }
.wb-scope .wb-hv--30 .wb-hv30-wgsd img{ display:block; width:clamp(58px, 4vw + 22px, 76px); height:auto; }

.wb-scope .wb-hv--30 .wb-hv30-rail{ position:relative; }
.wb-scope .wb-hv--30 .wb-hv30-sts{ list-style:none; margin:0; padding:0 0 0 26px; display:grid; grid-template-rows:repeat(5, 1fr); position:relative; }
.wb-scope .wb-hv--30 .wb-hv30-sts::before{ content:""; position:absolute; left:7px; top:14px; bottom:14px; width:2px; border-radius:1px; background:rgba(26,29,33,.14); }
.wb-scope .wb-hv--30 .wb-hv30-st{ position:relative; display:flex; align-items:center; gap:.75rem; padding:.32rem 0; }
.wb-scope .wb-hv--30 .wb-hv30-st::before{ content:""; position:absolute; left:-22px; top:50%; margin-top:-4px; width:8px; height:8px; border-radius:50%; background:rgba(26,29,33,.22); }
.wb-scope .wb-hv--30 .wb-hv30-st__pic{ flex:0 0 auto; display:block; width:clamp(88px, 5vw + 40px, 112px); border-radius:10px; overflow:hidden; box-shadow:0 10px 22px -12px rgba(20,24,31,.45), 0 0 0 1px rgba(20,24,31,.08); }
.wb-scope .wb-hv--30 .wb-hv30-st__pic img{ display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.wb-scope .wb-hv--30 .wb-hv30-st__cap{ min-width:0; }
.wb-scope .wb-hv--30 .wb-hv30-st__label{ margin:0; font-family:var(--wb-display) !important; font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wb-ink); }
.wb-scope .wb-hv--30 .wb-hv30-st__sub{ margin:.12rem 0 0; font-size:.82rem; line-height:1.4; color:rgba(26,29,33,.62); }

/* The tick: 20% tall (one station of five), so translateY(N * 100%) of its
   own box steps station to station, compositor-only. Static state: parked
   at the plan. Beats 6-7 it rests dim at the dock; beat 8 is the carriage
   return home. */
.wb-scope .wb-hv--30 .wb-hv30-tick{ position:absolute; left:1px; top:0; height:20%; width:14px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.wb-scope .wb-hv--30 .wb-hv30-tick::before{ content:""; width:14px; height:14px; border-radius:50%; background:var(--wb-red); box-shadow:0 0 0 3px rgba(216,35,42,.16); }
.wb-scope .wb-hv--30.is-motion .wb-hv30-tick{ animation:wb-hv30-tick var(--bar) linear infinite; }
@keyframes wb-hv30-tick{
  0%, 10.4%{ transform:translateY(0); opacity:1; }
  12.5%, 22.9%{ transform:translateY(100%); }
  25%, 35.4%{ transform:translateY(200%); }
  37.5%, 47.9%{ transform:translateY(300%); }
  50%, 58%{ transform:translateY(400%); opacity:1; }
  62.5%, 84%{ transform:translateY(400%); opacity:.25; }   /* beats 6-7: rest */
  87.5%, 96%{ transform:translateY(0); opacity:.25; }      /* beat 8: carriage return */
  100%{ transform:translateY(0); opacity:1; }
}

/* Station beats: each row owns beat N of the bar via --st. The negative
   delay (window minus one full bar) back-phases the loop so nothing waits
   in a wrong fill state at load. Whole-row opacity is the whisper; every
   caption stays legible in every state. */
.wb-scope .wb-hv--30.is-motion .wb-hv30-st{ animation:wb-hv30-beat var(--bar) linear infinite; animation-delay:calc(var(--beat) * (var(--st) - 1) - var(--bar)); }
@keyframes wb-hv30-beat{ 0%, 12.5%{ opacity:1; } 17%{ opacity:.68; } 95%{ opacity:.68; } 100%{ opacity:1; } }
.wb-scope .wb-hv--30.is-motion .wb-hv30-st__pic img{ animation:wb-hv30-img var(--bar) linear infinite; animation-delay:calc(var(--beat) * (var(--st) - 1) - var(--bar)); }
@keyframes wb-hv30-img{ 0%, 12.5%{ transform:scale(1.02); } 17%{ transform:scale(1); } 96%{ transform:scale(1); } 100%{ transform:scale(1.02); } }

/* --- The foot: live total, the pause chip, the honest credit. --- */
.wb-scope .wb-hv--30 .wb-hv30-foot{ display:flex; align-items:center; gap:.6rem 1.4rem; flex-wrap:wrap; margin-top:clamp(.9rem, .6rem + .8vw, 1.3rem); padding-top:.7rem; border-top:1px solid rgba(26,29,33,.14); }
.wb-scope .wb-hv--30 .wb-hv30-count{ margin:0; font-family:var(--wb-display) !important; font-weight:800; font-size:.84rem; letter-spacing:.08em; text-transform:uppercase; color:var(--wb-ink); }
.wb-scope .wb-hv--30 .wb-hv30-count b{ font-size:1.2em; color:var(--wb-red); font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--30 .wb-hv30-stop{ border:1px solid rgba(26,29,33,.28); background:#fff; color:var(--wb-ink); font-family:inherit; font-weight:700; font-size:.8rem; line-height:1; border-radius:999px; padding:.42rem .9rem; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; transition:border-color .15s ease; }
.wb-scope .wb-hv--30 .wb-hv30-stop:hover{ border-color:var(--wb-red); }
.wb-scope .wb-hv--30 .wb-hv30-stop i{ color:var(--wb-red); font-size:.8em; }
.wb-scope .wb-hv--30 .wb-hv30-cap{ margin:0 0 0 auto; font-size:.78rem; font-style:italic; color:rgba(26,29,33,.55); }

/* Stop the presses / typing beats theater: both freeze every beat. */
.wb-scope .wb-hv--30.is-still .wb-hv30-strip__run,
.wb-scope .wb-hv--30.is-still .wb-hv30-tick,
.wb-scope .wb-hv--30.is-still .wb-hv30-st,
.wb-scope .wb-hv--30.is-still .wb-hv30-st__pic img,
.wb-scope .wb-hv--30.is-still .wb-hv30-dot,
.wb-scope .wb-hv--30.is-calm .wb-hv30-strip__run,
.wb-scope .wb-hv--30.is-calm .wb-hv30-tick,
.wb-scope .wb-hv--30.is-calm .wb-hv30-st,
.wb-scope .wb-hv--30.is-calm .wb-hv30-st__pic img,
.wb-scope .wb-hv--30.is-calm .wb-hv30-dot{ animation-play-state:paused; }

/* Belt and suspenders: the OS preference kills the beat even if a stale
   .is-motion ever lands. The static page is complete on its own. */
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--30 .wb-hv30-strip__run,
  .wb-scope .wb-hv--30 .wb-hv30-tick,
  .wb-scope .wb-hv--30 .wb-hv30-st,
  .wb-scope .wb-hv--30 .wb-hv30-st__pic img,
  .wb-scope .wb-hv--30 .wb-hv30-dot{ animation:none !important; }
}

/* --- Mobile (spec: 390): single column; the rail becomes a swipe-free
   filmstrip (scroll-snap, never auto-scrolled; only the highlight steps).
   The tick and the rail hardware go away; captions all stay on. --- */
@media (max-width:900px){
  .wb-scope .wb-hero-v30.wb-band--video.wb-band--dark{ min-height:0; }
  .wb-scope .wb-hv--30 .wb-hv30-grid{ grid-template-columns:minmax(0, 1fr); gap:1.2rem; }
  .wb-scope .wb-hv--30 .wb-hv30-h1{ font-size:clamp(1.7rem, 6.4vw, 2.1rem); }
  .wb-scope .wb-hv--30 .wb-hv30-tick{ display:none; }
  .wb-scope .wb-hv--30 .wb-hv30-sts{ padding:0; display:flex; gap:.8rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:.4rem; }
  .wb-scope .wb-hv--30 .wb-hv30-sts::before{ display:none; }
  .wb-scope .wb-hv--30 .wb-hv30-st{ flex:0 0 min(46vw, 200px); flex-direction:column; align-items:flex-start; gap:.45rem; padding:0; scroll-snap-align:start; }
  .wb-scope .wb-hv--30 .wb-hv30-st::before{ display:none; }
  .wb-scope .wb-hv--30 .wb-hv30-st__pic{ width:100%; }
  .wb-scope .wb-hv--30 .wb-hv30-call{ width:100%; justify-content:center; }
  .wb-scope .wb-hv--30 .wb-hv30-cap{ margin-left:0; flex-basis:100%; }
}

/* Counter stability (owner 2026-07-04): odometer digits are tabular site-wide
   so a live count never reflows its line while it spins. */
.wb-scope [data-count]{ font-variant-numeric:tabular-nums; }


/* ---- Variant 31 "3A: The Tight Poster" (build/38 hero-3 family, reference member).
   The cleaned Fill-In-The-Stuff poster (skin 6 lineage) with the owner's
   2026-07-04 shared changes baked in and NOTHING else: tighter top (band
   clearance drops the extra --wb-pad, nav clearance kept; smaller meta gap;
   max type stepped down a notch), tighter YOUR STUFF GOES HERE label, the
   Spirk lead at a wider 62ch measure, and a reflow-proof jobs counter
   (tabular-nums + reserved min-width + its own line). Per-letter ink photos
   in DONE. stay (owner 2026-07-03). Copied from .wb-hv--6 and renamed; no
   selector here touches skin 6. Band override: shared video + scrim hidden,
   milled metal at ~7% over #0e0f11 (!important beats the section's inline
   background-image). Giant <p> rows need font-family !important because
   fonts-modern.css pins p to Inter. Under 640px (spec mobile plan): the
   counter-shear and the ink pan are dropped; the pill goes full-width with a
   square arrow submit; the ticket strip becomes ruled single rows. */
.wb-scope .wb-hero-v31 .wb-band__video-wrap,
.wb-scope .wb-hero-v31 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v31.wb-band--video{
  background:linear-gradient(rgba(14,15,17,.93), rgba(14,15,17,.93)),
             #0e0f11 url("../images/overhaul/tex-metallic-lines.webp") center/420px repeat !important;
}
/* Tight top (owner 2026-07-04): trim the first-band --wb-pad down to a small
   clamp but NEVER drop --wb-nav-h (the poster must still clear the fixed nav).
   Four class-level simples, later in the cascade, beats the base
   .wb-scope > .wb-band:first-child:not(.wb-band--flush) clearance rule. */
.wb-scope .wb-hero-v31.wb-band--video.wb-band--dark{
  padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
  padding-bottom:clamp(1.5rem, 3.5vh, 2.4rem);
}
.wb-scope .wb-hv--31{ position:relative; padding:clamp(.15rem, .4vw, .5rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--31 .wb-hv31-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule, pulled in close to
   WE GET (tight-top change A). */
.wb-scope .wb-hv--31 .wb-hv31-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(.4rem, .3rem + .35vw, .7rem); padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--31 .wb-hv31-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel + sheen),
   flush left. Max size stepped down from the skin-6 9.5vw/8.25rem so more of
   the poster clears the fold at 1280x800. Stamps in when revealed; the
   switcher force-adds .is-in, so it replays on flip and never gates legibility. */
.wb-scope .wb-hv--31 .wb-hv31-we{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(2.9rem, 8.8vw, 7.4rem); line-height:.92; letter-spacing:-.03em;
  transform-origin:left center;
}
@keyframes wb-hv31-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--31 .wb-hv31-we.is-in{ animation:wb-hv31-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost ask types in red 900 caps (JS swaps the PLACEHOLDER only). The
   label above it runs smaller and closer (tight-label change B). z-index
   lifts the form's stacking context above the DONE. row so the live AJAX
   dropdown is never painted under it. */
.wb-scope .wb-hv--31 .wb-hero-ask{ max-width:none; margin-top:clamp(.55rem, .35rem + .6vw, 1rem); position:relative; z-index:5; }
.wb-scope .wb-hv--31 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--31 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--31 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--31 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.7rem .2rem; }
.wb-scope .wb-hv--31 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--31 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.85rem, .6rem + .8vw, 1.25rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--31 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
.wb-scope .wb-hv--31 .wb-hero-ask__note{ margin-top:.5rem; }
/* Row two: DONE. filled with the per-letter ink photos, the period a solid
   red block, the WGSD seal rubber-stamped on its shoulder. Base = solid red
   (the no-clip fallback); @supports upgrades to the photo ink + slow pan. */
.wb-scope .wb-hv--31 .wb-hv31-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.55rem, .35rem + .7vw, 1.1rem) 0 0; }
.wb-scope .wb-hv--31 .wb-hv31-done{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(3.2rem, 10.6vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
  color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  /* Owner 2026-07-03, kept for 3A: a DIFFERENT real photo inks each letter
     (D press floor, O the CMYK ink system, N the Karns truck wrap, E a booth).
     Staggered pan delays so the four never move in lockstep. */
  .wb-scope .wb-hv--31 .wb-hv31-l{
    background:#15161a center 42%/cover no-repeat;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    -webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
    animation:wb-hv31-inkpan 26s ease-in-out infinite alternate;
  }
  .wb-scope .wb-hv--31 .wb-hv31-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
  .wb-scope .wb-hv--31 .wb-hv31-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
  .wb-scope .wb-hv--31 .wb-hv31-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
  .wb-scope .wb-hv--31 .wb-hv31-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
  .wb-scope .wb-hv--31 .wb-hv31-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
  @media (max-width:640px){
    .wb-scope .wb-hv--31 .wb-hv31-l{ animation:none; }
  }
}
@keyframes wb-hv31-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv31-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--31 .wb-hv31-donerow.is-in .wb-hv31-done{ animation:wb-hv31-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--31 .wb-hv31-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--31 .wb-hv31-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv31-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--31 .wb-hv31-donerow.is-in .wb-hv31-seal{ animation:wb-hv31-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* The Spirk lead (change D): longer than the old one-liner, so it runs a
   touch smaller on a 62ch measure to hold the fold; the bold opener reads
   full white. */
.wb-scope .wb-hv--31 .wb-hv31-lead{ max-width:62ch; margin-top:clamp(.7rem, .45rem + .7vw, 1.1rem); font-size:calc(var(--wb-lead) * .92); line-height:1.5; }
.wb-scope .wb-hv--31 .wb-hv31-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. The jobs counter
   (change E) sits on its own line via a manual <br> in the markup; the span
   gets tabular-nums plus a reserved 7ch min-width so the odometer counting
   up never changes the cell's width or reflows the row. */
.wb-scope .wb-hv--31 .wb-hv31-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.8rem, .5rem + .8vw, 1.3rem); padding-top:clamp(.7rem, .5rem + .7vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--31 .wb-hv31-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--31 .wb-hv31-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-hv--31 .wb-hv31-ticket__count{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--31 .wb-hv31-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--31 .wb-hv31-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--31 .wb-hv31-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; counter-shear and ink pan dropped (retention lives
   in the ticket strip at every width). Input floor a hair under skin 6's so
   the longest new typer word (LEADS FOR MY SALES TEAM) clears the pill. */
@media (max-width:640px){
  .wb-scope .wb-hv--31 .wb-hv31-go-txt{ display:none; }
  .wb-scope .wb-hv--31 .wb-hv31-we,
  .wb-scope .wb-hv--31 .wb-hv31-donerow{ transform:none !important; }
  .wb-scope .wb-hv--31 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
  .wb-scope .wb-hv--31 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; }
  .wb-scope .wb-hv--31 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
  .wb-scope .wb-hv--31 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
  .wb-scope .wb-hv--31 .wb-hv31-seal img{ width:84px; }
  .wb-scope .wb-hv--31 .wb-hv31-ticket{ gap:0; }
  .wb-scope .wb-hv--31 .wb-hv31-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
  .wb-scope .wb-hv--31 .wb-hv31-ticket__cell + .wb-hv31-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
  .wb-scope .wb-hv--31 .wb-hv31-ticket__num{ font-size:1.15rem; }
  .wb-scope .wb-hv--31 .wb-hv31-ticket__label{ margin-top:0; max-width:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt,
   no ink pan (the reveal/count systems already stand down globally). */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--31 .wb-hv31-we.is-in,
  .wb-scope .wb-hv--31 .wb-hv31-done,
  .wb-scope .wb-hv--31 .wb-hv31-l,
  .wb-scope .wb-hv--31 .wb-hv31-donerow.is-in .wb-hv31-done,
  .wb-scope .wb-hv--31 .wb-hv31-donerow.is-in .wb-hv31-seal{ animation:none !important; }
}
/* Cascade fix carried over from the skin-6 review (blocker there): the mobile
   plan drops the ink pan, but the .is-in rule above is (0,5,0) and outguns
   the @supports mobile animation:none at (0,3,0). Same selector, later in
   the cascade, inside max-640: keep the jolt, kill the 26s pan on phones. */
@media (max-width:640px){
  .wb-scope .wb-hv--31 .wb-hv31-donerow.is-in .wb-hv31-done{ animation:wb-hv31-jolt .3s cubic-bezier(.3,.9,.4,1); }
  .wb-scope .wb-hv--31 .wb-hv31-donerow.is-in .wb-hv31-l{ animation:none; }
}


/* ---- Slot 32 (skin 32) "3B: Video in the Letters" (build/38 hero-3 family).
   The Fill In The Stuff poster with the brand film playing INSIDE the DONE.
   letterforms. background-clip:text cannot clip a <video>, so the reveal is a
   KNOCKOUT: the wrapper (.wb-hv32-donewrap, isolation:isolate) stacks a
   poster-filled base, the absolutely positioned film, and then the DONE.
   paragraph itself as a solid #0e0f11 slab carrying the word in pure white
   Montserrat 900 with mix-blend-mode:multiply. White ink multiplies to the
   film (letters = living type); the #0e0f11 slab multiplies the film down to
   band-dark, and because THIS skin's band is solid #0e0f11 (no metal texture)
   the slab edge is invisible. No multiply support = white type on a dark slab,
   still readable. The film is JS-gated (initHeroV32, v9 pattern): desktop +
   motion-ok + Save-Data off; the wrapper's static poster background fills the
   letters everywhere else and phones never request a video byte.
   2026-07-04 family changes baked in: tighter top padding + kicker gap +
   slightly smaller max type (A), tighter YOUR STUFF GOES HERE label (B),
   Spirk lead measure (D), jobs odometer on its own line with tabular figures
   + reserved width so the count never reflows the ticket row (E).
   Giant <p> rows need font-family !important because fonts-modern.css pins
   p to Inter. Mobile 390: one flush-left column, square arrow submit, ruled
   single-line ticket rows, film never loads (the 961px gate). */
.wb-scope .wb-hero-v32 .wb-band__video-wrap,
.wb-scope .wb-hero-v32 .wb-band__scrim{ display:none; }
/* Solid band, no metal texture on this skin: the knockout region lands
   between #000 and #0e0f11 depending on the film frame, so only a flat
   #0e0f11 field keeps the slab boundary invisible. */
.wb-scope .wb-hero-v32.wb-band--video{ background:#0e0f11 !important; }
/* Tight top (family ask A, band level): trim the first-band --wb-pad to a
   small clamp but NEVER drop --wb-nav-h (the poster must still clear the
   fixed nav). Four class-level simples ties the base
   .wb-scope > .wb-band:first-child:not(.wb-band--flush) rule at (0,4,0) and,
   later in the cascade, wins on source order. Matches slot 31. */
.wb-scope .wb-hero-v32.wb-band--video.wb-band--dark{
	padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
	padding-bottom:clamp(1.5rem, 3.5vh, 2.4rem);
}
.wb-scope .wb-hv--32{ position:relative; padding:clamp(.2rem, .5vw, .6rem) 0; }
/* Accessible headline: the full sentence, visually hidden (inline clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--32 .wb-hv32-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule; margins cut (change A)
   so WE GET starts higher at 1280x800. */
.wb-scope .wb-hv--32 .wb-hv32-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; margin:0 0 clamp(.4rem, .3rem + .4vw, .75rem); padding-bottom:.45rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--32 .wb-hv32-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel + sheen),
   flush left; max size stepped down from 8.25rem (change A). Stamps in when
   revealed; the switcher force-adds .is-in so it never gates legibility. */
.wb-scope .wb-hv--32 .wb-hv32-we{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(2.8rem, 8.6vw, 7.4rem); line-height:.92; letter-spacing:-.03em;
	transform-origin:left center;
}
@keyframes wb-hv32-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--32 .wb-hv32-we.is-in{ animation:wb-hv32-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white, hard corners; the
   ghost ask types in red 900 caps as PLACEHOLDER only. z-index lifts the AJAX
   dropdown above the DONE. row. Top gap tightened (change A). */
.wb-scope .wb-hv--32 .wb-hero-ask{ max-width:none; margin-top:clamp(.55rem, .35rem + .6vw, 1rem); position:relative; z-index:5; }
/* YOUR STUFF GOES HERE: smaller + closer to the pill (change B). */
.wb-scope .wb-hv--32 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--32 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.45rem .45rem .45rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--32 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--32 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 1.9rem); padding:.6rem .2rem; }
.wb-scope .wb-hv--32 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--32 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.8rem, .55rem + .8vw, 1.15rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--32 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
.wb-scope .wb-hv--32 .wb-hero-ask__note{ margin-top:.55rem; }
/* Row two: DONE. with the film in the letters (the delta). The wrapper hugs
   the word (flex item, content-sized), carries the static poster fill as its
   background, and isolates the blend so multiply never reaches the band. */
.wb-scope .wb-hv--32 .wb-hv32-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.55rem, .35rem + .7vw, 1rem) 0 0; }
.wb-scope .wb-hv--32 .wb-hv32-donewrap{
	position:relative; isolation:isolate; overflow:hidden;
	background:#15161a url("../videos/weber-website-video-poster.jpg") center 40%/cover no-repeat;
}
/* Known residual, accepted (review 2026-07-04): the multiplied slab lands a
   touch darker than the band on dark film/poster frames (measured corner
   rgb(2,5,10) vs band rgb(14,15,17)), so a barely visible rectangle can show
   around DONE., worst in the static-poster state. Inherent to the directed
   knockout technique. If it bothers the owner in review, uncomment the
   feather below: a band-colored soft halo outside the wrapper edge that
   blends the seam into the band.
.wb-scope .wb-hv--32 .wb-hv32-donewrap{ box-shadow:0 0 14px 12px #0e0f11; }
*/
.wb-scope .wb-hv--32 .wb-hv32-film{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
	opacity:0; transition:opacity .6s ease;
}
.wb-scope .wb-hv--32.is-film-live .wb-hv32-film{ opacity:1; }
/* The knockout: the slab is the band color, the word is pure white, multiply
   does the rest. The .1em padding keeps every glyph edge inside the slab (a
   tight line-height would otherwise let white ink escape onto the band). */
.wb-scope .wb-hv--32 .wb-hv32-done{
	position:relative; z-index:2; margin:0;
	font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(3.2rem, 10.4vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
	padding:.1em .08em; color:#fff;
	background:#0e0f11;
	mix-blend-mode:multiply;
}
@keyframes wb-hv32-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--32 .wb-hv32-donerow.is-in .wb-hv32-donewrap{ animation:wb-hv32-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--32 .wb-hv32-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--32 .wb-hv32-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv32-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--32 .wb-hv32-donerow.is-in .wb-hv32-seal{ animation:wb-hv32-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* Spirk lead (change D): longer copy, so the measure opens to 58ch. */
.wb-scope .wb-hv--32 .wb-hv32-lead{ max-width:58ch; margin-top:clamp(.8rem, .5rem + .8vw, 1.2rem); }
.wb-scope .wb-hv--32 .wb-hv32-lead__open{ font-weight:800; color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. */
.wb-scope .wb-hv--32 .wb-hv32-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.9rem, .6rem + .9vw, 1.4rem); padding-top:clamp(.8rem, .5rem + .9vw, 1.2rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--32 .wb-hv32-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--32 .wb-hv32-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
/* Change E: the odometer sits on its own line (manual <br> in the markup);
   tabular figures + a reserved width mean the count-up never reflows the row
   (initCount seeds the span to "0" before it rolls). 103,052 today = 7 chars. */
.wb-scope .wb-hv--32 .wb-hv32-jobs{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--32 .wb-hv32-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--32 .wb-hv32-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--32 .wb-hv32-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; the counter-shear and the jolt are dropped; the
   film never loads below 961px so the poster fill stands in the letters
   (retention lives in the ticket strip at every width). */
@media (max-width:640px){
	.wb-scope .wb-hv--32 .wb-hv32-go-txt{ display:none; }
	.wb-scope .wb-hv--32 .wb-hv32-we,
	.wb-scope .wb-hv--32 .wb-hv32-donerow{ transform:none !important; }
	.wb-scope .wb-hv--32 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
	.wb-scope .wb-hv--32 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; } /* floor eased below skin 6 so LEADS FOR MY SALES TEAM never clips at 390 */
	.wb-scope .wb-hv--32 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
	.wb-scope .wb-hv--32 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
	.wb-scope .wb-hv--32 .wb-hv32-donerow.is-in .wb-hv32-donewrap{ animation:none; }
	.wb-scope .wb-hv--32 .wb-hv32-seal img{ width:84px; }
	.wb-scope .wb-hv--32 .wb-hv32-ticket{ gap:0; }
	.wb-scope .wb-hv--32 .wb-hv32-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
	.wb-scope .wb-hv--32 .wb-hv32-ticket__cell + .wb-hv32-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
	.wb-scope .wb-hv--32 .wb-hv32-ticket__num{ font-size:1.15rem; }
	.wb-scope .wb-hv--32 .wb-hv32-ticket__label{ margin-top:0; max-width:none; }
}
/* Reduced motion: everything renders in final position; the film never plays
   (initHeroV32 never injects sources) and the poster fill stands. */
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--32 .wb-hv32-we.is-in,
	.wb-scope .wb-hv--32 .wb-hv32-donerow.is-in .wb-hv32-donewrap,
	.wb-scope .wb-hv--32 .wb-hv32-donerow.is-in .wb-hv32-seal{ animation:none !important; }
	.wb-scope .wb-hv--32 .wb-hv32-film{ display:none; }
}


/* ---- Variant 33 "3C: Poster on the Film" (build/38 hero-3 family).
   The Fill In The Stuff poster set straight on the DARKENED brand video.
   Skin 33 is the family member that KEEPS the band's shared video + scrim
   (no display:none, unlike every other skin); the scrim is overridden
   heavier instead, so chrome WE GET, the paper pill, and the red DONE. all
   stay AA-large legible over any frame of the film (the giant rows are
   aria-hidden decoration; the accessible headline is the hidden-clip white
   sentence). DONE. goes SOLID brand red,
   no photo ink: flat color is the only fill that holds contrast over a
   moving background (and clip-text over motion would be mush anyway).
   Family tweaks 2026-07-04 baked in: tighter top (A), smaller pill label
   (B), Spirk lead verbatim at a wider measure (D), no-reflow ticket
   counter (E). Giant <p> rows need font-family !important because
   fonts-modern.css pins p to Inter. NOTE: no text-shadow on .wb-hv33-we,
   the chrome is background-clip:text with a transparent fill and a shadow
   would bleed through the glyph interiors. */

/* Band level: KEEP .wb-band__video-wrap AND .wb-band__scrim for this skin.
   The override floors the whole frame near-black, heavier than the markup's
   .wb-band__scrim--strong (this selector is (0,3,0) and later in the
   cascade, so it wins). The band's inline poster background also stays: it
   is what renders under 768px and under reduced motion, where the global
   rules drop the <video>, and this same scrim darkens it identically, so
   the poster type reads the same everywhere. No !important needed, nothing
   here fights the section's inline background-image. */
.wb-scope .wb-hero-v33 .wb-band__scrim{
	background:
		linear-gradient(90deg, rgba(8,9,12,.88), rgba(8,9,12,.74) 52%, rgba(8,9,12,.62)),
		linear-gradient(180deg, rgba(8,9,12,.7), rgba(8,9,12,.56) 45%, rgba(8,9,12,.84)),
		radial-gradient(120% 130% at 18% 0%, rgba(158,22,32,.26), transparent 58%);
}
/* Tight top (family ask A, band level): trim the first-band --wb-pad to a
   small clamp but NEVER drop --wb-nav-h (the poster must still clear the
   fixed nav). The full-band film is object-fit:cover and survives the shorter
   band. Four class-level simples ties the base
   .wb-scope > .wb-band:first-child:not(.wb-band--flush) rule at (0,4,0) and,
   later in the cascade, wins on source order. Matches slot 31. */
.wb-scope .wb-hero-v33.wb-band--video.wb-band--dark{
	padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
	padding-bottom:clamp(1.5rem, 3.5vh, 2.4rem);
}

/* Poster column. Family tweak A: smaller top padding + tighter rhythm so
   more of the sentence sits above the fold at 1280x800. */
.wb-scope .wb-hv--33{ position:relative; padding:clamp(.15rem, .4vw, .6rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--33 .wb-hv33-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule, pulled in tight to
   the WE GET row (tweak A). */
.wb-scope .wb-hv--33 .wb-hv33-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(.45rem, .3rem + .5vw, .8rem); padding-bottom:.45rem; border-bottom:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--33 .wb-hv33-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.82); }
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel), flush
   left. Max size stepped down from the 3A base (tweak A allows it). Stamps
   in (scale 1.06 to 1) on reveal; the switcher force-adds .is-in, so it
   replays on flip and never gates legibility. */
.wb-scope .wb-hv--33 .wb-hv33-we{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(2.9rem, 9vw, 7.25rem); line-height:.9; letter-spacing:-.03em;
	transform-origin:left center;
}
@keyframes wb-hv33-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--33 .wb-hv33-we.is-in{ animation:wb-hv33-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost ask types in red 900 caps (initHeroV33 swaps the PLACEHOLDER
   only). z-index lifts the form's stacking context (data-reveal will-change)
   above the DONE. row so the live AJAX dropdown is never painted under it. */
.wb-scope .wb-hv--33 .wb-hero-ask{ max-width:none; margin-top:clamp(.6rem, .4rem + .7vw, 1.1rem); position:relative; z-index:5; }
/* Family tweak B: the YOUR STUFF GOES HERE label, smaller and closer. */
.wb-scope .wb-hv--33 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--33 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--33 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--33 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.7rem .2rem; }
.wb-scope .wb-hv--33 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--33 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.85rem, .6rem + .8vw, 1.25rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--33 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
.wb-scope .wb-hv--33 .wb-hero-ask__note{ margin-top:.55rem; }
/* Row two: DONE. SOLID brand red, the 3C delta: no photo ink, no clip-text,
   maximum contrast over motion. The soft dark shadow is safe here (the fill
   is opaque) and lifts the letters off the moving film. WGSD seal
   rubber-stamped on its shoulder, same as 3A. */
.wb-scope .wb-hv--33 .wb-hv33-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.6rem, .4rem + .7vw, 1rem) 0 0; }
.wb-scope .wb-hv--33 .wb-hv33-done{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(3.2rem, 10.5vw, 8.4rem); line-height:.88; letter-spacing:-.03em;
	color:var(--wb-red);
	text-shadow:0 14px 44px rgba(0,0,0,.55);
}
@keyframes wb-hv33-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--33 .wb-hv33-donerow.is-in .wb-hv33-done{ animation:wb-hv33-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--33 .wb-hv33-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--33 .wb-hv33-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv33-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--33 .wb-hv33-donerow.is-in .wb-hv33-seal{ animation:wb-hv33-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* Lead: Spirk's copy (tweak D) runs longer than the old one-liner, so the
   measure widens; the bold opener goes full white. */
.wb-scope .wb-hv--33 .wb-hv33-lead{ max-width:62ch; margin-top:clamp(.7rem, .5rem + .7vw, 1.1rem); }
.wb-scope .wb-hv--33 .wb-hv33-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. */
.wb-scope .wb-hv--33 .wb-hv33-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.8rem, .6rem + .8vw, 1.3rem); padding-top:clamp(.7rem, .5rem + .8vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--33 .wb-hv33-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--33 .wb-hv33-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.3rem, 1rem + 1vw, 1.8rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
/* Family tweak E: the live counter sits on its OWN line (manual <br> in the
   markup); tabular digits + a reserved 7ch floor ("103,052" is 7 glyphs, and
   ch is the width of a tabular 0 here, so the comma leaves headroom) mean
   the shared odometer count-up can never reflow the row. */
.wb-scope .wb-hv--33 .wb-hv33-ticket__odo{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--33 .wb-hv33-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--33 .wb-hv33-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--33 .wb-hv33-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; the counter-shear drops (retention lives in the
   ticket strip at every width). The global rules already swap the band video
   for the darkened poster under 768px, so nothing moves behind the type. */
@media (max-width:640px){
	.wb-scope .wb-hv--33 .wb-hv33-go-txt{ display:none; }
	.wb-scope .wb-hv--33 .wb-hv33-we,
	.wb-scope .wb-hv--33 .wb-hv33-donerow{ transform:none !important; }
	.wb-scope .wb-hv--33 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
	.wb-scope .wb-hv--33 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; } /* floor eased below skin 6 so LEADS FOR MY SALES TEAM never clips at 390 */
	.wb-scope .wb-hv--33 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
	.wb-scope .wb-hv--33 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
	.wb-scope .wb-hv--33 .wb-hv33-seal img{ width:84px; }
	.wb-scope .wb-hv--33 .wb-hv33-ticket{ gap:0; }
	.wb-scope .wb-hv--33 .wb-hv33-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
	.wb-scope .wb-hv--33 .wb-hv33-ticket__cell + .wb-hv33-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
	.wb-scope .wb-hv--33 .wb-hv33-ticket__num{ font-size:1.15rem; }
	.wb-scope .wb-hv--33 .wb-hv33-ticket__label{ margin-top:0; max-width:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt
   (the reveal/count systems already stand down globally, and the global rule
   drops the band video, so the poster frame is static). */
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--33 .wb-hv33-we.is-in,
	.wb-scope .wb-hv--33 .wb-hv33-donerow.is-in .wb-hv33-done,
	.wb-scope .wb-hv--33 .wb-hv33-donerow.is-in .wb-hv33-seal{ animation:none !important; }
}


/* ---- Variant 34 "3D: Hex and the Slow Glow" (hero-3 family, build/38).
   The Fill In The Stuff poster (skin-6 lineage) restaged on the black
   honeycomb texture with a red glow that rotates VERY slowly around the
   poster: a band-level ::before holds one oversized conic gradient (brand
   red #d8232a, peaking at 16% opacity) and turns once every 80s. The turn
   is transform-only, so the gradient paints once and the rotation rides
   the compositor; reduced motion (and phones, where an infinite rotation
   is battery for nothing) get a static radial bloom instead.
   Everything else is the 2026-07-04 family pass on the poster: tighter
   top (band min-height trimmed, smaller poster padding, tighter
   kicker-to-WE-GET gap, max type stepped down a notch), tighter pill
   label, the Spirk lead on a wider measure, and the no-reflow jobs-done
   counter. The per-letter DONE. photos stay per the 3D delta. Giant <p>
   rows need font-family !important because fonts-modern.css pins p to
   Inter. Append to www/css/overhaul.css; markup must never reference any
   .wb-hv--6 class. */
.wb-scope .wb-hero-v34 .wb-band__video-wrap,
.wb-scope .wb-hero-v34 .wb-band__scrim{ display:none; }
/* Honeycomb ground: the shared texture under a ~60% black wash (a step
   darker than .wb-bg-honeycomb's 50% so the chrome type and the red glow
   stay the brightest things on the band). !important beats the section's
   inline poster background-image, same as the other skins. */
.wb-scope .wb-hero-v34.wb-band--video{
	background:linear-gradient(rgba(5,6,8,.6), rgba(5,6,8,.6)),
	           #0a0b0d url("../images/overhaul/tex-honeycomb-dark.webp") center top/cover no-repeat !important;
}
/* Tighter top (family ask A): the padding cut does the real work at 1280x800
   (the band's natural height exceeds the min-height cap, so the min-height
   trim alone never binds). Trim the first-band --wb-pad to a small clamp but
   NEVER drop --wb-nav-h (the poster must still clear the fixed nav); four
   class-level simples ties the base first-child clearance rule at (0,4,0)
   and wins on source order. Matches slot 31. */
.wb-scope .wb-hero-v34.wb-band--video.wb-band--dark{
	min-height:clamp(520px, 74vh, 780px);
	padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
	padding-bottom:clamp(1.5rem, 3.5vh, 2.4rem);
}
/* THE SLOW GLOW: one oversized square pseudo centered on the poster column
   (42% across the band), carrying a two-beam conic in brand red (main beam
   .16, counterweight .09, inside the asked 12-18%). The band's own
   overflow:hidden + isolation:isolate clip and contain it; z-index:0 keeps
   it under .wb-inner (position:relative, z-index:2), so it can never sit
   over copy or intercept a click. */
.wb-scope .wb-hero-v34.wb-band--video::before{
	content:""; position:absolute; left:42%; top:50%;
	width:170vmax; height:170vmax; margin:-85vmax 0 0 -85vmax;
	background:conic-gradient(from 0deg,
		rgba(216,35,42,0) 0deg,
		rgba(216,35,42,.16) 46deg,
		rgba(216,35,42,.05) 88deg,
		rgba(216,35,42,0) 128deg,
		rgba(216,35,42,0) 208deg,
		rgba(216,35,42,.09) 258deg,
		rgba(216,35,42,0) 306deg);
	z-index:0; pointer-events:none;
	animation:wb-hv34-glowturn 80s linear infinite;
}
@keyframes wb-hv34-glowturn{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
/* Reduce gate (and the phone gate): the turn stands down to a static red
   bloom over the hive at the same quiet strength; no infinite animation
   runs. */
@media (prefers-reduced-motion:reduce), (max-width:768px){
	.wb-scope .wb-hero-v34.wb-band--video::before{
		animation:none;
		inset:0; width:auto; height:auto; margin:0;
		background:radial-gradient(56% 48% at 42% 44%, rgba(216,35,42,.15), transparent 72%);
	}
}

/* Poster wrapper: top padding halved vs skin 6 (family ask A). */
.wb-scope .wb-hv--34{ position:relative; padding:clamp(.2rem, .5vw, .7rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--34 .wb-hv34-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule, tightened (ask A). */
.wb-scope .wb-hv--34 .wb-hv34-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(.45rem, .3rem + .5vw, .8rem); padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--34 .wb-hv34-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel +
   sheen), flush left; max size stepped down a notch from skin 6 (ask A).
   Stamps in on reveal; the switcher force-adds .is-in, so it replays on
   flip and never gates legibility. */
.wb-scope .wb-hv--34 .wb-hv34-we{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(2.8rem, 8.6vw, 7.4rem); line-height:.92; letter-spacing:-.03em;
	transform-origin:left center;
}
@keyframes wb-hv34-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--34 .wb-hv34-we.is-in{ animation:wb-hv34-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost deliverable types in red 900 caps (JS swaps the PLACEHOLDER
   only). z-index lifts the form's stacking context above the DONE. row so
   the live AJAX dropdown is never painted under it. */
.wb-scope .wb-hv--34 .wb-hero-ask{ max-width:none; margin-top:clamp(.6rem, .4rem + .7vw, 1.1rem); position:relative; z-index:5; }
/* "YOUR STUFF GOES HERE." tightened (family ask B): smaller, less margin. */
.wb-scope .wb-hv--34 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#ff5a61; margin:0 0 .35rem; text-shadow:none; }
.wb-scope .wb-hv--34 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--34 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--34 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.1rem, .85rem + 1.3vw, 1.85rem); padding:.65rem .2rem; }
.wb-scope .wb-hv--34 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--34 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.8rem, .55rem + .8vw, 1.15rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--34 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
.wb-scope .wb-hv--34 .wb-hero-ask__note{ margin-top:.55rem; }
/* Row two: DONE. filled with the per-letter photo ink (kept per the 3D
   delta), the period a solid red block, the WGSD seal rubber-stamped on its
   shoulder. Base = solid red (the no-clip fallback); @supports upgrades to
   the photo ink + slow pan. Max size stepped down a notch (ask A). */
.wb-scope .wb-hv--34 .wb-hv34-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.6rem, .4rem + .7vw, 1.1rem) 0 0; }
.wb-scope .wb-hv--34 .wb-hv34-done{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(3.2rem, 10.4vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
	color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
	/* A DIFFERENT real photo inks each letter (D press floor, O the CMYK ink
	   system, N the Karns truck wrap, E a booth). Staggered pan delays so the
	   four never move in lockstep. */
	.wb-scope .wb-hv--34 .wb-hv34-l{
		background:#15161a center 42%/cover no-repeat;
		-webkit-background-clip:text; background-clip:text;
		-webkit-text-fill-color:transparent; color:transparent;
		-webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
		animation:wb-hv34-inkpan 26s ease-in-out infinite alternate;
	}
	.wb-scope .wb-hv--34 .wb-hv34-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
	.wb-scope .wb-hv--34 .wb-hv34-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
	.wb-scope .wb-hv--34 .wb-hv34-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
	.wb-scope .wb-hv--34 .wb-hv34-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
	.wb-scope .wb-hv--34 .wb-hv34-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
	@media (max-width:640px){
		.wb-scope .wb-hv--34 .wb-hv34-l{ animation:none; }
	}
}
@keyframes wb-hv34-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv34-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--34 .wb-hv34-donerow.is-in .wb-hv34-done{ animation:wb-hv34-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--34 .wb-hv34-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--34 .wb-hv34-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv34-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--34 .wb-hv34-donerow.is-in .wb-hv34-seal{ animation:wb-hv34-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* The Spirk lead (family ask D): longer copy, so a wider measure holds it
   to a few lines and the ticket strip stays near the fold. */
.wb-scope .wb-hv--34 .wb-hv34-lead{ max-width:62ch; margin-top:clamp(.7rem, .5rem + .7vw, 1.1rem); }
.wb-scope .wb-hv--34 .wb-hv34-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline, top gap trimmed. */
.wb-scope .wb-hv--34 .wb-hv34-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.8rem, .6rem + .8vw, 1.3rem); padding-top:clamp(.7rem, .5rem + .8vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--34 .wb-hv34-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--34 .wb-hv34-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
/* No-reflow counter (family ask E): the odometer owns its line (manual <br>
   in the markup), counts in tabular figures, and reserves the width of the
   final "103,052"-size figure up front, so ticking never reflows the row. */
.wb-scope .wb-hv--34 .wb-hv34-ticket__count{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--34 .wb-hv34-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--34 .wb-hv34-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--34 .wb-hv34-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; counter-shear and ink pan dropped (retention lives
   in the ticket strip at every width). */
@media (max-width:640px){
	.wb-scope .wb-hv--34 .wb-hv34-go-txt{ display:none; }
	.wb-scope .wb-hv--34 .wb-hv34-we,
	.wb-scope .wb-hv--34 .wb-hv34-donerow{ transform:none !important; }
	.wb-scope .wb-hv--34 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
	.wb-scope .wb-hv--34 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; } /* floor eased below skin 6 so LEADS FOR MY SALES TEAM never clips at 390 */
	.wb-scope .wb-hv--34 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
	.wb-scope .wb-hv--34 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
	.wb-scope .wb-hv--34 .wb-hv34-seal img{ width:84px; }
	.wb-scope .wb-hv--34 .wb-hv34-ticket{ gap:0; }
	.wb-scope .wb-hv--34 .wb-hv34-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
	.wb-scope .wb-hv--34 .wb-hv34-ticket__cell + .wb-hv34-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
	.wb-scope .wb-hv--34 .wb-hv34-ticket__num{ font-size:1.15rem; }
	.wb-scope .wb-hv--34 .wb-hv34-ticket__label{ margin-top:0; max-width:none; }
	/* Single-line ruled rows: the manual break stands down (the space in the
	   markup keeps "103,052 jobs done" reading right); the reserved-width
	   tabular counter still keeps the row from shifting while it ticks. */
	.wb-scope .wb-hv--34 .wb-hv34-ticket__br{ display:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt,
   no ink pan (the reveal/count systems already stand down globally; the
   band glow's own reduce gate is up top with the band rules). */
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--34 .wb-hv34-we.is-in,
	.wb-scope .wb-hv--34 .wb-hv34-done,
	.wb-scope .wb-hv--34 .wb-hv34-l,
	.wb-scope .wb-hv--34 .wb-hv34-donerow.is-in .wb-hv34-done,
	.wb-scope .wb-hv--34 .wb-hv34-donerow.is-in .wb-hv34-seal{ animation:none !important; }
}

/* Cascade fix carried over from skin 6's review (blocker there): the mobile
   plan drops the ink pan, but the .is-in rule above is (0,5,0) and outguns
   the @supports mobile animation:none at (0,3,0). Same selector, later in
   the cascade, inside max-640: keep the jolt, kill the 26s
   background-position pan on phones. */
@media (max-width:640px){
	.wb-scope .wb-hv--34 .wb-hv34-donerow.is-in .wb-hv34-done{ animation:wb-hv34-jolt .3s cubic-bezier(.3,.9,.4,1); }
	.wb-scope .wb-hv--34 .wb-hv34-donerow.is-in .wb-hv34-l{ animation:none; }
}


/* ---- Variant skin 35 "3E: The Rocket and the Results" (hero-3 family, build/38).
   The Fill In The Stuff poster (skin 6 base, post-cleanup: no crop marks, no
   CMYK, no slug) with the 2026-07-04 family tightening plus two grafts from
   Launch Sequence (skin 9): a red trajectory rail with a bigger rocket riding
   the shared [data-drive] engine in its own airspace strip under the ticket,
   and the five manifest cards repurposed as sample-result cards in one quiet
   row under the pill (initHeroV35 lights the matches while the ghost typer
   types; static all-on row for no-JS and reduced motion). Giant <p> rows need
   font-family !important because fonts-modern.css pins p to Inter. */
/* Band level: hide the shared video + scrim, milled metal over near-black
   (v6 pattern; !important beats the section's inline background-image), a
   faint red glow low where the rail lives, and a tighter top: keep the full
   --wb-nav-h clearance (breadcrumb rule) but swap the roomy --wb-pad for a
   small clamp so more poster sits above the 1280x800 fold. */
.wb-scope .wb-hero-v35 .wb-band__video-wrap,
.wb-scope .wb-hero-v35 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v35.wb-band--video{
  background:radial-gradient(52rem 16rem at 78% 100%, rgba(216,35,42,.14), transparent 62%),
             linear-gradient(rgba(14,15,17,.93), rgba(14,15,17,.93)),
             #0e0f11 url("../images/overhaul/tex-metallic-lines.webp") center/420px repeat !important;
  padding-top:calc(var(--wb-nav-h) + clamp(.9rem, .5rem + 1vw, 1.6rem)) !important;
  padding-bottom:clamp(1.25rem, .75rem + 1.5vw, 2.5rem) !important;   /* the flight strip carries its own air */
}
/* One rocket per page (build/37 note): the seam rider stands down here. */
.wb-scope .wb-hero-v35.wb-band--video ~ .wb-seam-rider--rocket{ display:none; }

.wb-scope .wb-hv--35{ position:relative; padding:clamp(.15rem, .4vw, .5rem) 0 0; }
/* Paint order: every poster row above the flight strip (z1); the ask keeps z5
   so the live AJAX dropdown paints over the sample row (z2) and everything
   else. The a11y row's absolute clip wins its own position via !important. */
.wb-scope .wb-hv--35 > *{ position:relative; z-index:2; }
.wb-scope .wb-hv--35 .wb-hv35-flight{ z-index:1; }
/* Accessible headline: the full sentence, visually hidden (standard clip). */
.wb-scope .wb-hv--35 .wb-hv35-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line, tightened: quiet silver kicker over a hairline rule. */
.wb-scope .wb-hv--35 .wb-hv35-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; margin:0 0 clamp(.45rem, .3rem + .5vw, .8rem); padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--35 .wb-hv35-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Row one: WE GET, chrome, slightly smaller than skin 6 (family change A). */
.wb-scope .wb-hv--35 .wb-hv35-we{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(2.9rem, 8.8vw, 7.4rem); line-height:.9; letter-spacing:-.03em;
  transform-origin:left center;
}
@keyframes wb-hv35-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--35 .wb-hv35-we.is-in{ animation:wb-hv35-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence, paper-white, hard corners; the
   ghost phrase types in red 900 caps as PLACEHOLDER only. */
.wb-scope .wb-hv--35 .wb-hero-ask{ max-width:none; margin-top:clamp(.55rem, .4rem + .6vw, .95rem); z-index:5; }
.wb-scope .wb-hv--35 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--35 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--35 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--35 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.65rem .2rem; }
.wb-scope .wb-hv--35 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--35 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.8rem, .55rem + .8vw, 1.2rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--35 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
.wb-scope .wb-hv--35 .wb-hero-ask__note{ margin-top:.5rem; }
/* SAMPLE RESULTS (skin 9 manifest, repurposed): one restrained row of five
   small real-work cards under the pill. Server render = all five visible.
   initHeroV35 adds .is-sim (cards dim to ghosts) and lights each phrase's
   matches with .is-on; .is-off fades the whole strip on focus or first
   keystroke but keeps its box, so the handoff to the live dropdown never
   reflows the poster. Sits at z2, always under the ask's z5 dropdown. */
.wb-scope .wb-hv--35 .wb-hv35-samples{ margin:clamp(.55rem, .4rem + .5vw, .9rem) 0 0; transition:opacity .3s ease, visibility .3s ease; }
.wb-scope .wb-hv--35 .wb-hv35-samples.is-off{ opacity:0; visibility:hidden; }
.wb-scope .wb-hv--35 .wb-hv35-samples__head{ margin:0 0 .4rem; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.wb-scope .wb-hv--35 .wb-hv35-samples__row{ display:flex; gap:clamp(.5rem, .4rem + .6vw, 1rem); list-style:none; margin:0; padding:0; }
.wb-scope .wb-hv--35 .wb-hv35-card{ flex:0 1 clamp(96px, 7vw + 40px, 150px); min-width:0; transition:opacity .45s ease, transform .45s ease; }
.wb-scope .wb-hv--35 .wb-hv35-samples.is-sim .wb-hv35-card{ opacity:.14; }
.wb-scope .wb-hv--35 .wb-hv35-samples.is-sim .wb-hv35-card.is-on{ opacity:1; transform:translateY(-2px); }
.wb-scope .wb-hv--35 .wb-hv35-card > a{ display:block; text-decoration:none; }
.wb-scope .wb-hv--35 .wb-hv35-card img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:4px; border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 24px -10px rgba(0,0,0,.6); }
.wb-scope .wb-hv--35 .wb-hv35-card > a:hover img{ border-color:rgba(255,255,255,.45); }
.wb-scope .wb-hv--35 .wb-hv35-card__tag{ display:block; margin-top:.3rem; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size:.56rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-scope .wb-hv--35 .wb-hv35-card__chip{ display:inline-block; margin-right:.45em; padding:.1em .45em; border-radius:3px; background:var(--wb-red); color:#fff; letter-spacing:.09em; }
/* Row two: DONE. inked with the four photo crops, red-block period, WGSD seal
   stamped on its shoulder. Base = solid red fallback; @supports upgrades. */
.wb-scope .wb-hv--35 .wb-hv35-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.55rem, .35rem + .7vw, 1rem) 0 0; }
.wb-scope .wb-hv--35 .wb-hv35-done{
  margin:0; font-family:var(--wb-display) !important; font-weight:900;
  font-size:clamp(3.2rem, 10.6vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
  color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .wb-scope .wb-hv--35 .wb-hv35-l{
    background:#15161a center 42%/cover no-repeat;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    -webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
    animation:wb-hv35-inkpan 26s ease-in-out infinite alternate;
  }
  .wb-scope .wb-hv--35 .wb-hv35-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
  .wb-scope .wb-hv--35 .wb-hv35-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
  .wb-scope .wb-hv--35 .wb-hv35-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
  .wb-scope .wb-hv--35 .wb-hv35-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
  .wb-scope .wb-hv--35 .wb-hv35-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
  @media (max-width:640px){
    .wb-scope .wb-hv--35 .wb-hv35-l{ animation:none; }
  }
}
@keyframes wb-hv35-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv35-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--35 .wb-hv35-donerow.is-in .wb-hv35-done{ animation:wb-hv35-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--35 .wb-hv35-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--35 .wb-hv35-seal img{ display:block; width:clamp(84px, 9vw, 126px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv35-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--35 .wb-hv35-donerow.is-in .wb-hv35-seal{ animation:wb-hv35-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* Lead: the Spirk paragraph is longer than the old one-liner, so it gets a
   wider measure and a slightly smaller size to hold the poster's height. */
.wb-scope .wb-hv--35 .wb-hv35-lead{ max-width:66ch; margin-top:clamp(.7rem, .5rem + .7vw, 1.1rem); font-size:clamp(1rem, .92rem + .35vw, 1.16rem); }
.wb-scope .wb-hv--35 .wb-hv35-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. The jobs counter sits
   on its own line (manual <br>) over a reserved tabular-nums width, so the
   odometer animation never reflows the row (family change E). */
.wb-scope .wb-hv--35 .wb-hv35-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.8rem, .5rem + .8vw, 1.2rem); padding-top:clamp(.7rem, .5rem + .7vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--35 .wb-hv35-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--35 .wb-hv35-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.3rem, 1rem + 1.1vw, 1.9rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-hv--35 .wb-hv35-ticket__count{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--35 .wb-hv35-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--35 .wb-hv35-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--35 .wb-hv35-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* THE TRAJECTORY (skin 9 graft): a shallow printed red rail in a dedicated
   airspace strip under the ticket, so the flight NEVER covers copy; only the
   faded tail of the rail rises behind the empty right gutter. The rider gets
   translateX in vw from the shared [data-drive] engine; the -7deg rotation
   turns that into a climb. The CSS resting transform below is the parked
   position for reduced motion and no JS (initDrive stands down; an inline
   transform from JS overrides it when the engine runs). */
.wb-scope .wb-hv--35 .wb-hv35-flight{ height:clamp(110px, 6rem + 4vw, 170px); margin:clamp(.2rem, .8vw, .8rem) 0 0; pointer-events:none; }
.wb-scope .wb-hv--35 .wb-hv35-traj{ position:absolute; left:-6vw; bottom:6px; width:120vw; height:70px; transform:rotate(-7deg); transform-origin:left bottom; }
.wb-scope .wb-hv--35 .wb-hv35-rail{ position:absolute; left:0; right:0; bottom:38px; height:3px; border-radius:999px; background:linear-gradient(90deg, rgba(216,35,42,0), rgba(216,35,42,.65) 14%, rgba(216,35,42,.65) 68%, rgba(255,122,92,.9) 86%, rgba(255,122,92,0)); box-shadow:0 0 14px rgba(216,35,42,.4); }
.wb-scope .wb-hv--35 .wb-hv35-ride{ position:absolute; left:0; bottom:0; display:block; transform:translateX(10vw); will-change:transform; }
.wb-scope .wb-hv--35 .wb-hv35-rocket{ display:block; width:clamp(220px, 22vw, 300px); height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
/* Under 960 (skin 9 precedent): rail and rotation dropped; the rocket parks
   small at the right with the idle wiggle; the shared engine's inline
   translate is overruled so it can never wander over copy. */
@media (max-width:960px){
  .wb-scope .wb-hv--35 .wb-hv35-flight{ height:auto; margin-top:.6rem; }
  .wb-scope .wb-hv--35 .wb-hv35-traj{ position:static; width:auto; height:auto; transform:none; display:flex; justify-content:flex-end; padding-right:6vw; }
  .wb-scope .wb-hv--35 .wb-hv35-rail{ display:none; }
  .wb-scope .wb-hv--35 .wb-hv35-ride{ position:static; transform:none !important; }
  .wb-scope .wb-hv--35 .wb-hv35-rocket{ width:110px; }
}
@media (max-width:960px) and (prefers-reduced-motion:no-preference){
  .wb-js .wb-scope .wb-hv--35 .wb-hv35-rocket{ animation:wbRocket 4s ease-in-out infinite; }
}
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit; counter-shear and ink pan dropped; the sample row stands down (the
   typer keeps running; retention lives in the ticket strip at every width);
   ticket cells become ruled single-line rows. */
@media (max-width:640px){
  .wb-scope .wb-hv--35 .wb-hv35-go-txt{ display:none; }
  .wb-scope .wb-hv--35 .wb-hv35-we,
  .wb-scope .wb-hv--35 .wb-hv35-donerow{ transform:none !important; }
  .wb-scope .wb-hv--35 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
  .wb-scope .wb-hv--35 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; } /* floor eased below skin 6 so LEADS FOR MY SALES TEAM never clips at 390 */
  .wb-scope .wb-hv--35 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
  .wb-scope .wb-hv--35 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
  .wb-scope .wb-hv--35 .wb-hv35-samples{ display:none; }
  .wb-scope .wb-hv--35 .wb-hv35-seal img{ width:84px; }
  .wb-scope .wb-hv--35 .wb-hv35-ticket{ gap:0; }
  .wb-scope .wb-hv--35 .wb-hv35-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
  .wb-scope .wb-hv--35 .wb-hv35-ticket__cell + .wb-hv35-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
  .wb-scope .wb-hv--35 .wb-hv35-ticket__num{ font-size:1.15rem; }
  .wb-scope .wb-hv--35 .wb-hv35-ticket__label{ margin-top:0; max-width:none; }
}
/* Reduced motion: everything renders in final position; the sample row stays
   the static all-on strip (initHeroV35 never adds .is-sim); the rocket rests
   at the CSS parked transform over the static rail. */
@media (prefers-reduced-motion:reduce){
  .wb-scope .wb-hv--35 .wb-hv35-we.is-in,
  .wb-scope .wb-hv--35 .wb-hv35-done,
  .wb-scope .wb-hv--35 .wb-hv35-l,
  .wb-scope .wb-hv--35 .wb-hv35-donerow.is-in .wb-hv35-done,
  .wb-scope .wb-hv--35 .wb-hv35-donerow.is-in .wb-hv35-seal{ animation:none !important; }
  .wb-scope .wb-hv--35 .wb-hv35-card,
  .wb-scope .wb-hv--35 .wb-hv35-samples{ transition:none; }
  .wb-scope .wb-hv--35 .wb-hv35-ride{ transform:translateX(10vw) !important; }
}
/* Review fix carried over from skin 6 (blocker): the .is-in jolt rule outguns
   the @supports mobile animation:none. Same selector, later in the cascade,
   inside max-640: keep the jolt, kill the 26s ink pan on phones. */
@media (max-width:640px){
  .wb-scope .wb-hv--35 .wb-hv35-donerow.is-in .wb-hv35-done{ animation:wb-hv35-jolt .3s cubic-bezier(.3,.9,.4,1); }
  .wb-scope .wb-hv--35 .wb-hv35-donerow.is-in .wb-hv35-l{ animation:none; }
}

/* ---- Slot 36 "The Champion" (build/38 hero-3 family, gap-analysis build).
   Base: variant 31 "3A The Tight Poster" (274) copied wholesale and renamed;
   no selector here touches skin 31. Deltas against that baseline, per the
   brief (/tmp/wb-champion/brief.md):
   (1) Film in the letters via CSS ALPHA MASK, not blend: .wb-hv36-film sits
       absolute over the D..E span union (initHeroV36 sizes it) and
       done-mask-1600.png (same Montserrat 900 glyphs, same -.03em tracking,
       dot excluded) clips it to the letterforms. No knockout slab, no seam;
       the band keeps 3A's milled metal, the exact thing 3B traded away.
       @supports gates on mask support; below 961px the film is display:none
       and initHeroV36 never injects a byte. Round 2: the ink photos are
       NEVER retired. They stay painted under the running film, so any exit
       (resize across 961px, an unarm, a stall) lands on 3A's letters
       mid-frame with zero JS required; while the film runs, .is-film-live
       only pauses their 26s pan (nothing animates for nothing) and raises
       the text-stroke to a 2px rgba(.22) rim, the legibility floor that
       keeps the glyph edges standing whatever frame is playing. The sources
       are the curated graded loop (weber-hero36-loop.*), not the raw film.
   (2) The chip lane replaces .wb-hero-ask__note: one row of plain links plus
       the red phone chip. Its line is paid for by the dropped note plus small
       trims on the donerow/lead/ticket top clamps (fold-verified 1280x800).
   (3) Zero-height copy grafts (open ticket + live count, receipts, film
       provenance): receipts CSS now ships LIVE and idle (its markup only
       renders behind the one-line PHP flag in the fragment); the provenance
       slug rides the meta line's right side (zero height at every width,
       hidden under 961px, fades with .is-film-live).
   Everything else is byte-identical 3A: band override (!important beats the
   section's inline background), tight top (never drop --wb-nav-h), giant <p>
   rows need font-family !important because fonts-modern.css pins p to Inter,
   reflow-proof counter, 390 mobile plan, reduced-motion stand-down. */
.wb-scope .wb-hero-v36 .wb-band__video-wrap,
.wb-scope .wb-hero-v36 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v36.wb-band--video{
	background:linear-gradient(rgba(14,15,17,.93), rgba(14,15,17,.93)),
	           #0e0f11 url("../images/overhaul/tex-metallic-lines.webp") center/420px repeat !important;
}
/* Tight top (owner 2026-07-04): trim the first-band --wb-pad down to a small
   clamp but NEVER drop --wb-nav-h (the poster must still clear the fixed nav).
   Four class-level simples, later in the cascade, beats the base
   .wb-scope > .wb-band:first-child:not(.wb-band--flush) clearance rule. */
.wb-scope .wb-hero-v36.wb-band--video.wb-band--dark{
	padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
	padding-bottom:clamp(1.5rem, 3.5vh, 2.4rem);
}
.wb-scope .wb-hv--36{ position:relative; padding:clamp(.15rem, .4vw, .5rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--36 .wb-hv36-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule, pulled in close to
   WE GET (tight-top change A). */
.wb-scope .wb-hv--36 .wb-hv36-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(.4rem, .3rem + .35vw, .7rem); padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--36 .wb-hv36-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Film provenance (round 2, critique 3): a quiet slug on the meta line's
   right side, like a job note on a proof sheet. Rendered whenever the film
   CAN run (961px+), so it reserves its space and fading it in causes zero
   layout shift; opacity follows .is-film-live. It only claims what is true
   by construction: the loop is Weber's own reel. aria-hidden because it
   narrates a purely visual moment. */
.wb-scope .wb-hv--36 .wb-hv36-filmcap{ display:none; font-family:var(--wb-display) !important; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); opacity:0; transition:opacity .8s ease .35s; }
@media (min-width:1200px){
	/* 1200, not the film's 961: at 1024 the slug shares the meta line with the
	   kicker and wraps it (+25px, measured); between 961 and 1199 the film
	   plays uncaptioned rather than spend fold on a nicety. */
	.wb-scope .wb-hv--36 .wb-hv36-filmcap{ display:block; }
	.wb-scope .wb-hv--36.is-film-live .wb-hv36-filmcap{ opacity:1; }
}
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel + sheen),
   flush left. Stamps in when revealed; the switcher force-adds .is-in, so it
   replays on flip and never gates legibility. */
.wb-scope .wb-hv--36 .wb-hv36-we{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(2.9rem, 8.8vw, 7.4rem); line-height:.92; letter-spacing:-.03em;
	transform-origin:left center;
}
@keyframes wb-hv36-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--36 .wb-hv36-we.is-in{ animation:wb-hv36-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost ask types in red 900 caps (JS swaps the PLACEHOLDER only). The
   label above it runs smaller and closer (tight-label change B). z-index
   lifts the form's stacking context above the DONE. row so the live AJAX
   dropdown is never painted under it. */
.wb-scope .wb-hv--36 .wb-hero-ask{ max-width:none; margin-top:clamp(.55rem, .35rem + .6vw, 1rem); position:relative; z-index:5; }
.wb-scope .wb-hv--36 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--36 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--36 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--36 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.7rem .2rem; }
.wb-scope .wb-hv--36 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--36 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.85rem, .6rem + .8vw, 1.25rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--36 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
/* THE TAP LANE (graft 2): one row of plain links under the pill, where 3A's
   note line sat. Hard corners and hairline rules to match the poster; the
   phone is the red seventh chip so the number stays above the fold. Quiet
   inline prefix label; chips are real anchors, no state machine. */
.wb-scope .wb-hv--36 .wb-hv36-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem; margin:.55rem 0 0; }
.wb-scope .wb-hv--36 .wb-hv36-chips__label{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-right:.15rem; }
.wb-scope .wb-hv--36 .wb-hv36-chip{
	display:inline-flex; align-items:center; padding:.3rem .68rem; border:1px solid rgba(255,255,255,.34);
	font-family:var(--wb-display); font-weight:700; font-size:.78rem; letter-spacing:.02em; line-height:1.2;
	color:#fff; text-decoration:none; background:rgba(255,255,255,.05);
	transition:background .15s ease, border-color .15s ease;
}
.wb-scope .wb-hv--36 .wb-hv36-chip:hover,
.wb-scope .wb-hv--36 .wb-hv36-chip:focus-visible{ border-color:#fff; background:rgba(255,255,255,.14); color:#fff; }
.wb-scope .wb-hv--36 .wb-hv36-chip--tel{ border-color:var(--wb-red); background:var(--wb-red); font-weight:800; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--36 .wb-hv36-chip--tel:hover,
.wb-scope .wb-hv--36 .wb-hv36-chip--tel:focus-visible{ border-color:#ff5a61; background:#c9252d; }
/* Row two: DONE. filled with the per-letter ink photos, the period a solid
   red block, the WGSD seal rubber-stamped on its shoulder. Base = solid red
   (the no-clip fallback); @supports upgrades to the photo ink + slow pan.
   Top margin trimmed a notch vs 3A: part of the chip row's fold payment. */
.wb-scope .wb-hv--36 .wb-hv36-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.4rem, .25rem + .5vw, .85rem) 0 0; }
.wb-scope .wb-hv--36 .wb-hv36-done{
	position:relative;
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(3.2rem, 10.6vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
	color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
	/* Owner 2026-07-03, kept from 3A: a DIFFERENT real photo inks each letter
	   (D press floor, O the CMYK ink system, N the Karns truck wrap, E a booth).
	   Staggered pan delays so the four never move in lockstep. This is also
	   the film's rest state and its only fallback: same letters, same box. */
	.wb-scope .wb-hv--36 .wb-hv36-l{
		background:#15161a center 42%/cover no-repeat;
		-webkit-background-clip:text; background-clip:text;
		-webkit-text-fill-color:transparent; color:transparent;
		-webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
		animation:wb-hv36-inkpan 26s ease-in-out infinite alternate;
	}
	.wb-scope .wb-hv--36 .wb-hv36-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
	.wb-scope .wb-hv--36 .wb-hv36-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
	.wb-scope .wb-hv--36 .wb-hv36-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
	.wb-scope .wb-hv--36 .wb-hv36-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
	.wb-scope .wb-hv--36 .wb-hv36-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
	@media (max-width:640px){
		/* Owner 2026-07-04: phones get a slow Ken Burns on the letter fills so the
		   stills read animated (reduced-motion still stands everything down). */
		.wb-scope .wb-hv--36 .wb-hv36-l{ background-size:auto 120%; animation:wb-hv36-kenburns 22s ease-in-out infinite alternate; }
	}
}
@keyframes wb-hv36-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv36-kenburns{ from{ background-size:auto 118%; background-position:40% 28%; } to{ background-size:auto 146%; background-position:60% 64%; } }
/* GRAFT 1, THE FILM IN THE LETTERS: absolute over the D..E union (initHeroV36
   sizes it from the rendered boxes, so proportions hold at every clamp size);
   the alpha mask clips it to the glyphs. Ships display:none; only mask
   support turns it on, and only .is-film-live (video actually playing) fades
   it up, so a stalled network or a refused autoplay never blanks a letter.
   The dot sits outside the film box and never needs masking. */
.wb-scope .wb-hv--36 .wb-hv36-film{
	display:none; position:absolute; left:0; top:0; z-index:2;
	object-fit:cover; pointer-events:none; opacity:0; transition:opacity .6s ease;
	-webkit-mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-size:100% 100%; mask-size:100% 100%;
}
@supports ((mask-size:100% 100%) or (-webkit-mask-size:100% 100%)){
	.wb-scope .wb-hv--36 .wb-hv36-film{ display:block; }
}
@media (max-width:960px){
	/* Belt and braces with the JS 961px gate: no film box below the desktop
	   line even if a stretched viewport races the matchMedia read. */
	.wb-scope .wb-hv--36 .wb-hv36-film{ display:none !important; }
}
.wb-scope .wb-hv--36.is-film-live .wb-hv36-film{ opacity:1; }
/* Live state (round 2, critiques 1 + 2). The ink photos are NOT retired:
   they keep painting under the opaque masked film, invisible while it runs
   and instantly the letters again on ANY exit, including a live resize
   across 961px (where the media rule above yanks the film box), so "the
   fallback is the baseline by construction" holds mid-frame with no JS in
   the loop. While live we only (a) pause their 26s pan, nothing composites
   for motion nobody can see, and (b) raise the text-stroke to a 2px
   rgba(.22) rim. The mask is cut from the glyph FILL, so the outer half of
   the stroke rides outside the film: a constant 1px edge, the legibility
   floor that keeps DONE. legible whatever frame is playing. Scoped 961px+,
   belt and braces with the JS unarm listener. */
@media (min-width:961px){
	.wb-scope .wb-hv--36.is-film-live .wb-hv36-l{ animation-play-state:paused; -webkit-text-stroke:0; background-image:none; background-color:#0e0f11; }   /* owner 2026-07-06: hide the stills UNDER the live film so their edges never fringe the mask; any exit restores them */
}
@keyframes wb-hv36-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--36 .wb-hv36-donerow.is-in .wb-hv36-done{ animation:wb-hv36-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--36 .wb-hv36-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--36 .wb-hv36-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv36-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--36 .wb-hv36-donerow.is-in .wb-hv36-seal{ animation:wb-hv36-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* The Spirk lead (change D): longer than the old one-liner, so it runs a
   touch smaller on a 62ch measure to hold the fold; the bold opener reads
   full white. Top clamp trimmed a notch: chip-row fold payment.
   Margin-bottom zeroed: the shared .wb-lead bottom margin collapses OVER the
   ticket's trimmed top margin and silently refunds the trim (measured +7px);
   with it gone the ticket's own clamp rules the gap. */
.wb-scope .wb-hv--36 .wb-hv36-lead{ max-width:62ch; margin-top:clamp(.5rem, .3rem + .5vw, .85rem); margin-bottom:0; font-size:calc(var(--wb-lead) * .92); line-height:1.5; }
.wb-scope .wb-hv--36 .wb-hv36-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. The jobs counter
   (change E) sits on its own line via a manual <br> in the markup; the span
   gets tabular-nums plus a reserved 7ch min-width so the odometer counting
   up never changes the cell's width or reflows the row. Top clamp trimmed a
   notch: chip-row fold payment. */
.wb-scope .wb-hv--36 .wb-hv36-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.6rem, .4rem + .6vw, 1rem); padding-top:clamp(.7rem, .5rem + .7vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--36 .wb-hv36-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--36 .wb-hv36-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-hv--36 .wb-hv36-ticket__count{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
/* The LIVE bug (round 2, critique 3): 3A's "Live count" claim, moved onto the
   odometer itself, broadcast style, after a label prefix measurably wrapped
   the cell (+20px of fold). Rides the counter's line inside the number's cap
   height: zero height, zero width risk. Dot pulses; reduced motion parks it. */
.wb-scope .wb-hv--36 .wb-hv36-ticket__livebug{ display:inline-block; vertical-align:.5em; margin-left:.4rem; padding:.16em .5em; border:1px solid rgba(255,90,97,.6); font-family:var(--wb-display) !important; font-size:.55rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.1; color:#ff5a61; }
.wb-scope .wb-hv--36 .wb-hv36-ticket__livebug::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.4em; border-radius:50%; background:#ff5a61; animation:wb-hv36-livepulse 2.2s ease-in-out infinite; }
@keyframes wb-hv36-livepulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.3; } }
.wb-scope .wb-hv--36 .wb-hv36-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--36 .wb-hv36-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--36 .wb-hv36-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* The open-ticket line (graft 3) stays on ONE line: under the 30ch cap it
   wraps and the wrap costs ~20px of fold height, measured at 1280x800. */
.wb-scope .wb-hv--36 .wb-hv36-ticket__label--open{ max-width:none; }
/* Condensed chip tier (round 2, the intermediate-width ledger). Between 641
   and 1180 the full row wraps to two lines (+23px at 1024, measured), so the
   prefix label and ALL OF IT's tail sit out and the chips tighten a notch;
   all seven destinations stay. And the clamp trims that pay for the chip
   line at 1280 bottom out near their floors here, leaving the chips ~8px
   dearer than 3A's note line at 1024, so tier-only floor shaves settle the
   rest of the bill. Placed AFTER the base donerow/lead/ticket rules on
   purpose: same specificity, so source order is the tiebreak. Fold ledger
   verified at 1024/1100/1180 vs 3A. */
@media (min-width:641px) and (max-width:1180px){
	.wb-scope .wb-hv--36 .wb-hv36-chips__label{ display:none; }
	.wb-scope .wb-hv--36 .wb-hv36-chip{ padding:.3rem .5rem; font-size:.72rem; }
	.wb-scope .wb-hv--36 .wb-hv36-chip__trim{ display:none; }
	.wb-scope .wb-hv--36 .wb-hv36-chips{ margin-top:.4rem; }
	.wb-scope .wb-hv--36 .wb-hv36-donerow{ margin-top:.3rem; }
	.wb-scope .wb-hv--36 .wb-hv36-lead{ margin-top:.35rem; }
	.wb-scope .wb-hv--36 .wb-hv36-ticket{ margin-top:.45rem; padding-top:.55rem; }
}
/* GRAFT 4, RETENTION RECEIPTS (round 2: BUILT and lab-verified, no longer a
   commented sketch). This CSS ships live and idle: it matches nothing until
   the one-line PHP flag in the fragment ($wb_hv36_receipts) renders the
   markup, so flipping the receipts on after the owner confirms the dated
   accounts (build/38: Hoober 1998 / Donegal 1999 / Karns 2000) is a
   one-character change, not a code edit. CSS-only slow crossfade; the
   canonical line is position:static so IT sizes the cell (the dated
   receipts are all shorter, so the crossfade can never change the strip's
   height); reduced motion pins the canonical line, static. */
.wb-scope .wb-hv--36 .wb-hv36-receipts{ position:relative; display:block; }
.wb-scope .wb-hv--36 .wb-hv36-receipt{ display:block; max-width:30ch; opacity:0; animation:wb-hv36-receipt 32s linear infinite; }
.wb-scope .wb-hv--36 .wb-hv36-receipt + .wb-hv36-receipt{ position:absolute; left:0; top:0; }
.wb-scope .wb-hv--36 .wb-hv36-receipt--2{ animation-delay:8s; }
.wb-scope .wb-hv--36 .wb-hv36-receipt--3{ animation-delay:16s; }
.wb-scope .wb-hv--36 .wb-hv36-receipt--4{ animation-delay:24s; }
@keyframes wb-hv36-receipt{ 0%{ opacity:0; } 2.5%{ opacity:1; } 25%{ opacity:1; } 27.5%{ opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--36 .wb-hv36-receipt{ animation:none !important; }
	.wb-scope .wb-hv--36 .wb-hv36-receipt--1{ opacity:1; }
}
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; counter-shear and ink pan dropped (retention lives
   in the ticket strip at every width). Input floor a hair under skin 6's so
   the longest typer word (LEADS FOR MY SALES TEAM) clears the pill. Chips:
   the phone leads, the trade-show chip and the prefix label sit out (the
   two-line budget; both remain reachable through nav and search), and every
   chip clears the 44px touch minimum. */
@media (max-width:640px){
	.wb-scope .wb-hv--36 .wb-hv36-go-txt{ display:none; }
	.wb-scope .wb-hv--36 .wb-hv36-we,
	.wb-scope .wb-hv--36 .wb-hv36-donerow{ transform:none !important; }
	.wb-scope .wb-hv--36 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
	.wb-scope .wb-hv--36 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; }
	.wb-scope .wb-hv--36 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
	.wb-scope .wb-hv--36 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
	.wb-scope .wb-hv--36 .wb-hv36-chips{ gap:.35rem .35rem; }
	.wb-scope .wb-hv--36 .wb-hv36-chips__label{ display:none; }
	.wb-scope .wb-hv--36 .wb-hv36-chip{ min-height:44px; padding:.3rem .55rem; font-size:.74rem; }
	.wb-scope .wb-hv--36 .wb-hv36-chip--booth{ display:none; }
	.wb-scope .wb-hv--36 .wb-hv36-chip--tel{ order:-1; }
	.wb-scope .wb-hv--36 .wb-hv36-chip__trim{ display:none; }   /* ALL OF IT keeps the punch, sheds the tail: the two-line budget, measured at 390 */
	.wb-scope .wb-hv--36 .wb-hv36-seal img{ width:84px; }
	.wb-scope .wb-hv--36 .wb-hv36-ticket{ gap:0; }
	.wb-scope .wb-hv--36 .wb-hv36-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
	.wb-scope .wb-hv--36 .wb-hv36-ticket__cell + .wb-hv36-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
	.wb-scope .wb-hv--36 .wb-hv36-ticket__num{ font-size:1.15rem; }
	.wb-scope .wb-hv--36 .wb-hv36-ticket__label{ margin-top:0; max-width:none; }
	.wb-scope .wb-hv--36 .wb-hv36-receipt{ max-width:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt,
   no ink pan, and the film never plays (initHeroV36 never injects sources);
   display:none here is the CSS half of that contract. */
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--36 .wb-hv36-we.is-in,
	.wb-scope .wb-hv--36 .wb-hv36-done,
	.wb-scope .wb-hv--36 .wb-hv36-l,
	.wb-scope .wb-hv--36 .wb-hv36-donerow.is-in .wb-hv36-done,
	.wb-scope .wb-hv--36 .wb-hv36-donerow.is-in .wb-hv36-seal,
	.wb-scope .wb-hv--36 .wb-hv36-ticket__livebug::before{ animation:none !important; }
	.wb-scope .wb-hv--36 .wb-hv36-film{ display:none !important; }
}
/* Cascade fix carried over from the skin-6 review (blocker there): the mobile
   plan drops the ink pan, but the .is-in rule above is (0,5,0) and outguns
   the @supports mobile animation:none at (0,3,0). Same selector, later in
   the cascade, inside max-640: keep the jolt, kill the 26s pan on phones. */
@media (max-width:640px){
	.wb-scope .wb-hv--36 .wb-hv36-donerow.is-in .wb-hv36-done{ animation:wb-hv36-jolt .3s cubic-bezier(.3,.9,.4,1); }
	.wb-scope .wb-hv--36 .wb-hv36-donerow.is-in .wb-hv36-l{ animation:wb-hv36-kenburns 22s ease-in-out infinite alternate; }   /* owner: phones get the slow Ken Burns */
}

/* ---- Slot 36 "The Champion" (build/38 hero-3 family, gap-analysis build).
   Base: variant 31 "3A The Tight Poster" (274) copied wholesale and renamed;
   no selector here touches skin 31. Deltas against that baseline, per the
   brief (/tmp/wb-champion/brief.md):
   (1) Film in the letters via CSS ALPHA MASK, not blend: .wb-hv37-film sits
       absolute over the D..E span union (initHeroV37 sizes it) and
       done-mask-1600.png (same Montserrat 900 glyphs, same -.03em tracking,
       dot excluded) clips it to the letterforms. No knockout slab, no seam;
       the band keeps 3A's milled metal, the exact thing 3B traded away.
       @supports gates on mask support; below 961px the film is display:none
       and initHeroV37 never injects a byte. Round 2: the ink photos are
       NEVER retired. They stay painted under the running film, so any exit
       (resize across 961px, an unarm, a stall) lands on 3A's letters
       mid-frame with zero JS required; while the film runs, .is-film-live
       only pauses their 26s pan (nothing animates for nothing) and raises
       the text-stroke to a 2px rgba(.22) rim, the legibility floor that
       keeps the glyph edges standing whatever frame is playing. The sources
       are the curated graded loop (weber-hero36-loop.*), not the raw film.
   (2) The chip lane replaces .wb-hero-ask__note: one row of plain links plus
       the red phone chip. Its line is paid for by the dropped note plus small
       trims on the donerow/lead/ticket top clamps (fold-verified 1280x800).
   (3) Zero-height copy grafts (open ticket + live count, receipts, film
       provenance): receipts CSS now ships LIVE and idle (its markup only
       renders behind the one-line PHP flag in the fragment); the provenance
       slug rides the meta line's right side (zero height at every width,
       hidden under 961px, fades with .is-film-live).
   Everything else is byte-identical 3A: band override (!important beats the
   section's inline background), tight top (never drop --wb-nav-h), giant <p>
   rows need font-family !important because fonts-modern.css pins p to Inter,
   reflow-proof counter, 390 mobile plan, reduced-motion stand-down. */
.wb-scope .wb-hero-v37 .wb-band__video-wrap,
.wb-scope .wb-hero-v37 .wb-band__scrim{ display:none; }
.wb-scope .wb-hero-v37.wb-band--video{
	background:linear-gradient(rgba(14,15,17,.93), rgba(14,15,17,.93)),
	           #0e0f11 url("../images/overhaul/tex-metallic-lines.webp") center/420px repeat !important;
}
/* Tight top (owner 2026-07-04): trim the first-band --wb-pad down to a small
   clamp but NEVER drop --wb-nav-h (the poster must still clear the fixed nav).
   Four class-level simples, later in the cascade, beats the base
   .wb-scope > .wb-band:first-child:not(.wb-band--flush) clearance rule. */
.wb-scope .wb-hero-v37.wb-band--video.wb-band--dark{
	padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
	padding-bottom:clamp(1.5rem, 3.5vh, 2.4rem);
}
.wb-scope .wb-hv--37{ position:relative; padding:clamp(.15rem, .4vw, .5rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--37 .wb-hv37-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule, pulled in close to
   WE GET (tight-top change A). */
.wb-scope .wb-hv--37 .wb-hv37-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(.4rem, .3rem + .35vw, .7rem); padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--37 .wb-hv37-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Film provenance (round 2, critique 3): a quiet slug on the meta line's
   right side, like a job note on a proof sheet. Rendered whenever the film
   CAN run (961px+), so it reserves its space and fading it in causes zero
   layout shift; opacity follows .is-film-live. It only claims what is true
   by construction: the loop is Weber's own reel. aria-hidden because it
   narrates a purely visual moment. */
.wb-scope .wb-hv--37 .wb-hv37-filmcap{ display:none; font-family:var(--wb-display) !important; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); opacity:0; transition:opacity .8s ease .35s; }
@media (min-width:1200px){
	/* 1200, not the film's 961: at 1024 the slug shares the meta line with the
	   kicker and wraps it (+25px, measured); between 961 and 1199 the film
	   plays uncaptioned rather than spend fold on a nicety. */
	.wb-scope .wb-hv--37 .wb-hv37-filmcap{ display:block; }
	.wb-scope .wb-hv--37.is-film-live .wb-hv37-filmcap{ opacity:1; }
}
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel + sheen),
   flush left. Stamps in when revealed; the switcher force-adds .is-in, so it
   replays on flip and never gates legibility. */
.wb-scope .wb-hv--37 .wb-hv37-we{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(2.9rem, 8.8vw, 7.4rem); line-height:.92; letter-spacing:-.03em;
	transform-origin:left center;
}
@keyframes wb-hv37-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--37 .wb-hv37-we.is-in{ animation:wb-hv37-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost ask types in red 900 caps (JS swaps the PLACEHOLDER only). The
   label above it runs smaller and closer (tight-label change B). z-index
   lifts the form's stacking context above the DONE. row so the live AJAX
   dropdown is never painted under it. */
.wb-scope .wb-hv--37 .wb-hero-ask{ max-width:none; margin-top:clamp(.55rem, .35rem + .6vw, 1rem); position:relative; z-index:5; }
.wb-scope .wb-hv--37 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--37 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--37 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--37 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.7rem .2rem; }
.wb-scope .wb-hv--37 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--37 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.85rem, .6rem + .8vw, 1.25rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--37 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
/* THE TAP LANE (graft 2): one row of plain links under the pill, where 3A's
   note line sat. Hard corners and hairline rules to match the poster; the
   phone is the red seventh chip so the number stays above the fold. Quiet
   inline prefix label; chips are real anchors, no state machine. */
.wb-scope .wb-hv--37 .wb-hv37-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem; margin:.55rem 0 0; }
.wb-scope .wb-hv--37 .wb-hv37-chips__label{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-right:.15rem; }
.wb-scope .wb-hv--37 .wb-hv37-chip{
	display:inline-flex; align-items:center; padding:.3rem .68rem; border:1px solid rgba(255,255,255,.34);
	font-family:var(--wb-display); font-weight:700; font-size:.78rem; letter-spacing:.02em; line-height:1.2;
	color:#fff; text-decoration:none; background:rgba(255,255,255,.05);
	transition:background .15s ease, border-color .15s ease;
}
.wb-scope .wb-hv--37 .wb-hv37-chip:hover,
.wb-scope .wb-hv--37 .wb-hv37-chip:focus-visible{ border-color:#fff; background:rgba(255,255,255,.14); color:#fff; }
.wb-scope .wb-hv--37 .wb-hv37-chip--tel{ border-color:var(--wb-red); background:var(--wb-red); font-weight:800; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--37 .wb-hv37-chip--tel:hover,
.wb-scope .wb-hv--37 .wb-hv37-chip--tel:focus-visible{ border-color:#ff5a61; background:#c9252d; }
/* Row two: DONE. filled with the per-letter ink photos, the period a solid
   red block, the WGSD seal rubber-stamped on its shoulder. Base = solid red
   (the no-clip fallback); @supports upgrades to the photo ink + slow pan.
   Top margin trimmed a notch vs 3A: part of the chip row's fold payment. */
.wb-scope .wb-hv--37 .wb-hv37-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.4rem, .25rem + .5vw, .85rem) 0 0; }
.wb-scope .wb-hv--37 .wb-hv37-done{
	position:relative;
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(3.2rem, 10.6vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
	color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
	/* Owner 2026-07-03, kept from 3A: a DIFFERENT real photo inks each letter
	   (D press floor, O the CMYK ink system, N the Karns truck wrap, E a booth).
	   Staggered pan delays so the four never move in lockstep. This is also
	   the film's rest state and its only fallback: same letters, same box. */
	.wb-scope .wb-hv--37 .wb-hv37-l{
		background:#15161a center 42%/cover no-repeat;
		-webkit-background-clip:text; background-clip:text;
		-webkit-text-fill-color:transparent; color:transparent;
		-webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
		animation:wb-hv37-inkpan 26s ease-in-out infinite alternate;
	}
	.wb-scope .wb-hv--37 .wb-hv37-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
	.wb-scope .wb-hv--37 .wb-hv37-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
	.wb-scope .wb-hv--37 .wb-hv37-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
	.wb-scope .wb-hv--37 .wb-hv37-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
	.wb-scope .wb-hv--37 .wb-hv37-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
	@media (max-width:640px){
		/* Owner 2026-07-04: phones get a slow Ken Burns on the letter fills so the
		   stills read animated (reduced-motion still stands everything down). */
		.wb-scope .wb-hv--37 .wb-hv37-l{ background-size:auto 120%; animation:wb-hv37-kenburns 22s ease-in-out infinite alternate; }
	}
}
@keyframes wb-hv37-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv37-kenburns{ from{ background-size:auto 118%; background-position:40% 28%; } to{ background-size:auto 146%; background-position:60% 64%; } }
/* GRAFT 1, THE FILM IN THE LETTERS: absolute over the D..E union (initHeroV37
   sizes it from the rendered boxes, so proportions hold at every clamp size);
   the alpha mask clips it to the glyphs. Ships display:none; only mask
   support turns it on, and only .is-film-live (video actually playing) fades
   it up, so a stalled network or a refused autoplay never blanks a letter.
   The dot sits outside the film box and never needs masking. */
.wb-scope .wb-hv--37 .wb-hv37-film{
	display:none; position:absolute; left:0; top:0; z-index:2;
	object-fit:cover; pointer-events:none; opacity:0; transition:opacity .6s ease;
	-webkit-mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-size:100% 100%; mask-size:100% 100%;
}
@supports ((mask-size:100% 100%) or (-webkit-mask-size:100% 100%)){
	.wb-scope .wb-hv--37 .wb-hv37-film{ display:block; }
}
@media (max-width:960px){
	/* Belt and braces with the JS 961px gate: no film box below the desktop
	   line even if a stretched viewport races the matchMedia read. */
	.wb-scope .wb-hv--37 .wb-hv37-film{ display:none !important; }
}
.wb-scope .wb-hv--37.is-film-live .wb-hv37-film{ opacity:1; }
/* Live state (round 2, critiques 1 + 2). The ink photos are NOT retired:
   they keep painting under the opaque masked film, invisible while it runs
   and instantly the letters again on ANY exit, including a live resize
   across 961px (where the media rule above yanks the film box), so "the
   fallback is the baseline by construction" holds mid-frame with no JS in
   the loop. While live we only (a) pause their 26s pan, nothing composites
   for motion nobody can see, and (b) raise the text-stroke to a 2px
   rgba(.22) rim. The mask is cut from the glyph FILL, so the outer half of
   the stroke rides outside the film: a constant 1px edge, the legibility
   floor that keeps DONE. legible whatever frame is playing. Scoped 961px+,
   belt and braces with the JS unarm listener. */
@media (min-width:961px){
	.wb-scope .wb-hv--37.is-film-live .wb-hv37-l{ animation-play-state:paused; -webkit-text-stroke:0; background-image:none; background-color:#0e0f11; }
}
@keyframes wb-hv37-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--37 .wb-hv37-donerow.is-in .wb-hv37-done{ animation:wb-hv37-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--37 .wb-hv37-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--37 .wb-hv37-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv37-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--37 .wb-hv37-donerow.is-in .wb-hv37-seal{ animation:wb-hv37-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* The Spirk lead (change D): longer than the old one-liner, so it runs a
   touch smaller on a 62ch measure to hold the fold; the bold opener reads
   full white. Top clamp trimmed a notch: chip-row fold payment.
   Margin-bottom zeroed: the shared .wb-lead bottom margin collapses OVER the
   ticket's trimmed top margin and silently refunds the trim (measured +7px);
   with it gone the ticket's own clamp rules the gap. */
.wb-scope .wb-hv--37 .wb-hv37-lead{ max-width:62ch; margin-top:clamp(.5rem, .3rem + .5vw, .85rem); margin-bottom:0; font-size:calc(var(--wb-lead) * .92); line-height:1.5; }
.wb-scope .wb-hv--37 .wb-hv37-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. The jobs counter
   (change E) sits on its own line via a manual <br> in the markup; the span
   gets tabular-nums plus a reserved 7ch min-width so the odometer counting
   up never changes the cell's width or reflows the row. Top clamp trimmed a
   notch: chip-row fold payment. */
.wb-scope .wb-hv--37 .wb-hv37-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.6rem, .4rem + .6vw, 1rem); padding-top:clamp(.7rem, .5rem + .7vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--37 .wb-hv37-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--37 .wb-hv37-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-hv--37 .wb-hv37-ticket__count{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
/* The LIVE bug (round 2, critique 3): 3A's "Live count" claim, moved onto the
   odometer itself, broadcast style, after a label prefix measurably wrapped
   the cell (+20px of fold). Rides the counter's line inside the number's cap
   height: zero height, zero width risk. Dot pulses; reduced motion parks it. */
.wb-scope .wb-hv--37 .wb-hv37-ticket__livebug{ display:inline-block; vertical-align:.5em; margin-left:.4rem; padding:.16em .5em; border:1px solid rgba(255,90,97,.6); font-family:var(--wb-display) !important; font-size:.55rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.1; color:#ff5a61; }
.wb-scope .wb-hv--37 .wb-hv37-ticket__livebug::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.4em; border-radius:50%; background:#ff5a61; animation:wb-hv37-livepulse 2.2s ease-in-out infinite; }
@keyframes wb-hv37-livepulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.3; } }
.wb-scope .wb-hv--37 .wb-hv37-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--37 .wb-hv37-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--37 .wb-hv37-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* The open-ticket line (graft 3) stays on ONE line: under the 30ch cap it
   wraps and the wrap costs ~20px of fold height, measured at 1280x800. */
.wb-scope .wb-hv--37 .wb-hv37-ticket__label--open{ max-width:none; }
/* Condensed chip tier (round 2, the intermediate-width ledger). Between 641
   and 1180 the full row wraps to two lines (+23px at 1024, measured), so the
   prefix label and ALL OF IT's tail sit out and the chips tighten a notch;
   all seven destinations stay. And the clamp trims that pay for the chip
   line at 1280 bottom out near their floors here, leaving the chips ~8px
   dearer than 3A's note line at 1024, so tier-only floor shaves settle the
   rest of the bill. Placed AFTER the base donerow/lead/ticket rules on
   purpose: same specificity, so source order is the tiebreak. Fold ledger
   verified at 1024/1100/1180 vs 3A. */
@media (min-width:641px) and (max-width:1180px){
	.wb-scope .wb-hv--37 .wb-hv37-chips__label{ display:none; }
	.wb-scope .wb-hv--37 .wb-hv37-chip{ padding:.3rem .5rem; font-size:.72rem; }
	.wb-scope .wb-hv--37 .wb-hv37-chip__trim{ display:none; }
	.wb-scope .wb-hv--37 .wb-hv37-chips{ margin-top:.4rem; }
	.wb-scope .wb-hv--37 .wb-hv37-donerow{ margin-top:.3rem; }
	.wb-scope .wb-hv--37 .wb-hv37-lead{ margin-top:.35rem; }
	.wb-scope .wb-hv--37 .wb-hv37-ticket{ margin-top:.45rem; padding-top:.55rem; }
}
/* GRAFT 4, RETENTION RECEIPTS (round 2: BUILT and lab-verified, no longer a
   commented sketch). This CSS ships live and idle: it matches nothing until
   the one-line PHP flag in the fragment ($wb_hv37_receipts) renders the
   markup, so flipping the receipts on after the owner confirms the dated
   accounts (build/38: Hoober 1998 / Donegal 1999 / Karns 2000) is a
   one-character change, not a code edit. CSS-only slow crossfade; the
   canonical line is position:static so IT sizes the cell (the dated
   receipts are all shorter, so the crossfade can never change the strip's
   height); reduced motion pins the canonical line, static. */
.wb-scope .wb-hv--37 .wb-hv37-receipts{ position:relative; display:block; }
.wb-scope .wb-hv--37 .wb-hv37-receipt{ display:block; max-width:30ch; opacity:0; animation:wb-hv37-receipt 32s linear infinite; }
.wb-scope .wb-hv--37 .wb-hv37-receipt + .wb-hv37-receipt{ position:absolute; left:0; top:0; }
.wb-scope .wb-hv--37 .wb-hv37-receipt--2{ animation-delay:8s; }
.wb-scope .wb-hv--37 .wb-hv37-receipt--3{ animation-delay:16s; }
.wb-scope .wb-hv--37 .wb-hv37-receipt--4{ animation-delay:24s; }
@keyframes wb-hv37-receipt{ 0%{ opacity:0; } 2.5%{ opacity:1; } 25%{ opacity:1; } 27.5%{ opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--37 .wb-hv37-receipt{ animation:none !important; }
	.wb-scope .wb-hv--37 .wb-hv37-receipt--1{ opacity:1; }
}
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; counter-shear and ink pan dropped (retention lives
   in the ticket strip at every width). Input floor a hair under skin 6's so
   the longest typer word (LEADS FOR MY SALES TEAM) clears the pill. Chips:
   the phone leads, the trade-show chip and the prefix label sit out (the
   two-line budget; both remain reachable through nav and search), and every
   chip clears the 44px touch minimum. */
@media (max-width:640px){
	.wb-scope .wb-hv--37 .wb-hv37-go-txt{ display:none; }
	.wb-scope .wb-hv--37 .wb-hv37-we,
	.wb-scope .wb-hv--37 .wb-hv37-donerow{ transform:none !important; }
	.wb-scope .wb-hv--37 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
	.wb-scope .wb-hv--37 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; }
	.wb-scope .wb-hv--37 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
	.wb-scope .wb-hv--37 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
	.wb-scope .wb-hv--37 .wb-hv37-chips{ gap:.35rem .35rem; }
	.wb-scope .wb-hv--37 .wb-hv37-chips__label{ display:none; }
	.wb-scope .wb-hv--37 .wb-hv37-chip{ min-height:44px; padding:.3rem .55rem; font-size:.74rem; }
	.wb-scope .wb-hv--37 .wb-hv37-chip--booth{ display:none; }
	.wb-scope .wb-hv--37 .wb-hv37-chip--tel{ order:-1; }
	.wb-scope .wb-hv--37 .wb-hv37-chip__trim{ display:none; }   /* ALL OF IT keeps the punch, sheds the tail: the two-line budget, measured at 390 */
	.wb-scope .wb-hv--37 .wb-hv37-seal img{ width:84px; }
	.wb-scope .wb-hv--37 .wb-hv37-ticket{ gap:0; }
	.wb-scope .wb-hv--37 .wb-hv37-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
	.wb-scope .wb-hv--37 .wb-hv37-ticket__cell + .wb-hv37-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
	.wb-scope .wb-hv--37 .wb-hv37-ticket__num{ font-size:1.15rem; }
	.wb-scope .wb-hv--37 .wb-hv37-ticket__label{ margin-top:0; max-width:none; }
	.wb-scope .wb-hv--37 .wb-hv37-receipt{ max-width:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt,
   no ink pan, and the film never plays (initHeroV37 never injects sources);
   display:none here is the CSS half of that contract. */
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--37 .wb-hv37-we.is-in,
	.wb-scope .wb-hv--37 .wb-hv37-done,
	.wb-scope .wb-hv--37 .wb-hv37-l,
	.wb-scope .wb-hv--37 .wb-hv37-donerow.is-in .wb-hv37-done,
	.wb-scope .wb-hv--37 .wb-hv37-donerow.is-in .wb-hv37-seal,
	.wb-scope .wb-hv--37 .wb-hv37-ticket__livebug::before{ animation:none !important; }
	.wb-scope .wb-hv--37 .wb-hv37-film{ display:none !important; }
}
/* Cascade fix carried over from the skin-6 review (blocker there): the mobile
   plan drops the ink pan, but the .is-in rule above is (0,5,0) and outguns
   the @supports mobile animation:none at (0,3,0). Same selector, later in
   the cascade, inside max-640: keep the jolt, kill the 26s pan on phones. */
@media (max-width:640px){
	.wb-scope .wb-hv--37 .wb-hv37-donerow.is-in .wb-hv37-done{ animation:wb-hv37-jolt .3s cubic-bezier(.3,.9,.4,1); }
	.wb-scope .wb-hv--37 .wb-hv37-donerow.is-in .wb-hv37-l{ animation:wb-hv37-kenburns 22s ease-in-out infinite alternate; }   /* owner: phones get the slow Ken Burns */
}


/* 36B (owner 2026-07-04): the champion in the site's ROUNDED language. */
.wb-scope .wb-hv--37 .wb-hero-ask__row{ border-radius:999px; }
.wb-scope .wb-hv--37 .wb-hero-ask__go{ border-radius:999px; }
.wb-scope .wb-hv--37 .wb-hero-ask__results{ border-radius:16px; }
.wb-scope .wb-hv--37 .wb-hv37-chip{ border-radius:999px !important; }
.wb-scope .wb-hv--37 .wb-hv37-ticket{ border-radius:14px; }

/* ---- Slot 36 "The Champion" (build/38 hero-3 family, gap-analysis build).
   Base: variant 31 "3A The Tight Poster" (274) copied wholesale and renamed;
   no selector here touches skin 31. Deltas against that baseline, per the
   brief (/tmp/wb-champion/brief.md):
   (1) Film in the letters via CSS ALPHA MASK, not blend: .wb-hv38-film sits
       absolute over the D..E span union (initHeroV38 sizes it) and
       done-mask-1600.png (same Montserrat 900 glyphs, same -.03em tracking,
       dot excluded) clips it to the letterforms. No knockout slab, no seam;
       the band keeps 3A's milled metal, the exact thing 3B traded away.
       @supports gates on mask support; below 961px the film is display:none
       and initHeroV38 never injects a byte. Round 2: the ink photos are
       NEVER retired. They stay painted under the running film, so any exit
       (resize across 961px, an unarm, a stall) lands on 3A's letters
       mid-frame with zero JS required; while the film runs, .is-film-live
       only pauses their 26s pan (nothing animates for nothing) and raises
       the text-stroke to a 2px rgba(.22) rim, the legibility floor that
       keeps the glyph edges standing whatever frame is playing. The sources
       are the curated graded loop (weber-hero36-loop.*), not the raw film.
   (2) The chip lane replaces .wb-hero-ask__note: one row of plain links plus
       the red phone chip. Its line is paid for by the dropped note plus small
       trims on the donerow/lead/ticket top clamps (fold-verified 1280x800).
   (3) Zero-height copy grafts (open ticket + live count, receipts, film
       provenance): receipts CSS now ships LIVE and idle (its markup only
       renders behind the one-line PHP flag in the fragment); the provenance
       slug rides the meta line's right side (zero height at every width,
       hidden under 961px, fades with .is-film-live).
   Everything else is byte-identical 3A: band override (!important beats the
   section's inline background), tight top (never drop --wb-nav-h), giant <p>
   rows need font-family !important because fonts-modern.css pins p to Inter,
   reflow-proof counter, 390 mobile plan, reduced-motion stand-down. */
/* 36C: the brand film STAYS as the band background, faded over black. */
.wb-scope .wb-hero-v38 .wb-band__scrim{ background:linear-gradient(rgba(4,5,7,.88), rgba(4,5,7,.82)); }
/* Tight top (owner 2026-07-04): trim the first-band --wb-pad down to a small
   clamp but NEVER drop --wb-nav-h (the poster must still clear the fixed nav).
   Four class-level simples, later in the cascade, beats the base
   .wb-scope > .wb-band:first-child:not(.wb-band--flush) clearance rule. */
.wb-scope .wb-hero-v38.wb-band--video.wb-band--dark{
	padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
	padding-bottom:clamp(1.5rem, 3.5vh, 2.4rem);
}
.wb-scope .wb-hv--38{ position:relative; padding:clamp(.15rem, .4vw, .5rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--38 .wb-hv38-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule, pulled in close to
   WE GET (tight-top change A). */
.wb-scope .wb-hv--38 .wb-hv38-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:0 0 clamp(.4rem, .3rem + .35vw, .7rem); padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--38 .wb-hv38-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Film provenance (round 2, critique 3): a quiet slug on the meta line's
   right side, like a job note on a proof sheet. Rendered whenever the film
   CAN run (961px+), so it reserves its space and fading it in causes zero
   layout shift; opacity follows .is-film-live. It only claims what is true
   by construction: the loop is Weber's own reel. aria-hidden because it
   narrates a purely visual moment. */
.wb-scope .wb-hv--38 .wb-hv38-filmcap{ display:none; font-family:var(--wb-display) !important; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); opacity:0; transition:opacity .8s ease .35s; }
@media (min-width:1200px){
	/* 1200, not the film's 961: at 1024 the slug shares the meta line with the
	   kicker and wraps it (+25px, measured); between 961 and 1199 the film
	   plays uncaptioned rather than spend fold on a nicety. */
	.wb-scope .wb-hv--38 .wb-hv38-filmcap{ display:block; }
	.wb-scope .wb-hv--38.is-film-live .wb-hv38-filmcap{ opacity:1; }
}
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel + sheen),
   flush left. Stamps in when revealed; the switcher force-adds .is-in, so it
   replays on flip and never gates legibility. */
.wb-scope .wb-hv--38 .wb-hv38-we{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(2.9rem, 8.8vw, 7.4rem); line-height:.92; letter-spacing:-.03em;
	transform-origin:left center;
}
@keyframes wb-hv38-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--38 .wb-hv38-we.is-in{ animation:wb-hv38-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost ask types in red 900 caps (JS swaps the PLACEHOLDER only). The
   label above it runs smaller and closer (tight-label change B). z-index
   lifts the form's stacking context above the DONE. row so the live AJAX
   dropdown is never painted under it. */
.wb-scope .wb-hv--38 .wb-hero-ask{ max-width:none; margin-top:clamp(.55rem, .35rem + .6vw, 1rem); position:relative; z-index:5; }
.wb-scope .wb-hv--38 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--38 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--38 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--38 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.7rem .2rem; }
.wb-scope .wb-hv--38 .wb-hero-ask__input::placeholder{ color:var(--wb-red); opacity:1; font-weight:900; }
.wb-scope .wb-hv--38 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.85rem, .6rem + .8vw, 1.25rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--38 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
/* THE TAP LANE (graft 2): one row of plain links under the pill, where 3A's
   note line sat. Hard corners and hairline rules to match the poster; the
   phone is the red seventh chip so the number stays above the fold. Quiet
   inline prefix label; chips are real anchors, no state machine. */
.wb-scope .wb-hv--38 .wb-hv38-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem; margin:.55rem 0 0; }
.wb-scope .wb-hv--38 .wb-hv38-chips__label{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-right:.15rem; }
.wb-scope .wb-hv--38 .wb-hv38-chip{
	display:inline-flex; align-items:center; padding:.3rem .68rem; border:1px solid rgba(255,255,255,.34);
	font-family:var(--wb-display); font-weight:700; font-size:.78rem; letter-spacing:.02em; line-height:1.2;
	color:#fff; text-decoration:none; background:rgba(255,255,255,.05);
	transition:background .15s ease, border-color .15s ease;
}
.wb-scope .wb-hv--38 .wb-hv38-chip:hover,
.wb-scope .wb-hv--38 .wb-hv38-chip:focus-visible{ border-color:#fff; background:rgba(255,255,255,.14); color:#fff; }
.wb-scope .wb-hv--38 .wb-hv38-chip--tel{ border-color:var(--wb-red); background:var(--wb-red); font-weight:800; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--38 .wb-hv38-chip--tel:hover,
.wb-scope .wb-hv--38 .wb-hv38-chip--tel:focus-visible{ border-color:#ff5a61; background:#c9252d; }
/* Row two: DONE. filled with the per-letter ink photos, the period a solid
   red block, the WGSD seal rubber-stamped on its shoulder. Base = solid red
   (the no-clip fallback); @supports upgrades to the photo ink + slow pan.
   Top margin trimmed a notch vs 3A: part of the chip row's fold payment. */
.wb-scope .wb-hv--38 .wb-hv38-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.4rem, .25rem + .5vw, .85rem) 0 0; }
.wb-scope .wb-hv--38 .wb-hv38-done{
	position:relative;
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(3.2rem, 10.6vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
	color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
	/* Owner 2026-07-03, kept from 3A: a DIFFERENT real photo inks each letter
	   (D press floor, O the CMYK ink system, N the Karns truck wrap, E a booth).
	   Staggered pan delays so the four never move in lockstep. This is also
	   the film's rest state and its only fallback: same letters, same box. */
	.wb-scope .wb-hv--38 .wb-hv38-l{
		background:#15161a center 42%/cover no-repeat;
		-webkit-background-clip:text; background-clip:text;
		-webkit-text-fill-color:transparent; color:transparent;
		-webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
		animation:wb-hv38-inkpan 26s ease-in-out infinite alternate;
	}
	.wb-scope .wb-hv--38 .wb-hv38-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
	.wb-scope .wb-hv--38 .wb-hv38-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
	.wb-scope .wb-hv--38 .wb-hv38-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
	.wb-scope .wb-hv--38 .wb-hv38-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
	.wb-scope .wb-hv--38 .wb-hv38-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
	@media (max-width:640px){
		/* Owner 2026-07-04: phones get a slow Ken Burns on the letter fills so the
		   stills read animated (reduced-motion still stands everything down). */
		.wb-scope .wb-hv--38 .wb-hv38-l{ background-size:auto 120%; animation:wb-hv38-kenburns 22s ease-in-out infinite alternate; }
	}
}
@keyframes wb-hv38-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv38-kenburns{ from{ background-size:auto 118%; background-position:40% 28%; } to{ background-size:auto 146%; background-position:60% 64%; } }
/* GRAFT 1, THE FILM IN THE LETTERS: absolute over the D..E union (initHeroV38
   sizes it from the rendered boxes, so proportions hold at every clamp size);
   the alpha mask clips it to the glyphs. Ships display:none; only mask
   support turns it on, and only .is-film-live (video actually playing) fades
   it up, so a stalled network or a refused autoplay never blanks a letter.
   The dot sits outside the film box and never needs masking. */
.wb-scope .wb-hv--38 .wb-hv38-film{
	display:none; position:absolute; left:0; top:0; z-index:2;
	object-fit:cover; pointer-events:none; opacity:0; transition:opacity .6s ease;
	-webkit-mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-size:100% 100%; mask-size:100% 100%;
}
@supports ((mask-size:100% 100%) or (-webkit-mask-size:100% 100%)){
	.wb-scope .wb-hv--38 .wb-hv38-film{ display:block; }
}
@media (max-width:960px){
	/* Belt and braces with the JS 961px gate: no film box below the desktop
	   line even if a stretched viewport races the matchMedia read. */
	.wb-scope .wb-hv--38 .wb-hv38-film{ display:none !important; }
}
.wb-scope .wb-hv--38.is-film-live .wb-hv38-film{ opacity:1; }
/* Live state (round 2, critiques 1 + 2). The ink photos are NOT retired:
   they keep painting under the opaque masked film, invisible while it runs
   and instantly the letters again on ANY exit, including a live resize
   across 961px (where the media rule above yanks the film box), so "the
   fallback is the baseline by construction" holds mid-frame with no JS in
   the loop. While live we only (a) pause their 26s pan, nothing composites
   for motion nobody can see, and (b) raise the text-stroke to a 2px
   rgba(.22) rim. The mask is cut from the glyph FILL, so the outer half of
   the stroke rides outside the film: a constant 1px edge, the legibility
   floor that keeps DONE. legible whatever frame is playing. Scoped 961px+,
   belt and braces with the JS unarm listener. */
@media (min-width:961px){
	.wb-scope .wb-hv--38.is-film-live .wb-hv38-l{ animation-play-state:paused; -webkit-text-stroke:0; }   /* rim removed per owner; the curated bright loop carries legibility */
}
@keyframes wb-hv38-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--38 .wb-hv38-donerow.is-in .wb-hv38-done{ animation:wb-hv38-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--38 .wb-hv38-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--38 .wb-hv38-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv38-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--38 .wb-hv38-donerow.is-in .wb-hv38-seal{ animation:wb-hv38-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* The Spirk lead (change D): longer than the old one-liner, so it runs a
   touch smaller on a 62ch measure to hold the fold; the bold opener reads
   full white. Top clamp trimmed a notch: chip-row fold payment.
   Margin-bottom zeroed: the shared .wb-lead bottom margin collapses OVER the
   ticket's trimmed top margin and silently refunds the trim (measured +7px);
   with it gone the ticket's own clamp rules the gap. */
.wb-scope .wb-hv--38 .wb-hv38-lead{ max-width:62ch; margin-top:clamp(.5rem, .3rem + .5vw, .85rem); margin-bottom:0; font-size:calc(var(--wb-lead) * .92); line-height:1.5; }
.wb-scope .wb-hv--38 .wb-hv38-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. The jobs counter
   (change E) sits on its own line via a manual <br> in the markup; the span
   gets tabular-nums plus a reserved 7ch min-width so the odometer counting
   up never changes the cell's width or reflows the row. Top clamp trimmed a
   notch: chip-row fold payment. */
.wb-scope .wb-hv--38 .wb-hv38-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.6rem, .4rem + .6vw, 1rem); padding-top:clamp(.7rem, .5rem + .7vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--38 .wb-hv38-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--38 .wb-hv38-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-hv--38 .wb-hv38-ticket__count{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
/* The LIVE bug (round 2, critique 3): 3A's "Live count" claim, moved onto the
   odometer itself, broadcast style, after a label prefix measurably wrapped
   the cell (+20px of fold). Rides the counter's line inside the number's cap
   height: zero height, zero width risk. Dot pulses; reduced motion parks it. */
.wb-scope .wb-hv--38 .wb-hv38-ticket__livebug{ display:inline-block; vertical-align:.5em; margin-left:.4rem; padding:.16em .5em; border:1px solid rgba(255,90,97,.6); font-family:var(--wb-display) !important; font-size:.55rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.1; color:#ff5a61; }
.wb-scope .wb-hv--38 .wb-hv38-ticket__livebug::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.4em; border-radius:50%; background:#ff5a61; animation:wb-hv38-livepulse 2.2s ease-in-out infinite; }
@keyframes wb-hv38-livepulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.3; } }
.wb-scope .wb-hv--38 .wb-hv38-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--38 .wb-hv38-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--38 .wb-hv38-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* The open-ticket line (graft 3) stays on ONE line: under the 30ch cap it
   wraps and the wrap costs ~20px of fold height, measured at 1280x800. */
.wb-scope .wb-hv--38 .wb-hv38-ticket__label--open{ max-width:none; }
/* Condensed chip tier (round 2, the intermediate-width ledger). Between 641
   and 1180 the full row wraps to two lines (+23px at 1024, measured), so the
   prefix label and ALL OF IT's tail sit out and the chips tighten a notch;
   all seven destinations stay. And the clamp trims that pay for the chip
   line at 1280 bottom out near their floors here, leaving the chips ~8px
   dearer than 3A's note line at 1024, so tier-only floor shaves settle the
   rest of the bill. Placed AFTER the base donerow/lead/ticket rules on
   purpose: same specificity, so source order is the tiebreak. Fold ledger
   verified at 1024/1100/1180 vs 3A. */
@media (min-width:641px) and (max-width:1180px){
	.wb-scope .wb-hv--38 .wb-hv38-chips__label{ display:none; }
	.wb-scope .wb-hv--38 .wb-hv38-chip{ padding:.3rem .5rem; font-size:.72rem; }
	.wb-scope .wb-hv--38 .wb-hv38-chip__trim{ display:none; }
	.wb-scope .wb-hv--38 .wb-hv38-chips{ margin-top:.4rem; }
	.wb-scope .wb-hv--38 .wb-hv38-donerow{ margin-top:.3rem; }
	.wb-scope .wb-hv--38 .wb-hv38-lead{ margin-top:.35rem; }
	.wb-scope .wb-hv--38 .wb-hv38-ticket{ margin-top:.45rem; padding-top:.55rem; }
}
/* GRAFT 4, RETENTION RECEIPTS (round 2: BUILT and lab-verified, no longer a
   commented sketch). This CSS ships live and idle: it matches nothing until
   the one-line PHP flag in the fragment ($wb_hv38_receipts) renders the
   markup, so flipping the receipts on after the owner confirms the dated
   accounts (build/38: Hoober 1998 / Donegal 1999 / Karns 2000) is a
   one-character change, not a code edit. CSS-only slow crossfade; the
   canonical line is position:static so IT sizes the cell (the dated
   receipts are all shorter, so the crossfade can never change the strip's
   height); reduced motion pins the canonical line, static. */
.wb-scope .wb-hv--38 .wb-hv38-receipts{ position:relative; display:block; }
.wb-scope .wb-hv--38 .wb-hv38-receipt{ display:block; max-width:30ch; opacity:0; animation:wb-hv38-receipt 32s linear infinite; }
.wb-scope .wb-hv--38 .wb-hv38-receipt + .wb-hv38-receipt{ position:absolute; left:0; top:0; }
.wb-scope .wb-hv--38 .wb-hv38-receipt--2{ animation-delay:8s; }
.wb-scope .wb-hv--38 .wb-hv38-receipt--3{ animation-delay:16s; }
.wb-scope .wb-hv--38 .wb-hv38-receipt--4{ animation-delay:24s; }
@keyframes wb-hv38-receipt{ 0%{ opacity:0; } 2.5%{ opacity:1; } 25%{ opacity:1; } 27.5%{ opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--38 .wb-hv38-receipt{ animation:none !important; }
	.wb-scope .wb-hv--38 .wb-hv38-receipt--1{ opacity:1; }
}
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; counter-shear and ink pan dropped (retention lives
   in the ticket strip at every width). Input floor a hair under skin 6's so
   the longest typer word (LEADS FOR MY SALES TEAM) clears the pill. Chips:
   the phone leads, the trade-show chip and the prefix label sit out (the
   two-line budget; both remain reachable through nav and search), and every
   chip clears the 44px touch minimum. */
@media (max-width:640px){
	.wb-scope .wb-hv--38 .wb-hv38-go-txt{ display:none; }
	.wb-scope .wb-hv--38 .wb-hv38-we,
	.wb-scope .wb-hv--38 .wb-hv38-donerow{ transform:none !important; }
	.wb-scope .wb-hv--38 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
	.wb-scope .wb-hv--38 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; }
	.wb-scope .wb-hv--38 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
	.wb-scope .wb-hv--38 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
	.wb-scope .wb-hv--38 .wb-hv38-chips{ gap:.35rem .35rem; }
	.wb-scope .wb-hv--38 .wb-hv38-chips__label{ display:none; }
	.wb-scope .wb-hv--38 .wb-hv38-chip{ min-height:44px; padding:.3rem .55rem; font-size:.74rem; }
	.wb-scope .wb-hv--38 .wb-hv38-chip--booth{ display:none; }
	.wb-scope .wb-hv--38 .wb-hv38-chip--tel{ order:-1; }
	.wb-scope .wb-hv--38 .wb-hv38-chip__trim{ display:none; }   /* ALL OF IT keeps the punch, sheds the tail: the two-line budget, measured at 390 */
	.wb-scope .wb-hv--38 .wb-hv38-seal img{ width:84px; }
	.wb-scope .wb-hv--38 .wb-hv38-ticket{ gap:0; }
	.wb-scope .wb-hv--38 .wb-hv38-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
	.wb-scope .wb-hv--38 .wb-hv38-ticket__cell + .wb-hv38-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
	.wb-scope .wb-hv--38 .wb-hv38-ticket__num{ font-size:1.15rem; }
	.wb-scope .wb-hv--38 .wb-hv38-ticket__label{ margin-top:0; max-width:none; }
	.wb-scope .wb-hv--38 .wb-hv38-receipt{ max-width:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt,
   no ink pan, and the film never plays (initHeroV38 never injects sources);
   display:none here is the CSS half of that contract. */
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--38 .wb-hv38-we.is-in,
	.wb-scope .wb-hv--38 .wb-hv38-done,
	.wb-scope .wb-hv--38 .wb-hv38-l,
	.wb-scope .wb-hv--38 .wb-hv38-donerow.is-in .wb-hv38-done,
	.wb-scope .wb-hv--38 .wb-hv38-donerow.is-in .wb-hv38-seal,
	.wb-scope .wb-hv--38 .wb-hv38-ticket__livebug::before{ animation:none !important; }
	.wb-scope .wb-hv--38 .wb-hv38-film{ display:none !important; }
}
/* Cascade fix carried over from the skin-6 review (blocker there): the mobile
   plan drops the ink pan, but the .is-in rule above is (0,5,0) and outguns
   the @supports mobile animation:none at (0,3,0). Same selector, later in
   the cascade, inside max-640: keep the jolt, kill the 26s pan on phones. */
@media (max-width:640px){
	.wb-scope .wb-hv--38 .wb-hv38-donerow.is-in .wb-hv38-done{ animation:wb-hv38-jolt .3s cubic-bezier(.3,.9,.4,1); }
	.wb-scope .wb-hv--38 .wb-hv38-donerow.is-in .wb-hv38-l{ animation:wb-hv38-kenburns 22s ease-in-out infinite alternate; }   /* owner: phones get the slow Ken Burns */
}


/* 36C: DONE rides the same chrome as WE GET; no photo fills, no letter film. */
.wb-scope .wb-hv--38 .wb-hv38-film, .wb-scope .wb-hv--38 .wb-hv38-filmcap{ display:none !important; }

/* ---- Slot 36 "The Champion" (build/38 hero-3 family, gap-analysis build).
   Base: variant 31 "3A The Tight Poster" (274) copied wholesale and renamed;
   no selector here touches skin 31. Deltas against that baseline, per the
   brief (/tmp/wb-champion/brief.md):
   (1) Film in the letters via CSS ALPHA MASK, not blend: .wb-hv39-film sits
       absolute over the D..E span union (initHeroV39 sizes it) and
       done-mask-1600.png (same Montserrat 900 glyphs, same -.03em tracking,
       dot excluded) clips it to the letterforms. No knockout slab, no seam;
       the band keeps 3A's milled metal, the exact thing 3B traded away.
       @supports gates on mask support; below 961px the film is display:none
       and initHeroV39 never injects a byte. Round 2: the ink photos are
       NEVER retired. They stay painted under the running film, so any exit
       (resize across 961px, an unarm, a stall) lands on 3A's letters
       mid-frame with zero JS required; while the film runs, .is-film-live
       only pauses their 26s pan (nothing animates for nothing) and raises
       the text-stroke to a 2px rgba(.22) rim, the legibility floor that
       keeps the glyph edges standing whatever frame is playing. The sources
       are the curated graded loop (weber-hero36-loop.*), not the raw film.
   (2) The chip lane replaces .wb-hero-ask__note: one row of plain links plus
       the red phone chip. Its line is paid for by the dropped note plus small
       trims on the donerow/lead/ticket top clamps (fold-verified 1280x800).
   (3) Zero-height copy grafts (open ticket + live count, receipts, film
       provenance): receipts CSS now ships LIVE and idle (its markup only
       renders behind the one-line PHP flag in the fragment); the provenance
       slug rides the meta line's right side (zero height at every width,
       hidden under 961px, fades with .is-film-live).
   Everything else is byte-identical 3A: band override (!important beats the
   section's inline background), tight top (never drop --wb-nav-h), giant <p>
   rows need font-family !important because fonts-modern.css pins p to Inter,
   reflow-proof counter, 390 mobile plan, reduced-motion stand-down. */
/* 36D: the brand film IS the band; the scrim runs light up top and darkens
   toward the lead text for legibility (owner 2026-07-06). */
.wb-scope .wb-hero-v39 .wb-band__scrim{ background:linear-gradient(rgba(6,8,11,.42), rgba(5,7,10,.68) 45%, rgba(3,5,8,.94)) !important; }
/* Tight top (owner 2026-07-04): trim the first-band --wb-pad down to a small
   clamp but NEVER drop --wb-nav-h (the poster must still clear the fixed nav).
   Four class-level simples, later in the cascade, beats the base
   .wb-scope > .wb-band:first-child:not(.wb-band--flush) clearance rule. */
.wb-scope .wb-hero-v39.wb-band--video.wb-band--dark{
	padding-top:calc(var(--wb-nav-h) + clamp(1.1rem, 2.6vh, 1.9rem));
	padding-bottom:clamp(1.6rem, 3.6vh, 2.6rem);
}
.wb-scope .wb-hv--39{ position:relative; padding:clamp(.15rem, .4vw, .5rem) 0; }
/* Accessible headline: the full sentence, visually hidden (standard clip
   pattern; overhaul.css has no visually-hidden utility). */
.wb-scope .wb-hv--39 .wb-hv39-a11y{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
/* Meta line: quiet silver kicker over a hairline rule, pulled in close to
   WE GET (tight-top change A). */
/* #151 (owner 2026-07-14): drop the meta kicker down from the nav (it sat ~2px
   under the overlay header) so it centers in the space above WE GET, and nudge it
   left to sit under the W (the display glyph optically overhangs ~13px). */
.wb-scope .wb-hv--39 .wb-hv39-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem; margin:clamp(1.1rem, 2.4vw, 1.9rem) 0 clamp(.5rem, .4rem + .4vw, .9rem) -.55rem; padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.2); }
.wb-scope .wb-hv--39 .wb-hv39-meta .wb-kicker{ margin:0; color:rgba(255,255,255,.78); }
/* Film provenance (round 2, critique 3): a quiet slug on the meta line's
   right side, like a job note on a proof sheet. Rendered whenever the film
   CAN run (961px+), so it reserves its space and fading it in causes zero
   layout shift; opacity follows .is-film-live. It only claims what is true
   by construction: the loop is Weber's own reel. aria-hidden because it
   narrates a purely visual moment. */
.wb-scope .wb-hv--39 .wb-hv39-filmcap{ display:none; font-family:var(--wb-display) !important; font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); opacity:0; transition:opacity .8s ease .35s; }
@media (min-width:1200px){
	/* 1200, not the film's 961: at 1024 the slug shares the meta line with the
	   kicker and wraps it (+25px, measured); between 961 and 1199 the film
	   plays uncaptioned rather than spend fold on a nicety. */
	.wb-scope .wb-hv--39 .wb-hv39-filmcap{ display:block; }
	.wb-scope .wb-hv--39.is-film-live .wb-hv39-filmcap{ opacity:1; }
}
/* Row one: WE GET, chrome (.wb-metal-text supplies the milled steel + sheen),
   flush left. Stamps in when revealed; the switcher force-adds .is-in, so it
   replays on flip and never gates legibility. */
.wb-scope .wb-hv--39 .wb-hv39-we{
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(2.9rem, 8.8vw, 7.4rem); line-height:.92; letter-spacing:-.03em;
	transform-origin:left center;
}
@keyframes wb-hv39-stamp{ from{ transform:scale(1.06); } to{ transform:none; } }
.wb-scope .wb-hv--39 .wb-hv39-we.is-in{ animation:wb-hv39-stamp .18s ease-out; }
/* THE PILL: the blank line in the sentence. Paper-white block, hard corners;
   the ghost ask types in red 900 caps (JS swaps the PLACEHOLDER only). The
   label above it runs smaller and closer (tight-label change B). z-index
   lifts the form's stacking context above the DONE. row so the live AJAX
   dropdown is never painted under it. */
.wb-scope .wb-hv--39 .wb-hero-ask{ max-width:none; margin-top:clamp(.55rem, .35rem + .6vw, 1rem); position:relative; z-index:5; }
.wb-scope .wb-hv--39 .wb-hero-ask__q{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:#ff5a61; margin:0 0 .3rem; text-shadow:none; }
.wb-scope .wb-hv--39 .wb-hero-ask__row{ border-radius:0; background:#fbfaf7; gap:.75rem; padding:.5rem .5rem .5rem clamp(.9rem, .6rem + 1vw, 1.6rem); box-shadow:0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--39 .wb-hero-ask__row:focus-within{ box-shadow:0 0 0 3px var(--wb-red), 0 24px 60px -18px rgba(0,0,0,.7); }
.wb-scope .wb-hv--39 .wb-hero-ask__input{ font-family:var(--wb-display) !important; font-weight:600; text-transform:none; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); padding:.7rem .2rem; }
.wb-scope .wb-hv--39 .wb-hero-ask__input::placeholder{ color:#6b7279; opacity:1; font-weight:600; }
.wb-scope .wb-hv--39 .wb-hero-ask__go{ border-radius:0; font-weight:900; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(.9rem, .8rem + .4vw, 1.05rem); padding:clamp(.85rem, .6rem + .8vw, 1.25rem) clamp(1.1rem, .8rem + 1vw, 1.8rem); }
.wb-scope .wb-hv--39 .wb-hero-ask__results{ border-radius:0; top:calc(100% + 2px); }
/* ── Hero ask affordance fix (2026-07-16, sales-meeting feedback): staff did not
   realize the ask was a field they could type in. Restore the search icon, add a
   blinking caret that rides the ghost-typed text, and keep the field readable as an
   input. The ghost text lives on an aria-hidden overlay (.wb-hv39-ghost) so the caret
   is a real trailing element and the input keeps a static SR placeholder. The
   placeholder is muted (contrast-safe #6b7279 on #fbfaf7 ~= 4.7:1) so it reads
   as a field, not a red headline (committee + owner pick, 2026-07-16). ── */
.wb-scope .wb-hv--39 .wb-hero-ask__icon{ color:#c0242b; font-size:1.2rem; margin-right:.1rem; flex:0 0 auto; }
.wb-scope .wb-hv--39 .wb-hero-ask__typewrap{ position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.wb-scope .wb-hv--39 .wb-hero-ask__typewrap .wb-hero-ask__input{ flex:1 1 auto; min-width:0; }
.wb-scope .wb-hv--39 .wb-hv39-ghost{ position:absolute; inset:0; display:none; align-items:center; padding-left:.2rem; pointer-events:none; overflow:hidden; white-space:nowrap;
	font-family:var(--wb-display); font-weight:600; text-transform:none; letter-spacing:-.01em; font-size:clamp(1.15rem, .9rem + 1.4vw, 2rem); color:#6b7279; line-height:1; }
.wb-scope .wb-hv--39 .wb-hero-ask__row.wb-ghost-on .wb-hv39-ghost{ display:flex; }
.wb-scope .wb-hv--39 .wb-hero-ask__row.wb-ghost-on .wb-hero-ask__input::placeholder{ color:transparent !important; }
.wb-scope .wb-hv--39 .wb-hv39-caret{ flex:0 0 auto; display:inline-block; width:.08em; height:1.15em; margin-left:.07em; background:#6b7279; }
.wb-scope .wb-hv--39 .wb-hero-ask__row:focus-within .wb-hv39-caret{ display:none; }
@media (prefers-reduced-motion: no-preference){
	.wb-scope .wb-hv--39 .wb-hero-ask__row:not(:focus-within) .wb-hv39-caret{ animation:wb-hv16-blink 1.1s steps(1) infinite; }
}
/* (Muted placeholder locked 2026-07-16 as the committee + owner pick; folded into
   the base rules above. The old bold-red variant lives in git history.) */
@media (max-width:640px){
	.wb-scope .wb-hv--39 .wb-hv39-ghost{ padding-left:.1rem; font-size:clamp(1rem, 4vw, 1.5rem); }
}
/* THE TAP LANE (graft 2): one row of plain links under the pill, where 3A's
   note line sat. Hard corners and hairline rules to match the poster; the
   phone is the red seventh chip so the number stays above the fold. Quiet
   inline prefix label; chips are real anchors, no state machine. */
.wb-scope .wb-hv--39 .wb-hv39-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem; margin:.55rem 0 0; }
.wb-scope .wb-hv--39 .wb-hv39-chips__label{ font-family:var(--wb-display) !important; font-size:.64rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-right:.15rem; }
.wb-scope .wb-hv--39 .wb-hv39-chip{
	display:inline-flex; align-items:center; padding:.3rem .68rem; border:1px solid rgba(255,255,255,.34);
	font-family:var(--wb-display); font-weight:700; font-size:.78rem; letter-spacing:.02em; line-height:1.2;
	color:#fff; text-decoration:none; background:rgba(255,255,255,.05);
	transition:background .15s ease, border-color .15s ease;
}
.wb-scope .wb-hv--39 .wb-hv39-chip:hover,
.wb-scope .wb-hv--39 .wb-hv39-chip:focus-visible{ border-color:#fff; background:rgba(255,255,255,.14); color:#fff; }
.wb-scope .wb-hv--39 .wb-hv39-chip--tel{ border-color:var(--wb-red); background:var(--wb-red); font-weight:800; font-variant-numeric:tabular-nums; }
.wb-scope .wb-hv--39 .wb-hv39-chip--tel:hover,
.wb-scope .wb-hv--39 .wb-hv39-chip--tel:focus-visible{ border-color:#ff5a61; background:#c9252d; }
/* Row two: DONE. filled with the per-letter ink photos, the period a solid
   red block, the WGSD seal rubber-stamped on its shoulder. Base = solid red
   (the no-clip fallback); @supports upgrades to the photo ink + slow pan.
   Top margin trimmed a notch vs 3A: part of the chip row's fold payment. */
.wb-scope .wb-hv--39 .wb-hv39-donerow{ display:flex; align-items:flex-start; gap:clamp(1rem, .6rem + 1.6vw, 2.4rem); margin:clamp(.4rem, .25rem + .5vw, .85rem) 0 0; }
.wb-scope .wb-hv--39 .wb-hv39-done{
	position:relative;
	margin:0; font-family:var(--wb-display) !important; font-weight:900;
	font-size:clamp(3.2rem, 10.6vw, 8.6rem); line-height:.88; letter-spacing:-.03em;
	color:var(--wb-red);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
	/* Owner 2026-07-03, kept from 3A: a DIFFERENT real photo inks each letter
	   (D press floor, O the CMYK ink system, N the Karns truck wrap, E a booth).
	   Staggered pan delays so the four never move in lockstep. This is also
	   the film's rest state and its only fallback: same letters, same box. */
	.wb-scope .wb-hv--39 .wb-hv39-l{
		background:#15161a center 42%/cover no-repeat;
		-webkit-background-clip:text; background-clip:text;
		-webkit-text-fill-color:transparent; color:transparent;
		-webkit-text-stroke:0;   /* owner 2026-07-04: the stroke ring read as a 1-2px slice of the fill image */
		animation:wb-hv39-inkpan 26s ease-in-out infinite alternate;
	}
	.wb-scope .wb-hv--39 .wb-hv39-l--d{ background-image:url("../images/overhaul/hero37/letter-d.webp"); }
	.wb-scope .wb-hv--39 .wb-hv39-l--o{ background-image:url("../images/overhaul/hero37/letter-o.webp"); animation-delay:-7s; }
	.wb-scope .wb-hv--39 .wb-hv39-l--n{ background-image:url("../images/overhaul/hero37/letter-n.webp"); animation-delay:-13s; }
	.wb-scope .wb-hv--39 .wb-hv39-l--e{ background-image:url("../images/overhaul/hero37/letter-e.webp"); animation-delay:-19s; }
	.wb-scope .wb-hv--39 .wb-hv39-dot{ -webkit-text-fill-color:var(--wb-red); color:var(--wb-red); -webkit-text-stroke:0; }
	@media (max-width:640px){
		/* Owner 2026-07-04: phones get a slow Ken Burns on the letter fills so the
		   stills read animated (reduced-motion still stands everything down). */
		.wb-scope .wb-hv--39 .wb-hv39-l{ background-size:auto 120%; animation:wb-hv39-kenburns 22s ease-in-out infinite alternate; }
	}
}
@keyframes wb-hv39-inkpan{ from{ background-position:center 26%; } to{ background-position:center 64%; } }
@keyframes wb-hv39-kenburns{ from{ background-size:auto 118%; background-position:40% 28%; } to{ background-size:auto 146%; background-position:60% 64%; } }
/* GRAFT 1, THE FILM IN THE LETTERS: absolute over the D..E union (initHeroV39
   sizes it from the rendered boxes, so proportions hold at every clamp size);
   the alpha mask clips it to the glyphs. Ships display:none; only mask
   support turns it on, and only .is-film-live (video actually playing) fades
   it up, so a stalled network or a refused autoplay never blanks a letter.
   The dot sits outside the film box and never needs masking. */
.wb-scope .wb-hv--39 .wb-hv39-film{
	display:none; position:absolute; left:0; top:0; z-index:2;
	object-fit:cover; pointer-events:none; opacity:0; transition:opacity .6s ease;
	-webkit-mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	mask-image:url("../images/overhaul/hero37/done-mask-1600.png");
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-size:100% 100%; mask-size:100% 100%;
}
@supports ((mask-size:100% 100%) or (-webkit-mask-size:100% 100%)){
	.wb-scope .wb-hv--39 .wb-hv39-film{ display:block; }
}
@media (max-width:960px){
	/* Belt and braces with the JS 961px gate: no film box below the desktop
	   line even if a stretched viewport races the matchMedia read. */
	.wb-scope .wb-hv--39 .wb-hv39-film{ display:none !important; }
}
.wb-scope .wb-hv--39.is-film-live .wb-hv39-film{ opacity:1; }
/* Live state (round 2, critiques 1 + 2). The ink photos are NOT retired:
   they keep painting under the opaque masked film, invisible while it runs
   and instantly the letters again on ANY exit, including a live resize
   across 961px (where the media rule above yanks the film box), so "the
   fallback is the baseline by construction" holds mid-frame with no JS in
   the loop. While live we only (a) pause their 26s pan, nothing composites
   for motion nobody can see, and (b) raise the text-stroke to a 2px
   rgba(.22) rim. The mask is cut from the glyph FILL, so the outer half of
   the stroke rides outside the film: a constant 1px edge, the legibility
   floor that keeps DONE. legible whatever frame is playing. Scoped 961px+,
   belt and braces with the JS unarm listener. */
@media (min-width:961px){
	.wb-scope .wb-hv--39.is-film-live .wb-hv39-l{ animation-play-state:paused; -webkit-text-stroke:0; background-image:none; background-color:#0e0f11; }   /* owner 2026-07-06: hide the stills UNDER the live film so their edges never fringe the mask; any exit restores them */
}
@keyframes wb-hv39-jolt{ 0%{ transform:translateY(-10px); } 65%{ transform:translateY(1px); } 100%{ transform:none; } }
.wb-scope .wb-hv--39 .wb-hv39-donerow.is-in .wb-hv39-done{ animation:wb-hv39-jolt .3s cubic-bezier(.3,.9,.4,1); }
.wb-scope .wb-hv--39 .wb-hv39-seal{ flex:0 0 auto; display:block; margin-top:clamp(.4rem, 1vw, 1rem); transform:rotate(-6deg); }
.wb-scope .wb-hv--39 .wb-hv39-seal img{ display:block; width:clamp(84px, 9vw, 130px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
@keyframes wb-hv39-sealstamp{ 0%{ transform:rotate(-14deg) scale(1.35); opacity:0; } 60%{ transform:rotate(-5deg) scale(.98); opacity:1; } 100%{ transform:rotate(-6deg) scale(1); opacity:1; } }
.wb-scope .wb-hv--39 .wb-hv39-donerow.is-in .wb-hv39-seal{ animation:wb-hv39-sealstamp .38s cubic-bezier(.2,.9,.3,1.2) .45s both; }
/* The Spirk lead (change D): longer than the old one-liner, so it runs a
   touch smaller on a 62ch measure to hold the fold; the bold opener reads
   full white. Top clamp trimmed a notch: chip-row fold payment.
   Margin-bottom zeroed: the shared .wb-lead bottom margin collapses OVER the
   ticket's trimmed top margin and silently refunds the trim (measured +7px);
   with it gone the ticket's own clamp rules the gap. */
.wb-scope .wb-hv--39 .wb-hv39-lead{ max-width:62ch; margin-top:clamp(.5rem, .3rem + .5vw, .85rem); margin-bottom:0; font-size:calc(var(--wb-lead) * .92); line-height:1.5; }
.wb-scope .wb-hv--39 .wb-hv39-lead strong{ color:#fff; }
/* Job-ticket strip: three ruled cells under a hairline. The jobs counter
   (change E) sits on its own line via a manual <br> in the markup; the span
   gets tabular-nums plus a reserved 7ch min-width so the odometer counting
   up never changes the cell's width or reflows the row. Top clamp trimmed a
   notch: chip-row fold payment. */
.wb-scope .wb-hv--39 .wb-hv39-ticket{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem, .8rem + 1.8vw, 3rem); max-width:60rem; margin-top:clamp(.6rem, .4rem + .6vw, 1rem); padding-top:clamp(.7rem, .5rem + .7vw, 1.1rem); border-top:1px solid rgba(255,255,255,.22); }
.wb-scope .wb-hv--39 .wb-hv39-ticket__cell{ flex:1 1 170px; min-width:150px; }
.wb-scope .wb-hv--39 .wb-hv39-ticket__num{ display:block; font-family:var(--wb-display) !important; font-weight:900; font-size:clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; color:#fff; text-decoration:none; }
.wb-scope .wb-hv--39 .wb-hv39-ticket__count{ display:inline-block; min-width:7ch; font-variant-numeric:tabular-nums; }
/* The LIVE bug (round 2, critique 3): 3A's "Live count" claim, moved onto the
   odometer itself, broadcast style, after a label prefix measurably wrapped
   the cell (+20px of fold). Rides the counter's line inside the number's cap
   height: zero height, zero width risk. Dot pulses; reduced motion parks it. */
.wb-scope .wb-hv--39 .wb-hv39-ticket__livebug{ display:inline-block; vertical-align:.5em; margin-left:.4rem; padding:.16em .5em; border:1px solid rgba(255,90,97,.6); font-family:var(--wb-display) !important; font-size:.55rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1.1; color:#ff5a61; }
.wb-scope .wb-hv--39 .wb-hv39-ticket__livebug::before{ content:""; display:inline-block; width:.45em; height:.45em; margin-right:.4em; border-radius:50%; background:#ff5a61; animation:wb-hv39-livepulse 2.2s ease-in-out infinite; }
@keyframes wb-hv39-livepulse{ 0%, 100%{ opacity:1; } 50%{ opacity:.3; } }
.wb-scope .wb-hv--39 .wb-hv39-ticket__tel{ color:#ff5a61; transition:color .15s ease; }
.wb-scope .wb-hv--39 .wb-hv39-ticket__tel:hover{ color:#fff; }
.wb-scope .wb-hv--39 .wb-hv39-ticket__label{ display:block; margin-top:.4rem; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.66); max-width:30ch; }
/* The open-ticket line (graft 3) stays on ONE line: under the 30ch cap it
   wraps and the wrap costs ~20px of fold height, measured at 1280x800. */
.wb-scope .wb-hv--39 .wb-hv39-ticket__label--open{ max-width:none; }
/* Condensed chip tier (round 2, the intermediate-width ledger). Between 641
   and 1180 the full row wraps to two lines (+23px at 1024, measured), so the
   prefix label and ALL OF IT's tail sit out and the chips tighten a notch;
   all seven destinations stay. And the clamp trims that pay for the chip
   line at 1280 bottom out near their floors here, leaving the chips ~8px
   dearer than 3A's note line at 1024, so tier-only floor shaves settle the
   rest of the bill. Placed AFTER the base donerow/lead/ticket rules on
   purpose: same specificity, so source order is the tiebreak. Fold ledger
   verified at 1024/1100/1180 vs 3A. */
@media (min-width:641px) and (max-width:1180px){
	.wb-scope .wb-hv--39 .wb-hv39-chips__label{ display:none; }
	.wb-scope .wb-hv--39 .wb-hv39-chip{ padding:.3rem .5rem; font-size:.72rem; }
	.wb-scope .wb-hv--39 .wb-hv39-chip__trim{ display:none; }
	.wb-scope .wb-hv--39 .wb-hv39-chips{ margin-top:.4rem; }
	.wb-scope .wb-hv--39 .wb-hv39-donerow{ margin-top:.3rem; }
	.wb-scope .wb-hv--39 .wb-hv39-lead{ margin-top:.35rem; }
	.wb-scope .wb-hv--39 .wb-hv39-ticket{ margin-top:.45rem; padding-top:.55rem; }
}
/* GRAFT 4, RETENTION RECEIPTS (round 2: BUILT and lab-verified, no longer a
   commented sketch). This CSS ships live and idle: it matches nothing until
   the one-line PHP flag in the fragment ($wb_hv39_receipts) renders the
   markup, so flipping the receipts on after the owner confirms the dated
   accounts (build/38: Hoober 1998 / Donegal 1999 / Karns 2000) is a
   one-character change, not a code edit. CSS-only slow crossfade; the
   canonical line is position:static so IT sizes the cell (the dated
   receipts are all shorter, so the crossfade can never change the strip's
   height); reduced motion pins the canonical line, static. */
.wb-scope .wb-hv--39 .wb-hv39-receipts{ position:relative; display:block; }
.wb-scope .wb-hv--39 .wb-hv39-receipt{ display:block; max-width:30ch; opacity:0; animation:wb-hv39-receipt 32s linear infinite; }
.wb-scope .wb-hv--39 .wb-hv39-receipt + .wb-hv39-receipt{ position:absolute; left:0; top:0; }
.wb-scope .wb-hv--39 .wb-hv39-receipt--2{ animation-delay:8s; }
.wb-scope .wb-hv--39 .wb-hv39-receipt--3{ animation-delay:16s; }
.wb-scope .wb-hv--39 .wb-hv39-receipt--4{ animation-delay:24s; }
@keyframes wb-hv39-receipt{ 0%{ opacity:0; } 2.5%{ opacity:1; } 25%{ opacity:1; } 27.5%{ opacity:0; } 100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--39 .wb-hv39-receipt{ animation:none !important; }
	.wb-scope .wb-hv--39 .wb-hv39-receipt--1{ opacity:1; }
}
/* Mobile (390 plan): one flush-left column at the clamp floors; square arrow
   submit inside the pill; counter-shear and ink pan dropped (retention lives
   in the ticket strip at every width). Input floor a hair under skin 6's so
   the longest typer word (LEADS FOR MY SALES TEAM) clears the pill. Chips:
   the phone leads, the trade-show chip and the prefix label sit out (the
   two-line budget; both remain reachable through nav and search), and every
   chip clears the 44px touch minimum. */
@media (max-width:640px){
	.wb-scope .wb-hv--39 .wb-hv39-go-txt{ display:none; }
	.wb-scope .wb-hv--39 .wb-hv39-we,
	.wb-scope .wb-hv--39 .wb-hv39-donerow{ transform:none !important; }
	.wb-scope .wb-hv--39 .wb-hero-ask__row{ flex-wrap:nowrap; padding:.4rem .4rem .4rem .8rem; }
	.wb-scope .wb-hv--39 .wb-hero-ask__input{ flex-basis:auto; font-size:clamp(1rem, 4vw, 1.5rem); padding:.55rem .1rem; }
	.wb-scope .wb-hv--39 .wb-hero-ask__go{ flex:0 0 auto; width:52px; height:52px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
	.wb-scope .wb-hv--39 .wb-hero-ask__go i{ margin:0; font-size:1.05rem; }
	.wb-scope .wb-hv--39 .wb-hv39-chips{ gap:.35rem .35rem; }
	.wb-scope .wb-hv--39 .wb-hv39-chips__label{ display:none; }
	.wb-scope .wb-hv--39 .wb-hv39-chip{ min-height:44px; padding:.3rem .55rem; font-size:.74rem; }
	.wb-scope .wb-hv--39 .wb-hv39-chip--booth{ display:none; }
	.wb-scope .wb-hv--39 .wb-hv39-chip--tel{ order:-1; }
	.wb-scope .wb-hv--39 .wb-hv39-chip__trim{ display:none; }   /* ALL OF IT keeps the punch, sheds the tail: the two-line budget, measured at 390 */
	.wb-scope .wb-hv--39 .wb-hv39-seal img{ width:84px; }
	.wb-scope .wb-hv--39 .wb-hv39-ticket{ gap:0; }
	.wb-scope .wb-hv--39 .wb-hv39-ticket__cell{ flex:1 1 100%; min-width:0; display:flex; align-items:baseline; gap:.7rem; padding:.55rem 0; }
	.wb-scope .wb-hv--39 .wb-hv39-ticket__cell + .wb-hv39-ticket__cell{ border-top:1px solid rgba(255,255,255,.18); }
	.wb-scope .wb-hv--39 .wb-hv39-ticket__num{ font-size:1.15rem; }
	.wb-scope .wb-hv--39 .wb-hv39-ticket__label{ margin-top:0; max-width:none; }
	.wb-scope .wb-hv--39 .wb-hv39-receipt{ max-width:none; }
}
/* Reduced motion: everything renders in final position, no stamps, no jolt,
   no ink pan, and the film never plays (initHeroV39 never injects sources);
   display:none here is the CSS half of that contract. */
@media (prefers-reduced-motion:reduce){
	.wb-scope .wb-hv--39 .wb-hv39-we.is-in,
	.wb-scope .wb-hv--39 .wb-hv39-done,
	.wb-scope .wb-hv--39 .wb-hv39-l,
	.wb-scope .wb-hv--39 .wb-hv39-donerow.is-in .wb-hv39-done,
	.wb-scope .wb-hv--39 .wb-hv39-donerow.is-in .wb-hv39-seal,
	.wb-scope .wb-hv--39 .wb-hv39-ticket__livebug::before{ animation:none !important; }
	.wb-scope .wb-hv--39 .wb-hv39-film{ display:none !important; }
}
/* Cascade fix carried over from the skin-6 review (blocker there): the mobile
   plan drops the ink pan, but the .is-in rule above is (0,5,0) and outguns
   the @supports mobile animation:none at (0,3,0). Same selector, later in
   the cascade, inside max-640: keep the jolt, kill the 26s pan on phones. */
@media (max-width:640px){
	.wb-scope .wb-hv--39 .wb-hv39-donerow.is-in .wb-hv39-done{ animation:wb-hv39-jolt .3s cubic-bezier(.3,.9,.4,1); }
	.wb-scope .wb-hv--39 .wb-hv39-donerow.is-in .wb-hv39-l{ animation:wb-hv39-kenburns 22s ease-in-out infinite alternate; }   /* owner: phones get the slow Ken Burns */
}



/* 36D extras: rounded language (from 36B) + the Launch rail with a 1.75x rocket. */
.wb-scope .wb-hv--39 .wb-hero-ask__row{ border-radius:999px; }
.wb-scope .wb-hv--39 .wb-hero-ask__go{ border-radius:999px; }
.wb-scope .wb-hv--39 .wb-hero-ask__results{ border-radius:16px; }
.wb-scope .wb-hv--39 .wb-hv39-chip{ border-radius:999px !important; }
.wb-scope .wb-hv--39 .wb-hv39-film{ display:none !important; }
/* 36D rocket rides the SLANT SEAM (owner 2026-07-06): reuse the page seam
   rider, centred on the seam, ~1.5x, with the red trail line BEHIND it. */
.wb-scope .wb-hero-v39.wb-band--video ~ .wb-seam-rider--rocket{ position:relative; }
.wb-scope .wb-hero-v39.wb-band--video ~ .wb-seam-rider--rocket .wb-drive--rocket{
	width:clamp(180px, 22vw, 340px);
	top:calc(clamp(180px, 22vw, 340px) * -0.196);   /* half its own height: centred on the seam */
	position:relative; z-index:1;                   /* rocket in front, trail behind */
}
@media (max-width:960px){
  .wb-scope .wb-hv--39 .wb-hv39-flight{ height:auto; margin-top:.6rem; }
  .wb-scope .wb-hv--39 .wb-hv39-traj{ position:static; width:auto; height:auto; transform:none; display:flex; justify-content:flex-end; padding-right:6vw; }
  .wb-scope .wb-hv--39 .wb-hv39-rail{ display:none; }
  .wb-scope .wb-hv--39 .wb-hv39-ride{ position:static; transform:none !important; }
  .wb-scope .wb-hv--39 .wb-hv39-rocket{ width:180px; }
}
@media (prefers-reduced-motion: reduce){
  .wb-scope .wb-hv--39 .wb-hv39-ride{ transform:translateX(10vw) !important; }
}

/* 36D tighteners (owner 2026-07-06): pull YOUR STUFF GOES HERE up. */
.wb-scope .wb-hv--39 .wb-hv39-we{ margin-bottom:0; }
.wb-scope .wb-hv--39 .wb-hero-ask{ margin-top:.1rem; }
.wb-scope .wb-hv--39 .wb-hv39-label{ margin:0 0 .25rem; }

/* 36D mobile (owner 2026-07-06): Ken Burns slideshow of real work instead of a
   still (video never loads on phones), bigger WE GET / DONE, smaller WGSD seal
   floated right. */
@media (max-width:767px){
	.wb-scope .wb-hero-v39 .wb-band__video-wrap{ display:none; }
	.wb-scope .wb-hero-v39.wb-band--video::before{
		content:""; position:absolute; inset:0; z-index:0;
		background:#0b0d10 url("../images/overhaul/hero37/wall-karns-truck-640.webp") center/cover no-repeat;
		animation:wb-hv39-kbslides 32s ease-in-out infinite;
	}
}
@keyframes wb-hv39-kbslides{
	0%{ background-image:url("../images/overhaul/hero37/wall-karns-truck-640.webp"); transform:scale(1); opacity:1; }
	21%{ transform:scale(1.14); opacity:1; }
	24%{ opacity:.15; transform:scale(1.14); }
	25%{ background-image:url("../images/overhaul/hero37/wall-triangle-booth-640.webp"); transform:scale(1); opacity:1; }
	46%{ transform:scale(1.14); }
	49%{ opacity:.15; }
	50%{ background-image:url("../images/overhaul/hero37/wall-roots-poster-640.webp"); transform:scale(1); opacity:1; }
	71%{ transform:scale(1.14); }
	74%{ opacity:.15; }
	75%{ background-image:url("../images/overhaul/hero37/wall-whoopie-floor-640.webp"); transform:scale(1); opacity:1; }
	96%{ transform:scale(1.14); }
	99%{ opacity:.15; }
	100%{ background-image:url("../images/overhaul/hero37/wall-karns-truck-640.webp"); transform:scale(1); opacity:1; }
}
@media (max-width:640px){
	.wb-scope .wb-hv--39 .wb-hv39-we{ font-size:16vw; }
	.wb-scope .wb-hv--39 .wb-hv39-done{ font-size:20vw; }
	.wb-scope .wb-hv--39 .wb-hv39-seal{ margin-left:auto; margin-top:-.4rem; }
	.wb-scope .wb-hv--39 .wb-hv39-seal img{ width:76px; }
}
@media (prefers-reduced-motion: reduce){
	.wb-scope .wb-hero-v39.wb-band--video::before{ animation:none !important; }
}

/* 36D fold pass (owner 2026-07-06, CDP-measured at 1280x800): the seal was the
   tallest element in the DONE row and the type ran a step large; everything
   through the ticket strip now clears the fold. */
.wb-scope .wb-hv--39 .wb-hv39-we{ font-size:clamp(3.2rem, 7vw, 5.9rem); }
.wb-scope .wb-hv--39 .wb-hv39-done{ font-size:clamp(3.6rem, 8.4vw, 6.7rem); }
.wb-scope .wb-hv--39 .wb-hv39-donerow{ margin-top:clamp(.5rem, .9vw, 1rem); }
.wb-scope .wb-hv--39 .wb-hv39-seal{ margin-top:.15rem; }
.wb-scope .wb-hv--39 .wb-hv39-seal img{ width:clamp(62px, 6vw, 86px); }
.wb-scope .wb-hv--39 .wb-hv39-lead{ margin-top:clamp(.55rem, 1vw, .95rem); line-height:1.44; max-width:66ch; }
.wb-scope .wb-hv--39 .wb-hv39-ticket{ margin-top:clamp(.6rem, 1vw, 1rem); padding-top:clamp(.5rem, .9vw, .9rem); }
.wb-scope .wb-hero-v39.wb-band--video.wb-band--dark{ padding-top:calc(var(--wb-nav-h) + clamp(.7rem, 1.6vh, 1.2rem)); }
@media (max-width:640px){
	.wb-scope .wb-hv--39 .wb-hv39-we{ font-size:16vw; }
	.wb-scope .wb-hv--39 .wb-hv39-done{ font-size:20vw; }
	.wb-scope .wb-hv--39 .wb-hv39-seal img{ width:76px; }
}

/* 36D: WGSD seal centres vertically on the DONE word (owner 2026-07-06). */
.wb-scope .wb-hv--39 .wb-hv39-donerow{ align-items:center; }
.wb-scope .wb-hv--39 .wb-hv39-seal{ margin-top:0; }