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

:root {
  /* Brand palette (Grabfruits) */
  --parchment: #fbf2dc;
  --red: #92000f;
  /* Contrast-safe orange variants for small text (eyebrows, labels).
     --orange itself stays bright for buttons + large decorative spans;
     these darker / lighter siblings clear WCAG AA (≥4.5:1) on parchment / red. */
  --orange-deep:  #a84800; /* on parchment ≈ 5.24:1 */
  --orange-light: #ffb066; /* on red       ≈ 5.22:1 */
  /* Hero secondary UI + copy (not nav, not benchmark labels .stat-l) */
  --hero-muted-burgundy: #c68b81;
  --orange: #ff8400;
  --pink: #ff81a0;
  --taupe: #c2a095;
  --taupe-light: #cda99c;
  --grove: #a96325;
  --teal: #96cecc;
  --sage: #8BCF3E;
  --ink: #1a0a09;
  --gf-good: #5aaa9f;
  --gf-mid-score: #ff8400;
  --gf-bad-score: #ff81a0;
  /* Hero URL bar — Framer export tokens (page-export/index.html) */
  --hero-framer-cream: #fcf1d9;
  --hero-framer-orange: #fd8505;
  --hero-framer-url-muted: #c7b6a5;
  --hero-framer-placeholder: #b8a898;
  /* MagicBento border ring thickness (mask padding); keep hairline-thin */
  --bento-border-glow-stroke: 1.5px;
  /* Hero headline word-in easing (linear() stops) */
  --hero-word-ease: linear(
    0,
    0.49 7.4%,
    0.864 15.3%,
    1.005 19.4%,
    1.12 23.7%,
    1.206 28.1%,
    1.267 32.8%,
    1.296 36.4%,
    1.311 40.2%,
    1.313 44.2%,
    1.301 48.6%,
    1.252 56.9%,
    1.105 74.4%,
    1.048 82.5%,
    1.011 91.1%,
    1
  );
  --hero-cta-cream: var(--hero-framer-cream);
  --hero-cta-shadow: 0 8px 26px 2px rgba(0, 0, 0, 0.149);
  --hero-cta-btn-shadow: 1px 2px 9px -1px rgba(0, 0, 0, 0.3);
  --hero-cta-bar-h: 63px;
  --hero-cta-bar-radius: 21px;
  --hero-cta-btn-w: 157px;
  --hero-cta-btn-h: 46px;
  --hero-cta-btn-radius: 15px;
  --hero-cta-inset-r: 12px;
  /* Melt: slightly wider than button, tucked under bar (overlap upward) */
  --hero-cta-melt-scale: 1.15;
  --hero-cta-melt-overlap: 39px;
  /* Figma artboard 1440×907 + content boxes; rails cap scale (no 1280 upscaling past design) */
  --hero-artboard-w: 1440;
  /* Hero artboard 1440×907 rails */
  --hero-stats-rail-max: 575px;
  /* Figma Frame 1440×907 — rev. containers → px */
  --hero-gap-tags-line: 16px;
  --hero-gap-line-stats: 14px;
  --hero-field-h: 38px;
  /* Action pills: subtler corners than URL bar */
  --hero-tag-radius: 7px;
  --hero-scan-w: 174px;
  /* Extra air between nav and hero stack */
  --hero-padding-below-nav: 60px;
  /* iMac / short viewports: cap artboard width so 1440/907 stack fits in one screen */
  --hero-artboard-cap: 1440px;
  --hero-fit-chrome: calc(
    env(safe-area-inset-top, 0px)
    + clamp(100px, 9.5vh, 132px)
    + var(--hero-padding-below-nav)
    + clamp(20px, 3vh, 44px)
    + max(var(--hero-stage-padding-bottom), env(safe-area-inset-bottom, 0px))
    + 10px
  );
  /* Bench for tags + divider + stats (viewport foot); subtracted when sizing the upper artboard rail */
  --hero-foot-reserve: clamp(92px, 13.5vh, 148px);
  /* Air under tags/stats + safe-area; stage padding applies below the morph stack */
  --hero-stage-padding-bottom: clamp(14px, 2.2vh, 28px);
  /* Subtitle line only */
  --hero-tag-font-size: clamp(12px, 1.2vw, 14px);
  --hero-tag-font-size-sm: 9px;
  --hero-tag-letter-spacing: 0.12em;
  /* Hero action pills — smaller than subtitle so six fit one row */
  --hero-action-tag-font-size: clamp(7px, 0.85vw, 10px);
  --hero-action-tag-font-size-sm: 7px;
  --hero-action-tag-letter-spacing: 0.1em;
  /*
    Hero subline: Adobe Acumin Variable when Typekit is linked (see index.html).
    Fallback: Source Sans 3 (similar modern neo-grotesque; not on Google as Acumin).
  */
  --font-hero-secondary: "acumin-variable", "Acumin Variable", "Source Sans 3", system-ui, sans-serif;
}

html { scroll-padding-top: 72px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--ink);
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
}
body.loading { overflow: hidden; }

/* Scan results: fixed #results scrolls; lock root so Lenis/native scroll don't move the page behind the overlay */
html.gf-results-open,
body.gf-results-open {
  overflow: hidden;
  height: 100%;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

/* Global focus-visible ring for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ── Reusable glass utility (works on dark backgrounds) ─────────────
   Use on any container/button inside a dark or gradient parent. For
   light parents, add .gf-glass-light which inverts the tint. */
.gf-glass {
  background: rgba(251, 242, 220, .06);
  border: 1px solid rgba(251, 242, 220, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .45);
}
.gf-glass-light {
  background: rgba(26, 10, 9, .035);
  border: 1px solid rgba(26, 10, 9, .08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: 0 12px 36px -18px rgba(26, 10, 9, .18);
}

.gf-glass-btn {
  appearance: none;
  background: rgba(251, 242, 220, .06);
  border: 1px solid rgba(251, 242, 220, .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--parchment);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color .22s cubic-bezier(.2, .8, .2, 1), border-color .22s cubic-bezier(.2, .8, .2, 1), color .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s cubic-bezier(.2, .8, .2, 1);
  white-space: nowrap;
}
.gf-glass-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(247, 146, 30, .5);
}

.gf-gradient-dark {
  background: radial-gradient(ellipse at top right, #5c1412 0%, var(--red) 40%, #4d1210 100%);
  color: var(--parchment);
}
.gf-gradient-ink {
  background: radial-gradient(ellipse at top left, #3a1614 0%, var(--ink) 55%, #12080a 100%);
  color: var(--parchment);
}
.hub-mood-pill:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 8px;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 999;
  background: var(--red);
  color: var(--parchment);
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

#loader {
  position: fixed; inset: 0;
  background: var(--parchment);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.8s;
}
#loader.out { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.loader-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.loader-logo .logo-text {
  display: block;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 10vw, 72px);
  letter-spacing: .04em;
  color: var(--red);
  line-height: 1;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.loader-logo .logo-text.show {
  opacity: 1;
  transform: scale(1);
}
.loader-logo .logo-text span { color: var(--orange); }
.loader-logo .logo-tagline {
  display: block;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(146,0,15,.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.loader-logo .logo-tagline.show {
  opacity: 1;
  transform: translateY(0);
}

.hero-wrapper {
  /* Spacer that reserves the scroll distance during which the panel's clip +
     nav morph play out (HERO_MORPH_RANGE in scanner.js) plus a short post-
     morph buffer for the panel opacity fade. The panel itself is position:
     fixed (see .hero-sticky-panel below), so the wrapper does NOT need to
     hold a 100vh sticky column — that was creating a ~100vh red gap between
     the morph end and the next section (wrapper continued long after the
     fixed-pill silhouette had completed). With the panel fixed, this wrapper
     is JUST scroll room, so the validator section sits right after the morph
     finishes. Keep in sync with HERO_MORPH_RANGE in scanner.js (700) plus
     POST_MORPH_FADE (60) + a tiny safety buffer. */
  min-height: calc(700px + 80px);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--red);
}

/* ── Hero scroll-morph ─────────────────────────────────────────────
   Architecture:
   • <nav> is a standalone position:fixed element (lives outside this
     panel — see index.html). Its geometry is 100% scroll-driven via
     inline styles written from js/scanner.js on every scroll frame.
   • .hero-sticky-panel is a cream card whose OUTER SILHOUETTE reshapes
     from full-bleed rectangle → centered pill via clip-path:
     inset(… round …) — also written inline from JS on the same frame
     using the SAME scroll progress `t`.
   • Because both elements interpolate from the same t on the same rAF
     frame, the nav pill and the panel's clipped pill silhouette stay
     pixel-locked — they read as ONE continuous shape. This is why
     neither element has any CSS transitions on geometry: any transition
     here would race the scroll writes and desync the two silhouettes
     (producing the "small pill floating inside a larger rectangle" bug).
   See js/scanner.js → initHeroScroll for the driver. */

/* Inner wrapper — no longer sticky (we used to rely on sticky to keep the
   panel pinned during scroll, but sticky makes the panel scroll UP out of
   viewport after its travel exhausts, so the clipped pill briefly peeks
   above the fixed nav pill → "bg overflows upward" bug). Panel is now
   position:fixed instead (see .hero-sticky-panel), so this is just a thin
   DOM anchor for the panel — has no visible role. Zero height because all
   its children are out of flow (fixed). */
.hero-sticky {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.hero-sticky-panel {
  /* Fixed to the viewport — NOT sticky. This is what eliminates the
     "bg container overflows upward" bug: a sticky panel eventually gets
     released when its travel exhausts and then scrolls up with the page,
     which made its clipped pill silhouette briefly peek ABOVE the nav pill
     at scrollY ≈ 720. A fixed panel never moves — it always covers the
     viewport — so there's nothing to peek. Opacity 0 past HERO_MORPH_RANGE
     (driven by scanner.js) makes it invisible by the time the validator
     section scrolls up into view. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Sits above normal page flow (validator etc.) so the cream silhouette
     covers the red-bg wrapper during the morph, but BELOW the nav (z:80) so
     the nav pill always reads on top of the panel's clipped pill silhouette. */
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--hero-framer-cream);
  border: 1px solid rgba(146,0,15,.06);
  box-shadow: 0 8px 32px rgba(146,0,15,.06);
  /* overflow:hidden so any sub-pixel tail of the content can never leak past
     the cream rim mid-morph. */
  overflow: hidden;
  /* JS drives clip-path: inset(… round …) on scroll, reshaping the visible
     silhouette from full-bleed rect → centered nav pill. Paint-only property:
     the layout box stays viewport-sized × full-vw, so natural-height hero
     content inside (headline + CTA + tags + stats) never overflows / clips /
     stacks the way layout-shrinking morphs did. See js/scanner.js. */
  clip-path: inset(0 0 0 0 round 0);
  -webkit-clip-path: inset(0 0 0 0 round 0);
  will-change: clip-path, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Standalone fixed nav. Geometry is 100% scroll-driven via inline styles
   written from js/scanner.js → initHeroScroll on every scroll frame. At t=0
   (scrollY=0) it sits flush at top, full-width, no radius — reading as "nav
   on top of the hero card". As t → 1 it interpolates to a centered pill
   (top:18 / max-width:1200 / radius:22 / insetted padding / shadow) — and
   because the hero panel's clip-path is driven by the SAME t on the SAME
   frame, nav silhouette and clipped-panel silhouette stay pixel-locked
   throughout the morph. They read as ONE shape, not two drifting layers.

   No CSS transitions here — if we had any, they'd race the scroll-driven
   writes and the silhouettes would desync again (which is exactly the bug
   you saw: nav finished its 500ms transition while the clip was still
   halfway through its scroll, producing a small pill + a big bg = two
   separate cream layers). */
.hero-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100vw;
  margin: 0 auto;
  z-index: 80;
  background: var(--hero-framer-cream);
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(22px, 2.5vh, 32px) clamp(40px, 5vw, 72px) clamp(20px, 2.5vh, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .hero-nav { padding: 16px 24px 14px; }
}

.logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--red);
  text-decoration: none;
  margin-top: -2px;
  position: relative;
  z-index: 92;
  transition: color .3s;
}
.logo span { color: var(--orange); transition: color .3s; }
body.nav-open .logo { color: var(--parchment); }
body.nav-open .logo span { color: var(--orange); }

.nav-links {
  display: flex;
  gap: 48px;
  list-style: none;
  margin-top: -8px;
  padding: 0;
}
.nav-links a {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0.45;
  text-decoration: none;
  transition: opacity .2s;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }

/* ── Hamburger / mobile nav ────────────────────────── */
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 92;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s;
  transform-origin: center;
}
.nav-burger span + span { margin-top: 7px; }

/* open → X  (class is on body now) */
body.nav-open .nav-burger span { background: var(--parchment); }
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

body.nav-lock { overflow: hidden; }

@media (max-width: 760px) {
  /* Portalled to <body> on mobile (see js/shared.js). Position (top/right) is
     driven scroll-by-scroll from js/scanner.js → initHeroScroll, interpolated
     from (18, 28) at scrollY=0 to (24, 32) at full pill, in lockstep with the
     .hero-nav inline-style morph. No CSS transition — JS writes the final
     values each frame to stay pixel-locked. */
  .nav-burger {
    display: block;
    position: fixed;
    top: 18px;
    right: 28px;
    z-index: 92;
  }

  /* overlay lives on <body> via JS portal */
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--ink);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 36px 15vh;
    gap: 0;
    z-index: 91;
    clip-path: circle(0px at calc(100% - 36px) 34px);
    visibility: hidden;
    pointer-events: none;
    transition: clip-path .55s cubic-bezier(.4,0,.2,1), visibility 0s .55s;
  }

  /* big fruit watermark */
  .nav-links::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -15%;
    width: 80vw;
    height: 80vw;
    transform: translateY(-50%) rotate(-12deg);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 223.48 223.48"><path fill="%23291211" d="M156.87,56.2c-1.99,3.14-4.67,5.08-7.54,8.02-4.16,4.15-8.14,8.36-12.26,12.38-3.67,3.18-6.62,7.8-11.21,9.72-4.12,1.26-7.28-2.15-7-5.83,0-5.28.02-21.38.03-31.78.5-4.65-1.78-10.5,3.25-12.72,3.11-1.43,6.99-.46,10.35.22,3.82.82,7.47,2.35,11.09,3.91,6.07,2.91,17.75,7.93,13.43,15.86l-.14.24Z"/><path fill="%23291211" d="M155.36,175.84c-8.49,6.59-20.28,12.25-31.17,11.89-3.54-.48-5.7-3.39-5.33-6.87-.02-6.9-.07-28.45-.09-35.63-.69-5.48,3.52-10.53,8.86-7.71,5.51,4.51,10.48,10.45,16.23,15.97,3.71,3.74,7.33,7.4,9.86,9.96,2.01,2.11,3.34,3.1,4.08,4.76,1.05,2.62-.26,5.59-2.24,7.45l-.2.2Z"/><path fill="%23291211" d="M104.3,183.93c-3.48,8.24-16.41,2.25-22.54.17-5.1-2.52-16.5-6.85-16.33-13.51.26-2.85,2.52-5.25,4.47-7.25,7.72-7.66,15.34-15.35,23.09-22.88,2.86-3.24,8.1-5.08,10.91-.95,1.45,3.05.44,10.14.75,14.35.02,6.92.04,14.37.06,20.86-.09,2.96.3,6.92-.35,9.04l-.06.17Z"/><path fill="%23291211" d="M85.98,127.5c-1.43,2.42-5.17,5.43-7.51,7.93-5.56,5.49-13.22,13.05-18.75,18.51-4.96,5.96-9.45,5.24-13.77-.44-5.13-6.96-8.65-15.5-10.18-24.08-1.27-6.31,1.11-11.4,8.36-10.53,6.36.01,13.47.02,20.52.03,6.72.02,11.41,0,16.19.03,4.36-.44,7.17,4.62,5.23,8.38l-.08.17Z"/><path fill="%23291211" d="M86.32,96.96c-1.23-2.58-5.23-5.61-7.54-8.16-5.31-5.26-12.93-12.79-18.24-18.04-4-4.22-7.08-7.41-12.12-3.34-6.85,7.16-10.5,16.78-12.49,26.43-.69,3.4-.68,7.88,2.34,10,1.6,1.03,3.11.78,5.74.82h6.24c8.1,0,21.25-.02,28.67-.02,2.05-.08,4.04.34,5.73-.9,1.68-1.18,2.57-4.54,1.74-6.61l-.06-.17Z"/><path fill="%23291211" d="M137.27,126.79c1.23,2.58,5.23,5.61,7.54,8.16,5.31,5.26,12.93,12.79,18.24,18.04,4,4.22,7.08,7.41,12.12,3.34,6.85-7.16,10.5-16.78,12.49-26.43.69-3.4.68-7.88-2.34-10-1.6-1.03-3.11-.78-5.74-.82h-6.24c-8.1,0-21.25.02-28.67.02-2.05.08-4.04-.34-5.73.9-1.68,1.18-2.57,4.54-1.74,6.61l.06.17Z"/><path fill="%23291211" d="M104,38.18c1.17,2.14.41,6.59.61,9.53-.01,8.01-.04,18-.05,26.17-.29,3.79.68,7.6-.67,10.75-1.18,1.93-4.29,2.77-6.95,1.65-3.24-1.54-5.65-4.75-8.18-7.19-3.37-3.47-7.7-7.81-11.58-11.71-2.22-2.21-4.19-4.27-6.34-6.42-2.05-2.06-5.16-4.84-5.23-7.89-.85-8.67,33.31-23.01,38.3-15.02l.09.14Z"/></svg>') no-repeat center / contain;
    opacity: .35;
    pointer-events: none;
  }

  .nav-links li {
    opacity: 0;
    transform: translateX(-20px);
    list-style: none;
  }

  body.nav-open .nav-links {
    clip-path: circle(150% at calc(100% - 36px) 34px);
    visibility: visible;
    pointer-events: auto;
    transition: clip-path .55s cubic-bezier(.4,0,.2,1), visibility 0s 0s;
  }
  body.nav-open .nav-links li {
    opacity: 1;
    transform: none;
    transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
  }
  body.nav-open .nav-links li:nth-child(1) { transition-delay: .12s; }
  body.nav-open .nav-links li:nth-child(2) { transition-delay: .18s; }
  body.nav-open .nav-links li:nth-child(3) { transition-delay: .24s; }
  body.nav-open .nav-links li:nth-child(4) { transition-delay: .30s; }
  body.nav-open .nav-links li:nth-child(5) { transition-delay: .36s; }

  .nav-links a {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(32px, 8vw, 48px);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--parchment);
    opacity: 1;
    padding: 6px 0;
    display: block;
    line-height: 1.15;
    transition: color .2s;
  }
  .nav-links a:hover,
  .nav-links a.active { color: var(--orange); opacity: 1; }

  /* small tagline at bottom of menu */
  .nav-links::after {
    content: 'stop leaking juice.';
    display: block;
    margin-top: 32px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange);
    opacity: .5;
  }
}

.hero-content-wrap {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: visible;
  overflow-y: visible;
  /* Reserve space for the fixed .hero-nav now that the nav lives outside the panel.
     Without this padding the centred content shifts ~48px up (the panel got 96px taller
     when the nav left its layout), which would look wrong vs. the original design. */
  padding-top: var(--hero-nav-clearance, 96px);
}
@media (max-width: 1024px) and (min-width: 901px) {
  :root { --hero-nav-clearance: 84px; }
}
@media (max-width: 760px) {
  :root { --hero-nav-clearance: 56px; }
}

/* Title + URL rail and viewport-foot (tags/stats). Only opacity animates on scroll
   now — the old transform: scale was what caused content to clip/stack inside a
   shrinking panel. Layout box stays at natural size, opacity fades smoothly. */
.hero-morph-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  will-change: opacity;
}
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  width: 100%;
  padding: calc(var(--hero-padding-below-nav) + clamp(20px, 3vh, 44px)) clamp(20px, 5vw, 72px) max(var(--hero-stage-padding-bottom), env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  --hero-rail-max: min(
    var(--hero-artboard-cap),
    calc(
      max(0px, 100dvh - var(--hero-fit-chrome) - var(--hero-foot-reserve))
      * (1440 / (907 * 0.7225))
    )
  );
}

/* ── Hero upper stack (Framer-style): title → orange rule → serif sub → URL+scan pill ── */
.hero-artboard {
  position: relative;
  width: 100%;
  max-width: var(--hero-rail-max);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1440 / calc(907 * 0.7225);
  flex-shrink: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(20px, 5vh, 52px);
  padding-left: 2%;
  padding-right: 2%;
  box-sizing: border-box;
  gap: clamp(10px, 1.5vw, 18px);
}

.hero-artboard > .hero-ab-layer {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: 96%;
  height: auto;
  min-height: 0;
}

.hero-ab-title {
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  container-type: inline-size;
  flex-shrink: 0;
}

.hero-ab-title-line {
  z-index: 2;
  width: min(86%, 820px);
  max-width: 100%;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  align-self: center;
  background: var(--orange);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 3px 12px rgba(255, 132, 0, 0.35);
}

.hero-ab-sub {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 0;
  width: fit-content;
  max-width: min(96%, 38rem);
  overflow: visible;
}

.hero-ab-cta {
  z-index: 4;
  width: 100%;
  max-width: min(1061px, 94%);
  margin-top: clamp(4px, 0.8vw, 12px);
  padding-bottom: clamp(18px, 2.8vh, 30px);
  display: flex;
  justify-content: center;
  overflow: visible;
}

.hero-cta-shell {
  width: 100%;
}

/* Framer page-export: 63px cream bar, 21px radius, URL on bar (no inner box), SVG drip under CTA */

.hero-cta-pill {
  position: relative;
  width: 100%;
  max-width: min(760px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-bottom: clamp(52px, 14vw, 78px);
  box-sizing: border-box;
  overflow: visible;
}

/* Stack: shadow (z0) → melt (z1) → beige bar (z2). Shadow is only on .hero-cta-bar-shadow. */
/* --focus-t is a number in [0..1] that smoothly interpolates between
   the idle pink glow (0) and the activated orange glow (1) once the
   user focuses the URL input. Registered via @property so CSS can
   actually transition the number (unregistered custom properties
   would snap). Gives a soft ~400ms crossfade from pink → orange on
   click/focus. */
@property --focus-t {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

.hero-cta-bar-wrap {
  position: relative;
  width: 100%;
  isolation: isolate;
  --cta-proximity: 0;
  --focus-t: 0;
  transition: --focus-t 400ms ease;
}
.hero-cta-bar-wrap:has(.hero-cta-bar:focus-within) {
  --focus-t: 1;
}

/* Proximity halo — stays in the warm palette at all times so the
   transition from idle to focused feels like the bar "igniting", not a
   color clash. Idle = soft honey/amber (warm, desaturated, blends with
   cream bg without muddying it); focused = vivid orange. Both halos
   share --cta-proximity for scale/opacity and blend by --focus-t. */
.hero-cta-bar-wrap::before,
.hero-cta-bar-wrap::after {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: calc(var(--hero-cta-bar-radius) + 40px);
  filter: blur(26px);
  transform: scale(calc(0.9 + 0.1 * var(--cta-proximity, 0)));
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}
/* Honey/amber halo — visible while idle/approaching. Warm, desaturated,
   reads as a soft candle-glow on cream paper. */
.hero-cta-bar-wrap::before {
  background: radial-gradient(
    ellipse 72% 95% at 50% 50%,
    rgba(255, 186, 96, 0.62) 0%,
    rgba(232, 150, 58, 0.26) 42%,
    transparent 74%
  );
  opacity: calc(var(--cta-proximity, 0) * (1 - var(--focus-t, 0)));
}
/* Vivid orange halo — visible once the input is focused (post-click).
   Saturation bump + hue shift toward the CTA button color. */
.hero-cta-bar-wrap::after {
  background: radial-gradient(
    ellipse 72% 95% at 50% 50%,
    rgba(253, 133, 5, 0.70) 0%,
    rgba(253, 133, 5, 0.28) 42%,
    transparent 74%
  );
  opacity: calc(var(--cta-proximity, 0) * var(--focus-t, 0));
}

/* Bar shadow also warms with proximity + focus state: amber tint idle,
   orange tint focused. Two weighted shadow layers crossfade via
   --focus-t so the warmth under the bar always matches the halo. */
.hero-cta-bar-wrap .hero-cta-bar-shadow {
  box-shadow:
    var(--hero-cta-shadow),
    0 0 calc(24px + 60px * var(--cta-proximity, 0))
    calc(3px + 6px * var(--cta-proximity, 0))
    rgba(232, 150, 58, calc(0.28 * var(--cta-proximity, 0) * (1 - var(--focus-t, 0)))),
    0 0 calc(24px + 60px * var(--cta-proximity, 0))
    calc(3px + 6px * var(--cta-proximity, 0))
    rgba(253, 133, 5, calc(0.24 * var(--cta-proximity, 0) * var(--focus-t, 0)));
}

.hero-cta-bar-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--hero-cta-bar-radius);
  box-shadow: var(--hero-cta-shadow);
  pointer-events: none;
}

.hero-cta-bar-wrap:has(.hero-cta-bar:focus-within) .hero-cta-bar-shadow {
  box-shadow:
    var(--hero-cta-shadow),
    0 0 0 1px rgba(253, 133, 5, 0.28),
    0 0 calc(40px + 60px * var(--cta-proximity, 0))
    calc(4px + 6px * var(--cta-proximity, 0))
    rgba(253, 133, 5, calc(0.25 + 0.12 * var(--cta-proximity, 0)));
}

.hero-cta-bar-wrap .hero-cta-drip {
  position: absolute;
  z-index: 1;
  top: calc(100% - var(--hero-cta-melt-overlap));
  right: calc(
    var(--hero-cta-inset-r) + var(--hero-cta-btn-w) * (1 - var(--hero-cta-melt-scale)) / 2
  );
  left: auto;
  width: calc(var(--hero-cta-btn-w) * var(--hero-cta-melt-scale));
  max-width: none;
  pointer-events: none;
  line-height: 0;
}

.hero-cta-bar-wrap .hero-cta-drip img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-cta-bar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-height: var(--hero-cta-bar-h);
  height: var(--hero-cta-bar-h);
  padding: 0 var(--hero-cta-inset-r) 0 24px;
  gap: 12px;
  background: var(--hero-cta-cream);
  border-radius: var(--hero-cta-bar-radius);
  box-sizing: border-box;
  overflow: visible;
  isolation: isolate;
}

/* ── Hero CTA bar — background FX layer ──────────────────────────────
   Replaces the previous magic-glow border with a subtler glass look:
   a horizontally sweeping orange scan line (mirrors the benchmarks'
   .issues-scan) + gradual blur bands on the left/right edges that fade
   toward the center (mirrors .issues-gblur, rotated 90°). Content
   (field + scan button) stays above on the bar's own z-index stack. */
.hero-cta-bar-fx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* No ambient blobs — a conversion-focused input shouldn't compete with
   its own CTA. We keep only the side edge-blur bands (glass touch) so
   the bar still reads as premium glass, but nothing animated distracts
   the eye from the orange "Free scan" button. */

/* Side blur bands — mirror of .issues-gblur but oriented horizontally.
   Four stacked backdrop-filter layers per side, each masked to a
   progressive slice, giving a smooth frosted falloff from the edge
   into the center. Keeps the bar feeling like frosted glass even on
   a flat cream background. */
.hero-cta-bar-gblur {
  position: absolute;
  top: 0; bottom: 0;
  width: 3.2rem;
  pointer-events: none;
}
.hero-cta-bar-gblur--left  { left: 0; }
.hero-cta-bar-gblur--right { right: 0; }
.hero-cta-bar-gblur > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-cta-bar-gblur--left  > span:nth-child(1) {
  -webkit-backdrop-filter: blur(0.125rem); backdrop-filter: blur(0.125rem);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 25%, black 50%, transparent 75%);
          mask-image: linear-gradient(to left, transparent 0%, black 25%, black 50%, transparent 75%);
}
.hero-cta-bar-gblur--left  > span:nth-child(2) {
  -webkit-backdrop-filter: blur(0.3rem); backdrop-filter: blur(0.3rem);
  -webkit-mask-image: linear-gradient(to left, transparent 25%, black 50%, black 75%, transparent 100%);
          mask-image: linear-gradient(to left, transparent 25%, black 50%, black 75%, transparent 100%);
}
.hero-cta-bar-gblur--left  > span:nth-child(3) {
  -webkit-backdrop-filter: blur(0.7rem); backdrop-filter: blur(0.7rem);
  -webkit-mask-image: linear-gradient(to left, transparent 50%, black 75%, black 100%);
          mask-image: linear-gradient(to left, transparent 50%, black 75%, black 100%);
}
.hero-cta-bar-gblur--left  > span:nth-child(4) {
  -webkit-backdrop-filter: blur(1.25rem); backdrop-filter: blur(1.25rem);
  -webkit-mask-image: linear-gradient(to left, transparent 75%, black 100%);
          mask-image: linear-gradient(to left, transparent 75%, black 100%);
}
.hero-cta-bar-gblur--right > span:nth-child(1) {
  -webkit-backdrop-filter: blur(0.125rem); backdrop-filter: blur(0.125rem);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 50%, transparent 75%);
          mask-image: linear-gradient(to right, transparent 0%, black 25%, black 50%, transparent 75%);
}
.hero-cta-bar-gblur--right > span:nth-child(2) {
  -webkit-backdrop-filter: blur(0.3rem); backdrop-filter: blur(0.3rem);
  -webkit-mask-image: linear-gradient(to right, transparent 25%, black 50%, black 75%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 25%, black 50%, black 75%, transparent 100%);
}
.hero-cta-bar-gblur--right > span:nth-child(3) {
  -webkit-backdrop-filter: blur(0.7rem); backdrop-filter: blur(0.7rem);
  -webkit-mask-image: linear-gradient(to right, transparent 50%, black 75%, black 100%);
          mask-image: linear-gradient(to right, transparent 50%, black 75%, black 100%);
}
.hero-cta-bar-gblur--right > span:nth-child(4) {
  -webkit-backdrop-filter: blur(1.25rem); backdrop-filter: blur(1.25rem);
  -webkit-mask-image: linear-gradient(to right, transparent 75%, black 100%);
          mask-image: linear-gradient(to right, transparent 75%, black 100%);
}

.hero-cta-field-col {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  z-index: 1;
}

.hero-cta-scan-slot {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: center;
  padding: 0;
  z-index: 3;
  overflow: visible;
}

.hero-cta-bar .hero-cta-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.15em;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin: 0;
}

.hero-cta-bar .hero-cta-field:focus-within {
  box-shadow: none;
}

.hero-cta-bar .hero-cta-prefix {
  font-family: var(--font-hero-secondary);
  font-size: 12px;
  font-weight: 300;
  color: rgba(198, 139, 129, 0.85);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  flex-shrink: 0;
}

.hero-cta-bar .hero-cta-field input[type='text'] {
  flex: 1;
  min-width: 0;
  height: auto;
  min-height: 0;
  font-family: var(--font-hero-secondary);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: rgba(198, 139, 129, 0.92);
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
}

.hero-cta-bar .hero-cta-field input:not(:placeholder-shown) {
  color: var(--red);
  text-transform: none;
}

.hero-cta-bar .hero-cta-field input::placeholder {
  color: rgba(198, 139, 129, 0.72);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.hero-cta-bar .btn-hero-scan {
  align-self: center;
  flex-shrink: 0;
  margin: 0;
  overflow: visible;
  width: var(--hero-cta-btn-w);
  min-width: var(--hero-cta-btn-w);
  max-width: var(--hero-cta-btn-w);
  height: var(--hero-cta-btn-h);
}

/* Tags / divider / stats: .hero-viewport-foot — margin-top: auto pins to viewport bottom */

.hero-viewport-foot {
  width: 100%;
  max-width: var(--hero-rail-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  padding-top: clamp(24px, 3.5vh, 48px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.hero-viewport-foot > .hero-ab-layer {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
}
.hero-viewport-foot .hero-ab-tags {
  width: fit-content;
  max-width: 96%;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.hero-viewport-foot .hero-ab-line {
  width: 72.5%;
  max-width: 96%;
  height: 1px;
  min-height: 1px;
  margin: var(--hero-gap-tags-line) auto 0;
  padding: 0;
  border: none;
  border-top: 1px solid rgba(198, 139, 129, 0.45);
  background: transparent;
}
.hero-viewport-foot .hero-ab-stats {
  width: fit-content;
  max-width: 96%;
  min-height: 0;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-artboard h1 {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0 0.22em;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(40px, 11cqi, 140px);
}

.hero-artboard .hero-subtitle-wrap {
  width: auto;
  max-width: 100%;
  margin: 0;
  line-height: 1.55;
  font-family: var(--font-hero-secondary);
  font-weight: 300;
  font-size: var(--hero-tag-font-size);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hero-muted-burgundy);
  white-space: normal;
  text-align: center;
  font-optical-sizing: auto;
}

.hero-artboard .hero-cta-field-col .scan-hero-error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  width: auto;
}

.hero-artboard .btn-hero-scan .btn-svg {
  display: none;
}
.hero-cta-bar .btn-hero-scan:hover .btn-svg {
  transform: none;
  filter: none;
}

.hero-artboard .btn-hero-scan:active .btn-svg {
  transform: scale(0.97);
}

.hero-viewport-foot .tags {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  gap: clamp(4px, 0.65vw, 8px);
  flex-wrap: nowrap;
  justify-content: center;
}

.hero-viewport-foot .tag {
  padding: 4px 10px;
  min-height: 0;
  font-size: clamp(6px, 0.62vw, 9px);
}

.hero-viewport-foot .stats {
  width: auto;
  max-width: 96%;
  margin: 0;
  padding: 0;
  gap: clamp(8px, 1.1vw, 20px);
  flex-wrap: nowrap;
  justify-content: center;
}

.hero-viewport-foot .stat-n {
  font-size: clamp(12px, 1.25vw, 20px);
}

.hero-viewport-foot .stat-l {
  font-size: clamp(6px, 0.55vw, 8px);
  margin-top: 2px;
  letter-spacing: 0.1em;
}

h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7.5vw, 138px);
  line-height: 0.92;
  text-align: center;
  letter-spacing: .02em;
  margin-bottom: 0;
  white-space: nowrap;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 640px) {
  h1 { white-space: normal; }
}
.r { color: var(--red); }
.o { color: var(--orange); }

/* Soft blur-up + rise + ease (nav stays sharp — no blur on chrome) */
.hero-surround {
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0) scale(0.985);
  filter: blur(5px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.78s ease;
}
#nav.hero-surround {
  filter: none;
  /* Only the hero-surround intro transitions (opacity / transform / filter)
     belong here. Geometric properties (top/left/right/max-width/radius/
     padding/shadow/border-color) are written inline from js/scanner.js every
     scroll frame — any CSS transition on them would race those writes and
     desync the nav's silhouette from the panel's clip-path silhouette (the
     "two separate layers" bug). */
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-surround.on {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
#nav.hero-surround.on {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-surround {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Word-by-word hero headline animation */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  transition:
    opacity 0.48s var(--hero-word-ease),
    transform 0.62s var(--hero-word-ease);
}
.hero-word.on {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-juice {
  transform: translateY(60px) scale(0.4);
  transition:
    opacity 0.35s var(--hero-word-ease),
    transform 1.1s var(--hero-word-ease),
    text-shadow 1.6s ease-out,
    color 0.35s ease-out;
  text-shadow: 0 0 0px var(--orange);
  color: var(--orange);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
}
.hero-juice.on {
  opacity: 1;
  transform: translateY(0) scale(1);
  text-shadow: 0 0 18px rgba(231,149,54,.3);
}
/* Po záři jen čistá oranžová — bez blob gradientů */
.hero-juice.settled {
  text-shadow: 0 0 0px rgba(231,149,54,0);
  transition: text-shadow 1.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .hero-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-juice { transform: none; transition: none; }
}

/* Modern secondary sans (Acumin Variable via Adobe Fonts + Source Sans 3 fallback) */
.hero-subtitle-wrap {
  margin: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-family: var(--font-hero-secondary);
  font-weight: 300;
  font-size: var(--hero-tag-font-size);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hero-muted-burgundy);
  line-height: 1.6;
  font-optical-sizing: auto;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

input::placeholder { color: rgba(146,0,15,.4); }

.btn {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 0.05px;
  top: 0px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
}
.btn-svg {
  display: block;
  width: 100%;
  height: auto;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.btn:not(.btn-hero-scan):hover .btn-svg { filter: brightness(0.85) hue-rotate(-10deg); }
.btn:active .btn-svg { transform: scale(0.97); }

.btn-hero-scan {
  position: relative;
  right: auto;
  top: auto;
  flex-shrink: 0;
  width: var(--hero-cta-btn-w);
  min-width: var(--hero-cta-btn-w);
  max-width: var(--hero-cta-btn-w);
  z-index: 2;
  margin-left: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hero-cta-btn-radius);
  background: var(--hero-framer-orange);
  box-shadow: var(--hero-cta-btn-shadow);
  transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-hero-scan:hover {
  filter: brightness(0.97);
}
.btn-hero-scan:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}
.btn-hero-scan .btn-svg {
  display: none;
  width: 100%;
  height: auto;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn-hero-scan:active .btn-svg {
  filter: none;
  transform: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease;
}
.btn-hero-scan-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0.65rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hero-framer-cream);
  text-align: center;
  pointer-events: none;
  line-height: 1;
}
.scan-hero-error {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
}

.tags {
  display: flex;
  gap: clamp(5px, 0.9vw, 10px);
  flex-wrap: nowrap;
  justify-content: center;
  margin-top: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  box-sizing: border-box;
}

.tag {
  font-family: 'DM Mono', monospace;
  font-size: var(--hero-action-tag-font-size);
  letter-spacing: var(--hero-action-tag-letter-spacing);
  text-transform: uppercase;
  padding: 5px 12px;
  min-height: 26px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--hero-tag-radius);
  border: 1px solid var(--hero-muted-burgundy);
  color: var(--hero-muted-burgundy);
  background: transparent;
  cursor: default;
}

.hero-divider {
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid rgba(198, 139, 129, 0.45);
  margin-top: var(--hero-gap-tags-line);
  flex-shrink: 0;
}

/* .hero-divider follows .hero-ab-line in the cascade — recenter on viewport foot rail */
.hero-viewport-foot .hero-ab-line.hero-divider {
  width: 72.5%;
  max-width: 96%;
  margin-top: var(--hero-gap-tags-line);
  margin-left: auto;
  margin-right: auto;
}

.stats {
  padding: clamp(6px, 1.1vh, 16px) clamp(32px, 5vw, 64px);
  display: flex;
  justify-content: center;
  gap: clamp(36px, 6vw, 72px);
  flex-shrink: 0;
  margin-top: var(--hero-gap-line-stats);
  width: 100%;
  max-width: min(100%, min(var(--hero-stats-rail-max), calc(100vw * 575 / var(--hero-artboard-w))));
  box-sizing: border-box;
}
.stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

/* Same node as .hero-ab-stats — beat generic .stats rail/max-width so row centers on rail */
.hero-viewport-foot .hero-ab-stats.stats {
  width: auto;
  max-width: min(96%, 900px);
  margin-top: var(--hero-gap-line-stats);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  justify-content: center;
}

@media (max-width: 760px) {
  .stage {
    padding: calc(var(--hero-padding-below-nav) + 20px) 20px max(12px, env(safe-area-inset-bottom, 0px));
    --hero-rail-max: none;
  }
  .hero-artboard {
    aspect-ratio: auto;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(18px, 5vw, 28px);
  }
  .hero-artboard > .hero-ab-layer {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100%;
  }
  .hero-ab-title {
    order: 1;
    min-height: clamp(72px, 18vw, 112px);
    align-items: center;
  }
  .hero-ab-title-line {
    order: 2;
    width: min(88%, 520px);
    margin-bottom: clamp(4px, 1vh, 10px);
  }
  .hero-ab-sub {
    order: 3;
    height: auto !important;
    white-space: normal;
    justify-content: center;
    text-align: center;
  }
  .hero-artboard .hero-subtitle-wrap {
    width: 100%;
    max-width: 100%;
    font-size: clamp(13px, 3.6vw, 16px);
    letter-spacing: 0.02em;
    padding-inline: 4px;
  }
  .hero-ab-cta {
    order: 4;
    max-width: 100%;
    padding-bottom: clamp(16px, 3vh, 28px);
  }
  .hero-cta-pill {
    max-width: 100%;
    padding-bottom: clamp(48px, 16vw, 72px);
  }
  .hero-cta-bar {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 0;
    padding: 14px 14px 16px;
    gap: 12px;
  }
  .hero-cta-scan-slot {
    width: 100%;
    justify-content: center;
    padding: 4px 0 0;
  }
  .hero-cta-bar-wrap .hero-cta-drip {
    right: auto;
    left: 50%;
    width: min(
      calc(var(--hero-cta-btn-w) * var(--hero-cta-melt-scale) * 1.05),
      calc(100% - 32px)
    );
    transform: translateX(-50%);
  }
  .hero-cta-bar .hero-cta-field {
    min-height: 44px;
    padding: 0 4px;
  }
  .hero-cta-bar .hero-cta-field:focus-within {
    box-shadow: none;
  }
  .hero-cta-bar .hero-cta-prefix {
    font-size: 12px;
  }
  .hero-cta-bar .hero-cta-field input[type='text'] {
    font-size: clamp(16px, 4.2vw, 19px);
  }
  .hero-cta-bar .btn-hero-scan {
    width: 100%;
    min-width: 0;
    max-width: min(280px, 100%);
    height: var(--hero-cta-btn-h);
    align-self: center;
  }
  .hero-viewport-foot {
    max-width: 100%;
    width: 100%;
    gap: 0;
  }
  .hero-viewport-foot .hero-ab-tags {
    width: 100% !important;
    max-width: 100%;
    justify-content: center;
    align-self: center;
  }
  .hero-viewport-foot .hero-ab-line {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-viewport-foot .hero-ab-stats {
    flex-wrap: wrap;
    align-self: center;
    width: 100% !important;
    max-width: 100%;
  }
  .hero-viewport-foot .tags {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    gap: 5px;
  }
  .hero-viewport-foot .tag {
    padding: 6px 11px;
    font-size: var(--hero-action-tag-font-size-sm);
    letter-spacing: var(--hero-action-tag-letter-spacing);
    min-height: 26px;
  }
  .hero-viewport-foot .stats {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 12px;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hero-viewport-foot .hero-ab-stats.stats {
    max-width: 100%;
    justify-content: center;
  }
  .hero-viewport-foot .stat-n {
    font-size: clamp(16px, 4vw, 22px);
  }
  .hero-viewport-foot .stat-l {
    font-size: 7px;
    letter-spacing: 0.08em;
  }
  .btn-hero-scan {
    min-width: min(220px, 88vw);
    max-width: 100%;
  }
}

.stat-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(18px, 1.85vw, 26px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
}
.stat-part { display: inline-block; }
.stat-part--o { color: var(--orange); }
.stat-part--r { color: var(--red); }
/* Full burgundy — not .hero-muted-burgundy */
.stat-l {
  font-family: var(--font-hero-secondary);
  font-size: clamp(9px, 0.85vw, 10px);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 5px;
  text-align: center;
  white-space: nowrap;
}

#scanLoading {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 30% 10%, rgba(146,0,15,.14), transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(247,146,30,.08), transparent 55%),
    linear-gradient(180deg, #1a0a09 0%, #0e0607 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  padding: 24px 20px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* When active, stack above #page-transition.flash (z-index 100) so the scan UI is always visible */
#scanLoading.on { opacity: 1; visibility: visible; z-index: 110; }

/* ── Scan loading: compact centered card ───────────────── */
.scan-load-card {
  width: 100%;
  max-width: 480px;
  padding: 30px 32px 26px;
  background: rgba(251,242,220,.035);
  border: 1px solid rgba(251,242,220,.09);
  border-radius: 22px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 30px 70px -28px rgba(0,0,0,.65),
    0 0 60px -16px rgba(247,146,30,.12);
  color: var(--parchment);
  animation: scanLoadFadeIn .55s cubic-bezier(.2,.8,.2,1);
}
@keyframes scanLoadFadeIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.scan-load-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.scan-load-logo {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251,242,220,.5);
  font-weight: 500;
}
.scan-load-logo b { color: var(--orange); font-weight: 600; }
.scan-load-status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  color: rgba(251,242,220,.6);
  text-transform: lowercase;
}
.scan-load-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px rgba(247,146,30,.6);
  animation: scanLoadDotPulse 1.6s ease-in-out infinite;
}
.scan-load-status-pill.is-complete .scan-load-dot {
  background: #96cecc; box-shadow: 0 0 10px rgba(150,206,204,.6);
  animation: none;
}
@keyframes scanLoadDotPulse {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1.1); }
}

.scan-load-hero {
  text-align: center;
  padding: 6px 0 22px;
}
.scan-load-pct {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 88px;
  line-height: .9;
  letter-spacing: .01em;
  color: var(--parchment);
  font-feature-settings: "tnum";
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}
.scan-load-pct small {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  line-height: 1;
  color: var(--orange);
  margin-top: 10px;
}
.scan-load-text {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(251,242,220,.55);
  margin: 4px 0 18px;
  min-height: 14px;
  transition: opacity .25s ease;
}
.scan-load-bar {
  height: 3px; width: 100%;
  background: rgba(251,242,220,.08);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.scan-load-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red) 0%, var(--orange) 60%, #ffb255 100%);
  border-radius: 100px;
  box-shadow: 0 0 12px rgba(247,146,30,.45);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
  position: relative;
  /* Shimmer ::after translates horizontally — must clip or it paints on the empty track */
  overflow: hidden;
}
.scan-load-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  animation: scanLoadBarShimmer 2.4s linear infinite;
  pointer-events: none;
}
@keyframes scanLoadBarShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.scan-load-body {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(251,242,220,.07);
}
.scan-load-faq-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251,242,220,.32);
  margin-bottom: 6px;
  text-align: center;
}

.scan-load-faq {
  display: flex; flex-direction: column;
}
.scan-load-faq-item {
  border-bottom: 1px solid rgba(251,242,220,.06);
}
.scan-load-faq-item:last-child { border-bottom: 0; }
.scan-load-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--parchment);
  font-family: inherit;
  transition: color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.scan-load-faq-q * { pointer-events: none; }
.scan-load-faq-q:hover { color: #fff; }
.scan-load-faq-q:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.scan-load-faq-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(251,242,220,.85);
  line-height: 1.35;
  flex: 1;
}
.scan-load-faq-item.is-open .scan-load-faq-title { color: var(--parchment); }
.scan-load-faq-icon {
  position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.scan-load-faq-icon::before,
.scan-load-faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: rgba(251,242,220,.45);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .2s, opacity .2s;
}
.scan-load-faq-icon::before {
  width: 10px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.scan-load-faq-icon::after {
  width: 1.5px; height: 10px;
  transform: translate(-50%, -50%);
}
.scan-load-faq-q:hover .scan-load-faq-icon::before,
.scan-load-faq-q:hover .scan-load-faq-icon::after { background: var(--orange); }
.scan-load-faq-item.is-open .scan-load-faq-icon::before { background: var(--orange); }
.scan-load-faq-item.is-open .scan-load-faq-icon::after {
  background: var(--orange);
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.scan-load-faq-a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease, padding .3s ease;
}
.scan-load-faq-item.is-open .scan-load-faq-a {
  max-height: 260px;
  opacity: 1;
  padding: 0 2px 14px;
}
.scan-load-faq-a p {
  margin: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(251,242,220,.58);
}

@media (max-width: 480px) {
  #scanLoading { padding: 16px 14px; }
  .scan-load-card { padding: 24px 22px 20px; border-radius: 18px; }
  .scan-load-top { margin-bottom: 18px; }
  .scan-load-pct { font-size: 72px; }
  .scan-load-pct small { font-size: 26px; margin-top: 8px; }
  .scan-load-text { font-size: 10px; margin: 2px 0 14px; }
  .scan-load-hero { padding: 4px 0 18px; }
  .scan-load-body { margin-top: 18px; padding-top: 14px; }
  .scan-load-faq-title { font-size: 13px; }
  .scan-load-faq-a p { font-size: 12px; }
}

#results {
  position: fixed; inset: 0;
  background: var(--ink);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease 0.25s;
  z-index: 50;
}
/* Seamless warm brown ambient behind the top dark zone
   (nav → hero → grade → revenue-leaks → radar). Sits above the flat ink
   background, scrolls with content, fades out above r6-main. */
#results .r6-top-zone {
  position: relative;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, #3a1614 0%, #21100e 35%, var(--ink) 72%, #0f0706 100%);
}
#results .r6-top-zone::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 40% at 80% 10%, rgba(247,146,30,.09), transparent 70%);
  pointer-events: none;
}
#results .r6-top-zone > * { position: relative; z-index: 1; }
#results.on { opacity: 1; visibility: visible; }

#page-transition {
  position: fixed; inset: 0;
  background: var(--parchment);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#page-transition.flash { opacity: 1; }

.btn-back {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); background: none; border: 1.5px solid rgba(146,0,15,.12); border-radius: 100px;
  padding: 7px 16px; cursor: pointer; transition: all .2s;
}
.btn-back:hover { background: var(--red); color: var(--parchment); border-color: var(--red); }
.btn-grab {
  background: var(--orange); color: white; border: none; border-radius: 100px;
  padding: 9px 24px; font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  letter-spacing: .06em; cursor: pointer; transition: all .2s;
  box-shadow: 0 3px 14px rgba(255,132,0,.2);
}
.btn-grab:hover { background: var(--grove); transform: translateY(-1px); }
.btn-grab:active { transform: scale(.97); }

/* Scan results V6 (grabfruits-results-v6) */
#results .r6-nav {
  position: sticky; top: 0; z-index: 80;
  background: rgba(26,10,9,.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(251,242,220,.06);
  padding: 0 28px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
#results .r6-logo {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em;
  color: var(--parchment); cursor: pointer; text-decoration: none;
}
#results .r6-logo b { color: var(--orange); font-weight: 400; }
#results .r6-nav-r { display: flex; align-items: center; gap: 10px; }
#results .r6-btn-back {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(251,242,220,.5); background: none; border: 1px solid rgba(251,242,220,.12);
  border-radius: 100px; padding: 7px 16px; cursor: pointer; transition: all .2s;
}
#results .r6-btn-back:hover { background: rgba(251,242,220,.08); color: var(--parchment); }
#results .r6-btn-cta {
  background: var(--orange); color: white; border: none; border-radius: 100px;
  padding: 9px 22px; font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  letter-spacing: .05em; cursor: pointer; transition: all .2s;
}
#results .r6-btn-cta:hover { background: #e8850a; }
#results .r6-hero-band {
  background: transparent; padding: 44px 28px 36px;
  display: flex; flex-direction: column; align-items: center;
}
#results .r6-hb-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 10px;
}
#results .r6-hb-domain {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 6vw, 52px);
  color: var(--parchment); letter-spacing: .02em; text-align: center; line-height: 1;
  word-break: break-all;
}
#results .r6-hb-domain b { color: var(--orange); font-weight: 400; }
#results .r6-hb-url {
  font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(251,242,220,.5); margin-top: 4px;
  max-width: 100%; padding: 0 12px; box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#results .r6-hb-share-wrap {
  display: flex; justify-content: center; margin: 16px 0 0;
}
#results .r6-hb-share-wrap[hidden] { display: none !important; }
#results .r6-btn-share-pdf {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: var(--parchment);
  background: rgba(251,242,220,.06);
  border: 1px solid rgba(251,242,220,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 100px; padding: 11px 22px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .22s cubic-bezier(.2,.8,.2,1);
}
#results .r6-btn-share-pdf:hover {
  background: var(--orange); color: var(--ink); border-color: var(--orange);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(247,146,30,.5);
}
#results .r6-btn-share-pdf-icon { font-size: 14px; line-height: 1; }
#results .r6-btn-share-pdf:disabled { opacity: .5; cursor: wait; transform: none; }
#results .r6-hb-hook {
  font-size: 14px; font-weight: 400; color: rgba(251,242,220,.42);
  max-width: 560px; text-align: center; line-height: 1.6; margin-top: 14px;
}
#results .r6-grade-row { background: transparent; padding: 0 28px 40px; }
#results .r6-grade-cards {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
#results .r6-grade-card {
  border-radius: 14px; padding: 20px 16px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: transform .2s;
}
#results .r6-grade-card:hover { transform: translateY(-2px); }
#results .r6-gc-grade {
  font-family: 'Bebas Neue', sans-serif; font-size: 52px; line-height: 1; letter-spacing: -.02em;
}
#results .r6-gc-val {
  font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 500; margin-top: 2px;
}
#results .r6-gc-name {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  margin-top: 8px; opacity: .6;
}
#results .r6-gc-bad { background: #3d1111; }
#results .r6-gc-bad .r6-gc-grade { color: #f08080; }
#results .r6-gc-bad .r6-gc-val, #results .r6-gc-bad .r6-gc-name { color: #f0a0a0; }
#results .r6-gc-mid { background: #3a2510; }
#results .r6-gc-mid .r6-gc-grade { color: var(--orange); }
#results .r6-gc-mid .r6-gc-val, #results .r6-gc-mid .r6-gc-name { color: #e0b070; }
#results .r6-gc-good { background: #102a2a; }
#results .r6-gc-good .r6-gc-grade { color: var(--teal); }
#results .r6-gc-good .r6-gc-val, #results .r6-gc-good .r6-gc-name { color: #90c8c6; }
#results .r6-gc-juice { background: var(--orange); }
#results .r6-gc-juice .r6-gc-grade { color: white; text-shadow: 0 2px 8px rgba(169,99,37,.4); }
#results .r6-gc-juice .r6-gc-val { color: rgba(255,255,255,.9); }
#results .r6-gc-juice .r6-gc-name { color: rgba(255,255,255,.75); }

#results .r6-radar-section { background: transparent; padding: 0 28px 48px; }
#results .r6-radar-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 40px; border-top: 1px solid rgba(251,242,220,.06);
}
#results .r6-radar-h {
  font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--parchment);
  letter-spacing: .03em; margin-bottom: 4px; text-align: center;
}
#results .r6-radar-h b { color: var(--orange); font-weight: 400; }
#results .r6-radar-sub {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em;
  color: rgba(251,242,220,.5); margin-bottom: 24px; text-align: center;
  max-width: 480px; line-height: 1.4;
}
#results .r6-radar-stage { width: 100%; max-width: 560px; aspect-ratio: 1/1; position: relative; touch-action: none; overflow: visible; }
#results .r6-radar-stage canvas { width: 100%; height: 100%; display: block; overflow: visible; }
#results .r6-radar-legend { display: flex; justify-content: center; gap: 28px; margin-top: 20px; }
#results .r6-rl-item { display: flex; align-items: center; gap: 8px; }
#results .r6-rl-dot { width: 10px; height: 10px; border-radius: 50%; }
#results .r6-rl-you { background: var(--orange); }
#results .r6-rl-avg { background: var(--teal); opacity: .5; }
#results .r6-rl-label {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(251,242,220,.55);
}
#results .r6-rl-label strong { color: rgba(251,242,220,.6); font-weight: 500; }

#results .r6-main {
  background: var(--parchment); border-radius: 32px 32px 0 0;
  padding-bottom: 40px;
  position: relative;
  margin-top: -24px;
  box-shadow: 0 -40px 80px -40px rgba(26,10,9,.5);
}
#results .r6-main::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, rgba(251,242,220,.55), rgba(251,242,220,0));
  border-radius: 32px 32px 0 0;
  pointer-events: none;
}
#results .r6-field-section {
  max-width: 1040px; margin: 0 auto;
  padding: 72px 28px 16px;
  position: relative;
}
#results .r6-field-inner { display: flex; flex-direction: column; }
#results .r6-field-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 8px;
}
#results .r6-field-title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 4vw, 40px);
  color: var(--red); letter-spacing: .02em; margin: 0 0 6px;
}
#results .r6-field-title b { color: var(--ink); font-weight: 400; }
#results .r6-field-sub {
  font-size: 13px; color: rgba(26,10,9,.58); font-weight: 300; line-height: 1.55;
  margin-bottom: 26px; max-width: 640px;
}
#results .r6-field-sub strong { color: var(--red); font-weight: 600; }
#results .r6-field-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 1024px) and (min-width: 901px) {
  #results .r6-field-grid { grid-template-columns: repeat(2, 1fr); }
}
#results .r6-fc {
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit;
  background: white; border: 1px solid rgba(146,0,15,.07); border-radius: 14px;
  padding: 16px 16px 14px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
#results .r6-fc:hover {
  transform: translateY(-2px);
  border-color: rgba(255,132,0,.32);
  box-shadow: 0 10px 28px rgba(146,0,15,.08);
}
#results .r6-fc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#results .r6-fc-tag {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; background: rgba(146,0,15,.06); color: var(--red);
  font-weight: 500;
}
#results .r6-fc-priority {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; font-weight: 500;
}
#results .r6-fc-high .r6-fc-priority { background: rgba(217,85,85,.12); color: #b34040; }
#results .r6-fc-mid .r6-fc-priority { background: rgba(247,146,30,.12); color: #c67712; }
#results .r6-fc-low .r6-fc-priority { background: rgba(108,192,190,.16); color: #3a8a88; }
#results .r6-fc-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 19px; color: var(--ink);
  letter-spacing: .02em; line-height: 1.08; margin-top: 2px;
}
#results .r6-fc-fit-wrap { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
#results .r6-fc-fit-bar {
  flex: 1; height: 5px; background: rgba(146,0,15,.06); border-radius: 3px; overflow: hidden;
}
#results .r6-fc-fit-bar span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--orange), #ffb255);
  transition: width 1.1s cubic-bezier(.16,1,.3,1) .3s;
}
#results .r6-fc-high .r6-fc-fit-bar span { background: linear-gradient(90deg, #c04545, #e96a6a); }
#results .r6-fc-low .r6-fc-fit-bar span { background: linear-gradient(90deg, #6cc0be, #8fd4d2); }
#results .r6-fc-fit-val {
  font-family: 'Bebas Neue', sans-serif; font-size: 19px; color: var(--red);
  letter-spacing: .02em; line-height: 1;
}
#results .r6-fc-fit-val small {
  font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(146,0,15,.45); margin-left: 3px; font-weight: 400;
}
#results .r6-fc-why {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px;
  color: rgba(42,18,16,.68); padding-top: 12px; margin-top: 4px;
  border-top: 1px solid rgba(146,0,15,.08);
  line-height: 1.5; font-weight: 400;
}
#results .r6-fc-high .r6-fc-why { color: rgba(42,18,16,.78); }
#results .r6-field-footnote {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(26,10,9,.35); margin-top: 22px; text-align: center;
}

#results .r6-bench-section { max-width: 900px; margin: 0 auto; padding: 40px 28px 12px; }
#results .r6-bench-h {
  font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--red);
  letter-spacing: .03em; margin-bottom: 6px;
}
#results .r6-bench-h b { color: var(--orange); font-weight: 400; }
#results .r6-bench-sub {
  font-size: 13px; color: rgba(146,0,15,.5); margin-bottom: 28px; line-height: 1.5;
}
#results .r6-bench-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#results .r6-bench-card {
  background: white; border: 1.5px solid rgba(146,0,15,.05); border-radius: 14px;
  padding: 22px 20px 18px; transition: border-color .2s;
}
#results .r6-bench-card:hover { border-color: rgba(146,0,15,.12); }
#results .r6-bc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#results .r6-bc-icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 15px; color: white; font-weight: 400;
}
#results .r6-bci-seo { background: var(--red); }
#results .r6-bci-geo { background: var(--orange); }
#results .r6-bci-conv { background: var(--ink); }
#results .r6-bc-label {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(146,0,15,.5);
}
#results .r6-bc-grade { font-family: 'Bebas Neue', sans-serif; font-size: 32px; line-height: 1; }
#results .r6-bc-bar-wrap {
  position: relative; height: 14px; border-radius: 7px;
  background: rgba(146,0,15,.04); overflow: visible; margin-bottom: 12px;
}
#results .r6-bc-bar-fill {
  height: 100%; border-radius: 7px; width: 0;
  transition: width 1.2s cubic-bezier(.16,1,.3,1) .4s; position: relative; z-index: 2;
}
#results .r6-bc-avg-line {
  position: absolute; top: -3px; bottom: -3px; width: 2.5px; border-radius: 2px;
  background: var(--teal); z-index: 3;
  transition: left 1s cubic-bezier(.16,1,.3,1) .3s;
}
#results .r6-bc-avg-tag {
  position: absolute; top: -20px; transform: translateX(-50%);
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em;
  color: var(--teal); white-space: nowrap;
  transition: left 1s cubic-bezier(.16,1,.3,1) .3s;
}
#results .r6-bc-metrics { display: flex; flex-direction: column; gap: 8px; }
#results .r6-bcm-row { display: flex; align-items: center; gap: 8px; }
#results .r6-bcm-name { font-size: 12px; color: rgba(42,18,16,.55); flex: 1; font-weight: 400; }
#results .r6-bcm-bar-track {
  width: 80px; height: 6px; background: rgba(146,0,15,.04); border-radius: 3px;
  overflow: hidden; flex-shrink: 0;
}
#results .r6-bcm-bar-fill {
  height: 100%; border-radius: 3px; width: 0;
  transition: width 1s cubic-bezier(.16,1,.3,1) .5s;
}
#results .r6-bcm-val {
  font-family: 'Bebas Neue', sans-serif; font-size: 16px; width: 28px;
  text-align: right; line-height: 1; flex-shrink: 0;
}

/* ── Compact dashboard zone (4 pillar sections) ───────── */
#results .r6-dash-zone {
  max-width: 1080px; margin: 56px auto 0;
  padding: 0 28px;
  position: relative;
}
#results .r6-dash-head {
  max-width: 720px; margin: 0 auto 32px; text-align: center;
}
#results .r6-dash-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(146,0,15,.55);
  margin-bottom: 12px;
}
#results .r6-dash-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 4.2vw, 52px); line-height: .95; letter-spacing: .01em;
  color: var(--ink); margin: 0 0 12px;
}
#results .r6-dash-title b { color: var(--red); font-weight: 400; }
#results .r6-dash-sub {
  font-size: 14px; color: rgba(26,10,9,.55); line-height: 1.55; margin: 0;
  max-width: 560px; margin-left: auto; margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════
   Command Center — pillar readouts + unified signal feed
   ══════════════════════════════════════════════════════════════ */
#results .r6-cmd {
  background: linear-gradient(180deg, #ffffff 0%, rgba(253,250,241,.96) 100%);
  border: 1px solid rgba(26,10,9,.07);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 44px -26px rgba(26,10,9,.18),
    0 36px 90px -48px rgba(146,0,15,.1);
}

/* Pillar readouts — instrument cluster */
#results .r6-cmd-pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-bottom: 1px solid rgba(26,10,9,.07);
  background: linear-gradient(180deg, rgba(251,242,220,.4) 0%, rgba(251,242,220,0) 100%);
}
#results .r6-cmd-pillar {
  appearance: none;
  border: none;
  padding: 22px 20px 20px;
  text-align: left;
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  transition: background .22s, transform .22s;
  border-right: 1px solid rgba(26,10,9,.06);
  background: var(--cmd-tint, transparent);
}
#results .r6-cmd-pillar:last-child { border-right: none; }
#results .r6-cmd-pillar:hover {
  background: var(--cmd-tint-hover, rgba(251,242,220,.55));
}
#results .r6-cmd-pillar:focus-visible {
  outline: 2px solid var(--orange); outline-offset: -2px;
}
#results .r6-cmd-pillar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--cmd-accent, rgba(26,10,9,.12));
  opacity: .35;
  transition: opacity .22s cubic-bezier(.2,.8,.2,1), height .22s;
}
#results .r6-cmd-pillar.is-active::before { opacity: 1; height: 4px; }
#results .r6-cmd-pillar.is-active {
  background: var(--cmd-tint-active, rgba(251,242,220,.85));
}

#results .r6-cmd-p-all  {
  --cmd-accent: var(--ink);
  --cmd-tint: rgba(26,10,9,.02);
  --cmd-tint-hover: rgba(26,10,9,.05);
  --cmd-tint-active: rgba(26,10,9,.07);
}
#results .r6-cmd-p-eeat {
  --cmd-accent: #4a7c7a;
  --cmd-tint: rgba(74,124,122,.04);
  --cmd-tint-hover: rgba(74,124,122,.09);
  --cmd-tint-active: rgba(74,124,122,.13);
}
#results .r6-cmd-p-seo  {
  --cmd-accent: var(--red);
  --cmd-tint: rgba(146,0,15,.04);
  --cmd-tint-hover: rgba(146,0,15,.08);
  --cmd-tint-active: rgba(146,0,15,.11);
}
#results .r6-cmd-p-geo  {
  --cmd-accent: #d17a00;
  --cmd-tint: rgba(255,132,0,.05);
  --cmd-tint-hover: rgba(255,132,0,.1);
  --cmd-tint-active: rgba(255,132,0,.14);
}
#results .r6-cmd-p-conv {
  --cmd-accent: #6b2a24;
  --cmd-tint: rgba(107,42,36,.04);
  --cmd-tint-hover: rgba(107,42,36,.08);
  --cmd-tint-active: rgba(107,42,36,.12);
}

#results .r6-cmd-p-top {
  display: flex; align-items: baseline; gap: 10px;
}
#results .r6-cmd-p-idx {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px; letter-spacing: .04em;
  color: var(--cmd-accent); font-weight: 400;
  line-height: 1;
  opacity: .9;
}
#results .r6-cmd-p-name {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cmd-accent); font-weight: 600;
  opacity: .85;
}
#results .r6-cmd-pillar.is-active .r6-cmd-p-idx,
#results .r6-cmd-pillar.is-active .r6-cmd-p-name { opacity: 1; }
#results .r6-cmd-p-score {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px; line-height: .85; letter-spacing: .01em;
  color: var(--cmd-accent);
  font-feature-settings: "tnum";
}
#results .r6-cmd-p-score small {
  font-size: 13px;
  color: var(--cmd-accent);
  opacity: .5;
  margin-left: 2px; letter-spacing: .02em;
}
#results .r6-cmd-p-bar {
  height: 4px; border-radius: 100px;
  background: rgba(26,10,9,.06);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(26,10,9,.05);
}
#results .r6-cmd-p-bar span {
  display: block; height: 100%; width: 0%;
  background: var(--cmd-accent);
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 8px -2px var(--cmd-accent);
}
#results .r6-cmd-p-counts {
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(26,10,9,.55);
  line-height: 1.4;
}
#results .r6-cmd-p-counts b {
  font-family: 'Bebas Neue', sans-serif; font-size: 13px;
  font-weight: 400; letter-spacing: .02em;
  color: var(--ink);
}
#results .r6-cmd-p-counts .r6-cmd-crit { color: #c04545; }
#results .r6-cmd-p-counts .r6-cmd-warn { color: #c67712; }

/* Signal feed */
#results .r6-cmd-feed-wrap { padding: 20px 22px 22px; }
#results .r6-cmd-feed-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(26,10,9,.1);
}
#results .r6-cmd-feed-label {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(26,10,9,.55); font-weight: 500;
}
#results .r6-cmd-feed-count {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(26,10,9,.4); font-weight: 500;
}
#results .r6-cmd-feed {
  display: flex; flex-direction: column; gap: 6px;
}
#results .r6-cmd-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(251,242,220,.3);
  border: 1px solid rgba(26,10,9,.05);
  transition: background .2s, border-color .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
#results .r6-cmd-row:hover {
  background: #fff;
  border-color: rgba(255,132,0,.3);
  transform: translateX(2px);
}
#results .r6-cmd-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--row-accent, transparent);
}
#results .r6-cmd-row-fail { --row-accent: #d95555; }
#results .r6-cmd-row-warn { --row-accent: #f7921e; }
#results .r6-cmd-row-pass { --row-accent: #6cc0be; }

#results .r6-cmd-row-sev {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
#results .r6-cmd-row-fail .r6-cmd-row-sev { background: #fbe6e6; color: #9e2b2b; }
#results .r6-cmd-row-warn .r6-cmd-row-sev { background: #fdecd4; color: #a96325; }
#results .r6-cmd-row-pass .r6-cmd-row-sev { background: #e4f3f2; color: #3a8a88; }

#results .r6-cmd-row-tag {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  padding: 5px 9px; border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(var(--pillar-rgb, 26 10 9), .08);
  color: var(--pillar-color, rgba(26,10,9,.6));
  border: 1px solid rgba(var(--pillar-rgb, 26 10 9), .14);
}
#results .r6-cmd-row-p-eeat { --pillar-color: #4a7c7a; --pillar-rgb: 74 124 122; }
#results .r6-cmd-row-p-seo  { --pillar-color: var(--red); --pillar-rgb: 146 0 15; }
#results .r6-cmd-row-p-geo  { --pillar-color: var(--orange); --pillar-rgb: 255 132 0; }
#results .r6-cmd-row-p-conv { --pillar-color: #5a2420; --pillar-rgb: 90 36 32; }

#results .r6-cmd-row-body { min-width: 0; }
#results .r6-cmd-row-title {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35;
}
#results .r6-cmd-row-desc {
  font-size: 12px; color: rgba(26,10,9,.6); font-weight: 400;
  line-height: 1.5; margin-top: 3px;
}
#results .r6-cmd-row-impact {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
  padding: 4px 9px; border-radius: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
#results .r6-cmd-row-imp-high { background: #fbe6e6; color: #9e2b2b; }
#results .r6-cmd-row-imp-med  { background: #fdecd4; color: #a96325; }
#results .r6-cmd-row-imp-low  { background: rgba(186,194,140,.22); color: #5a6432; }

#results .r6-cmd-empty {
  text-align: center;
  padding: 28px 20px;
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(26,10,9,.4); font-weight: 500;
}

#results .r6-cmd-unlock {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,132,0,.06);
  border: 1px dashed rgba(255,132,0,.32);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  text-align: left;
  width: 100%;
  appearance: none;
  font-family: inherit;
}
#results .r6-cmd-unlock:hover {
  background: rgba(255,132,0,.1);
  border-color: rgba(255,132,0,.55);
  transform: translateY(-1px);
}
#results .r6-cmd-unlock:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px;
}
#results .r6-cmd-unlock-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255,132,0,.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#results .r6-cmd-unlock-icon svg { width: 15px; height: 15px; stroke: var(--orange); }
#results .r6-cmd-unlock-body { flex: 1; min-width: 0; }
#results .r6-cmd-unlock-count {
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ink);
  line-height: 1.35; font-weight: 500;
}
#results .r6-cmd-unlock-count b { color: var(--orange); font-weight: 600; }
#results .r6-cmd-unlock-sub {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(26,10,9,.42); margin-top: 3px;
}
#results .r6-cmd-unlock-arrow {
  font-family: 'DM Mono', monospace; font-size: 14px; color: var(--orange);
  flex-shrink: 0; transition: transform .2s;
}
#results .r6-cmd-unlock:hover .r6-cmd-unlock-arrow { transform: translateX(3px); }
#results .r6-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
#results .r6-section-block {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, rgba(253,250,241,.96) 100%);
  border: 1px solid rgba(26,10,9,.07);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 3px rgba(26,10,9,.03),
    0 14px 32px -22px rgba(26,10,9,.12);
  overflow: hidden;
  position: relative;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1);
}
#results .r6-section-block:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 6px rgba(26,10,9,.04),
    0 20px 44px -22px rgba(26,10,9,.16);
}
/* E-E-A-T spans both columns on desktop since it has the hero */
#results #secEeat { grid-column: 1 / -1; }

#results .r6-sb-header {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: flex-start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(26,10,9,.06);
  position: relative;
}
#results .r6-sb-header::before {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: -1px;
  height: 1px; background: linear-gradient(90deg, rgba(26,10,9,.1) 0%, transparent 70%);
}
#results .r6-sb-icon {
  display: none;
}
#results .r6-sb-seo  { --sb-accent: var(--red); }
#results .r6-sb-geo  { --sb-accent: var(--orange); }
#results .r6-sb-conv { --sb-accent: #3d1a15; }
#results .r6-sb-eeat { --sb-accent: #4a7c7a; }
#results #secSeo  { --sb-accent: var(--red); }
#results #secGeo  { --sb-accent: var(--orange); }
#results #secConv { --sb-accent: #3d1a15; }
#results #secEeat { --sb-accent: #4a7c7a; }
#results .r6-section-block::before {
  content: ''; position: absolute; left: 0; top: 22px; width: 3px; height: 28px;
  background: var(--sb-accent);
  border-radius: 0 3px 3px 0;
}

/* Content wrapper below the header */
#results .r6-section-block .r6-checks,
#results .r6-section-block .r6-eeat-hero,
#results .r6-section-block .r6-eeat-headline,
#results .r6-section-block .r6-eeat-scoreline {
  margin-left: 24px; margin-right: 24px;
}
#results .r6-section-block .r6-checks { padding: 20px 0 22px; }
/* ── E-E-A-T dashboard hero ─────────────────────── */
#results .r6-eeat-headline, #results .r6-eeat-scoreline { display: none; }
#results .r6-eeat-hero {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  padding: 24px 26px; border-radius: 16px; margin-bottom: 14px;
  background: linear-gradient(135deg, #fef9ed 0%, #fdf1de 100%);
  border: 1px solid rgba(146,0,15,.08);
  box-shadow: 0 1px 0 rgba(26,10,9,.02);
  position: relative; overflow: hidden;
}
#results .r6-eeat-hero::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--orange);
}
#results .r6-eeat-hero-bad::before { background: var(--red); }
#results .r6-eeat-hero-mid::before { background: var(--orange); }
#results .r6-eeat-hero-good::before { background: #6fa86f; }

#results .r6-eeat-score {
  display: flex; align-items: baseline; gap: 4px;
  padding-left: 10px;
}
#results .r6-eeat-score-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 88px; line-height: .8; letter-spacing: .01em;
  color: var(--red);
}
#results .r6-eeat-hero-bad .r6-eeat-score-num { color: var(--red); }
#results .r6-eeat-hero-mid .r6-eeat-score-num { color: #c4751f; }
#results .r6-eeat-hero-good .r6-eeat-score-num { color: #3a8a88; }
#results .r6-eeat-score-denom {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px;
  color: rgba(26,10,9,.35); letter-spacing: .04em;
}

#results .r6-eeat-hero-body { min-width: 0; }
#results .r6-eeat-hero-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(146,0,15,.55); margin-bottom: 8px;
}
#results .r6-eeat-hero-headline {
  font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.5;
  color: rgba(42,18,16,.82); font-weight: 400; margin-bottom: 14px;
  max-width: 640px;
}
#results .r6-eeat-hero-bar {
  height: 6px; border-radius: 100px;
  background: rgba(146,0,15,.08); overflow: hidden;
  margin-bottom: 14px; max-width: 420px;
}
#results .r6-eeat-hero-bar-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--red), var(--orange));
  border-radius: 100px;
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}
#results .r6-eeat-hero-good .r6-eeat-hero-bar-fill {
  background: linear-gradient(90deg, #6fa86f, #a8c77c);
}
#results .r6-eeat-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; }
#results .r6-eeat-chip {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 100px;
  background: rgba(26,10,9,.04); color: rgba(26,10,9,.55);
  display: inline-flex; align-items: center; gap: 5px;
}
#results .r6-eeat-chip b { font-family: 'Bebas Neue', sans-serif; font-size: 14px; font-weight: 400; }
#results .r6-eeat-chip-fail { background: rgba(146,0,15,.08); color: var(--red); }
#results .r6-eeat-chip-warn { background: rgba(247,146,30,.1); color: #c4751f; }
#results .r6-eeat-chip-pass { background: rgba(150,206,204,.15); color: #3a8a88; }

#results .r6-eeat-dist {
  height: 4px; border-radius: 100px; overflow: hidden;
  background: rgba(26,10,9,.05); margin-bottom: 14px;
  display: flex;
}
#results .r6-eeat-dist span { height: 100%; display: block; }

/* Compact v2 row variant for E-E-A-T with stat chip + fix line */
#results .r6-eeat-rowv2-stat {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 6px;
  background: rgba(146,0,15,.05); color: rgba(146,0,15,.55);
  margin-left: 8px; white-space: nowrap;
}
#results .r6-eeat-rowv2-fix {
  font-size: 12px; color: rgba(42,18,16,.72); line-height: 1.55;
  margin-top: 8px; padding: 8px 12px; border-radius: 8px;
  background: rgba(150,206,204,.08); border-left: 2px solid var(--teal);
  display: flex; align-items: baseline; gap: 10px;
}
#results .r6-eeat-rowv2-fix-lbl {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: #3a8a88; font-weight: 500; flex-shrink: 0;
}
#results .r6-sb-title-area { min-width: 0; }
#results .r6-sb-title-area::before {
  display: block;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sb-accent); font-weight: 500;
  margin-bottom: 6px;
  opacity: .7;
}
#results #secEeat .r6-sb-title-area::before { content: '01 — Credibility'; }
#results #secSeo  .r6-sb-title-area::before { content: '02 — Findability'; }
#results #secGeo  .r6-sb-title-area::before { content: '03 — Local visibility'; }
#results #secConv .r6-sb-title-area::before { content: '04 — Conversion'; }
#results .r6-sb-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--ink);
  letter-spacing: .015em; line-height: 1;
}
#results .r6-sb-title b { color: var(--sb-accent); font-weight: 400; }
#results .r6-sb-subtitle {
  font-size: 12px; color: rgba(26,10,9,.5); margin-top: 6px;
  font-weight: 400; line-height: 1.5;
  max-width: 48ch;
}
#results .r6-sb-pill {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid transparent;
}
#results .r6-sb-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .8;
}
#results .r6-sp-bad { background: #fbeaea; color: #9e2b2b; border-color: rgba(158,43,43,.18); }
#results .r6-sp-mid { background: #fdf2e0; color: #a96325; border-color: rgba(169,99,37,.2); }
#results .r6-sp-good { background: #e9f5f4; color: #3a8a88; border-color: rgba(58,138,136,.22); }

#results .r6-checks { display: flex; flex-direction: column; }
#results .r6-checks-list {
  display: flex; flex-direction: column; gap: 8px;
}
#results .r6-check-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: 12px;
  background: #fdfaf1;
  border: 1px solid rgba(26,10,9,.06);
  transition: border-color .18s, background .18s, transform .18s;
}
#results .r6-check-row:hover {
  background: #fff;
  border-color: rgba(255,132,0,.3);
  transform: translateX(2px);
}
#results .r6-check-row-v2 { position: relative; }
#results .r6-check-row-v2::before {
  content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px;
  border-top-left-radius: 12px; border-bottom-left-radius: 12px;
  background: transparent; transition: background .18s;
}
#results .r6-check-row-v2.r6-check-fail::before { background: #d95555; }
#results .r6-check-row-v2.r6-check-warn::before { background: #f7921e; }
#results .r6-check-row-v2.r6-check-pass::before { background: #6cc0be; }
#results .r6-cr-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#results .r6-cr-title-row .r6-cr-title { flex: 0 1 auto; }
#results .r6-cr-title-row .r6-cr-tag {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(26,10,9,.05); color: rgba(26,10,9,.55);
  font-weight: 500;
}
#results .r6-cr-bars {
  display: inline-flex; gap: 3px; align-items: flex-end;
}
#results .r6-cr-bars span {
  display: inline-block; width: 4px; height: 9px; border-radius: 1px;
  background: rgba(26,10,9,.1);
}
#results .r6-cr-bars span:nth-child(2) { height: 13px; }
#results .r6-cr-bars span:nth-child(3) { height: 17px; }
#results .r6-check-fail .r6-cr-bars span.on { background: #d95555; }
#results .r6-check-warn .r6-cr-bars span.on { background: #f7921e; }
#results .r6-check-pass .r6-cr-bars span.on { background: #6cc0be; }

/* ── Section summary dashboard strip ──────────────────────────── */
#results .r6-sec-summary {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px; border-radius: 12px; margin-bottom: 18px;
  background: rgba(251,242,220,.4);
  border: 1px solid rgba(26,10,9,.06);
}
#results .r6-sec-bad { background: rgba(217,85,85,.05); border-color: rgba(217,85,85,.14); }
#results .r6-sec-mid { background: rgba(247,146,30,.05); border-color: rgba(247,146,30,.16); }
#results .r6-sec-good { background: rgba(108,192,190,.06); border-color: rgba(108,192,190,.2); }
#results .r6-ss-counts { display: flex; gap: 18px; align-items: baseline; }
#results .r6-ss-count {
  display: flex; align-items: baseline; gap: 6px;
}
#results .r6-ss-count strong {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: .85; letter-spacing: .02em;
}
#results .r6-ss-count span {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(26,10,9,.5); font-weight: 500;
}
#results .r6-ss-fail strong { color: #c04545; }
#results .r6-ss-warn strong { color: #c67712; }
#results .r6-ss-pass strong { color: #3a8a88; }
#results .r6-ss-bar {
  display: flex; height: 5px; border-radius: 100px; overflow: hidden;
  background: rgba(26,10,9,.06); width: 100%;
}
#results .r6-ss-bar span { display: block; height: 100%; transition: width .9s cubic-bezier(.16,1,.3,1) .2s; }
#results .r6-ss-seg-fail { background: linear-gradient(90deg, #c04545, #e06060); }
#results .r6-ss-seg-warn { background: linear-gradient(90deg, #d68020, #f7921e); }
#results .r6-ss-seg-pass { background: linear-gradient(90deg, #4fa3a0, #7fd0ce); }
#results .r6-ss-lead {
  font-family: 'DM Mono', monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(26,10,9,.55); line-height: 1.5;
  font-weight: 500;
}
#results .r6-ss-lead em { font-style: normal; color: rgba(26,10,9,.36); font-weight: 400; }

#results .r6-cr-status {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; flex-shrink: 0; margin-top: 1px;
}
#results .r6-cr-fail { background: #fbe6e6; color: #9e2b2b; box-shadow: inset 0 0 0 1px rgba(158,43,43,.15); }
#results .r6-cr-warn { background: #fdecd4; color: #a96325; box-shadow: inset 0 0 0 1px rgba(169,99,37,.18); }
#results .r6-cr-pass { background: #e4f3f2; color: #3a8a88; box-shadow: inset 0 0 0 1px rgba(58,138,136,.2); }
#results .r6-cr-body { min-width: 0; }
#results .r6-cr-title {
  font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35;
}
#results .r6-cr-desc {
  font-size: 12.5px; color: rgba(26,10,9,.62); font-weight: 400; line-height: 1.55; margin-top: 5px;
}
#results .r6-check-row-v2 .r6-cr-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; max-height: 3.2em;
  margin-top: 6px;
}
#results .r6-check-row-v2:hover .r6-cr-desc {
  -webkit-line-clamp: unset; max-height: none;
}
#results .r6-cr-right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-top: 2px;
}
#results .r6-cr-tag {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; background: rgba(26,10,9,.05); color: rgba(26,10,9,.55);
  font-weight: 500;
}
#results .r6-cr-impact {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; font-weight: 500;
}
#results .r6-ci-high { background: #fbe6e6; color: #9e2b2b; }
#results .r6-ci-med { background: #fdecd4; color: #a96325; }
#results .r6-ci-low { background: rgba(186,194,140,.22); color: #5a6432; }

/* ── Lock CTA (inline unlock row at the bottom of a section block) ─── */
#results .r6-lock-gate {
  margin: 4px 22px 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(26,10,9,.1);
}
#results .r6-lock-cta {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(251,242,220,.55);
  border: 1px solid rgba(26,10,9,.07);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
  text-align: left;
  width: 100%;
}
#results .r6-lock-cta:hover {
  background: rgba(251,242,220,.85);
  border-color: rgba(255,132,0,.35);
  transform: translateY(-1px);
}
#results .r6-lock-cta:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px;
}
#results .r6-lc-icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255,132,0,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#results .r6-lc-icon svg { width: 15px; height: 15px; stroke: var(--orange); }
#results .r6-lc-body { flex: 1; min-width: 0; }
#results .r6-lc-count {
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ink);
  line-height: 1.35; font-weight: 500;
}
#results .r6-lc-count b { color: var(--orange); font-weight: 600; }
#results .r6-lc-sub {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(26,10,9,.42); margin-top: 3px;
}
#results .r6-lc-arrow {
  font-family: 'DM Mono', monospace; font-size: 13px; color: var(--orange);
  flex-shrink: 0; transition: transform .2s;
}
#results .r6-lock-cta:hover .r6-lc-arrow { transform: translateX(3px); }

/* ── Mid CTA — glass pane matching dash cards ───────────────── */
#results .r6-mid-cta {
  max-width: 1080px;
  margin: 36px auto 0;
  padding: 0 28px;
}
#results .r6-mid-cta-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px 32px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(26,10,9,.96) 0%, rgba(42,18,16,.94) 100%);
  border: 1px solid rgba(255,132,0,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 18px 40px -24px rgba(26,10,9,.35),
    0 32px 80px -40px rgba(255,132,0,.18);
  overflow: hidden;
}
#results .r6-mid-cta-inner::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--orange), rgba(255,132,0,.2));
}
#results .r6-mid-cta-inner::after {
  content: ''; position: absolute; right: -60px; top: 50%;
  width: 240px; height: 240px; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255,132,0,.14) 0%, transparent 60%);
  pointer-events: none;
}
#results .r6-mc-body { position: relative; z-index: 1; min-width: 0; flex: 1; }
#results .r6-mc-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 8px;
}
#results .r6-mc-text {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 2.4vw, 28px);
  color: var(--parchment);
  letter-spacing: .015em; line-height: 1.1;
}
#results .r6-mc-text b { color: var(--orange); font-weight: 400; }

#results .r6-mc-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px; letter-spacing: .05em;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid rgba(255,132,0,.45);
  border-radius: 100px;
  cursor: pointer;
  position: relative; z-index: 1;
  flex-shrink: 0;
  box-shadow:
    0 10px 28px -10px rgba(247,146,30,.55),
    0 0 0 3px rgba(255,132,0,.1);
  transition: all .22s cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}
#results .r6-mc-btn:hover {
  background: var(--orange);
  color: var(--parchment);
  border-color: var(--orange);
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px -10px rgba(247,146,30,.7),
    0 0 0 4px rgba(255,132,0,.18);
}
#results .r6-mc-btn:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 4px;
}
#results .r6-mc-btn-arrow {
  font-size: 16px; transition: transform .22s ease;
}
#results .r6-mc-btn:hover .r6-mc-btn-arrow { transform: translateX(3px); }

/* ── Final CTA (redesigned) ──────────────────────── */
#results .r6-final-cta {
  background: radial-gradient(ellipse at top right, #5c1412 0%, var(--red) 40%, #4d1210 100%);
  padding: 72px 28px 120px; position: relative; overflow: hidden;
}
#results .r6-final-cta::before {
  content: ''; position: absolute; top: 0; right: -10%; width: 60%; height: 110%;
  background: radial-gradient(circle at center, rgba(247,146,30,.12), transparent 60%);
  pointer-events: none;
}
#results .r6-fcta-inner { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }
#results .r6-fcta-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center;
}
#results .r6-fcta-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 14px;
}
#results .r6-fcta-h {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 6.5vw, 76px);
  color: var(--parchment); line-height: .9; letter-spacing: .02em; margin-bottom: 18px;
}
#results .r6-fcta-h b { color: var(--orange); font-weight: 400; }
#results .r6-fcta-p {
  font-size: 15px; font-weight: 300; color: rgba(251,242,220,.65);
  line-height: 1.65; margin-bottom: 30px; max-width: 520px;
}
#results .r6-fcta-proof {
  display: flex; gap: 40px; border-top: 1px solid rgba(251,242,220,.12);
  padding-top: 24px; flex-wrap: wrap;
}
#results .r6-fcta-proof-item { min-width: 0; }
#results .r6-fcta-proof-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 48px; line-height: 1;
  color: var(--parchment); letter-spacing: .01em;
}
#results .r6-fcta-proof-num sub {
  font-size: 20px; vertical-align: baseline; color: var(--orange);
  font-weight: 400; margin-left: 2px;
}
#results .r6-fcta-proof-lbl {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(251,242,220,.5); margin-top: 6px;
}

#results .r6-fcta-right { display: flex; justify-content: flex-end; }
#results .r6-fcta-card {
  background: rgba(251,242,220,.06); border: 1px solid rgba(251,242,220,.14);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 18px; padding: 32px 30px 28px; max-width: 440px; width: 100%;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.45);
}
#results .r6-fcta-card-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 18px;
}
#results .r6-fcta-list {
  list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px;
}
#results .r6-fcta-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; font-weight: 300; color: rgba(251,242,220,.85); line-height: 1.5;
}
#results .r6-fcta-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; margin-top: 1px;
}
#results .r6-fcta-btn {
  appearance: none; border: none; width: 100%;
  background: var(--orange); color: var(--ink);
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .06em;
  padding: 18px 24px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  transition: all .22s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 10px 32px -10px rgba(247,146,30,.5);
}
#results .r6-fcta-btn:hover {
  background: var(--parchment);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -10px rgba(251,242,220,.35);
}
#results .r6-fcta-btn-arrow {
  font-size: 24px; line-height: 1;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
#results .r6-fcta-btn:hover .r6-fcta-btn-arrow { transform: translateX(4px); }
#results .r6-fcta-note {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(251,242,220,.5);
  text-align: center; margin-top: 14px;
}

#results .r6-fcta-trust {
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid rgba(251,242,220,.1);
  text-align: center;
}
#results .r6-fcta-trust-label {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(251,242,220,.4); margin-bottom: 14px;
}
#results .r6-fcta-trust-logos {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; color: rgba(251,242,220,.55);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 400;
}
#results .r6-fcta-trust-logos i {
  color: rgba(247,146,30,.4); font-style: normal; font-size: 10px;
}

/* ── Revenue Leaks (simplified) ──────────────────── */
#results .r6-rev-leaks {
  background: transparent;
  padding: 56px 28px 64px; position: relative; overflow: hidden;
  border-top: 1px solid rgba(251,242,220,.05);
  border-bottom: 1px solid rgba(251,242,220,.05);
}
#results .r6-rl-inner { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }
#results .r6-rl-head { margin-bottom: 32px; max-width: 640px; }
#results .r6-rl-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 10px;
}
#results .r6-rl-title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 4.5vw, 44px);
  color: var(--parchment); letter-spacing: .02em; line-height: .95;
}
#results .r6-rl-title b { color: var(--orange); font-weight: 400; }
#results .r6-rl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#results .r6-rl-disclaimer {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(251,242,220,.28); margin-top: 24px; text-align: center; line-height: 1.6;
  max-width: 720px; margin-left: auto; margin-right: auto;
}

#results .r6-rlc {
  background: rgba(251,242,220,.04);
  border: 1px solid rgba(251,242,220,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 18px; padding: 24px 24px 22px;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.6);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease;
}
#results .r6-rlc:hover {
  transform: translateY(-3px);
  border-color: rgba(251,242,220,.18);
}
#results .r6-rlc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
#results .r6-rlc-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .08em;
  color: rgba(251,242,220,.3);
}
#results .r6-rlc-metric {
  display: inline-block; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 100px; font-weight: 500;
}
#results .r6-rlc-title {
  font-size: 15px; font-weight: 500; color: var(--parchment); line-height: 1.4;
  margin-bottom: 20px; min-height: 42px; letter-spacing: -.005em;
}
#results .r6-rlc-stat-block {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(251,242,220,.08);
}
#results .r6-rlc-stat {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(58px, 5.6vw, 76px); line-height: .86; letter-spacing: .005em;
  color: var(--orange);
  margin-bottom: 10px;
  white-space: nowrap;
  font-feature-settings: "tnum";
}
#results .r6-rlc-stat-label {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(251,242,220,.55); line-height: 1.45;
}
#results .r6-rlc-fix {
  display: flex; align-items: baseline; gap: 10px; margin-top: auto;
}
#results .r6-rlc-fix-lbl {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); font-weight: 500;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(150,206,204,.1);
  flex-shrink: 0;
}
#results .r6-rlc-fix-text {
  font-size: 12px; color: rgba(251,242,220,.7); line-height: 1.5; font-weight: 300;
}

#results .r6-metric-conv { background: rgba(255,132,0,.15); color: var(--orange); }
#results .r6-metric-leads { background: rgba(150,206,204,.15); color: var(--teal); }
#results .r6-metric-ctr { background: rgba(186,194,140,.18); color: #b0c070; }
#results .r6-metric-trust { background: rgba(200,80,80,.15); color: #e08080; }
#results .r6-metric-ai { background: rgba(150,206,204,.15); color: var(--teal); }
#results .r6-metric-seo { background: rgba(186,194,140,.18); color: #b0c070; }
#results .r6-metric-traffic { background: rgba(186,194,140,.18); color: #b0c070; }

/* ── Kanban Action Plan (dark glass) ─────────────── */
#results .r6-plan-section {
  background: radial-gradient(ellipse at top left, #3a1614 0%, var(--ink) 55%, #12080a 100%);
  padding: 72px 28px 80px; position: relative; overflow: hidden;
}
#results .r6-plan-section::before {
  content: ''; position: absolute; top: -20%; right: -10%; width: 55%; height: 130%;
  background: radial-gradient(circle at center, rgba(247,146,30,.08), transparent 65%);
  pointer-events: none;
}
#results .r6-plan-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

#results .r6-plan-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 10px;
}
#results .r6-plan-title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 5vw, 52px);
  color: var(--parchment); letter-spacing: .02em; line-height: .95; margin-bottom: 10px;
}
#results .r6-plan-title b { color: var(--orange); font-weight: 400; }
#results .r6-plan-sub {
  font-size: 14px; color: rgba(251,242,220,.55); font-weight: 300;
  max-width: 620px; line-height: 1.6;
}

#results .r6-kan-topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 36px; flex-wrap: wrap;
}
#results .r6-kan-topbar-text { flex: 1 1 380px; min-width: 0; }
#results .r6-plan-pdf {
  appearance: none; background: rgba(251,242,220,.06);
  border: 1px solid rgba(251,242,220,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--parchment); font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  padding: 12px 20px; border-radius: 100px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .22s cubic-bezier(.2,.8,.2,1); white-space: nowrap; flex-shrink: 0;
  align-self: flex-start;
}
#results .r6-plan-pdf:hover {
  background: var(--orange); border-color: var(--orange); color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -10px rgba(247,146,30,.5);
}
#results .r6-plan-pdf-icon { font-size: 14px; line-height: 1; }
#results .r6-plan-pdf:disabled { opacity: .5; cursor: wait; transform: none; }

#results .r6-kan-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: start;
}
#results .r6-kan-col {
  background: rgba(251,242,220,.04);
  border: 1px solid rgba(251,242,220,.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 16px; padding: 20px 16px 18px;
  position: relative;
  box-shadow:
    0 4px 14px -6px rgba(0,0,0,.35),
    0 0 24px -8px rgba(251,242,220,.06);
  transition: box-shadow .3s cubic-bezier(.2,.8,.2,1), border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
/* Subtle all-around colored ambient — light, wraps the whole card */
#results .r6-kan-col-today {
  box-shadow:
    0 4px 14px -6px rgba(0,0,0,.35),
    0 0 32px -10px rgba(217,85,85,.18);
}
#results .r6-kan-col-week {
  box-shadow:
    0 4px 14px -6px rgba(0,0,0,.35),
    0 0 32px -10px rgba(247,146,30,.18);
}
#results .r6-kan-col-next {
  box-shadow:
    0 4px 14px -6px rgba(0,0,0,.35),
    0 0 32px -10px rgba(150,206,204,.18);
}
#results .r6-kan-col-ongoing {
  box-shadow:
    0 4px 14px -6px rgba(0,0,0,.35),
    0 0 32px -10px rgba(183,199,122,.18);
}
#results .r6-kan-col-today:hover   { box-shadow: 0 6px 18px -6px rgba(0,0,0,.4), 0 0 40px -10px rgba(217,85,85,.28); }
#results .r6-kan-col-week:hover    { box-shadow: 0 6px 18px -6px rgba(0,0,0,.4), 0 0 40px -10px rgba(247,146,30,.28); }
#results .r6-kan-col-next:hover    { box-shadow: 0 6px 18px -6px rgba(0,0,0,.4), 0 0 40px -10px rgba(150,206,204,.28); }
#results .r6-kan-col-ongoing:hover { box-shadow: 0 6px 18px -6px rgba(0,0,0,.4), 0 0 40px -10px rgba(183,199,122,.28); }

#results .r6-kan-col-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  margin-bottom: 18px;
}
#results .r6-kan-col-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1;
  letter-spacing: .04em;
  color: rgba(251,242,220,.3);
}
#results .r6-kan-col-today   .r6-kan-col-num { color: #ff6e6e; }
#results .r6-kan-col-week    .r6-kan-col-num { color: var(--orange); }
#results .r6-kan-col-next    .r6-kan-col-num { color: var(--teal); }
#results .r6-kan-col-ongoing .r6-kan-col-num { color: #b7c77a; }
#results .r6-kan-col-titles { min-width: 0; }
#results .r6-kan-col-label {
  font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .04em;
  color: var(--parchment); text-transform: uppercase; line-height: 1;
}
#results .r6-kan-col-sub {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(251,242,220,.4);
  margin-top: 4px;
}
#results .r6-kan-col-count {
  font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500;
  background: rgba(251,242,220,.08); color: rgba(251,242,220,.65);
  padding: 3px 9px; border-radius: 100px; min-width: 24px; text-align: center;
}
#results .r6-kan-col-body { display: flex; flex-direction: column; gap: 10px; }

#results .r6-kan-card {
  background: rgba(251,242,220,.04);
  border: 1px solid rgba(251,242,220,.08);
  border-radius: 12px; padding: 14px 14px 12px;
  position: relative; cursor: default;
  transition: all .22s cubic-bezier(.2,.8,.2,1);
}
#results .r6-kan-card:hover {
  transform: translateY(-3px);
  background: rgba(251,242,220,.07);
  border-color: rgba(251,242,220,.18);
  box-shadow: 0 16px 32px -16px rgba(0,0,0,.6);
}

#results .r6-kan-card-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
#results .r6-kan-sev-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(251,242,220,.04);
}
#results .r6-kan-sev-high .r6-kan-sev-dot { background: #ff5b5b; box-shadow: 0 0 0 3px rgba(255,91,91,.12); }
#results .r6-kan-sev-med .r6-kan-sev-dot { background: var(--orange); box-shadow: 0 0 0 3px rgba(247,146,30,.15); }
#results .r6-kan-sev-low .r6-kan-sev-dot { background: var(--teal); box-shadow: 0 0 0 3px rgba(150,206,204,.15); }
#results .r6-kan-sev-label {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500;
}
#results .r6-kan-sev-high .r6-kan-sev-label { color: #ff8080; }
#results .r6-kan-sev-med .r6-kan-sev-label { color: var(--orange); }
#results .r6-kan-sev-low .r6-kan-sev-label { color: var(--teal); }
#results .r6-kan-effort {
  margin-left: auto;
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(251,242,220,.4); font-weight: 500;
}

#results .r6-kan-card-title {
  font-size: 14px; font-weight: 500; color: var(--parchment);
  line-height: 1.4; margin-bottom: 8px; letter-spacing: -.005em;
}
#results .r6-kan-card-outcome {
  font-size: 11.5px; color: rgba(251,242,220,.5); line-height: 1.55;
  font-weight: 300; margin-bottom: 12px;
}
#results .r6-kan-card-outcome strong { color: var(--orange); font-weight: 500; }
#results .r6-kan-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 10px; border-top: 1px solid rgba(251,242,220,.06);
}
#results .r6-kan-tag {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(247,146,30,.75); font-weight: 500;
}
#results .r6-kan-day {
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .06em;
  color: rgba(251,242,220,.3); text-transform: uppercase;
}

#results .r6-kan-help {
  margin-top: 36px; padding: 28px 32px; border-radius: 18px;
  background: rgba(251,242,220,.04);
  border: 1px solid rgba(251,242,220,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
}
#results .r6-kan-help-text { flex: 1 1 380px; min-width: 0; }
#results .r6-kan-help-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 8px;
}
#results .r6-kan-help-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .02em;
  color: var(--parchment); line-height: 1.1; margin-bottom: 6px;
}
#results .r6-kan-help-sub {
  font-size: 13px; color: rgba(251,242,220,.55); line-height: 1.55;
  max-width: 520px; font-weight: 300;
}
#results .r6-kan-help-cta {
  appearance: none; border: none;
  background: var(--orange); color: var(--ink);
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
  padding: 14px 24px; border-radius: 100px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .22s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 10px 28px -10px rgba(247,146,30,.5);
}
#results .r6-kan-help-cta:hover {
  background: var(--parchment); transform: translateY(-1px);
  box-shadow: 0 14px 36px -10px rgba(251,242,220,.35);
}
#results .r6-kan-help-cta-arrow { font-size: 14px; transition: transform .22s ease; }
#results .r6-kan-help-cta:hover .r6-kan-help-cta-arrow { transform: translateX(3px); }

@media (max-width: 1080px) {
  #results .r6-kan-board { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  #results .r6-nav { padding: 0 16px; }
  #results .r6-hero-band { padding: 24px 16px 28px; }
  #results .r6-grade-row { padding: 0 16px; }
  #results .r6-grade-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #results .r6-gc-grade { font-size: 42px; }
  #results .r6-radar-section { padding: 0 16px 36px; }
  #results .r6-radar-stage { max-width: 380px; }
  #results .r6-bench-section { padding: 28px 16px 8px; }
  #results .r6-bench-cards { grid-template-columns: 1fr; gap: 10px; }
  #results .r6-field-section { padding: 32px 16px 12px; }
  #results .r6-field-grid { grid-template-columns: 1fr; gap: 10px; }
  #results .r6-fc { padding: 18px 18px 16px; }
  #results .r6-dash-zone { margin: 28px auto 0; padding: 0 16px; }
  #results .r6-dash-head { margin-bottom: 18px; }
  #results .r6-dash-grid { grid-template-columns: 1fr; gap: 14px; }
  #results #secEeat { grid-column: auto; }
  #results .r6-section-block { border-radius: 16px; }
  #results .r6-section-block::before { top: 18px; height: 24px; }
  #results .r6-sb-header {
    grid-template-columns: 1fr; gap: 10px; padding: 18px 16px 14px;
  }
  #results .r6-sb-pill { justify-self: flex-start; }
  #results .r6-sb-title { font-size: 22px; }
  #results .r6-sb-subtitle { font-size: 11px; }
  #results .r6-section-block .r6-checks { margin-left: 16px; margin-right: 16px; padding: 16px 0 20px; }
  #results .r6-check-row { grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 14px; }
  #results .r6-cr-right { grid-column: 2; margin-top: 6px; }
  #results .r6-lock-gate { margin: 4px 16px 14px; }
  #results .r6-lock-cta { padding: 10px 12px; gap: 10px; }
  #results .r6-lc-icon { width: 28px; height: 28px; }
  #results .r6-lc-count { font-size: 12.5px; }
  #results .r6-mid-cta { padding: 0 16px; }
  #results .r6-mid-cta-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px; }
  #results .r6-mid-cta .r6-btn-cta,
  #results .r6-mid-cta .r6-mc-btn { align-self: stretch; justify-content: center; }
  /* Command center mobile */
  #results .r6-cmd { border-radius: 16px; }
  #results .r6-cmd-pillars {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  #results .r6-cmd-pillar {
    padding: 16px 14px 14px;
    border-right: 1px solid rgba(26,10,9,.06);
    border-bottom: 1px solid rgba(26,10,9,.06);
    gap: 8px;
  }
  #results .r6-cmd-pillar:nth-child(odd)  { border-right: 1px solid rgba(26,10,9,.06); }
  #results .r6-cmd-pillar:nth-child(even) { border-right: none; }
  #results .r6-cmd-pillar:nth-child(1) { grid-column: 1 / -1; border-right: none; }
  #results .r6-cmd-p-score { font-size: 32px; }
  #results .r6-cmd-feed-wrap { padding: 16px; }
  #results .r6-cmd-feed-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  #results .r6-cmd-row {
    grid-template-columns: auto auto 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  #results .r6-cmd-row-impact { grid-column: 2 / -1; justify-self: flex-start; margin-top: 2px; }
  #results .r6-final-cta { padding: 44px 18px 110px; }
  #results .r6-fcta-grid { grid-template-columns: 1fr; gap: 32px; }
  #results .r6-fcta-right { justify-content: center; }
  #results .r6-fcta-card { max-width: 100%; padding: 26px 22px 22px; }
  #results .r6-fcta-proof { gap: 24px; padding-top: 20px; }
  #results .r6-fcta-proof-num { font-size: 40px; }
  #results .r6-fcta-trust { margin-top: 40px; }
  #results .r6-fcta-trust-logos { gap: 10px; font-size: 12px; }
  #results .r6-rev-leaks { padding: 32px 16px 40px; }
  #results .r6-rl-cards { grid-template-columns: 1fr; gap: 12px; }
  #results .r6-plan-section { padding: 52px 16px 64px; }
  #results .r6-kan-board { grid-template-columns: 1fr; gap: 14px; }
  #results .r6-kan-topbar { flex-direction: column; align-items: stretch; margin-bottom: 28px; }
  #results .r6-kan-help { padding: 22px 20px; }
  #results .r6-kan-help-title { font-size: 22px; }
  #results .r6-plan-pdf { align-self: flex-start; }
  #results .r6-kan-help { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
  #results .r6-kan-help-cta { align-self: stretch; text-align: center; }
  #results .r6-sec-summary { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  #results .r6-ss-lead { text-align: left; max-width: 100%; }
  #results .r6-ss-counts { gap: 14px; }
  #results .r6-ss-count strong { font-size: 26px; }
}
@media (max-width: 480px) {
  #results .r6-radar-stage { max-width: 340px; }
  #results .r6-bcm-bar-track { width: 60px; }
}

#sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(42,18,16,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 28px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 80;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
  border-top: 2px solid var(--orange);
}
#sticky-bar.show { transform: translateY(0); }
#sticky-bar .r6-st-left { display: flex; align-items: center; gap: 16px; }
#sticky-bar .r6-st-grades { display: flex; gap: 8px; }
#sticky-bar .r6-st-grade {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
}
#sticky-bar .r6-st-g-bad { background: #3d1111; color: #f08080; }
#sticky-bar .r6-st-g-mid { background: #3a2510; color: var(--orange); }
#sticky-bar .r6-st-g-good { background: #102a2a; color: var(--teal); }
#sticky-bar .r6-st-txt {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(251,242,220,.55);
}
#sticky-bar .r6-st-txt strong { color: var(--parchment); font-weight: 500; }
#sticky-bar .r6-sticky-cta { font-size: 15px; padding: 9px 22px; }

@keyframes up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-scroll-spacer { height: 0; flex-shrink: 0; }

main {
  width: 100%;
  position: relative;
  z-index: 0;
  margin-top: -700px;
}
/* Inner multi-page layouts have no hero-scroll-spacer, so the index-only -700px pulls
   the first section up behind the fixed nav. Reset margin-top for .page-body pages. */
.page-body main {
  margin-top: 0;
}
main > section {
  contain: layout style;
}
footer     { contain: layout style; }

.section-head {
  margin-bottom: 52px;
}
.section-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--red);
  letter-spacing: .02em;
  line-height: 0.95;
  margin-bottom: 16px;
}
.section-head h2 span { color: var(--orange); }
.section-head p {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: rgba(146,0,15,.5);
  letter-spacing: .04em;
  line-height: 1.7;
  max-width: 56ch;
}

/* Reveal animations — one family, one curve, no blur.
   Single gentle ease-out (standard material "emphasized"), short distance,
   short duration. Calm and predictable across the whole site. */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transition:
    opacity .55s cubic-bezier(0.22, 1, 0.36, 1),
    transform .55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal { transform: translateY(14px); }
.reveal-left { transform: translateX(-14px); }
.reveal-right { transform: translateX(14px); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible {
  opacity: 1;
  transform: none;
}
/* Gentle stagger — caps at .28s so grids feel coherent, not drawn-out.
   Uses a shared rule for all three reveal flavours. */
.reveal:nth-child(2), .reveal-left:nth-child(2), .reveal-right:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3), .reveal-left:nth-child(3), .reveal-right:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4), .reveal-left:nth-child(4), .reveal-right:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(n+5), .reveal-left:nth-child(n+5), .reveal-right:nth-child(n+5) { transition-delay: .28s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1; transform: none; transition: none;
  }
}

.btn-o { background: var(--orange); color: white; border: none; border-radius: 100px; padding: 14px 36px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .06em; cursor: pointer; transition: background .2s, transform .1s; display: inline-block; text-decoration: none; }
.btn-o:hover { background: var(--red); }
.btn-r { background: var(--red); color: var(--parchment); border: none; border-radius: 100px; padding: 14px 36px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .06em; cursor: pointer; transition: background .2s; display: inline-block; text-decoration: none; }
.btn-r:hover { background: var(--ink); }
.btn-ghost { background: transparent; color: var(--red); border: 1.5px solid var(--red); border-radius: 100px; padding: 13px 32px; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .06em; cursor: pointer; transition: all .2s; display: inline-block; text-decoration: none; }
.btn-ghost:hover { background: var(--red); color: var(--parchment); }

/* ── #validator — deep red radial drama ─────────── */
#validator {
  background:
    radial-gradient(ellipse 50% 45% at 80% 20%, rgba(247,146,30,.1), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 30%, rgba(92,20,18,.5), transparent 70%),
    linear-gradient(180deg, var(--red) 0%, var(--red) 15%, #3f0e0c 100%);
  position: relative;
  overflow: visible;
  /* No top padding — the intro block owns its own viewport height below,
     so padding-top would just double-count the space. Keep bottom padding
     as the section's lower breathing room. */
  padding: 0 0 160px;
}
/* ── Intro = its own full-viewport focal block with sticky inner ──────
   Root cause of every iteration of this bug: trackpad momentum carried
   the user past the heading no matter how we adjusted padding/margin.
   Final architecture:
     • .val-intro is a tall LAYOUT box (100svh). This gives 100vh of
       scroll distance between the morph-end and the stats/benchmarks
       bento — the user can't accidentally flick past in one momentum.
     • .val-intro-stick is its CONTENT, position: sticky, pinned below
       the nav pill (top: 112px). It stays at the top of the viewport
       while the user scrolls through val-intro's tall layout box. So
       heading + paragraph are visible AT ANY scroll within this range.
     • When val-intro's bottom approaches, sticky releases and content
       scrolls up naturally, transitioning smoothly into the bento view. */
.val-intro {
  /* Taller than 100vh so the sticky child (.val-intro-stick) has a long
     travel range where it stays pinned at the top of the viewport. With
     a bare 100vh parent and ~300px of content, sticky would only hold
     for 100vh − 300px ≈ 375px of scroll before releasing — trackpad
     momentum easily overshoots that. 130svh gives a ~550px pinned range,
     which comfortably absorbs a typical scroll flick. */
  min-height: 130svh;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.val-intro-stick {
  position: sticky;
  top: 112px;
  padding-bottom: 40px;
}
.validator-bento { margin-top: 0; }
.val-inner { max-width: 1160px; margin: 0 auto; padding: 0 56px; position: relative; z-index: 1; }
.val-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 18px;
}
.val-h {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(52px, 7.5vw, 104px);
  color: var(--parchment); line-height: .88; letter-spacing: .018em;
  margin-bottom: 24px; max-width: 18ch;
}
.val-h span { color: var(--orange); font-weight: 400; }
.val-p {
  font-size: 15px; font-weight: 300; color: rgba(251,242,220,.6);
  line-height: 1.65; max-width: 560px;
}
.val-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 72px; padding-top: 40px;
  border-top: 1px solid rgba(251,242,220,.12);
}
.val-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  width: 100%;
  padding: 28px 24px 24px;
  border-radius: 16px;
  border: 1px solid rgba(251,242,220,.12);
  background: rgba(251,242,220,.04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.val-card:hover {
  transform: translateY(-4px); border-color: rgba(255,132,0,.35);
  background: rgba(251,242,220,.07);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.55);
}
.val-card-num {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 4.8vw, 64px);
  line-height: 1; color: var(--orange);
  letter-spacing: .01em; margin-bottom: 12px;
}
.val-grid > .val-card:nth-child(1) .val-card-num { color: var(--pink); }
.val-grid > .val-card:nth-child(2) .val-card-num { color: var(--orange); }
.val-grid > .val-card:nth-child(3) .val-card-num { color: var(--teal); }
.val-grid > .val-card:nth-child(4) .val-card-num { color: var(--sage); }
.val-card-label {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(251,242,220,.6);
  margin-bottom: 12px; line-height: 1.5;
}
.val-card-desc {
  font-size: 13px; color: rgba(251,242,220,.5);
  font-weight: 300; line-height: 1.65;
  margin-top: auto;
}

.issues-live {
  position: relative;
  margin-top: 24px;
  background: transparent;
  border: 1px solid rgba(251,242,220,.12);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 20px 50px -30px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(251,242,220,.06);
}
.issues-live::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(251,242,220,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251,242,220,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 35%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 35%, transparent 85%);
  opacity: .55;
  pointer-events: none;
}
.issues-scan {
  position: absolute;
  left: -12%; right: -12%; top: -16px;
  height: 28px;
  background:
    radial-gradient(
      ellipse 55% 100% at 50% 50%,
      rgba(255,170,60,.95) 0%,
      rgba(255,132,0,.7) 22%,
      rgba(255,132,0,.35) 45%,
      rgba(255,132,0,.12) 70%,
      transparent 100%
    );
  filter: blur(8px);
  opacity: .95;
  animation: issuesScan 5.5s cubic-bezier(.65,.05,.36,1) infinite;
  pointer-events: none;
  z-index: 1;
  will-change: top, opacity;
}
@keyframes issuesScan {
  0% { top: -28px; opacity: 0; }
  8% { opacity: .95; }
  92% { opacity: .95; }
  100% { top: 100%; opacity: 0; }
}

/* ── Gradual blur bands on the top/bottom edges of the container.
   Ported from React Bits <GradualBlur />. Five stacked backdrop-filter
   layers, each masked to a progressive slice with increasing blur,
   giving a smooth frosted falloff from the edge into the content. ── */
.issues-gblur {
  position: absolute;
  left: 0; right: 0;
  height: 4.5rem;
  pointer-events: none;
  z-index: 2;
}
.issues-gblur--top { top: 0; }
.issues-gblur--bottom { bottom: 0; }

.issues-gblur > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* TOP band — blur is strongest at the top edge and fades to 0 toward the bottom.
   Each layer's mask shows a 2-increment slice (20%-40% wide), blur grows per layer. */
.issues-gblur--top > span:nth-child(1) {
  -webkit-backdrop-filter: blur(0.125rem);
  backdrop-filter: blur(0.125rem);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%, black 40%, transparent 60%);
  mask-image: linear-gradient(to top, transparent 0%, black 20%, black 40%, transparent 60%);
}
.issues-gblur--top > span:nth-child(2) {
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  -webkit-mask-image: linear-gradient(to top, transparent 20%, black 40%, black 60%, transparent 80%);
  mask-image: linear-gradient(to top, transparent 20%, black 40%, black 60%, transparent 80%);
}
.issues-gblur--top > span:nth-child(3) {
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  -webkit-mask-image: linear-gradient(to top, transparent 40%, black 60%, black 80%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 40%, black 60%, black 80%, transparent 100%);
}
.issues-gblur--top > span:nth-child(4) {
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  -webkit-mask-image: linear-gradient(to top, transparent 60%, black 80%, black 100%);
  mask-image: linear-gradient(to top, transparent 60%, black 80%, black 100%);
}
.issues-gblur--top > span:nth-child(5) {
  -webkit-backdrop-filter: blur(1.75rem);
  backdrop-filter: blur(1.75rem);
  -webkit-mask-image: linear-gradient(to top, transparent 80%, black 100%);
  mask-image: linear-gradient(to top, transparent 80%, black 100%);
}

/* BOTTOM band — mirror of the top: strongest at the bottom edge. */
.issues-gblur--bottom > span:nth-child(1) {
  -webkit-backdrop-filter: blur(0.125rem);
  backdrop-filter: blur(0.125rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 40%, transparent 60%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 40%, transparent 60%);
}
.issues-gblur--bottom > span:nth-child(2) {
  -webkit-backdrop-filter: blur(0.25rem);
  backdrop-filter: blur(0.25rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 40%, black 60%, transparent 80%);
  mask-image: linear-gradient(to bottom, transparent 20%, black 40%, black 60%, transparent 80%);
}
.issues-gblur--bottom > span:nth-child(3) {
  -webkit-backdrop-filter: blur(0.5rem);
  backdrop-filter: blur(0.5rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, black 60%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 40%, black 60%, black 80%, transparent 100%);
}
.issues-gblur--bottom > span:nth-child(4) {
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, black 80%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 60%, black 80%, black 100%);
}
.issues-gblur--bottom > span:nth-child(5) {
  -webkit-backdrop-filter: blur(1.75rem);
  backdrop-filter: blur(1.75rem);
  -webkit-mask-image: linear-gradient(to bottom, transparent 80%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 80%, black 100%);
}

.issues-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 8px 14px 14px;
  position: relative;
  z-index: 3;
}
.issues-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(251,242,220,.08);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  position: relative;
  z-index: 3;
  background: transparent;
}
.issues-header-left {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.issues-live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 9px;
  border-radius: 999px;
  background: rgba(255,132,0,.12);
  border: 1px solid rgba(255,132,0,.35);
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  flex-shrink: 0;
}
.issues-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255,132,0,.9), 0 0 0 0 rgba(255,132,0,.5);
  animation: issuesPulse 2s ease-in-out infinite;
}
@keyframes issuesPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,132,0,.9), 0 0 0 0 rgba(255,132,0,.5); }
  50% { box-shadow: 0 0 10px rgba(255,132,0,.9), 0 0 0 6px rgba(255,132,0,0); }
}
.issues-header-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,242,220,.62);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.issues-header-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,242,220,.4);
  flex-shrink: 0;
}
.issues-header-meta strong {
  color: var(--parchment); font-weight: 500;
}
.issues-header-count { color: rgba(251,242,220,.62); }
.issues-header-sep {
  width: 1px; height: 10px; background: rgba(251,242,220,.2);
}

.issue-row {
  display: grid;
  grid-template-columns: 6px 92px 1fr auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  border-bottom: 1px solid rgba(251,242,220,.06);
  background: transparent;
  position: relative;
}
.issue-row:last-child { border-bottom: 1px solid transparent; }
.issue-sev {
  width: 6px; height: 32px; border-radius: 3px;
  align-self: center;
}
.sev-h { background: var(--orange); box-shadow: 0 0 12px rgba(255,132,0,.55); }
.sev-m { background: var(--pink); box-shadow: 0 0 10px rgba(255,129,160,.45); }
.sev-l { background: rgba(251,242,220,.3); }

.issue-metric {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.issue-metric-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px; line-height: 1; letter-spacing: .02em;
  color: var(--parchment);
  display: flex; align-items: baseline; gap: 2px;
}
.issue-metric-num span {
  font-size: 14px;
  color: rgba(251,242,220,.45);
  font-family: 'DM Mono', monospace;
  margin-left: 2px;
}
.issue-row:has(.sev-h) .issue-metric-num { color: var(--orange); }
.issue-row:has(.sev-m) .issue-metric-num { color: var(--pink); }
/* Progress bar under each percentage removed per design — the number alone
   reads punchier and the severity strip on the left already carries colour. */
.issue-metric-bar { display: none; }

.issue-text {
  font-size: 14px; color: rgba(251,242,220,.78);
  font-weight: 300; line-height: 1.5;
  min-width: 0;
}
.issue-tag {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 5px;
  background: rgba(255,132,0,.12); color: var(--orange);
  border: 1px solid rgba(255,132,0,.22);
  align-self: center;
  flex-shrink: 0;
}

/* ── #numbers — deep ink stage, parchment + orange ── */
#numbers {
  background: var(--ink);
  padding: 160px 56px 180px;
  position: relative;
  overflow: hidden;
  --numbers-parallax-y: 0px;
}
/* Taller layer + translateY from JS = slower drift than section scroll */
#numbers::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -24%;
  height: 148%;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(146,0,15,.22), transparent 55%),
    radial-gradient(ellipse at 15% 100%, rgba(255,132,0,.06), transparent 55%);
  transform: translate3d(0, var(--numbers-parallax-y), 0);
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  #numbers::before { transform: none; will-change: auto; }
}
.num-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.num-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 72px; text-align: center;
}
.num-eyebrow::before, .num-eyebrow::after {
  content: ''; display: inline-block; width: 36px; height: 1px;
  background: rgba(255,132,0,.35); vertical-align: middle; margin: 0 18px 4px;
}
.num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.num-block {
  padding: 56px 32px; text-align: center;
  border-right: 1px solid rgba(251,242,220,.08);
}
.num-block:last-child { border-right: none; }
.num-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 8.5vw, 120px);
  color: var(--parchment); line-height: .9; letter-spacing: .01em;
}
.num-big span { color: var(--orange); }
.num-label {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(251,242,220,.62);
  margin-top: 14px; line-height: 1.5;
}
.num-sub {
  font-size: 13px; color: rgba(251,242,220,.42);
  font-weight: 300; margin-top: 8px; line-height: 1.5;
}

#audit { background: var(--parchment); padding: 140px 0; position: relative; overflow: hidden; }
#audit::before { content: ''; position: absolute; top: -80px; left: 0; right: 0; height: 80px; background: var(--pink); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.audit-inner { max-width: 1100px; margin: 0 auto; padding: 0 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }
.audit-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 20px; }
.audit-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--red); line-height: .9; letter-spacing: .01em; margin-bottom: 24px; }
.audit-h span { color: var(--orange-deep); }
.audit-body { font-size: 15px; color: rgba(26,10,9,.72); font-weight: 300; line-height: 1.8; margin-bottom: 40px; }
.audit-proof { display: flex; align-items: center; gap: 12px; }
.audit-avatars { display: flex; }
.audit-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--parchment); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: white; }
.audit-avatar:first-child { margin-left: 0; }
.audit-proof-text { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; color: rgba(146,0,15,.45); line-height: 1.6; }
.audit-form-card { background: white; border-radius: 18px; padding: 40px; box-shadow: 0 8px 40px rgba(146,0,15,.08); border: 1.5px solid rgba(146,0,15,.06); }
.form-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--red); margin-bottom: 28px; letter-spacing: .02em; }
.form-group { margin-bottom: 20px; }
.form-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(146,0,15,.4); margin-bottom: 7px; display: block; }
.form-input { width: 100%; padding: 12px 16px; border: 1.5px solid rgba(146,0,15,.35); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--red); background: var(--parchment); outline: none; transition: border-color .2s; }
.form-input:focus { border-color: var(--orange); }
.form-input::placeholder { color: rgba(146,0,15,.45); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-select { width: 100%; padding: 12px 16px; border: 1.5px solid rgba(146,0,15,.35); border-radius: 8px; font-family: 'DM Mono', monospace; font-size: 11px; color: var(--red); background: var(--parchment); outline: none; transition: border-color .2s; letter-spacing: .06em; }
.form-select:focus { border-color: var(--orange); }

#team { background: var(--red); padding: 140px 56px; position: relative; overflow: hidden; }
#team::before { content: 'HUMANS'; font-family: 'Bebas Neue', sans-serif; font-size: 22vw; line-height: 1; color: rgba(251,242,220,.03); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; white-space: nowrap; }
.team-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.team-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 72px; gap: 40px; }
.team-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 14px; }
.team-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 80px); color: var(--parchment); line-height: .9; letter-spacing: .01em; }
.team-h span { color: var(--orange); }
.team-body { font-size: 15px; color: rgba(251,242,220,.72); font-weight: 300; line-height: 1.8; max-width: 360px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.team-card { background: rgba(251,242,220,.05); border: 1px solid rgba(251,242,220,.08); border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.team-card:hover { border-color: rgba(251,242,220,.2); }
.team-card-img { height: 200px; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 72px; letter-spacing: .02em; position: relative; overflow: hidden; }
.team-card-body { padding: 24px 26px; }
.team-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--parchment); letter-spacing: .04em; line-height: 1; margin-bottom: 4px; }
.team-card-role { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(251,242,220,.72); margin-bottom: 10px; }
.team-card-desc { font-size: 13px; color: rgba(251,242,220,.72); font-weight: 300; line-height: 1.6; }
.team-card-refs { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(251,242,220,.07); display: flex; gap: 8px; }
.ref-tag { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(251,242,220,.08); color: rgba(251,242,220,.55); }
.team-note { margin-top: 52px; padding: 28px 32px; background: rgba(251,242,220,.05); border: 1px solid rgba(251,242,220,.08); border-radius: 10px; border-left: 3px solid var(--orange); font-size: 14px; color: rgba(251,242,220,.6); font-weight: 300; line-height: 1.7; font-style: italic; }

#problems, .problems-section { background: var(--pink); padding: 140px 56px; position: relative; }
.prob-inner { max-width: 1100px; margin: 0 auto; }
.prob-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--red); opacity: .5; text-align: center; margin-bottom: 16px; }
.prob-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--red); line-height: .9; letter-spacing: .01em; text-align: center; margin-bottom: 72px; }
.prob-h span { color: var(--orange-deep); }
.prob-table { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; align-items: stretch; }
.prob-col { display: flex; flex-direction: column; gap: 12px; }
.prob-mid { display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 12px 0; }
.prob-arrow { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: rgba(146,0,15,.45); }
.prob-card { background: white; border-radius: 12px; padding: 22px 24px; border: 1.5px solid rgba(146,0,15,.07); }
.prob-card.problem { border-left: 3px solid var(--pink); }
.prob-card.solution { border-left: 3px solid var(--teal); }
.prob-card-head { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; font-weight: 500; }
.prob-card-head.p { color: var(--red); } .prob-card-head.s { color: #2a6e6c; }
.prob-card-text { font-size: 13px; color: rgba(26,10,9,.65); line-height: 1.55; }
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 80px; }
.svc-card { background: var(--red); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s; }
.svc-card:hover { transform: translateY(-4px); }
.svc-icon { font-size: 28px; margin-bottom: 4px; }
.svc-name { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--parchment); letter-spacing: .03em; line-height: 1; }
.svc-desc { font-size: 12px; color: rgba(251,242,220,.7); font-weight: 300; line-height: 1.6; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 12px; }
.svc-tag { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: rgba(251,242,220,.08); color: rgba(251,242,220,.55); }

/* ─────────────────────────────────────────────────────
   Services page — hero, catalog (ink), FAQ, closing CTA
   ───────────────────────────────────────────────────── */

/* =============================================================
   .page-hero (v2) — "Dossier" hero, modelled on the scan-analysis page.
   Cinematic warm-ink radial backdrop · top meta chrome strip ·
   massive editorial headline · glass CTA · 4-tile data grade row.
   ============================================================= */

.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse 120% 70% at 50% 0%, #3a1614 0%, #21100e 32%, var(--ink) 70%, #0f0706 100%);
  padding: 56px 56px 100px;
  overflow: hidden;
  color: var(--parchment);
}
/* Warm orange glow top-right · deep wine underpin bottom-left.
   Keeps the eye moving across the dossier cover. */
.page-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 40% at 82% 8%, rgba(247,146,30,.16), transparent 68%),
    radial-gradient(ellipse 45% 38% at 12% 92%, rgba(146,0,15,.32), transparent 62%);
}
/* Watermark lives on dark — barely there, a ghost of the topic word. */
.page-hero::before {
  content: attr(data-watermark);
  position: absolute; top: 50%; right: -3%; transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif; font-size: 30vw;
  color: rgba(251,242,220,.025);
  line-height: 1; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
  z-index: 1;
}
.page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

/* Top meta chrome — left holds breadcrumb or "BRIEF · TOPIC",
   right holds live status + timestamp + version. Pure DM Mono. */
.page-hero-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: 28px; margin-bottom: 56px;
  border-bottom: 1px solid rgba(251,242,220,.08);
  gap: 20px; flex-wrap: wrap;
}
.page-hero-meta-l, .page-hero-meta-r { display: flex; align-items: center; gap: 12px; }
.page-hero-meta-l .tag {
  color: var(--orange); font-weight: 500;
  padding: 4px 9px; border-radius: 4px;
  background: rgba(247,146,30,.12);
  border: 1px solid rgba(247,146,30,.3);
}
.page-hero-meta-l .num { color: rgba(251,242,220,.55); }
.page-hero-meta-l .topic { color: var(--parchment); font-weight: 500; letter-spacing: .22em; }
/* Breadcrumb anchors/seps when the left slot holds a crumb trail (subpages) */
.page-hero-meta-l a {
  color: rgba(251,242,220,.62); text-decoration: none;
  transition: color .2s;
}
.page-hero-meta-l a:hover { color: var(--orange-light); }
.page-hero-meta-l .sep { color: rgba(251,242,220,.28); }
.page-hero-meta-l .current { color: var(--orange); font-weight: 500; }
.page-hero-meta-r { color: rgba(251,242,220,.48); font-weight: 400; }
.page-hero-meta-r .sep { color: rgba(251,242,220,.2); }
.page-hero-meta-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange-light);
  box-shadow: 0 0 10px rgba(255,176,102,.7);
  animation: phero-pulse 2s ease-in-out infinite;
  display: inline-block;
}
.page-hero-meta-r .live { color: var(--orange-light); font-weight: 500; }
@keyframes phero-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Editorial headline block — parchment on dark, orange accent */
.page-hero-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 24px;
}
.page-hero-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 8vw, 132px);
  color: var(--parchment); line-height: .88;
  letter-spacing: .005em; margin-bottom: 32px;
  max-width: 1100px;
}
.page-hero-h span { color: var(--orange); }
.page-hero-sub {
  font-size: 17px; color: rgba(251,242,220,.78);
  font-weight: 300; line-height: 1.7;
  max-width: 640px; margin-bottom: 48px;
}
.page-hero-sub em { color: var(--orange-light); font-style: italic; }

.page-hero-ctas {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; margin-bottom: 72px;
}
.page-hero-ctas .btn-o { font-size: 17px; padding: 14px 30px; }
/* Glass ghost button on dark hero — overrides the parchment-era .btn-ghost */
.page-hero-ctas .btn-ghost,
.page-hero-ctas a.btn-ghost {
  background: rgba(251,242,220,.06);
  border: 1px solid rgba(251,242,220,.22);
  color: var(--parchment);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 17px; padding: 14px 30px;
  transition: all .22s cubic-bezier(.2,.8,.2,1);
}
.page-hero-ctas .btn-ghost:hover,
.page-hero-ctas a.btn-ghost:hover {
  background: rgba(251,242,220,.12);
  border-color: var(--orange);
  color: var(--orange-light);
}

/* Data grade tiles — 4 colored cards, pulled from the analysis page DNA.
   Each tile has: badge (symbol/letter), big value, small label. */
.page-hero-grades {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 0;
}
.page-hero-grade {
  padding: 22px 22px 20px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 148px; position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.page-hero-grade::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 92% 8%, rgba(255,255,255,.09), transparent 50%);
}
.page-hero-grade:hover { transform: translateY(-3px); }
.page-hero-grade > * { position: relative; z-index: 1; }
.phg-badge {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px;
  letter-spacing: .04em; line-height: 1; opacity: .92;
  align-self: flex-start;
}
.phg-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 3.4vw, 48px);
  letter-spacing: .012em; line-height: 1; margin-top: auto;
  display: flex; align-items: baseline; gap: 3px;
}
.phg-val small {
  font-family: 'DM Mono', monospace; font-size: 13px;
  letter-spacing: .08em; opacity: .75;
}
.phg-label {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.4; opacity: .82;
}
/* Variants */
.page-hero-grade--wine {
  background: linear-gradient(155deg, #2a0e0d 0%, #1a0908 100%);
  border: 1px solid rgba(146,0,15,.42); color: var(--parchment);
}
.page-hero-grade--wine .phg-badge { color: var(--orange-light); }
.page-hero-grade--teal {
  background: linear-gradient(155deg, #0e2a29 0%, #081817 100%);
  border: 1px solid rgba(58,138,136,.4); color: var(--parchment);
}
.page-hero-grade--teal .phg-badge { color: var(--teal); }
.page-hero-grade--juice {
  background: linear-gradient(155deg, var(--orange) 0%, #d17010 100%);
  color: var(--ink); border: 1px solid #b86510;
}
.page-hero-grade--juice .phg-badge { color: rgba(26,10,9,.78); }
.page-hero-grade--parchment {
  background: linear-gradient(155deg, #f6e8c2 0%, #e6d4a3 100%);
  color: var(--ink); border: 1px solid rgba(146,0,15,.18);
}
.page-hero-grade--parchment .phg-badge { color: var(--red); }

/* Small scroll cue at the very bottom of the dossier */
.page-hero-scroll {
  margin-top: 52px;
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(251,242,220,.45);
  display: inline-flex; align-items: center; gap: 10px;
}
.page-hero-scroll::after {
  content: '↓';
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  animation: phero-bounce 2.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes phero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Catalog (ink section) */
#services-catalog { background: var(--ink); padding: 140px 56px; position: relative; overflow: hidden; }
#services-catalog::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(247,146,30,.07), transparent 60%),
    radial-gradient(ellipse 55% 45% at 10% 100%, rgba(150,206,204,.04), transparent 60%);
}
.catalog-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.catalog-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; margin-bottom: 72px; align-items: end; }
.catalog-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.catalog-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5.5vw, 76px); color: var(--parchment); line-height: .9; letter-spacing: .01em; }
.catalog-h span { color: var(--orange); }
.catalog-sub { font-size: 15px; color: rgba(251,242,220,.72); font-weight: 300; line-height: 1.8; max-width: 420px; }
.catalog-section-label { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(251,242,220,.7); }
.catalog-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(251,242,220,.08); }
.catalog-section-label .orb { color: var(--orange); font-size: 10px; }
.catalog-section-label + .catalog-featured { margin-bottom: 80px; }

.catalog-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.catalog-pillar {
  position: relative; background: linear-gradient(180deg, #a50515 0%, var(--red) 100%);
  border-radius: 16px; padding: 32px 30px 28px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 14px; min-height: 280px;
  border: 1px solid rgba(255,132,0,.22); box-shadow: 0 8px 40px rgba(0,0,0,.25);
  transition: transform .25s cubic-bezier(.4,0,.2,1), border-color .25s, box-shadow .25s;
  overflow: hidden;
}
.catalog-pillar::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(255,132,0,.18), transparent 60%); pointer-events: none; }
.catalog-pillar:hover { transform: translateY(-4px); border-color: rgba(255,132,0,.55); box-shadow: 0 14px 60px rgba(0,0,0,.35); }
.catalog-pillar .pillar-num { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em; color: rgba(251,242,220,.7); position: relative; z-index: 1; }
.catalog-pillar .pillar-name { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--parchment); letter-spacing: .025em; line-height: 1; position: relative; z-index: 1; }
.catalog-pillar .pillar-desc { font-size: 14px; color: rgba(251,242,220,.62); font-weight: 300; line-height: 1.65; position: relative; z-index: 1; }
.catalog-pillar .pillar-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; z-index: 1; }
.catalog-pillar .pillar-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.catalog-pillar .svc-tag { background: rgba(251,242,220,.1); color: rgba(251,242,220,.75); }
.catalog-pillar .pillar-go { font-family: 'Bebas Neue', sans-serif; font-size: 28px; color: var(--orange); line-height: 1; transition: transform .25s; }
.catalog-pillar:hover .pillar-go { transform: translateX(6px); }

.catalog-rest-wrap { margin-top: 80px; }
#services-catalog .services-grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; gap: 16px; }
#services-catalog a.svc-card {
  background: rgba(251,242,220,.04); border: 1px solid rgba(251,242,220,.08);
  text-decoration: none; color: inherit; position: relative; padding: 26px 24px 24px;
  transition: transform .2s, border-color .2s, background .2s;
}
#services-catalog a.svc-card:hover { transform: translateY(-3px); border-color: rgba(255,132,0,.35); background: rgba(251,242,220,.06); }
#services-catalog a.svc-card .svc-name { font-size: 22px; color: var(--parchment); }
#services-catalog a.svc-card .svc-desc { color: rgba(251,242,220,.72); font-size: 12.5px; }
#services-catalog a.svc-card .svc-arrow { position: absolute; right: 20px; top: 22px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: rgba(251,242,220,.28); transition: color .2s, transform .2s; }
#services-catalog a.svc-card:hover .svc-arrow { color: var(--orange); transform: translateX(3px); }

/* FAQ — reusable across inner pages */
.faq-section { background: var(--parchment); padding: 140px 56px; position: relative; }
.faq-inner { max-width: 1100px; margin: 0 auto; }
.faq-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; margin-bottom: 64px; align-items: end; }
.faq-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 20px; }
.faq-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5.5vw, 72px); color: var(--red); line-height: .9; letter-spacing: .01em; }
.faq-h span { color: var(--orange-deep); }
.faq-body { font-size: 15px; color: rgba(26,10,9,.7); font-weight: 300; line-height: 1.75; max-width: 460px; }
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.faq-item { border-top: 1px solid rgba(146,0,15,.14); padding: 28px 0 28px; }
.faq-q { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--red); letter-spacing: .015em; line-height: 1.15; margin-bottom: 12px; }
.faq-a { font-size: 14px; color: rgba(26,10,9,.72); font-weight: 300; line-height: 1.7; }

/* Closing CTA — reusable across inner pages */
.closing-cta-section { background: var(--red); padding: 140px 56px; position: relative; overflow: hidden; }
.closing-cta-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(255,132,0,.16), transparent 60%),
    radial-gradient(ellipse 55% 70% at 100% 80%, rgba(150,206,204,.06), transparent 60%);
}
.closing-cta-section::after { content: 'GRAB'; position: absolute; top: 50%; right: -2%; transform: translateY(-50%); font-family: 'Bebas Neue', sans-serif; font-size: 22vw; color: rgba(251,242,220,.04); line-height: 1; pointer-events: none; white-space: nowrap; }
.closing-cta-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: center; }
.closing-cta-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 22px; }
.closing-cta-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 6.5vw, 96px); color: var(--parchment); line-height: .88; letter-spacing: .005em; margin-bottom: 28px; }
.closing-cta-h span { color: var(--orange); }
.closing-cta-sub { font-size: 16px; color: rgba(251,242,220,.65); font-weight: 300; line-height: 1.75; max-width: 460px; }
.closing-cta-side { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.closing-cta-side .btn-o { text-align: center; font-size: 18px; padding: 16px 28px; }
.btn-ghost-invert { display: inline-block; text-align: center; border: 1.5px solid rgba(251,242,220,.25); background: transparent; color: var(--parchment); font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: .04em; padding: 15px 28px; border-radius: 100px; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.btn-ghost-invert:hover { border-color: var(--orange); color: var(--orange); }
.closing-cta-tiny { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; color: rgba(251,242,220,.62); text-transform: uppercase; text-align: center; margin-top: 8px; }

/* Responsive tweaks for subpages */
@media (max-width: 960px) {
  .page-hero { padding: 40px 24px 72px; }
  .page-hero-meta { padding-bottom: 22px; margin-bottom: 40px; font-size: 10px; letter-spacing: .16em; }
  .page-hero-meta-l, .page-hero-meta-r { gap: 10px; }
  .page-hero-grades { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .page-hero-grade { min-height: 126px; padding: 18px 18px 16px; }
  .page-hero-ctas { margin-bottom: 56px; }

  #services-catalog { padding: 100px 24px; }
  .catalog-top { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .catalog-sub { max-width: none; }
  .catalog-featured { grid-template-columns: 1fr; }
  #services-catalog .services-grid { grid-template-columns: 1fr 1fr; }
  .faq-section { padding: 100px 24px; }
  .faq-top { grid-template-columns: 1fr; gap: 24px; }
  .faq-list { grid-template-columns: 1fr; gap: 0; }
  .closing-cta-section { padding: 100px 24px; }
  .closing-cta-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .page-hero { padding: 32px 20px 60px; }
  .page-hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 18px; margin-bottom: 32px; }
  .page-hero-grades { grid-template-columns: 1fr 1fr; }
  .page-hero-grade { min-height: 112px; padding: 16px; }
  .phg-val { font-size: 32px; }
  .phg-badge { font-size: 18px; }
  .phg-label { font-size: 10px; letter-spacing: .12em; }
  #services-catalog .services-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   Services redesign (2026-04)
   - 3-column hero grades variant
   - In-page TOC strip at the end of the hero
   - Leaks & Fixes 2×2 case cards
   - Catalog stats strip
   - Refined disciplines grid with top meta row + category accent
   - Process step-rail with continuous connector + integrated deliverables
   - Native <details> FAQ accordion
   ============================================================= */

/* --- Hero: 3-column grade variant + in-page TOC --- */
.page-hero-grades--three {
  grid-template-columns: repeat(3, 1fr);
}
.page-hero-grades--three .page-hero-grade {
  min-height: 168px;
  padding: 24px 26px 22px;
}
.page-hero-grades--three .phg-val {
  font-size: clamp(42px, 4vw, 60px);
}

.page-toc {
  margin-top: 56px;
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  align-items: stretch;
  gap: 0;
  border-top: 1px solid rgba(251,242,220,.12);
  border-bottom: 1px solid rgba(251,242,220,.12);
  background:
    linear-gradient(180deg, rgba(251,242,220,.025), rgba(251,242,220,.01));
}
.page-toc-label {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 18px 24px;
  display: flex; align-items: center;
  border-right: 1px solid rgba(251,242,220,.08);
  white-space: nowrap;
}
.page-toc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,242,220,.68);
  text-decoration: none;
  border-right: 1px solid rgba(251,242,220,.08);
  transition: color .2s ease, background .2s ease;
  position: relative;
}
.page-toc-item:last-child { border-right: none; }
.page-toc-item::after {
  content: '→';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: rgba(251,242,220,.3);
  margin-left: auto;
  transition: transform .25s ease, color .2s ease;
}
.page-toc-item:hover {
  color: var(--parchment);
  background: rgba(255,132,0,.06);
}
.page-toc-item:hover::after { color: var(--orange); transform: translateX(4px); }
.page-toc-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--orange);
  letter-spacing: .04em;
  line-height: 1;
}

/* --- Leaks & Fixes ---
   Editorial "case file" layout: 4 full-width rows, each split LEAK | FIX.
   The horizontal divider visualises the narrative (problem → solution),
   so we don't need decorative arrows or shouty Bebas headlines per card.
   Parchment base keeps the section calm; colour lives in severity dots
   and the orange hairline that joins LEAK to FIX. */
#leaks {
  background: var(--parchment);
  padding: 140px 56px;
  position: relative;
  overflow: hidden;
}
#leaks::before {
  content: 'LEAKS';
  position: absolute; bottom: -10%; right: -3%;
  font-family: 'Bebas Neue', sans-serif; font-size: 28vw;
  color: rgba(146,0,15,.04);
  line-height: 1; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}
.leaks-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.leaks-top {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 72px; align-items: end;
  margin-bottom: 56px;
}
.leaks-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: 18px;
}
.leaks-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5.5vw, 72px);
  color: var(--red); line-height: .9;
  letter-spacing: .01em;
}
.leaks-h span { color: var(--orange-deep); }
.leaks-sub {
  font-size: 15px; color: rgba(26,10,9,.68);
  font-weight: 300; line-height: 1.8;
  max-width: 440px;
}

.leaks-list {
  display: flex; flex-direction: column;
  /* Rows share a single hairline between them so they read as one dossier,
     not four disconnected cards. */
  border-top: 1px solid rgba(146,0,15,.16);
}
.leak-row {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 0;
  padding: 40px 0;
  border-bottom: 1px solid rgba(146,0,15,.16);
  position: relative;
  transition: background .3s ease;
}
.leak-row:hover { background: rgba(146,0,15,.025); }
.leak-side {
  padding: 4px 44px 4px 0;
  min-width: 0;
}
.leak-side--fix {
  padding: 4px 0 4px 44px;
  border-left: 1px solid rgba(146,0,15,.14);
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
}
/* Orange arrow glyph welded to the vertical divider — the narrative hinge.
   Centred on the row so it reads as a pivot, not a bullet. */
.leak-side--fix::before {
  content: '→';
  position: absolute;
  left: -15px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  background: var(--parchment);
  color: var(--orange-deep);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(146,0,15,.22);
  border-radius: 50%;
  z-index: 1;
}

.leak-side-meta {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.leak-idx {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: var(--red);
  letter-spacing: .04em; line-height: 1;
}
.leak-sev {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--red); font-weight: 500;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(146,0,15,.06);
  border: 1px solid rgba(146,0,15,.2);
}
/* Severity tint overrides — subtle, via data-sev on the row */
.leak-row[data-sev="local"]  .leak-sev { color: var(--orange-deep); background: rgba(168,72,0,.07); border-color: rgba(168,72,0,.3); }
.leak-row[data-sev="cro"]    .leak-sev { color: #2a6e6c; background: rgba(42,110,108,.08); border-color: rgba(42,110,108,.28); }
.leak-row[data-sev="data"]   .leak-sev { color: #5a3a7a; background: rgba(90,58,122,.08); border-color: rgba(90,58,122,.28); }

.leak-problem {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -.005em;
  max-width: 360px;
}

.leak-side-label {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-deep);
}
.leak-fix {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: rgba(26,10,9,.72);
  font-weight: 300;
  line-height: 1.7;
  max-width: 620px;
}
.leak-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.leak-chip {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  padding: 4px 10px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid rgba(146,0,15,.22);
  transition: border-color .2s ease, background .2s ease;
}
.leak-row:hover .leak-chip { border-color: rgba(146,0,15,.36); }

/* --- Catalog: stats strip + refined services grid --- */
.catalog-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: -32px 0 80px;
  padding: 32px 0;
  border-top: 1px solid rgba(251,242,220,.1);
  border-bottom: 1px solid rgba(251,242,220,.1);
}
.catalog-stat {
  padding: 0 28px;
  border-right: 1px solid rgba(251,242,220,.08);
  display: flex; flex-direction: column; gap: 8px;
}
.catalog-stat:last-child { border-right: none; }
.catalog-stat-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(44px, 4vw, 60px);
  color: var(--orange);
  line-height: 1; letter-spacing: .01em;
  display: flex; align-items: baseline; gap: 4px;
}
.catalog-stat-n span {
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  color: rgba(251,242,220,.6);
  letter-spacing: .05em;
}
.catalog-stat-l {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251,242,220,.68);
  line-height: 1.5;
}

/* Override old svc-card look for the services grid only */
#services-catalog .services-grid { gap: 14px; }
#services-catalog a.svc-card {
  background: rgba(251,242,220,.035);
  border: 1px solid rgba(251,242,220,.08);
  border-radius: 14px;
  padding: 24px 22px 20px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  text-decoration: none;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s;
}
#services-catalog a.svc-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--cat, var(--orange));
  opacity: .55;
  transition: opacity .25s ease, height .25s ease;
}
#services-catalog a.svc-card[data-cat="content"]  { --cat: var(--orange); }
#services-catalog a.svc-card[data-cat="paid"]     { --cat: var(--pink); }
#services-catalog a.svc-card[data-cat="data"]     { --cat: var(--teal); }
#services-catalog a.svc-card[data-cat="creative"] { --cat: var(--sage); }
#services-catalog a.svc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,132,0,.35);
  background: rgba(251,242,220,.06);
}
#services-catalog a.svc-card:hover::before { opacity: 1; height: 3px; }
.svc-card-top {
  display: flex; align-items: center; gap: 10px;
}
.svc-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: var(--cat, var(--orange));
  letter-spacing: .04em; line-height: 1;
}
.svc-cat {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(251,242,220,.55);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(251,242,220,.05);
}
#services-catalog a.svc-card .svc-arrow {
  margin-left: auto;
  position: static;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: rgba(251,242,220,.32);
  transition: color .2s, transform .2s;
}
#services-catalog a.svc-card:hover .svc-arrow {
  color: var(--cat, var(--orange));
  transform: translateX(4px);
}
#services-catalog a.svc-card .svc-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--parchment);
  letter-spacing: .02em; line-height: 1.05;
}
#services-catalog a.svc-card .svc-desc {
  font-size: 13px; color: rgba(251,242,220,.64);
  font-weight: 300; line-height: 1.65;
}
#services-catalog a.svc-card .svc-tags {
  margin-top: auto; padding-top: 10px;
}

/* --- Process section (was #pipeline) --- */
#process {
  background: var(--parchment);
  padding: 140px 56px 120px;
  position: relative;
  overflow: hidden;
}
#process::before {
  content: 'PROCESS';
  position: absolute; bottom: -8%; left: -2%;
  font-family: 'Bebas Neue', sans-serif; font-size: 26vw;
  color: rgba(146,0,15,.04);
  line-height: 1; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}
.proc-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.proc-top {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 72px; align-items: end;
  margin-bottom: 72px;
}
.proc-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: 18px;
}
.proc-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5.5vw, 72px);
  color: var(--red); line-height: .9; letter-spacing: .01em;
}
.proc-h span { color: var(--orange-deep); }
.proc-sub {
  font-size: 15px; color: rgba(26,10,9,.68);
  font-weight: 300; line-height: 1.8; max-width: 440px;
}

.proc-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
/* Continuous connector rail running through all step-number centres */
.proc-steps::before {
  content: '';
  position: absolute;
  top: 28px; left: calc(10% + 28px); right: calc(10% + 28px);
  height: 2px;
  background:
    linear-gradient(90deg, var(--red) 0%, var(--orange) 50%, var(--red) 100%);
  opacity: .25;
  z-index: 0;
  border-radius: 2px;
}
.proc-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 6px;
}
.proc-num {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 22px;
  letter-spacing: .04em;
  margin-bottom: 22px;
  background: var(--parchment);
  color: var(--red);
  border: 2px solid var(--red);
  box-shadow: 0 0 0 6px var(--parchment), 0 8px 24px -8px rgba(146,0,15,.35);
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.proc-step:nth-child(2) .proc-num { border-color: var(--orange-deep); color: var(--orange-deep); }
.proc-step:nth-child(3) .proc-num { border-color: var(--red); background: var(--red); color: var(--parchment); }
.proc-step:nth-child(4) .proc-num { border-color: var(--orange); background: var(--orange); color: var(--ink); }
.proc-step:nth-child(5) .proc-num { border-color: var(--red); }
.proc-step:hover .proc-num { transform: translateY(-3px); }
.proc-body { max-width: 200px; }
.proc-step-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 20px;
  color: var(--red); letter-spacing: .03em;
  margin-bottom: 8px; line-height: 1.1;
}
.proc-step-desc {
  font-size: 13px; color: rgba(26,10,9,.65);
  font-weight: 300; line-height: 1.65;
}

.proc-delivers-wrap { margin-top: 96px; }
.proc-delivers-label {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(26,10,9,.58);
}
.proc-delivers-label::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(146,0,15,.14);
}
.proc-delivers-label .orb { color: var(--orange-deep); font-size: 10px; }
.proc-delivers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}

/* --- FAQ accordion (uses <details>/<summary>) --- */
.faq-section--accordion .faq-top { margin-bottom: 48px; }
.faq-acc {
  display: flex; flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(146,0,15,.14);
}
.faq-acc-group-label {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-deep);
  padding: 32px 0 12px;
}
.faq-acc-group-label:first-child { padding-top: 20px; }
.faq-acc-item {
  border-bottom: 1px solid rgba(146,0,15,.14);
  transition: background .25s ease;
}
.faq-acc-item:hover { background: rgba(146,0,15,.025); }
.faq-acc-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 56px 24px 0;
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  user-select: none;
}
.faq-acc-item > summary::-webkit-details-marker { display: none; }
.faq-acc-q {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--red);
  letter-spacing: .015em; line-height: 1.2;
}
.faq-acc-chev {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(146,0,15,.3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s ease, background .25s ease;
  flex: 0 0 auto;
}
.faq-acc-chev::before,
.faq-acc-chev::after {
  content: '';
  position: absolute;
  background: var(--red);
  transition: opacity .25s ease;
}
.faq-acc-chev::before { width: 12px; height: 1.5px; border-radius: 1px; }
.faq-acc-chev::after  { width: 1.5px; height: 12px; border-radius: 1px; }
.faq-acc-item[open] > summary .faq-acc-chev {
  transform: translateY(-50%) rotate(180deg);
  border-color: var(--orange-deep);
  background: rgba(168,72,0,.08);
}
.faq-acc-item[open] > summary .faq-acc-chev::after { opacity: 0; }
.faq-acc-item[open] > summary .faq-acc-q { color: var(--orange-deep); }

.faq-acc-a {
  font-size: 14.5px; line-height: 1.75;
  color: rgba(26,10,9,.72);
  font-weight: 300;
  padding: 0 64px 28px 0;
  max-width: 820px;
  animation: faqAccSlide .35s cubic-bezier(.16,1,.3,1);
}
@keyframes faqAccSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Responsive (services redesign) --- */
@media (max-width: 960px) {
  .page-hero-grades--three { grid-template-columns: repeat(3, 1fr); }
  .page-toc {
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
  }
  .page-toc-label { grid-column: 1 / -1; border-right: none; border-bottom: 1px solid rgba(251,242,220,.08); }
  .page-toc-item { padding: 14px 18px; font-size: 11px; }
  .page-toc-item:nth-child(even) { border-right: none; }
  .page-toc-item:nth-child(odd) { border-right: 1px solid rgba(251,242,220,.08); }
  .page-toc-item:nth-child(2),
  .page-toc-item:nth-child(3) { border-bottom: 1px solid rgba(251,242,220,.08); }

  #leaks { padding: 100px 24px; }
  .leaks-top { grid-template-columns: 1fr; gap: 24px; }
  .leaks-sub { max-width: none; }
  .leak-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }
  .leak-side { padding: 0; }
  .leak-side--fix {
    padding: 20px 0 0;
    border-left: none;
    border-top: 1px solid rgba(146,0,15,.14);
  }
  .leak-side--fix::before {
    /* Arrow hinge straddles the horizontal divider instead of the vertical one */
    content: '↓';
    left: 0; top: -15px;
    transform: none;
    font-size: 16px;
  }
  .leak-problem { max-width: none; }

  .catalog-stats {
    grid-template-columns: repeat(2, 1fr);
    margin: -16px 0 56px;
    padding: 24px 0;
  }
  .catalog-stat {
    padding: 16px 20px;
    border-right: none;
    border-top: 1px solid rgba(251,242,220,.06);
  }
  .catalog-stat:nth-child(odd)  { border-right: 1px solid rgba(251,242,220,.08); }
  .catalog-stat:nth-child(1),
  .catalog-stat:nth-child(2) { border-top: none; }

  #services-catalog .services-grid { grid-template-columns: 1fr 1fr; }

  #process { padding: 100px 24px; }
  .proc-top { grid-template-columns: 1fr; gap: 24px; }
  .proc-sub { max-width: none; }
  .proc-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .proc-steps::before {
    top: 0; bottom: 0;
    left: 27px; right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--red) 0%, var(--orange) 50%, var(--red) 100%);
  }
  .proc-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    text-align: left;
    padding: 14px 0;
  }
  .proc-num { margin-bottom: 0; box-shadow: 0 0 0 6px var(--parchment); flex: 0 0 auto; }
  .proc-body { max-width: none; flex: 1; padding-top: 10px; }
  .proc-delivers { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .page-hero-grades--three { grid-template-columns: 1fr; }
  .page-hero-grades--three .page-hero-grade { min-height: 130px; }

  .leak-row { padding: 28px 0; }
  .leak-idx { font-size: 24px; }
  .leak-problem { font-size: 16px; }

  .catalog-stats { grid-template-columns: 1fr; }
  .catalog-stat { border-right: none !important; }
  .catalog-stat:not(:first-child) { border-top: 1px solid rgba(251,242,220,.08); }

  #services-catalog .services-grid { grid-template-columns: 1fr; }

  .faq-acc-item > summary { padding: 20px 48px 20px 0; }
  .faq-acc-q { font-size: 18px; }
  .faq-acc-a { padding: 0 48px 22px 0; font-size: 14px; }
}

/* ------------------------------------------------------------
   About page — Manifesto + How-we-work sections
   ------------------------------------------------------------ */

#manifesto { background: var(--pink); padding: 140px 56px; position: relative; overflow: hidden; }
#manifesto::before {
  content: 'MANIFESTO';
  position: absolute; bottom: -6%; left: -2%;
  font-family: 'Bebas Neue', sans-serif; font-size: 28vw; color: rgba(146,0,15,.07);
  line-height: 1; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}
.manifesto-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.manifesto-top { margin-bottom: 72px; max-width: 780px; }
.manifesto-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--red); margin-bottom: 20px; }
.manifesto-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 88px); color: var(--red); line-height: .88; letter-spacing: .005em; }
.manifesto-h em { color: var(--orange-deep); font-style: normal; }
.manifesto-stanzas { display: grid; grid-template-columns: 1fr; gap: 0; }
.manifesto-stanza { display: grid; grid-template-columns: 140px 1fr; gap: 56px; padding: 52px 0; border-top: 1px solid rgba(146,0,15,.15); align-items: start; }
.manifesto-stanza:last-child { border-bottom: 1px solid rgba(146,0,15,.15); }
.manifesto-num { font-family: 'Bebas Neue', sans-serif; font-size: 88px; color: var(--red); line-height: .85; letter-spacing: .01em; }
.manifesto-num span { color: var(--orange-deep); }
.manifesto-stanza-inner { max-width: 720px; }
.manifesto-stanza-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 3vw, 40px); color: var(--red); line-height: 1; letter-spacing: .01em; margin-bottom: 16px; }
.manifesto-stanza-p { font-size: 16px; color: rgba(26,10,9,.7); font-weight: 300; line-height: 1.75; }
.manifesto-stanza-p b { color: var(--red); font-weight: 500; }
.manifesto-stanza-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.manifesto-stanza-list li { font-size: 15px; color: rgba(26,10,9,.7); font-weight: 300; line-height: 1.6; padding-left: 28px; position: relative; }
.manifesto-stanza-list li::before { content: '×'; position: absolute; left: 0; top: -2px; font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--red); line-height: 1; }

#how-we-work, .hww-section { background: var(--ink); padding: 140px 56px; position: relative; overflow: hidden; }
#how-we-work::before, .hww-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(247,146,30,.07), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(150,206,204,.05), transparent 60%);
}
#how-we-work::after, .hww-section::after {
  content: 'PROCESS'; position: absolute; top: 50%; right: -3%; transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif; font-size: 22vw; color: rgba(251,242,220,.03);
  line-height: 1; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}
.hww-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.hww-top { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: end; margin-bottom: 72px; }
.hww-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin-bottom: 18px; }
.hww-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 84px); color: var(--parchment); line-height: .9; letter-spacing: .005em; }
.hww-h span { color: var(--orange); }
.hww-body { font-size: 15px; color: rgba(251,242,220,.72); font-weight: 300; line-height: 1.8; max-width: 400px; }
.hww-weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(251,242,220,.12); }
.hww-week { padding: 36px 28px 16px; border-right: 1px solid rgba(251,242,220,.08); position: relative; }
.hww-week:first-child { padding-left: 0; }
.hww-week:last-child { border-right: none; padding-right: 0; }
.hww-week-num { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,242,220,.6); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.hww-week-num::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); display: inline-block; }
.hww-week-h { font-family: 'Bebas Neue', sans-serif; font-size: 30px; color: var(--parchment); line-height: 1; letter-spacing: .02em; margin-bottom: 12px; }
.hww-week-h span { color: var(--orange); }
.hww-week-desc { font-size: 14px; color: rgba(251,242,220,.72); font-weight: 300; line-height: 1.65; margin-bottom: 18px; }
.hww-week-out { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.hww-week-out::before { content: '→'; color: var(--teal); font-weight: 500; }

@media (max-width: 860px) {
  #manifesto { padding: 100px 24px; }
  .manifesto-top { margin-bottom: 48px; }
  .manifesto-stanza { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; }
  .manifesto-num { font-size: 64px; }
  #how-we-work, .hww-section { padding: 100px 24px; }
  .hww-top { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .hww-weeks { grid-template-columns: 1fr 1fr; }
  .hww-week { padding: 28px 20px; border-right: 1px solid rgba(251,242,220,.08); border-bottom: 1px solid rgba(251,242,220,.08); }
  .hww-week:first-child, .hww-week:last-child { padding-left: 20px; padding-right: 20px; }
  .hww-week:nth-child(2) { border-right: none; }
  .hww-week:nth-child(3), .hww-week:nth-child(4) { border-bottom: none; }
}
@media (max-width: 560px) {
  .hww-weeks { grid-template-columns: 1fr; }
  .hww-week { border-right: none; border-bottom: 1px solid rgba(251,242,220,.08); padding: 24px 0; }
  .hww-week:last-child { border-bottom: none; }
  .hww-week:nth-child(2) { border-right: none; }
}

/* ------------------------------------------------------------
   Blog / Journal page — honest reset layout
   ------------------------------------------------------------ */

/* Featured first case study — editorial ink treatment */
#blog-featured { background: var(--ink); padding: 140px 56px; position: relative; overflow: hidden; }
#blog-featured::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 45% at 10% 0%, rgba(247,146,30,.08), transparent 60%),
    radial-gradient(ellipse 55% 65% at 100% 100%, rgba(255,129,160,.06), transparent 60%);
}
.featured-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.featured-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); margin-bottom: 28px; display: flex; align-items: center; gap: 12px; }
.featured-label::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px rgba(255,132,0,.6); }
.featured-label .featured-status { color: rgba(251,242,220,.62); letter-spacing: .14em; }
.featured-card { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; background: rgba(251,242,220,.04); border: 1px solid rgba(251,242,220,.1); border-radius: 20px; padding: 56px; align-items: stretch; }
.featured-body { display: flex; flex-direction: column; }
.featured-cat { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(251,242,220,.7); margin-bottom: 16px; }
.featured-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 4.4vw, 54px); color: var(--parchment); line-height: 1; letter-spacing: .005em; margin-bottom: 22px; }
.featured-h span { color: var(--orange); }
.featured-dek { font-size: 15px; color: rgba(251,242,220,.78); font-weight: 300; line-height: 1.75; margin-bottom: 24px; }
.featured-expect { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(251,242,220,.08); padding-top: 22px; }
.featured-expect li { font-size: 14px; color: rgba(251,242,220,.82); font-weight: 300; line-height: 1.5; padding-left: 22px; position: relative; }
.featured-expect li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--teal); font-weight: 500; }
.featured-cta { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); text-decoration: none; align-self: flex-start; border-bottom: 1px dashed rgba(255,132,0,.4); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.featured-cta:hover { color: var(--parchment); border-bottom-color: var(--parchment); }
.featured-cta::before { content: '↓ '; }
.featured-aside { border-left: 1px solid rgba(251,242,220,.1); padding-left: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.featured-aside-head { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(251,242,220,.6); }
.featured-aside-big { font-family: 'Bebas Neue', sans-serif; font-size: clamp(80px, 10vw, 140px); color: var(--orange); line-height: .85; letter-spacing: .01em; margin-top: 8px; }
.featured-aside-small { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: rgba(251,242,220,.72); letter-spacing: .08em; line-height: 1; margin-top: 6px; }
.featured-aside-div { border-top: 1px solid rgba(251,242,220,.1); margin-top: 20px; }
.featured-aside-p { font-size: 13px; color: rgba(251,242,220,.72); font-weight: 300; line-height: 1.65; margin-top: 20px; }

/* Upcoming grid — coming-soon pink tiles */
#blog-upcoming { background: var(--pink); padding: 140px 56px; position: relative; overflow: hidden; }
#blog-upcoming::before {
  content: 'SOON'; position: absolute; top: 50%; right: -3%; transform: translateY(-50%);
  font-family: 'Bebas Neue', sans-serif; font-size: 28vw; color: rgba(146,0,15,.06);
  line-height: 1; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}
.upcoming-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.upcoming-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; margin-bottom: 64px; }
.upcoming-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--red); margin-bottom: 18px; }
.upcoming-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5.5vw, 76px); color: var(--red); line-height: .9; letter-spacing: .005em; }
.upcoming-h span { color: var(--orange-deep); }
.upcoming-body { font-size: 15px; color: rgba(26,10,9,.65); font-weight: 300; line-height: 1.8; max-width: 400px; }
.upcoming-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.upcoming-tile { background: rgba(251,242,220,.55); border: 1px solid rgba(146,0,15,.12); border-radius: 14px; padding: 28px 26px; position: relative; transition: transform .2s, border-color .2s, background .2s; }
.upcoming-tile:hover { border-color: rgba(146,0,15,.3); transform: translateY(-2px); background: rgba(251,242,220,.72); }
.upcoming-tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.upcoming-tile-cat { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(146,0,15,.62); }
.upcoming-tile-when { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); padding: 4px 10px; border-radius: 100px; background: rgba(168,72,0,.12); flex-shrink: 0; }
.upcoming-tile-h { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--red); letter-spacing: .015em; line-height: 1.1; margin-bottom: 10px; }
.upcoming-tile-p { font-size: 13.5px; color: rgba(26,10,9,.6); font-weight: 300; line-height: 1.6; }

/* Subscribe card — parchment, form-driven */
#blog-subscribe { background: var(--parchment); padding: 140px 56px; position: relative; }
.subscribe-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.subscribe-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 20px; }
.subscribe-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(42px, 6vw, 88px); color: var(--red); line-height: .9; letter-spacing: .005em; margin-bottom: 22px; }
.subscribe-h span { color: var(--orange-deep); }
.subscribe-p { font-size: 16px; color: rgba(26,10,9,.62); font-weight: 300; line-height: 1.75; max-width: 620px; margin: 0 auto 36px; }
.subscribe-form { display: flex; gap: 10px; max-width: 540px; margin: 0 auto; }
.subscribe-form input[type="email"] { flex: 1; background: white; border: 1.5px solid rgba(146,0,15,.12); border-radius: 100px; padding: 14px 22px; font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s; min-width: 0; }
.subscribe-form input[type="email"]:focus { border-color: var(--orange); }
.subscribe-form input[type="email"]::placeholder { color: rgba(26,10,9,.55); }
.subscribe-form .btn-o { flex-shrink: 0; font-size: 15px; padding: 14px 24px; }
.subscribe-status { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .1em; color: rgba(146,0,15,.55); margin-top: 18px; min-height: 20px; }
.subscribe-tiny { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(26,10,9,.6); margin-top: 28px; }

@media (max-width: 860px) {
  #blog-featured { padding: 100px 24px; }
  .featured-card { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; }
  .featured-aside { border-left: none; border-top: 1px solid rgba(251,242,220,.1); padding-left: 0; padding-top: 32px; }
  #blog-upcoming { padding: 100px 24px; }
  .upcoming-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .upcoming-grid { grid-template-columns: 1fr; }
  #blog-subscribe { padding: 100px 24px; }
  .subscribe-form { flex-direction: column; gap: 14px; }
  .subscribe-form input[type="email"] { width: 100%; }
  .subscribe-form .btn-o { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------
   Service subpage template — reusable primitives
   (breadcrumbs · whats-section · outcomes-section)
   ------------------------------------------------------------ */

/* Breadcrumbs — legacy class still used inline in subpages where needed,
   restyled for the dark dossier backdrop. */
.page-hero-crumbs {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(251,242,220,.55);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.page-hero-crumbs a { color: rgba(251,242,220,.55); text-decoration: none; transition: color .2s; }
.page-hero-crumbs a:hover { color: var(--orange-light); }
.page-hero-crumbs .sep { color: rgba(251,242,220,.28); }
.page-hero-crumbs .current { color: var(--orange); }

/* What's included — parchment, 3-col deliverables grid */
.whats-section { background: var(--parchment); padding: 140px 56px; position: relative; }
.whats-inner { max-width: 1100px; margin: 0 auto; }
.whats-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; margin-bottom: 64px; }
.whats-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 18px; }
.whats-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5.5vw, 76px); color: var(--red); line-height: .9; letter-spacing: .005em; }
.whats-h span { color: var(--orange-deep); }
.whats-body { font-size: 15px; color: rgba(26,10,9,.62); font-weight: 300; line-height: 1.8; max-width: 400px; }
.whats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.whats-tile { background: white; border: 1.5px solid rgba(146,0,15,.08); border-radius: 14px; padding: 28px 26px; transition: border-color .2s, transform .2s; }
.whats-tile:hover { border-color: rgba(146,0,15,.22); transform: translateY(-2px); }
.whats-tile-i { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--orange); letter-spacing: .04em; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,132,0,.1); border-radius: 10px; margin-bottom: 18px; line-height: 1; }
.whats-tile-h { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--red); letter-spacing: .015em; line-height: 1.1; margin-bottom: 10px; }
.whats-tile-p { font-size: 13.5px; color: rgba(26,10,9,.6); font-weight: 300; line-height: 1.6; }

/* Outcomes — red bg, big-number results strip */
.outcomes-section { background: var(--red); padding: 140px 56px; position: relative; overflow: hidden; }
.outcomes-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 0% 0%, rgba(247,146,30,.14), transparent 60%),
    radial-gradient(ellipse 60% 55% at 100% 100%, rgba(150,206,204,.07), transparent 60%);
}
.outcomes-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; text-align: center; }
.outcomes-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-light); margin-bottom: 20px; }
.outcomes-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px, 5.5vw, 76px); color: var(--parchment); line-height: .9; letter-spacing: .005em; margin-bottom: 20px; }
.outcomes-h span { color: var(--orange); }
.outcomes-sub { font-size: 16px; color: rgba(251,242,220,.65); font-weight: 300; line-height: 1.75; max-width: 640px; margin: 0 auto 64px; }
.outcomes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(251,242,220,.14); text-align: left; }
.outcomes-tile { padding: 36px 24px 24px; border-right: 1px solid rgba(251,242,220,.1); }
.outcomes-tile:last-child { border-right: none; padding-right: 0; }
.outcomes-tile:first-child { padding-left: 0; }
.outcomes-n { font-family: 'Bebas Neue', sans-serif; font-size: clamp(44px, 5vw, 64px); color: var(--parchment); letter-spacing: .02em; line-height: 1; display: block; margin-bottom: 14px; }
.outcomes-n span { color: var(--orange); }
.outcomes-l { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,242,220,.7); line-height: 1.5; display: block; margin-bottom: 8px; }
.outcomes-tile-sub { font-size: 13px; color: rgba(251,242,220,.7); font-weight: 300; line-height: 1.6; }
.outcomes-tiny { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,242,220,.62); margin-top: 44px; }

@media (max-width: 860px) {
  .whats-section { padding: 100px 24px; }
  .whats-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
  .whats-grid { grid-template-columns: 1fr 1fr; }
  .outcomes-section { padding: 100px 24px; }
  .outcomes-grid { grid-template-columns: 1fr 1fr; }
  .outcomes-tile { border-right: 1px solid rgba(251,242,220,.1); border-bottom: 1px solid rgba(251,242,220,.1); padding: 28px 20px; }
  .outcomes-tile:nth-child(2) { border-right: none; }
  .outcomes-tile:nth-child(3), .outcomes-tile:nth-child(4) { border-bottom: none; }
  .outcomes-tile:first-child, .outcomes-tile:last-child { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 560px) {
  .whats-grid { grid-template-columns: 1fr; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .outcomes-tile { border-right: none !important; border-bottom: 1px solid rgba(251,242,220,.1); padding: 24px 0 !important; }
  .outcomes-tile:last-child { border-bottom: none; }
}

#pipeline { background: var(--parchment); padding: 140px 56px; overflow: hidden; position: relative; }
.pipe-inner { max-width: 1100px; margin: 0 auto; }
.pipe-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 20px; }
.pipe-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--red); line-height: .9; letter-spacing: .01em; margin-bottom: 16px; }
.pipe-h span { color: var(--orange-deep); }
.pipe-sub { font-size: 15px; color: rgba(26,10,9,.65); font-weight: 300; line-height: 1.8; max-width: 560px; margin-bottom: 80px; }
.pipe-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.pipe-steps::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 1px; background: rgba(146,0,15,.12); z-index: 0; }
.pipe-step { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; padding: 0 12px; }
.pipe-num { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; margin-bottom: 16px; border: 2px solid; }
.pipe-step:nth-child(1) .pipe-num { background: var(--red); color: var(--parchment); border-color: var(--red); }
.pipe-step:nth-child(2) .pipe-num { background: var(--orange); color: white; border-color: var(--orange); }
.pipe-step:nth-child(3) .pipe-num { background: var(--pink); color: white; border-color: var(--pink); }
.pipe-step:nth-child(4) .pipe-num { background: var(--teal); color: var(--red); border-color: var(--teal); }
.pipe-step:nth-child(5) .pipe-num { background: var(--sage); color: var(--red); border-color: var(--sage); }
.pipe-step-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: var(--red); letter-spacing: .03em; margin-bottom: 6px; line-height: 1.1; }
.pipe-step-desc { font-size: 12px; color: rgba(26,10,9,.68); font-weight: 300; line-height: 1.6; }
.pipe-delivers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 80px; }
.deliver-card { background: white; border-radius: 14px; padding: 28px; border: 1.5px solid rgba(146,0,15,.07); }
.deliver-label { font-family: 'DM Mono', monospace; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-deep); margin-bottom: 8px; }
.deliver-title { font-size: 15px; font-weight: 500; color: var(--red); margin-bottom: 6px; }
.deliver-desc { font-size: 13px; color: rgba(26,10,9,.66); font-weight: 300; line-height: 1.6; }

#calculator { background: var(--ink); padding: 140px 56px; position: relative; overflow: hidden; }
#calculator::before { content: '$'; font-family: 'Bebas Neue', sans-serif; font-size: 50vw; line-height: 1; color: rgba(251,242,220,.02); position: absolute; right: -10%; top: 50%; transform: translateY(-50%); pointer-events: none; }
.calc-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.calc-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; }
.calc-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--parchment); line-height: .9; letter-spacing: .01em; margin-bottom: 16px; }
.calc-h span { color: var(--orange); }
.calc-sub { font-size: 15px; color: rgba(251,242,220,.55); font-weight: 300; line-height: 1.8; max-width: 480px; margin-bottom: 72px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.calc-inputs { display: flex; flex-direction: column; gap: 24px; }
.calc-group-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,242,220,.55); margin-bottom: 10px; display: flex; justify-content: space-between; }
.calc-group-label span { color: var(--orange); font-size: 12px; }
input[type=range] { appearance: none; -webkit-appearance: none; width: 100%; height: 3px; background: rgba(251,242,220,.1); border-radius: 2px; outline: none; }
input[type=range]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); cursor: pointer; border: 2px solid var(--ink); }
.calc-result { background: rgba(251,242,220,.04); border: 1px solid rgba(251,242,220,.08); border-radius: 18px; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.calc-result-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: 1px solid rgba(251,242,220,.06); }
.calc-result-row:last-of-type { border-bottom: none; }
.calc-result-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,242,220,.5); }
.calc-result-val { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--parchment); letter-spacing: .02em; }
.calc-result-val.highlight { color: var(--orange); }
.calc-result-val.good { color: #5aaa9f; }
.calc-cta { margin-top: 8px; }

#packages { background: var(--pink); padding: 140px 56px; position: relative; overflow: hidden; }
.pkg-inner { max-width: 1100px; margin: 0 auto; }
.pkg-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--red); opacity: .5; text-align: center; margin-bottom: 16px; }
.pkg-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--red); line-height: .9; letter-spacing: .01em; text-align: center; margin-bottom: 12px; }
.pkg-h span { color: var(--orange-deep); }
.pkg-sub { font-size: 15px; color: rgba(26,10,9,.7); font-weight: 300; line-height: 1.8; text-align: center; max-width: 500px; margin: 0 auto 72px; }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pkg-card { background: white; border-radius: 18px; padding: 36px; border: 2px solid transparent; display: flex; flex-direction: column; gap: 20px; transition: border-color .2s, transform .2s; position: relative; overflow: hidden; }
.pkg-card:hover { transform: translateY(-6px); }
.pkg-card.featured { border-color: var(--orange); }
.pkg-featured-badge { position: absolute; top: 0; right: 24px; background: var(--orange); color: white; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 14px; border-radius: 0 0 8px 8px; z-index: 5; }
.pkg-name { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--red); letter-spacing: .03em; line-height: 1; }
.pkg-tagline { font-size: 13px; color: rgba(26,10,9,.65); font-weight: 300; line-height: 1.5; }
.pkg-price { display: flex; align-items: baseline; gap: 4px; padding: 16px 0; border-top: 1px solid rgba(146,0,15,.07); border-bottom: 1px solid rgba(146,0,15,.07); }
.pkg-price-curr { font-family: 'DM Mono', monospace; font-size: 14px; color: var(--grove); }
.pkg-price-num { font-family: 'Bebas Neue', sans-serif; font-size: 52px; color: var(--red); line-height: 1; letter-spacing: -.01em; }
.pkg-price-period { font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(26,10,9,.55); letter-spacing: .1em; }
.pkg-features { list-style: none; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pkg-features li { font-size: 13px; color: rgba(26,10,9,.6); display: flex; gap: 10px; line-height: 1.4; font-weight: 300; }
.pkg-features li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; margin-top: 5px; }
.pkg-features li.muted { color: rgba(26,10,9,.25); }
.pkg-features li.muted::before { background: rgba(26,10,9,.15); }
.pkg-outcome { background: rgba(255,132,0,.08); border-radius: 8px; padding: 12px 14px; }
.pkg-outcome-label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.pkg-outcome-text { font-size: 12px; color: rgba(26,10,9,.6); font-weight: 400; line-height: 1.5; }

#whyus { background: var(--parchment); padding: 140px 56px; }
.why-inner { max-width: 1100px; margin: 0 auto; }
.why-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--orange); margin-bottom: 20px; }
.why-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--red); line-height: .9; letter-spacing: .01em; margin-bottom: 72px; }
.why-h span { color: var(--orange); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th { padding: 20px 28px; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .04em; border-bottom: 2px solid rgba(146,0,15,.1); }
.compare-table th.them { color: rgba(146,0,15,.5); }
.compare-table th.grabfruits { background: var(--red); color: var(--parchment); border-radius: 12px 12px 0 0; }
.compare-table th .th-sub { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .5; font-weight: 400; display: block; margin-top: 4px; }
.compare-table td { padding: 18px 28px; text-align: center; font-size: 13px; color: rgba(26,10,9,.6); border-bottom: 1px solid rgba(146,0,15,.06); font-weight: 300; }
.compare-table td.feature { text-align: left; font-weight: 400; color: var(--red); }
.compare-table td.us-col { background: rgba(146,0,15,.03); }
.compare-table .check { color: var(--orange); font-size: 16px; font-weight: 700; }
.compare-table .cross2 { color: rgba(146,0,15,.45); font-size: 16px; }
.compare-table .partial { color: var(--grove); font-size: 13px; }

@media (max-width: 760px) {
  .compare-table,
  .compare-table thead,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td { display: block; }

  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

  .compare-table tr {
    border: 1.5px solid rgba(146,0,15,.08);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 12px;
  }

  .compare-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 7px 0;
    border-bottom: none;
  }

  .compare-table td.feature {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: .03em;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(146,0,15,.08);
    display: block;
  }

  .compare-table td.us-col { background: none; }

  /* Label each value column with its header via ::before */
  .compare-table td:not(.feature)::before {
    content: attr(data-label);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(26,10,9,.35);
    text-align: left;
  }

  .compare-table td.us-col::before { color: var(--red); font-weight: 500; }
}

.why-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
.pillar { padding: 32px; border-radius: 14px; border: 1.5px solid rgba(146,0,15,.08); }
.pillar-icon { font-size: 32px; margin-bottom: 12px; }
.pillar-title { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--red); letter-spacing: .03em; margin-bottom: 8px; }
.pillar-desc { font-size: 13px; color: rgba(26,10,9,.5); font-weight: 300; line-height: 1.75; }

#blog { background: var(--red); padding: 140px 56px; position: relative; overflow: hidden; }
.blog-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.blog-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 64px; }
.blog-eyebrow { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(251,242,220,.55); margin-bottom: 14px; }
.blog-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px, 5vw, 68px); color: var(--parchment); line-height: .9; letter-spacing: .01em; }
.blog-h span { color: var(--orange); }
.blog-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.blog-card { background: rgba(251,242,220,.05); border: 1px solid rgba(251,242,220,.08); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .2s; }
.blog-card:hover { border-color: rgba(251,242,220,.2); }
.blog-card.featured { grid-row: 1/3; }
.blog-card-img { height: 180px; display: flex; align-items: flex-end; padding: 20px; position: relative; overflow: hidden; }
.blog-card.featured .blog-card-img { height: 260px; }
.blog-card-cat { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(251,242,220,.15); color: rgba(251,242,220,.7); }
.blog-card-body { padding: 24px 26px; }
.blog-card-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--parchment); letter-spacing: .03em; line-height: 1.1; margin-bottom: 8px; }
.blog-card.featured .blog-card-title { font-size: 30px; }
.blog-card-desc { font-size: 12px; color: rgba(251,242,220,.45); font-weight: 300; line-height: 1.6; }
.blog-card-meta { display: flex; gap: 12px; margin-top: 12px; align-items: center; }
.blog-card-time { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .1em; color: rgba(251,242,220,.5); }

footer { background: var(--ink); padding: 96px 56px 48px; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 72px; }
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--parchment); letter-spacing: .04em; margin-bottom: 14px; }
.footer-logo span { color: var(--orange); }
.footer-tagline { font-size: 14px; color: rgba(251,242,220,.55); font-weight: 300; line-height: 1.8; max-width: 260px; margin-bottom: 28px; }
.footer-socials { display: flex; gap: 12px; }
.social-link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(251,242,220,.12); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 12px; color: rgba(251,242,220,.55); text-decoration: none; transition: all .2s; }
.social-link:hover { border-color: var(--orange); color: var(--orange); }
.footer-col-title { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(251,242,220,.5); margin-bottom: 24px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.footer-links a { font-size: 14px; color: rgba(251,242,220,.45); text-decoration: none; font-weight: 300; transition: color .2s; }
.footer-links a:hover { color: var(--parchment); }
.footer-bottom { border-top: 1px solid rgba(251,242,220,.06); padding-top: 36px; display: flex; align-items: center; justify-content: space-between; }
.footer-legal { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; color: rgba(251,242,220,.55); }
.footer-grab { font-family: 'Bebas Neue', sans-serif; font-size: 14px; color: rgba(251,242,220,.55); letter-spacing: .08em; }
.footer-grab span { color: rgba(255,132,0,.3); }

#cookie-banner { position: fixed; bottom: 24px; right: 24px; z-index: 250; background: var(--ink); border: 1px solid rgba(251,242,220,.1); border-radius: 14px; padding: 24px 22px 22px; width: 280px; box-sizing: border-box; font-size: 12px; color: rgba(251,242,220,.5); font-weight: 300; line-height: 1.65; box-shadow: 0 8px 40px rgba(0,0,0,.35); }
#cookie-banner.is-hidden { display: none; }
#gf-turnstile { position: absolute; width: 0; height: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.cookie-banner-title { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,242,220,.72); margin-bottom: 10px; }
.cookie-banner-inner { display: flex; flex-direction: column; gap: 0; }
.cookie-banner-inner > span { margin-bottom: 18px; }
.cookie-actions { display: flex; flex-direction: column; gap: 8px; }
.cookie-btn { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 12px 20px; border-radius: 100px; cursor: pointer; border: none; transition: opacity .15s; width: 100%; }
.cookie-btn:hover { opacity: .78; }
.cookie-btn-primary { background: var(--orange); color: white; }
.cookie-btn-ghost { background: transparent; color: rgba(251,242,220,.6); border: 1px solid rgba(251,242,220,.16); }
@media (max-width: 520px) {
  #cookie-banner { bottom: 0; right: 0; left: 0; width: 100%; border-radius: 0; border: none; border-top: 1px solid rgba(251,242,220,.1); padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); max-height: 40vh; overflow-y: auto; }
  .cookie-banner-title { margin-bottom: 6px; }
  .cookie-banner-inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
  .cookie-banner-inner > span { flex: 1 1 100%; margin-bottom: 0; font-size: 11px; line-height: 1.5; }
  .cookie-actions { flex-direction: row; gap: 8px; flex: 1 1 100%; }
  .cookie-btn { width: auto; flex: 1; padding: 10px 14px; font-size: 11px; }
}
.scan-hero-error { color: var(--pink); font-size: 13px; margin-top: 10px; padding-right: 188px; min-height: 0; display: none; text-align: center; width: 100%; box-sizing: border-box; }
@media (max-width: 620px) {
  .scan-hero-error { padding-right: 0; margin-top: 48px; }
}
.scan-hero-error.on { display: block; }
.form-status { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .08em; color: rgba(146,0,15,.45); text-align: center; margin-top: 10px; min-height: 1.2em; }

@media (max-width: 760px) {
  #sticky-bar { padding: 8px 16px; flex-wrap: wrap; gap: 12px; }
  #sticky-bar .r6-st-txt { display: none; }
}

@media (max-width: 900px) {
  .val-inner, .num-inner, .audit-inner, .team-inner, .prob-inner, .pipe-inner, .calc-inner, .pkg-inner, .why-inner, .blog-inner, .footer-inner { padding-left: 24px; padding-right: 24px; }
  #numbers { padding: 100px 0 120px; }
  .val-grid { grid-template-columns: repeat(2, 1fr); }
  .num-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .num-block { border-right: 1px solid rgba(251,242,220,.08); border-bottom: 1px solid rgba(251,242,220,.08); }
  .num-block:nth-child(2n) { border-right: none; }
  .num-block:nth-child(n+3) { border-bottom: none; }
  .audit-inner { grid-template-columns: 1fr; gap: 48px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-top { flex-direction: column; }
  .prob-table { grid-template-columns: 1fr; }
  .prob-mid { display: none; }
  .services-grid { grid-template-columns: 1fr 1fr; }
  .pipe-steps { grid-template-columns: 1fr; }
  .pipe-steps::before { display: none; }
  .calc-grid { grid-template-columns: 1fr; }
  .pkg-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card.featured { grid-row: auto; }
  .blog-top { flex-direction: column; align-items: flex-start; }
}

/* ── Multi-page shared layout ─────────────────────── */
/* Spacer height + scroll-padding-top match the .shared-nav padding stack
   so first-section content lands cleanly below the fixed nav. */
.page-top-spacer { height: 96px; flex-shrink: 0; display: block; }

/* Offset anchor scrolls (skip-link, in-page hashes) so landing content isn't hidden behind .shared-nav */
.page-body { scroll-padding-top: 96px; }
html:has(body.page-body) { scroll-padding-top: 96px; }

/* Inner-page nav. Padding/silhouette mirror the main page .hero-nav so the
   global navigation reads identically across pages. */
.shared-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--hero-framer-cream);
  border: none;
  box-shadow: none;
  padding: clamp(22px, 2.5vh, 32px) clamp(40px, 5vw, 72px) clamp(20px, 2.5vh, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Subtle definition on parchment-on-parchment pages (about, pricing, blog, …);
   omitted on .page-body--dark-top so the cream nav reads as a clean block
   over the dark hero with no border/shadow artifact. */
.page-body:not(.page-body--dark-top) .shared-nav {
  border-bottom: 1px solid rgba(146,0,15,.08);
  box-shadow: 0 6px 18px -12px rgba(26,10,9,.18), 0 1px 0 rgba(146,0,15,.04);
}
@media (max-width: 760px) {
  .shared-nav { padding: 16px 24px 14px; }
}
.shared-nav .nav-links { margin-top: -8px; }

/* Inner pages use parchment background by default */
.page-body {
  background: var(--parchment);
  color: var(--ink);
}

.page-body footer     { contain: layout style; }

/* ── Hub section ───────────────────────────────────── */
#hub {
  background:
    radial-gradient(ellipse 110% 70% at 50% 0%, #3a1614 0%, #21100e 30%, var(--ink) 68%, #0f0706 100%);
  padding: 160px 56px 140px;
  position: relative;
  overflow: hidden;
}
#hub::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 80% 8%, rgba(247,146,30,.07), transparent 65%),
    radial-gradient(ellipse 40% 50% at 10% 90%, rgba(150,206,204,.04), transparent 60%);
  pointer-events: none;
}
#hub > * { position: relative; z-index: 1; }
.hub-inner { max-width: 1160px; margin: 0 auto; }

.hub-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
  opacity: .8;
}
.hub-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 88px;
}
.hub-opener {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 8.5vw, 128px);
  color: var(--parchment);
  line-height: .85;
  letter-spacing: .015em;
}
.hub-opener span { color: var(--orange); }
.hub-opener-now {
  display: block;
  font-size: .38em;
  color: rgba(251,242,220,.35);
  letter-spacing: .08em;
  margin-top: 14px;
}
.hub-aside {
  font-size: 15px;
  color: rgba(251,242,220,.5);
  font-weight: 300;
  line-height: 1.7;
  max-width: 380px;
  padding-bottom: 10px;
  border-left: 1px solid rgba(251,242,220,.1);
  padding-left: 28px;
}

/* ── Conversation picker ──────────────────────────── */
.hub-convo {
  background: rgba(251,242,220,.04);
  border: 1px solid rgba(251,242,220,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 40px 44px 36px;
  margin-bottom: 56px;
  position: relative;
}
.hub-convo-q {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--parchment);
  margin-bottom: 24px;
  line-height: 1.4;
}
.hub-convo-q strong {
  color: var(--orange);
  font-weight: 500;
}
.hub-mood-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hub-mood-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(251,242,220,.65);
  background: rgba(251,242,220,.06);
  border: 1px solid rgba(251,242,220,.1);
  border-radius: 10px;
  padding: 11px 20px;
  cursor: pointer;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  position: relative;
  line-height: 1.3;
}
.hub-mood-pill::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  opacity: 0;
  z-index: -1;
  transition: opacity .3s;
}
.hub-mood-pill:hover {
  color: var(--parchment);
  border-color: transparent;
  background: rgba(251,242,220,.1);
  transform: translateY(-2px);
}
.hub-mood-pill:hover::before { opacity: .3; }
.hub-mood-pill.picked {
  color: white;
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 20px rgba(255,132,0,.3);
}
.hub-mood-pill.picked::before { opacity: 0; }

/* ── Reply bubble ─────────────────────────────────── */
.hub-reply {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .55s cubic-bezier(.16,1,.3,1), opacity .4s ease .05s, margin .35s ease;
  margin-top: 0;
  margin-bottom: 0;
}
.hub-reply.on {
  max-height: 260px;
  opacity: 1;
  margin-top: 24px;
  margin-bottom: 56px;
}
.hub-reply-inner {
  background: rgba(251,242,220,.05);
  border: 1px solid rgba(251,242,220,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 4px 32px rgba(0,0,0,.2);
  position: relative;
}
.hub-reply-inner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--pink) 100%);
}
.hub-reply-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px;
  color: var(--ink);
  flex-shrink: 0;
  letter-spacing: .04em;
}
.hub-reply-body { flex: 1; min-width: 0; }
.hub-reply-who {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(251,242,220,.4);
  margin-bottom: 6px;
}
.hub-reply-text {
  font-size: 15px;
  color: rgba(251,242,220,.65);
  font-weight: 300;
  line-height: 1.65;
}
.hub-reply-text strong { color: var(--orange); font-weight: 500; }
.hub-reply-go {
  flex-shrink: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: .05em;
  background: var(--orange);
  color: var(--ink);
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.16,1,.3,1);
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.hub-reply-go:hover {
  background: var(--parchment);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,132,0,.25);
}

/* ── Page cards — asymmetric bento grid ───────────── */
.hub-cards {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: auto auto;
  gap: 18px;
}
.hub-card {
  background: transparent;
  border: 1px solid rgba(251,242,220,.08);
  border-radius: 20px;
  padding: 40px 36px 32px;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s cubic-bezier(.16,1,.3,1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.hub-card--wide { grid-column: 1 / -1; }
.hub-card-stripe {
  display: none;
}

.hub-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,.25);
  border-color: rgba(251,242,220,.14);
}
.hub-card.hub-card--highlight {
  border-color: rgba(255,132,0,.3);
  box-shadow: 0 8px 32px rgba(255,132,0,.12);
}

.hub-card.border-glow-card.hub-card--highlight {
  border-color: rgba(255, 132, 0, 0.42);
}

.hub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hub-card-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
}
.hub-card:hover .hub-card-num { transform: scale(1.1); }
.hub-card-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(251,242,220,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s cubic-bezier(.16,1,.3,1);
  color: rgba(251,242,220,.4);
  font-size: 14px;
}
.hub-card:hover .hub-card-arrow {
  background: var(--orange);
  color: var(--ink);
  transform: translateX(3px);
}
.hub-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--parchment);
  letter-spacing: .018em;
  line-height: .92;
  margin-bottom: 14px;
}
.hub-card-title b { color: var(--orange); font-weight: 400; }
.hub-card-desc {
  font-size: 14px;
  color: rgba(251,242,220,.5);
  font-weight: 300;
  line-height: 1.7;
  flex: 1;
}
.hub-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(251,242,220,.06);
}
.hub-card-nudge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(251,242,220,.4);
  transition: color .3s cubic-bezier(.16,1,.3,1);
}
.hub-card:hover .hub-card-nudge {
  color: var(--orange);
}
.hub-card-stat {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(251,242,220,.35);
}

/* ── Bottom kicker ────────────────────────────────── */
.hub-kicker {
  margin-top: 88px;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 44px 48px;
  background: rgba(251,242,220,.05);
  border-radius: 22px;
  border: 1px solid rgba(251,242,220,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}
.hub-kicker::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(ellipse at right, rgba(255,132,0,.1), transparent 65%);
  pointer-events: none;
}
.hub-kicker-text {
  flex: 1;
  font-size: 16px;
  color: rgba(251,242,220,.75);
  font-weight: 300;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
.hub-kicker-text strong { color: var(--orange); font-weight: 400; }
.hub-kicker .btn-o { flex-shrink: 0; white-space: nowrap; position: relative; z-index: 1; }

@media (max-width: 900px) {
  .hub-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .hub-aside { text-align: left; max-width: 100%; border-left: none; padding-left: 0; padding-top: 18px; border-top: 1px solid rgba(251,242,220,.1); }
}
@media (max-width: 760px) {
  #hub { padding: 80px 24px 72px; }
  .hub-convo { padding: 28px 24px 24px; border-radius: 16px; }
  .hub-cards { grid-template-columns: 1fr; }
  .hub-card--wide { grid-column: auto; }
  .hub-reply-inner { flex-direction: column; gap: 16px; }
  .hub-reply-go { width: 100%; text-align: center; }
  .hub-kicker { flex-direction: column; text-align: center; padding: 28px 24px; gap: 20px; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE · Tablet + Mobile
   Added below so they never override desktop styles.
   ═══════════════════════════════════════════════════════ */

/* ── Tablet (901px – 1024px) ─────────────────────────── */
@media (max-width: 1024px) and (min-width: 901px) {
  /* -- Hero -- */
  .hero-nav { padding: 20px 36px 18px; }
  .stage {
    padding: calc(var(--hero-padding-below-nav) + 16px) 28px max(var(--hero-stage-padding-bottom), env(safe-area-inset-bottom, 0px));
  }
  /* -- Numbers -- */
  #numbers { padding: 100px 36px; }
  .num-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .num-block { border-right: 1px solid rgba(251,242,220,.08); border-bottom: 1px solid rgba(251,242,220,.08); }
  .num-block:nth-child(2n) { border-right: none; }
  .num-block:nth-child(n+3) { border-bottom: none; }

  /* -- Footer -- */
  footer { padding: 72px 36px 40px; }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 36px;
  }
  .footer-top > div:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0 40px;
    align-items: start;
  }
  .footer-top > div:first-child .footer-logo { grid-column: 1; }
  .footer-top > div:first-child .footer-tagline { grid-column: 1; grid-row: 2; }
  .footer-top > div:first-child .footer-socials { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .footer-bottom { padding-top: 28px; }

  /* -- Hub -- */
  #hub { padding: 100px 36px 80px; }
  .hub-opener { font-size: clamp(36px, 5.5vw, 56px); }
  .hub-convo { padding: 32px 36px 28px; }

  .services-grid { grid-template-columns: 1fr 1fr; }

  #validator { padding: 0 0 0; }
  .val-inner { padding: 0 36px 100px; }
  .val-intro { min-height: 120svh; padding: 0; }
  .val-intro-stick { top: 96px; padding-bottom: 32px; }
  .validator-bento { margin-top: 0; }

  .why-pillars { grid-template-columns: 1fr 1fr; }
  .pipe-delivers { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile-first polish (≤ 760px) ───────────────────── */
@media (max-width: 760px) {

  /* ─── Hero ─────────────────────────────────────────── */
  .stage {
    padding: calc(var(--hero-padding-below-nav) + 12px) 16px max(12px, env(safe-area-inset-bottom, 0px));
  }
  /*
     Gap uses vh so tall phones (Pro Max, S24 Ultra) breathe
     while short phones (SE, Mini) stay compact.
     clamp floors at 12px (SE), scales with 2.4vh, caps at 28px (Pro Max).
  */
  .hero-artboard {
    gap: clamp(12px, 2.4vh, 28px);
  }
  /* Title: full width, center */
  .hero-ab-title {
    padding: 0 4px;
    /* extra bottom breathing room on tall screens */
    margin-bottom: clamp(0px, 0.8vh, 8px);
  }
  /* Subtitle: readable wrap (Source Serif) */
  .hero-artboard .hero-subtitle-wrap {
    font-size: clamp(12px, 3.3vw, 16px);
    letter-spacing: 0.02em;
    line-height: 1.55;
    padding-inline: 8px;
    margin-bottom: clamp(0px, 0.6vh, 6px);
  }
  .btn-hero-scan {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    align-self: stretch;
  }
  .btn-hero-scan .btn-svg { display: none; }
  .btn-hero-scan-label {
    display: flex;
    font-size: 19px;
    letter-spacing: 0.08em;
    padding: 14px 28px;
    border-radius: 100px;
    color: var(--hero-framer-cream);
    background: transparent;
    box-shadow: none;
    transition: transform 0.1s ease, opacity 0.2s ease;
  }
  .btn-hero-scan:hover .btn-hero-scan-label {
    opacity: 0.96;
    transform: translateY(-1px);
  }
  .btn-hero-scan:active .btn-hero-scan-label {
    transform: scale(0.98);
  }
  /* Tags: wrap nicely, comfortable tap size */
  .hero-viewport-foot .tags {
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(0px, 0.5vh, 6px);
  }
  .hero-viewport-foot .tag {
    padding: 7px 12px;
    font-size: 8px;
    letter-spacing: 0.08em;
    min-height: 28px;
    border-radius: 6px;
  }
  /* Divider: subtle, extra spacing on tall screens */
  .hero-ab-line {
    order: 7;
    height: 1px !important;
    min-height: 1px !important;
    margin-block: clamp(0px, 0.4vh, 4px);
  }
  /* Stats: compact grid, centered, subtle card bg */
  .hero-ab-stats {
    order: 8;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: clamp(12px, 1.8vh, 20px) clamp(20px, 5vw, 32px);
    background: rgba(146,0,15,.025);
    border-radius: 12px;
    padding: clamp(10px, 1.6vh, 18px) 16px !important;
    margin-top: clamp(0px, 0.5vh, 6px);
  }
  .hero-viewport-foot .stat-n {
    font-size: clamp(18px, 5vw, 24px);
  }
  .hero-viewport-foot .stat-l {
    font-size: 8px;
    letter-spacing: 0.1em;
    margin-top: 3px;
  }
  /* Error message: centered, no padding offset */
  .scan-hero-error {
    padding-right: 0;
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
  }

  /* ─── Footer ───────────────────────────────────────── */
  footer { padding: 56px 20px 32px; }
  .footer-inner { max-width: 100%; }
  /* Brand row: centered on mobile */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .footer-top > div:first-child {
    grid-column: 1 / -1;
    text-align: center;
  }
  .footer-logo { font-size: 28px; margin-bottom: 10px; }
  .footer-tagline {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    font-size: 13px;
  }
  .footer-socials { justify-content: center; gap: 14px; }
  .social-link {
    width: 42px;
    height: 42px;
    font-size: 13px;
  }
  /* Link columns: 2-col grid for Services + Company, then Get Started full width */
  .footer-col-title { margin-bottom: 16px; font-size: 10px; }
  .footer-links { gap: 12px; }
  .footer-links a {
    font-size: 14px;
    padding: 2px 0;
  }
  /* Get started column with CTA: full width, centered */
  .footer-top > div:last-child {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid rgba(251,242,220,.06);
  }
  .footer-top > div:last-child .footer-col-title { margin-bottom: 14px; }
  .footer-top > div:last-child .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
  }
  .footer-top > div:last-child .footer-links a {
    white-space: nowrap;
  }
  .footer-top { margin-bottom: 40px; }
  /* Bottom bar: stacked, centered */
  .footer-bottom {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding-top: 24px;
  }
  .footer-grab { order: -1; font-size: 16px; }
  .footer-legal { font-size: 11px; letter-spacing: .1em; }
  .footer-legal a {
    padding: 4px 2px;
  }

  /* ─── Sections padding ─────────────────────────────── */
  #validator { padding: 0 0 100px; }
  .val-intro { min-height: 115svh; padding: 0; }
  .val-intro-stick { top: 80px; padding-bottom: 24px; }
  .validator-bento { margin-top: 0; }
  .val-inner { padding: 0 20px; }
  .val-h { font-size: clamp(40px, 10vw, 68px); margin-bottom: 18px; }
  .val-p { font-size: 14px; margin-bottom: 0; }
  .val-grid { margin-top: 48px; padding-top: 32px; gap: 12px; }
  .val-card { padding: 22px 20px; }
  .val-card-num { font-size: 44px !important; }
  .issues-live { margin-top: 20px; }
  .issues-header { padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .issues-header-title { font-size: 10px; letter-spacing: .12em; }
  .issues-header-meta { font-size: 9px; gap: 8px; }
  .issues-bento-grid { padding: 6px 10px 10px; }
  .issue-row {
    grid-template-columns: 5px 68px 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
    column-gap: 14px;
    padding: 14px 14px;
  }
  .issue-row .issue-sev { grid-row: 1 / -1; height: 38px; }
  .issue-row .issue-metric { grid-row: 1; }
  .issue-row .issue-text { font-size: 13px; grid-column: 3; grid-row: 1; }
  .issue-row .issue-tag {
    grid-column: 2 / -1;
    grid-row: 2;
    justify-self: start;
  }
  .issue-metric-num { font-size: 22px; }
  .issue-metric-num span { font-size: 12px; }

  #numbers { padding: 100px 20px 120px; }
  .num-block { padding: 40px 20px; }
  .num-big { font-size: clamp(52px, 14vw, 84px); }
  .num-eyebrow { margin-bottom: 48px; }
  .num-eyebrow::before, .num-eyebrow::after { width: 20px; margin: 0 10px 4px; }

  /* -- Hub fine-tuning -- */
  #hub { padding: 100px 24px 88px; }
  .hub-opener { font-size: clamp(44px, 11vw, 72px); }
  .hub-head { margin-bottom: 56px; }
  .hub-convo { margin-bottom: 36px; }
  .hub-convo-q { font-size: 16px; }
  .hub-mood-pill { font-size: 12px; padding: 10px 16px; }
  .hub-card { padding: 32px 26px 26px; }
  .hub-card.border-glow-card > .border-glow-inner.hub-card-inner { padding: 32px 26px 26px; }
  .hub-card-title { font-size: clamp(26px, 7vw, 34px); }
  .hub-card-desc { font-size: 13px; }
  .hub-kicker { margin-top: 56px; border-radius: 18px; padding: 32px 28px; gap: 24px; }
  .hub-kicker-text { font-size: 15px; text-align: left; }

  /* -- Results nav -- */
  #results .r6-nav { height: 48px; }
  #results .r6-btn-back { padding: 6px 12px; font-size: 10px; }
  #results .r6-btn-cta { padding: 7px 16px; font-size: 14px; }
  #results .r6-hb-domain { font-size: clamp(24px, 7vw, 40px); }

  /* -- Results sections -- */
  #results .r6-sb-header { grid-template-columns: 1fr; gap: 10px; }
  #results .r6-sb-pill { justify-self: flex-start; }
  #results .r6-sb-subtitle { font-size: 11px; }
  #results .r6-sb-title-area::before { font-size: 8.5px; }
  #results .r6-eeat-hero { grid-template-columns: 1fr; gap: 14px; padding: 20px 20px; }
  #results .r6-eeat-score { padding-left: 0; }
  #results .r6-eeat-score-num { font-size: 68px; }
  #results .r6-eeat-hero-headline { font-size: 14px; }

  /* -- Sticky bar -- */
  #sticky-bar .r6-sticky-cta { padding: 7px 16px; font-size: 13px; }

  /* -- Services grid -- */
  .services-grid { grid-template-columns: 1fr; }

  /* -- Comparison / pillars -- */
  .why-pillars { grid-template-columns: 1fr; gap: 16px; }
  .pillar { padding: 24px 20px; }

  /* -- Pipeline -- */
  #pipeline { padding: 80px 20px; }
  .pipe-sub { margin-bottom: 48px; }
  .pipe-delivers { grid-template-columns: 1fr; gap: 14px; }

  /* -- Packages -- */
  #packages { padding: 80px 20px; }
  .pkg-sub { margin-bottom: 48px; }

  /* -- Calculator -- */
  #calculator { padding: 80px 20px; }
  .calc-sub { margin-bottom: 48px; }

  /* -- Audit -- */
  #audit { padding: 80px 0; }
  .audit-inner { padding: 0 20px; gap: 48px; }

  /* -- Team -- */
  #team { padding: 80px 20px; }

  /* -- Problems -- */
  #problems, .problems-section { padding: 80px 20px; }
  .prob-h { margin-bottom: 48px; }

  /* -- Blog -- */
  #blog { padding: 80px 20px; }
  .blog-card-img { height: 140px; }
  .blog-card.featured .blog-card-img { height: 180px; }

  /* -- Compare -- */
  #whyus { padding: 80px 20px; }
  .why-h { margin-bottom: 48px; }
}

/* ── Small mobile (≤ 480px) ──────────────────────────── */
@media (max-width: 480px) {
  /* -- Hero -- */
  .hero-artboard { gap: clamp(10px, 3.5vw, 18px); }
  .hero-ab-title { min-height: auto; }
  .hero-artboard .hero-subtitle-wrap {
    font-size: clamp(7px, 2.2vw, 9px);
    letter-spacing: 0.05em;
  }
  .btn-hero-scan-label { font-size: 18px; padding: 12px 28px; }
  .hero-viewport-foot .tag {
    padding: 5px 9px;
    font-size: 7px;
    min-height: 24px;
  }
  .hero-ab-stats {
    gap: 12px 20px;
    padding: 12px 12px !important;
  }
  .hero-viewport-foot .stat-n { font-size: clamp(16px, 4.5vw, 20px); }
  .hero-viewport-foot .stat-l { font-size: 7px; }

  /* -- Footer -- */
  footer { padding: 48px 16px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .footer-logo { font-size: 26px; }
  .footer-tagline { font-size: 12px; max-width: 240px; }
  .social-link { width: 40px; height: 40px; }
  .footer-top > div:last-child { border-top: none; padding-top: 0; }
  .footer-top > div:last-child .footer-links { flex-direction: column; gap: 10px; }
  .footer-top { margin-bottom: 32px; }
  .footer-bottom { gap: 10px; padding-top: 20px; }
  .footer-legal { font-size: 10px; letter-spacing: .08em; }
  .footer-grab { font-size: 14px; }

  /* -- Numbers -- */
  .num-grid { grid-template-columns: 1fr; }
  .num-block { border-right: none; border-bottom: 1px solid rgba(251,242,220,.08); padding: 32px 16px; }
  .num-block:last-child { border-bottom: none; }
  .num-big { font-size: clamp(56px, 16vw, 84px); }

  /* -- Validator -- */
  .val-grid { grid-template-columns: 1fr; gap: 12px; }
  .val-card { padding: 24px 20px; }
  .val-card-num { font-size: 42px !important; }

  .hub-mood-pill { font-size: 11px; padding: 9px 14px; }

  /* -- Results cards -- */
  #results .r6-grade-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  #results .r6-gc-grade { font-size: 36px; }
  #results .r6-gc-val { font-size: 11px; }

  /* -- Results nav: shorter text -- */
  #results .r6-btn-back { font-size: 9px; letter-spacing: .06em; padding: 5px 10px; }
  #results .r6-nav { padding: 0 12px; }

  /* -- CTA band -- */
  #results .r6-final-cta { padding: 36px 14px 100px; }
  #results .r6-fcta-btn { padding: 16px 20px; font-size: 19px; }
  #results .r6-fcta-proof-num { font-size: 34px; }
}

/* ── Tiny phones (≤ 360px) ───────────────────────────── */
@media (max-width: 360px) {
  .hero-artboard { gap: 10px; }
  .hero-artboard .hero-subtitle-wrap { font-size: clamp(11px, 3.2vw, 13px); padding-inline: 4px; }
  .btn-hero-scan-label { font-size: 17px; padding: 11px 24px; }
  .hero-viewport-foot .tag { padding: 4px 8px; font-size: 6.5px; }
  .hero-ab-stats { gap: 10px 16px; padding: 10px !important; }
  .hero-viewport-foot .stat-n { font-size: 15px; }
  .hero-viewport-foot .stat-l { font-size: 6.5px; }

  footer { padding: 40px 14px 24px; }
  .footer-tagline { font-size: 11px; }
  .footer-links a { font-size: 13px; }
}

/* ── Touch targets — min 44px for interactive elements ── */
@media (pointer: coarse) {
  .hub-mood-pill { min-height: 44px; }
  .issue-row { min-height: 48px; }
}

/* ── Safe area (notch / home indicator) ────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 760px) {
    footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
    #sticky-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    #results .r6-final-cta { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    #cookie-banner { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  }
  @media (max-width: 480px) {
    footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   LARGE DESKTOP SCALING — iMac / Full HD+ / 4K
   Baseline design is sized for ~1440px MacBook. At ≥1600px viewports
   the hero artboard and main container were previously capped,
   leaving huge margins on iMac screens. These media queries raise
   the caps proportionally so the landing page fills the viewport
   like it does on MacBook.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  :root {
    --hero-field-h: 42px;
    --hero-artboard-cap: 1520px;
  }
  .val-inner, .num-inner, .hub-inner, .footer-inner { max-width: 1280px; }
  .logo { font-size: 24px; }
  .nav-links { gap: 56px; }
  .nav-links a { font-size: 12px; }
  .hero-nav { padding: clamp(24px, 2.6vh, 34px) clamp(56px, 5.2vw, 88px) clamp(22px, 2.6vh, 38px); }
  .hero-artboard h1 { font-size: clamp(38px, 10cqi, 140px); }
  .hero-artboard .hero-subtitle-wrap { font-size: clamp(15px, 1.05vw, 19px); }
  .hero-viewport-foot .tag { font-size: clamp(6px, 0.62vw, 11px); }
  .hero-viewport-foot .stat-n { font-size: clamp(12px, 1.25vw, 22px); }
  .hero-viewport-foot .stat-l { font-size: clamp(6px, 0.55vw, 9px); }
  .num-big { font-size: clamp(42px, 12vw, 82px); }
  .hub-opener { font-size: clamp(32px, 9vw, 56px); }
  .hub-card-title { font-size: clamp(22px, 6vw, 32px); }
}

@media (min-width: 1920px) {
  :root {
    --hero-field-h: 46px;
    --hero-padding-below-nav: 72px;
    --hero-artboard-cap: 1680px;
  }
  .val-inner, .num-inner, .hub-inner, .footer-inner { max-width: 1400px; }
  .logo { font-size: 26px; }
  .nav-links { gap: 64px; }
  .nav-links a { font-size: 13px; }
  .hero-nav { padding: clamp(28px, 2.8vh, 38px) clamp(72px, 5.4vw, 104px) clamp(26px, 2.8vh, 42px); }
  .stage { padding-left: clamp(20px, 5vw, 96px); padding-right: clamp(20px, 5vw, 96px); }
  .hero-artboard h1 { font-size: clamp(38px, 10cqi, 158px); }
  .hero-artboard .hero-subtitle-wrap { font-size: clamp(16px, 1.08vw, 20px); }
  .hero-viewport-foot .tag { font-size: clamp(6px, 0.62vw, 12px); }
  .hero-viewport-foot .stat-n { font-size: clamp(12px, 1.25vw, 24px); }
  .hero-viewport-foot .stat-l { font-size: clamp(6px, 0.55vw, 10px); }
  .num-big { font-size: clamp(42px, 12vw, 92px); }
  .hub-opener { font-size: clamp(32px, 9vw, 64px); }
  .hub-card-title { font-size: clamp(22px, 6vw, 36px); }
}

@media (min-width: 2200px) {
  :root {
    --hero-field-h: 50px;
    --hero-artboard-cap: 1840px;
  }
  .val-inner, .num-inner, .hub-inner, .footer-inner { max-width: 1520px; }
  .logo { font-size: 28px; }
  .nav-links a { font-size: 14px; }
  .hero-nav { padding: clamp(30px, 2.9vh, 42px) clamp(88px, 5.6vw, 120px) clamp(28px, 2.9vh, 46px); }
  .stage { padding-left: clamp(20px, 5vw, 112px); padding-right: clamp(20px, 5vw, 112px); }
  .hero-artboard h1 { font-size: clamp(38px, 10cqi, 176px); }
  .hero-artboard .hero-subtitle-wrap { font-size: clamp(16px, 1.1vw, 21px); }
  .num-big { font-size: clamp(42px, 12vw, 100px); }
}

@media (min-width: 2560px) {
  :root {
    --hero-artboard-cap: 2000px;
  }
  .val-inner, .num-inner, .hub-inner, .pm-inner, .footer-inner { max-width: 1640px; }
  .logo { font-size: 30px; }
  .nav-links a { font-size: 15px; }
  .hero-artboard h1 { font-size: clamp(38px, 10cqi, 190px); }
  .hero-artboard .hero-subtitle-wrap { font-size: clamp(17px, 1.12vw, 22px); }
}

/* ═══════════════════════════════════════════════════════
   #pricing-main — tiers + calculator
   Deep red radial, glassy tiers, interactive stack builder
   ═══════════════════════════════════════════════════════ */
#pricing-main {
  background: linear-gradient(180deg, #4a110f 0%, #40100d 55%, #350d0a 100%);
  padding: 160px 28px 180px;
  position: relative; overflow: hidden;
}
#pricing-main::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 72% 55% at 14% -6%, rgba(247,146,30,.14), transparent 62%),
    radial-gradient(ellipse 60% 48% at 96% 94%, rgba(146,0,15,.3), transparent 68%);
  pointer-events: none;
}
.pm-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.pm-intro { max-width: 720px; margin-bottom: 88px; }
.pm-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 18px;
}
.pm-h {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 7vw, 96px);
  color: var(--parchment); line-height: .9; letter-spacing: .018em;
  margin-bottom: 24px;
}
.pm-h em { font-style: normal; color: var(--orange); }
.pm-sub {
  font-size: 15px; font-weight: 300; color: rgba(251,242,220,.6);
  line-height: 1.65; max-width: 560px;
}

.pm-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-bottom: 120px;
  /* Own stacking context so featured-tier outer glows don’t composite
     weirdly into the neighbour column (thin “white line” on Seedling). */
  isolation: isolate;
}
.pm-tier {
  /* No backdrop-filter here: it composites the whole card as a layer and
     interacts badly with animated overlays (::after or .pm-tier-glare),
     producing sub-pixel white seams at rounded corners and “stuck”
     vertical bands on neighbouring cards in WebKit. Slightly stronger
     flat rgba keeps the same glass *read* without the GPU clip bugs. */
  background: rgba(251,242,220,.07);
  border: 1px solid rgba(251,242,220,.14);
  border-radius: 20px;
  padding: 34px 30px 30px;
  display: flex; flex-direction: column;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .4s ease;
  position: relative; overflow: hidden;
  isolation: isolate;
  contain: paint;
}
.pm-tier::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 140% 60% at 50% 105%, rgba(247, 146, 30, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 0;
}
/* Glare sweep — real DOM layer (.pm-tier-glare), not ::after.
   Pseudo-elements + backdrop-filter on the same stacking context caused
   persistent edge artefacts (“white lines”, fake “dashes”) on WebKit.
   A normal div clips predictably; animationend also fires reliably on it. */
.pm-tier > *:not(.pm-tier-glare) { position: relative; z-index: 2; }
.pm-tier:hover::before { opacity: 1; }

.pm-tier-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  /* Hard clip: belt-and-suspenders with parent overflow:hidden — kills
     sub-pixel gradient bleed on rounded corners in WebKit. */
  clip-path: inset(0 round 20px);
  /* 400% width: bright peak (≈48–52%) stays fully outside the visible
     window at both 0% and 100% background-position — no residual stripe. */
  background-size: 400% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
}
.pm-tier-glare--cream {
  background-image: linear-gradient(
    110deg,
    transparent 40%,
    rgba(255, 245, 220, 0.10) 47%,
    rgba(255, 245, 220, 0.24) 49.2%,
    rgba(255, 245, 220, 0.34) 50%,
    rgba(255, 245, 220, 0.24) 50.8%,
    rgba(255, 245, 220, 0.10) 53%,
    transparent 60%
  );
}
.pm-tier-glare--ember {
  background-image: linear-gradient(
    110deg,
    transparent 40%,
    rgba(255, 150, 40, 0.12) 47%,
    rgba(255, 155, 45, 0.30) 49.2%,
    rgba(255, 160, 50, 0.46) 50%,
    rgba(255, 155, 45, 0.30) 50.8%,
    rgba(255, 150, 40, 0.12) 53%,
    transparent 60%
  );
}
.pm-tier-glare.is-glaring {
  animation: pmTierGlareSweep 1100ms cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes pmTierGlareSweep {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-tier-glare.is-glaring { animation: none; }
}
/* Lift + ring: keep during glare sweep after pointer leaves (see
   .pm-tier--sweep-active in shared.js) so the sheen never “cuts off”
   mid-animation when :hover drops. */
.pm-tier:hover,
.pm-tier.pm-tier--sweep-active {
  transform: translateY(-4px);
}
.pm-tier:hover:not(.pm-tier--featured),
.pm-tier.pm-tier--sweep-active:not(.pm-tier--featured) {
  border-color: rgba(255,132,0,.35);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,132,0,.18) inset;
}
.pm-tier--featured {
  background: rgba(255,132,0,.11);
  border-color: rgba(255,132,0,.45);
  /* Tight negative spread: a wide outer orange glow bleeds horizontally
     into the grid gap and paints as a vertical highlight on the Seedling
     card’s right edge when Orchard animates / hovers. */
  box-shadow: 0 22px 48px -34px rgba(255,132,0,.24);
}
.pm-tier--featured::before { opacity: .55; }
.pm-tier--featured:hover::before,
.pm-tier--featured.pm-tier--sweep-active::before { opacity: 1; }
.pm-tier-badge {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px;
  align-self: flex-start; margin-bottom: 22px;
  background: rgba(251,242,220,.06);
  color: rgba(251,242,220,.55);
  border: 1px solid rgba(251,242,220,.12);
}
.pm-tier-badge--pop {
  background: var(--orange); color: var(--ink);
  border-color: var(--orange);
}
.pm-tier-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px; letter-spacing: .018em;
  color: var(--parchment); line-height: .95;
  margin-bottom: 10px;
}
.pm-tier-desc {
  font-size: 13px; color: rgba(251,242,220,.55);
  font-weight: 300; line-height: 1.6;
  margin-bottom: 26px;
  min-height: 42px;
}
.pm-tier-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 8px;
}
.pm-tier-amount {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 60px; color: var(--parchment);
  line-height: 1; letter-spacing: .005em;
}
.pm-tier--featured .pm-tier-amount { color: var(--orange); }
.pm-tier-period {
  font-size: 13px; color: rgba(251,242,220,.5);
}
.pm-tier-note {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,242,220,.45);
  margin-bottom: 28px;
}
.pm-tier-features {
  list-style: none; flex: 1; margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.pm-tier-features li {
  font-size: 14px; color: rgba(251,242,220,.8);
  font-weight: 300; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 12px;
}
.pm-tier-features li::before {
  content: '✓';
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,132,0,.15);
  border: 1px solid rgba(255,132,0,.35);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
  margin-top: 2px;
}
.pm-tier-cta {
  appearance: none; border: none; width: 100%;
  font-family: 'Bebas Neue', sans-serif; font-size: 19px;
  letter-spacing: .06em; padding: 16px 20px; border-radius: 12px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.2,.8,.2,1);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.pm-tier-cta--outline {
  background: transparent; color: var(--parchment);
  border: 1px solid rgba(251,242,220,.22);
}
.pm-tier-cta--outline:hover {
  border-color: var(--orange); color: var(--orange);
  transform: translateY(-2px);
}
.pm-tier-cta--fill {
  background: var(--orange); color: var(--ink);
  box-shadow: 0 12px 30px -10px rgba(247,146,30,.55);
}
.pm-tier-cta--fill:hover {
  background: var(--parchment);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(251,242,220,.35);
}

/* Homepage pricing-preview disclaimer (ink background).
   Stack-builder page has its own sb-disclaimer for parchment. */
.pm-disclaimer {
  margin-top: 48px;
  padding: 22px 28px;
  border-radius: 14px;
  background: rgba(251,242,220,.04);
  border: 1px solid rgba(251,242,220,.1);
}
.pm-disclaimer p {
  font-size: 13px; color: rgba(251,242,220,.72);
  font-weight: 300; line-height: 1.7;
}
.pm-disclaimer b { color: var(--parchment); font-weight: 500; }
@media (max-width: 760px) {
  .pm-disclaimer { padding: 18px 20px; }
}

/* ============================================================
   #stack-builder — modular retainer builder
   Parchment editorial layout · ink "checkout" panel on the right
   Replaces the old translucent .pm-builder bento.
   ============================================================ */

#stack-builder {
  background: var(--parchment);
  padding: 140px 56px 160px;
  position: relative;
  overflow: hidden;
}
#stack-builder::before {
  content: attr(data-watermark);
  position: absolute; bottom: -8%; right: -3%;
  font-family: 'Bebas Neue', sans-serif; font-size: 32vw;
  color: rgba(146,0,15,.045); line-height: 1;
  letter-spacing: .02em; pointer-events: none; white-space: nowrap;
  z-index: 0;
}

.sb-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

/* Head — eyebrow + headline + subline, all parchment editorial */
.sb-head { max-width: 760px; margin-bottom: 56px; }
.sb-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: 20px;
}
.sb-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5.5vw, 78px);
  color: var(--red); line-height: .9;
  letter-spacing: .005em; margin-bottom: 22px;
}
.sb-h span { color: var(--orange-deep); }
.sb-sub {
  font-size: 16px; color: rgba(26,10,9,.72);
  font-weight: 300; line-height: 1.75;
  max-width: 620px;
}

/* Stat strip — 4 numerical anchors before the builder, gives the section weight */
.sb-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin-bottom: 64px;
  border-top: 1px solid rgba(146,0,15,.16);
  border-bottom: 1px solid rgba(146,0,15,.16);
}
.sb-meta-cell {
  padding: 24px 28px;
  border-right: 1px solid rgba(146,0,15,.1);
  display: flex; flex-direction: column; gap: 6px;
}
.sb-meta-cell:last-child { border-right: none; }
.sb-meta-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--red); line-height: 1; letter-spacing: .01em;
}
.sb-meta-n span { color: var(--orange-deep); font-size: .65em; }
.sb-meta-l {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(26,10,9,.6); line-height: 1.5;
}

/* Two-column layout: rich service cards (left) · sticky stack panel (right) */
.sb-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px; align-items: start;
}
.sb-services { display: flex; flex-direction: column; gap: 12px; }

/* ── Rich service card ── */
.sb-svc {
  background: white;
  border: 1.5px solid rgba(146,0,15,.1);
  border-radius: 16px;
  padding: 0;
  cursor: pointer; user-select: none;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  position: relative; overflow: hidden;
  outline: none;
}
.sb-svc:hover {
  border-color: rgba(146,0,15,.32);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -18px rgba(146,0,15,.25);
}
.sb-svc:focus-visible {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255,132,0,.25);
}
.sb-svc.on {
  border-color: var(--red);
  box-shadow: 0 16px 40px -16px rgba(146,0,15,.35), inset 4px 0 0 0 var(--red);
}
.sb-svc.on::after {
  content: 'IN STACK'; position: absolute; top: 14px; right: 14px;
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--red); padding: 3px 8px; border-radius: 4px;
  background: rgba(146,0,15,.08); border: 1px solid rgba(146,0,15,.18);
}
.sb-svc-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 18px; align-items: center;
  padding: 22px 26px 18px;
}
.sb-svc-check {
  width: 24px; height: 24px; border-radius: 6px;
  border: 1.5px solid rgba(146,0,15,.28);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .2s; background: white;
}
.sb-svc.on .sb-svc-check {
  background: var(--red); border-color: var(--red);
}
.sb-svc-check svg { width: 14px; height: 14px; opacity: 0; transition: opacity .15s; }
.sb-svc.on .sb-svc-check svg { opacity: 1; }
.sb-svc-meta { min-width: 0; }
.sb-svc-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px; letter-spacing: .02em;
  color: var(--red); line-height: 1.05; margin-bottom: 4px;
}
.sb-svc-tag {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .04em; text-transform: none;
  color: rgba(26,10,9,.55); line-height: 1.4;
  font-weight: 400;
}
.sb-svc-price {
  display: flex; align-items: baseline; gap: 3px;
  flex-shrink: 0; padding-right: 8px;
}
.sb-svc-price .amt {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; color: var(--red);
  letter-spacing: .005em; line-height: 1;
}
.sb-svc-price .per {
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: rgba(26,10,9,.55); letter-spacing: .08em;
}
.sb-svc.on .sb-svc-price .amt { color: var(--red); }

/* Three-cell body strip: best-for / 90-day win / first ship */
.sb-svc-body {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(146,0,15,.08);
}
.sb-svc-cell {
  padding: 16px 22px 18px;
  border-right: 1px solid rgba(146,0,15,.08);
}
.sb-svc-cell:last-child { border-right: none; }
.sb-svc-cell-l {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: 6px;
  font-weight: 500;
}
.sb-svc-cell-t {
  font-size: 12.5px; color: rgba(26,10,9,.78);
  font-weight: 400; line-height: 1.5;
}

/* ── Sticky ink "checkout" panel — the dark contrast piece pulling focus ── */
.sb-panel {
  position: sticky; top: 24px;
  background: var(--ink);
  border-radius: 18px;
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 28px 60px -24px rgba(26,10,9,.45);
  position: -webkit-sticky; position: sticky;
  overflow: hidden;
}
.sb-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 40% at 100% 0%, rgba(247,146,30,.15), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(146,0,15,.25), transparent 60%);
}
.sb-panel > * { position: relative; z-index: 1; }

.sb-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(251,242,220,.12);
}
.sb-panel-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange-light); font-weight: 500;
}
.sb-panel-status {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(251,242,220,.65);
}
.sb-clear {
  appearance: none; background: none; border: none; padding: 0;
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-light); cursor: pointer;
  border-bottom: 1px dashed rgba(255,176,102,.35);
  transition: color .2s;
}
.sb-clear:hover { color: var(--parchment); }

/* Discount ladder — visual stepped progress (always rendered, fills as you stack) */
.sb-ladder { padding: 4px 0 2px; }
.sb-ladder-track {
  display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr;
  align-items: center; gap: 0;
}
.sb-ladder-step {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sb-ladder-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(251,242,220,.12);
  border: 1.5px solid rgba(251,242,220,.22);
  transition: all .25s;
}
.sb-ladder-step.done .sb-ladder-dot {
  background: var(--orange-light); border-color: var(--orange-light);
}
.sb-ladder-step.active .sb-ladder-dot {
  background: var(--orange); border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,132,0,.18), 0 0 14px rgba(255,132,0,.5);
}
.sb-ladder-l {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,242,220,.55); margin-top: 6px;
}
.sb-ladder-step.done .sb-ladder-l,
.sb-ladder-step.active .sb-ladder-l { color: rgba(251,242,220,.85); }
.sb-ladder-p {
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  color: rgba(251,242,220,.55); letter-spacing: .03em; line-height: 1;
}
.sb-ladder-step.done .sb-ladder-p { color: var(--orange-light); }
.sb-ladder-step.active .sb-ladder-p { color: var(--orange); }
.sb-ladder-bar {
  height: 2px; background: rgba(251,242,220,.1);
  margin-top: -22px; transition: background .25s;
}
.sb-ladder-bar.done { background: var(--orange-light); }

/* Quick-start preset cards (empty state) */
.sb-presets-h {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251,242,220,.55); margin-top: 6px; margin-bottom: -4px;
}
.sb-presets { display: flex; flex-direction: column; gap: 10px; }
.sb-preset {
  appearance: none; text-align: left; cursor: pointer;
  background: rgba(251,242,220,.04);
  border: 1px solid rgba(251,242,220,.12);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: inherit; color: inherit;
  transition: all .22s;
}
.sb-preset:hover {
  border-color: var(--orange); background: rgba(255,132,0,.08);
  transform: translateY(-2px);
}
.sb-preset-top {
  display: flex; justify-content: space-between; align-items: baseline;
}
.sb-preset-name {
  font-family: 'Bebas Neue', sans-serif; font-size: 20px;
  color: var(--parchment); letter-spacing: .04em; line-height: 1;
}
.sb-preset-count {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(251,242,220,.6);
}
.sb-preset-blurb {
  font-size: 12px; color: rgba(251,242,220,.78);
  font-weight: 300; line-height: 1.5;
}
.sb-preset-svcs {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .06em; color: rgba(251,242,220,.55);
  line-height: 1.5; margin-top: 2px;
}
.sb-preset-foot {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 6px; padding-top: 8px;
  border-top: 1px solid rgba(251,242,220,.08);
}
.sb-preset-was {
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: rgba(251,242,220,.45); text-decoration: line-through;
}
.sb-preset-now {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px;
  color: var(--orange-light); letter-spacing: .015em; line-height: 1;
}
.sb-preset-now small {
  font-family: 'DM Mono', monospace; font-size: 10px;
  color: rgba(251,242,220,.6); letter-spacing: .08em;
  margin-left: 2px;
}
.sb-preset-save {
  margin-left: auto;
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: var(--orange-light);
  padding: 3px 8px; border-radius: 4px;
}

/* Selected line items list */
.sb-items {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 0 4px;
}
.sb-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.sb-item-n {
  font-size: 13px; color: rgba(251,242,220,.85); font-weight: 400;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-item-p {
  font-family: 'DM Mono', monospace; font-size: 12px;
  color: rgba(251,242,220,.95); flex-shrink: 0;
}

/* Math rows */
.sb-math {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 0 10px; border-top: 1px solid rgba(251,242,220,.12);
}
.sb-math-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'DM Mono', monospace; font-size: 11.5px;
  letter-spacing: .04em; color: rgba(251,242,220,.7);
}
.sb-math-row--save { color: var(--sage); font-weight: 500; }

/* Big total block */
.sb-total {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 0 6px; border-top: 1px solid rgba(251,242,220,.12);
}
.sb-total-l {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251,242,220,.65);
}
.sb-total-amt {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px; color: var(--orange-light);
  letter-spacing: .005em; line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.sb-total-amt span {
  font-family: 'DM Mono', monospace; font-size: 12px;
  color: rgba(251,242,220,.6); letter-spacing: .1em;
}
.sb-total-was {
  font-family: 'DM Mono', monospace; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(251,242,220,.55);
}

/* Math quote — the ROI line */
.sb-math-quote {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,132,0,.08);
  border-left: 3px solid var(--orange);
}
.sb-math-quote-l {
  display: block;
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange-light); margin-bottom: 4px;
}
.sb-math-quote p {
  font-size: 12.5px; color: rgba(251,242,220,.85);
  font-weight: 300; line-height: 1.55; font-style: italic;
}

/* Primary CTA */
.sb-cta {
  appearance: none; border: none; cursor: pointer; width: 100%;
  background: var(--orange); color: var(--ink);
  font-family: 'Bebas Neue', sans-serif; font-size: 22px;
  letter-spacing: .06em; padding: 16px;
  border-radius: 12px;
  transition: all .22s;
  box-shadow: 0 14px 32px -10px rgba(255,132,0,.55);
}
.sb-cta:hover {
  background: var(--parchment); transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(251,242,220,.32);
}
.sb-panel-tip {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(251,242,220,.55); text-align: center; line-height: 1.6;
  margin-top: -2px;
}

/* Disclaimer card — parchment, with `i` glyph and editorial copy */
.sb-disclaimer {
  margin-top: 56px;
  background: white;
  border: 1px solid rgba(146,0,15,.12);
  border-radius: 14px;
  padding: 22px 26px;
  display: grid; grid-template-columns: 32px 1fr;
  gap: 16px; align-items: start;
}
.sb-disc-i {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(146,0,15,.08); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 16px;
  letter-spacing: .04em; flex-shrink: 0; margin-top: 2px;
}
.sb-disclaimer p {
  font-size: 13px; color: rgba(26,10,9,.72);
  font-weight: 300; line-height: 1.7;
}
.sb-disclaimer b { color: var(--red); font-weight: 500; }

@media (max-width: 1024px) {
  .sb-grid { grid-template-columns: 1fr; }
  .sb-panel { position: static; }
}
@media (max-width: 900px) {
  #pricing-main { padding: 120px 24px 140px; }
  .pm-intro { margin-bottom: 64px; }
  .pm-tiers { grid-template-columns: 1fr; max-width: 460px; margin-bottom: 88px; }
  .pm-tier-desc { min-height: auto; }

  #stack-builder { padding: 100px 24px 120px; }
  .sb-meta { grid-template-columns: 1fr 1fr; }
  .sb-meta-cell:nth-child(2) { border-right: none; }
  .sb-meta-cell:nth-child(1), .sb-meta-cell:nth-child(2) { border-bottom: 1px solid rgba(146,0,15,.1); }
  .sb-svc-body { grid-template-columns: 1fr; }
  .sb-svc-cell { border-right: none; border-bottom: 1px solid rgba(146,0,15,.08); padding: 14px 22px; }
  .sb-svc-cell:last-child { border-bottom: none; }
}
@media (max-width: 760px) {
  #pricing-main { padding: 100px 20px 120px; }
  .pm-tier { padding: 28px 24px 24px; }
  .pm-tier-amount { font-size: 52px; }
  .pm-tier-name { font-size: 34px; }

  #stack-builder { padding: 80px 20px 100px; }
  .sb-svc-head { grid-template-columns: 22px 1fr; gap: 14px; padding: 18px 20px 14px; }
  .sb-svc-price { grid-column: 1 / -1; padding-left: 38px; padding-right: 0; }
  .sb-svc-name { font-size: 21px; }
  .sb-svc-tag { font-size: 10.5px; }
  .sb-svc.on::after { top: 10px; right: 10px; font-size: 8.5px; }
  .sb-meta { grid-template-columns: 1fr; }
  .sb-meta-cell { border-right: none; border-bottom: 1px solid rgba(146,0,15,.1); }
  .sb-meta-cell:last-child { border-bottom: none; }
  .sb-panel { padding: 22px 20px; }
  .sb-total-amt { font-size: 44px; }
  .sb-disclaimer { padding: 18px 20px; grid-template-columns: 28px 1fr; gap: 12px; }
}

/* =========================================================
   CASE STUDIES PAGE
   Four stacked dossier cards on the parchment base. Shares
   type ramp + hairline language with #leaks and #services-catalog
   so the site reads as one magazine. Each card has a left
   narrative column (tags + headline + leak/play/result) and a
   right aside (four metric cells + client quote) separated by
   the same red hairline we use everywhere else.
   ========================================================= */
#cases-list {
  background: var(--parchment);
  padding: 140px 56px;
  position: relative;
  overflow: hidden;
}
#cases-list::before {
  content: 'CASES';
  position: absolute; bottom: -8%; right: -3%;
  font-family: 'Bebas Neue', sans-serif; font-size: 28vw;
  color: rgba(146,0,15,.04);
  line-height: 1; letter-spacing: .02em; pointer-events: none; white-space: nowrap;
}
.cases-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

.cases-top {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 72px; align-items: end;
  margin-bottom: 72px;
}
.cases-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-deep); margin-bottom: 18px;
}
.cases-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5.5vw, 72px);
  color: var(--red); line-height: .9; letter-spacing: .01em;
}
.cases-h span { color: var(--orange-deep); }
.cases-sub {
  font-size: 15px; color: rgba(26,10,9,.68);
  font-weight: 300; line-height: 1.8;
  max-width: 460px;
}

/* --- Case card (dossier) --- */
.case-card {
  position: relative;
  padding: 48px 0 56px;
  border-top: 1px solid rgba(146,0,15,.16);
}
.case-card:last-child {
  border-bottom: 1px solid rgba(146,0,15,.16);
}
/* Thin accent stripe on the top hairline, per-case colour. Keeps the
   four cards visually distinct without breaking the hairline grid. */
.case-card::before {
  content: ''; position: absolute;
  top: -1px; left: 0; width: 72px; height: 2px;
  background: var(--orange-deep);
  z-index: 1;
}
.case-card[data-accent="wine"]::before      { background: var(--red); }
.case-card[data-accent="teal"]::before      { background: #2a6e6c; }
.case-card[data-accent="parchment"]::before { background: var(--grove); }

.case-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.case-meta {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.case-idx {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px; line-height: 1;
  color: var(--red); letter-spacing: .04em;
}
.case-industry {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--red); font-weight: 500;
  padding: 5px 11px;
  border-radius: 4px;
  background: rgba(146,0,15,.06);
  border: 1px solid rgba(146,0,15,.2);
}
.case-card[data-accent="wine"]      .case-industry { color: var(--red); background: rgba(146,0,15,.08); border-color: rgba(146,0,15,.26); }
.case-card[data-accent="teal"]      .case-industry { color: #2a6e6c; background: rgba(42,110,108,.08); border-color: rgba(42,110,108,.28); }
.case-card[data-accent="parchment"] .case-industry { color: var(--grove); background: rgba(169,99,37,.08); border-color: rgba(169,99,37,.28); }
.case-dot {
  color: rgba(26,10,9,.32); font-size: 12px;
}
.case-scope {
  font-family: 'DM Mono', monospace;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(26,10,9,.58);
}
.case-timeline {
  display: flex; align-items: center; gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(26,10,9,.54);
}
.case-timeline-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(26,10,9,.32);
}

/* --- Two-column body: narrative + aside, split by hairline --- */
.case-card-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0;
}
.case-card-main {
  padding-right: 56px;
  min-width: 0;
}
.case-card-side {
  padding-left: 56px;
  border-left: 1px solid rgba(146,0,15,.14);
  display: flex; flex-direction: column; gap: 32px;
  min-width: 0;
}

/* Tags strip above the headline */
.case-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 22px;
}
.case-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
  padding: 4px 10px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid rgba(146,0,15,.22);
  transition: border-color .2s ease, background .2s ease;
}
.case-card:hover .case-tag { border-color: rgba(146,0,15,.36); }

.case-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: .98;
  letter-spacing: .005em;
  color: var(--ink);
  margin-bottom: 18px;
  max-width: 620px;
}
.case-h span { color: var(--orange-deep); }
.case-dek {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: rgba(26,10,9,.72);
  font-weight: 300;
  line-height: 1.7;
  max-width: 580px;
  margin-bottom: 30px;
}

/* Leak / play / result narrative */
.case-sections {
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(146,0,15,.12);
}
.case-section {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(146,0,15,.12);
  align-items: start;
}
.case-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-deep);
  padding-top: 3px;
}
.case-section p {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: rgba(26,10,9,.78);
  font-weight: 300;
  line-height: 1.7;
  max-width: 580px;
}
.case-section p strong {
  color: var(--ink); font-weight: 500;
}

/* --- Aside: metrics grid + quote --- */
.case-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid rgba(146,0,15,.14);
  border-left: 1px solid rgba(146,0,15,.14);
}
.case-metric {
  padding: 22px 20px 20px;
  border-right: 1px solid rgba(146,0,15,.14);
  border-bottom: 1px solid rgba(146,0,15,.14);
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(146,0,15,.015);
}
.case-metric-n {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: .95;
  color: var(--red);
  letter-spacing: .01em;
}
.case-metric-n span {
  font-size: .55em;
  color: var(--orange-deep);
  margin-left: 2px;
  letter-spacing: .02em;
}
.case-metric-l {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(26,10,9,.6);
  line-height: 1.45;
}

/* Per-accent metric number tint — keeps cards distinct */
.case-card[data-accent="wine"]      .case-metric-n { color: var(--red); }
.case-card[data-accent="wine"]      .case-metric-n span { color: #c68b81; }
.case-card[data-accent="teal"]      .case-metric-n { color: #2a6e6c; }
.case-card[data-accent="teal"]      .case-metric-n span { color: #5aaa9f; }
.case-card[data-accent="parchment"] .case-metric-n { color: var(--grove); }
.case-card[data-accent="parchment"] .case-metric-n span { color: var(--orange-deep); }

.case-quote {
  position: relative;
  padding: 22px 4px 4px 24px;
  border-left: 2px solid var(--orange-deep);
}
.case-quote p {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -.005em;
  margin-bottom: 16px;
  font-style: italic;
}
.case-quote footer {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(26,10,9,.6);
  display: flex; flex-direction: column; gap: 4px;
  font-style: normal;
}
.case-quote-who { color: var(--red); font-weight: 500; }

/* --- Honest-note strip --- */
#cases-note {
  background: var(--ink);
  padding: 100px 56px;
  color: var(--parchment);
  position: relative;
  overflow: hidden;
}
#cases-note::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(247,146,30,.08), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(146,0,15,.25), transparent 70%);
  pointer-events: none;
}
.cases-note-inner {
  max-width: 900px; margin: 0 auto;
  position: relative; z-index: 1;
  text-align: center;
}
.cases-note-head { margin-bottom: 24px; }
.cases-note-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--orange-light); display: block;
  margin-bottom: 14px;
}
.cases-note-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: .95; letter-spacing: .01em;
  color: var(--parchment);
}
.cases-note-h span { color: var(--orange); }
.cases-note-p {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(251,242,220,.72);
  max-width: 640px;
  margin: 0 auto;
}

/* --- Case studies: tablet --- */
@media (max-width: 1024px) {
  #cases-list { padding: 100px 32px; }
  .cases-top { grid-template-columns: 1fr; gap: 24px; margin-bottom: 56px; }
  .cases-sub { max-width: none; }

  .case-card-body { grid-template-columns: 1fr; gap: 40px; }
  .case-card-main { padding-right: 0; }
  .case-card-side {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(146,0,15,.14);
    padding-top: 32px;
  }

  #cases-note { padding: 80px 32px; }
}

/* --- Case studies: mobile --- */
@media (max-width: 760px) {
  #cases-list { padding: 80px 20px; }
  .case-card { padding: 36px 0 40px; }
  .case-card-head {
    flex-direction: column; align-items: flex-start; gap: 12px;
  }
  .case-meta { gap: 10px; }
  .case-idx { font-size: 24px; }
  .case-dot { display: none; }
  .case-scope { font-size: 10.5px; }
  .case-timeline { font-size: 10px; }

  .case-h { font-size: 28px; }
  .case-dek { font-size: 15px; }
  .case-section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
  .case-section p { font-size: 14.5px; }

  .case-metrics { grid-template-columns: 1fr; border-left: none; }
  .case-metric {
    border-right: none;
    padding: 18px 16px;
  }
  .case-metric-n { font-size: 30px; }

  .case-quote { padding: 18px 0 0 18px; }
  .case-quote p { font-size: 15.5px; }

  #cases-note { padding: 64px 20px; }
  .cases-note-p { font-size: 15px; }
}

/* =============================================================
   Services page — minimal index (menu to landings / scope)
   ============================================================= */

.page-hero--compact {
  padding: 56px 56px 72px;
  min-height: auto;
}
.page-hero--compact .page-hero-meta {
  margin-bottom: 32px;
  padding-bottom: 18px;
}
.page-hero--compact .page-hero-h {
  font-size: clamp(40px, 6.4vw, 76px);
  margin-bottom: 20px;
  max-width: 860px;
  line-height: .98;
}
.page-hero--compact .page-hero-sub {
  margin-bottom: 26px;
  font-size: 16px;
  max-width: 520px;
}
.page-hero--compact .page-hero-ctas { margin-bottom: 0; }
.page-hero--compact::before {
  font-size: 22vw;
  color: rgba(251,242,220,.02);
}
/* Kill the giant ghost-word watermark entirely on pages that don't want it */
.page-hero--nomark::before { content: none; }

/* Page body variant where the top-of-page section is dark (e.g. services).
   The spacer continues the hero's warm radial upward so the cream nav reads
   as floating directly above the hero — no parchment band, no extra edge. */
.page-body--dark-top {
  background: var(--ink);
}
.page-body--dark-top .page-top-spacer {
  background: radial-gradient(ellipse 130% 220% at 50% 100%, #3a1614 0%, #21100e 38%, var(--ink) 78%);
}
/* On dark-top pages also collapse the hero's own top padding — the spacer
   now provides that breathing room visually, so the meta strip can sit
   tighter to the nav instead of leaving a dead first-screen gap. */
.page-body--dark-top .page-hero--compact { padding-top: 32px; }

/* -------- Services index — dark card grid, matches main page hub -------- */
#svc-menu.svc-index {
  background: radial-gradient(ellipse at top left, #2a100e 0%, var(--ink) 60%, #0f0605 100%);
  padding: 96px 40px 120px;
  position: relative;
  color: var(--parchment);
}
#svc-menu.svc-index::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,132,0,.08), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(150,206,204,.06), transparent 50%);
  pointer-events: none;
}
.svc-index-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.svc-index-head { margin-bottom: 64px; max-width: 680px; }
.svc-index-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange-light);
  margin-bottom: 18px;
}
.svc-index-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 84px);
  color: var(--parchment);
  line-height: .95;
  letter-spacing: .01em;
  margin-bottom: 22px;
}
.svc-index-h span { color: var(--orange); }
.svc-index-lead {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: rgba(251,242,220,.72);
  line-height: 1.6;
  max-width: 620px;
}
.svc-index-lead strong { font-weight: 500; }

/* Inline status pills used inside the lead copy */
.svc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  vertical-align: 1px;
}
.svc-pill--landing {
  background: var(--orange);
  color: var(--ink);
}
.svc-pill--scope {
  background: rgba(251,242,220,.1);
  color: var(--parchment);
  border: 1px solid rgba(251,242,220,.22);
}

/* Groups stacked vertically, each with its own accent */
.svc-index-groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.svc-index-group {
  --accent: var(--orange);
  --accent-2: var(--red);
}
.svc-index-group-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(251,242,220,.1);
  position: relative;
}
.svc-index-group-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.svc-index-group-num {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--accent);
  font-weight: 500;
}
.svc-index-group-h {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3vw, 30px);
  color: var(--parchment);
  letter-spacing: .02em;
  flex: 1;
  margin: 0;
}
.svc-index-group-count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(251,242,220,.42);
}

/* Tile grid */
.svc-index-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.svc-tile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 12px 16px;
  align-items: end;
  padding: 22px 22px 20px;
  background: rgba(251,242,220,.03);
  border: 1px solid rgba(251,242,220,.09);
  border-radius: 14px;
  text-decoration: none;
  color: var(--parchment);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  scroll-margin-top: 100px;
}
.svc-tile-stripe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: .5;
  transition: opacity .25s ease, width .25s ease;
}
.svc-tile-tag {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(251,242,220,.45);
  font-weight: 500;
  align-self: start;
}
.svc-tile-name {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: .015em;
  color: var(--parchment);
  line-height: 1;
}
.svc-tile-go {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: var(--orange);
  opacity: .6;
  transition: transform .25s ease, opacity .25s ease;
  align-self: end;
  line-height: 1;
}
.svc-tile:hover {
  background: rgba(251,242,220,.06);
  border-color: rgba(255,132,0,.4);
  transform: translateY(-2px);
}
.svc-tile:hover .svc-tile-stripe {
  opacity: 1;
  width: 4px;
}
.svc-tile:hover .svc-tile-go {
  opacity: 1;
  transform: translateX(4px);
}
.svc-tile:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Landing variant — call attention */
.svc-tile--landing {
  background: linear-gradient(135deg, rgba(255,132,0,.08), rgba(146,0,15,.05));
  border-color: rgba(255,132,0,.35);
}
.svc-tile--landing .svc-tile-tag {
  color: var(--orange);
}
.svc-tile--landing .svc-tile-stripe {
  opacity: 1;
  width: 4px;
}
.svc-tile--landing:hover {
  background: linear-gradient(135deg, rgba(255,132,0,.14), rgba(146,0,15,.08));
  border-color: var(--orange);
}

.svc-index-foot {
  margin-top: 56px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(251,242,220,.55);
  font-weight: 300;
  text-align: center;
}
.svc-index-foot a {
  color: var(--orange-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,176,102,.3);
  transition: color .2s, border-color .2s;
}
.svc-index-foot a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* Compact FAQ block on minimal services page */
#svc-faq.faq-section {
  border-top: 1px solid rgba(146,0,15,.1);
  padding: 72px 40px 96px;
}
#svc-faq .faq-top { margin-bottom: 40px; }
#svc-faq .faq-acc-a a {
  color: var(--red);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(146,0,15,.25);
}
#svc-faq .faq-acc-a a:hover { color: var(--orange-deep); }

@media (max-width: 760px) {
  .page-hero--compact { padding: 40px 22px 48px; }
  #svc-menu.svc-index { padding: 64px 22px 88px; }
  #svc-faq.faq-section { padding: 56px 22px 72px; }
  .svc-index-head { margin-bottom: 44px; }
  .svc-index-groups { gap: 36px; }
  .svc-index-group-head { flex-wrap: wrap; gap: 8px 14px; }
  .svc-index-group-count { flex-basis: 100%; }
  .svc-index-tiles { grid-template-columns: 1fr; gap: 10px; }
  .svc-tile { padding: 18px 18px 16px; }
  .svc-tile-name { font-size: 22px; }
}