/* ==========================================================================
   KATA Camperbox — Main Stylesheet v5
   V1 Final (Editorial / Cinematic) · Mobile-first · Dark-first · Gold accent
   Canonical selectors: mockup/home/style.css (V1 aprobado 15/04/2026)
   ========================================================================== */

/* ─── 0. SELF-HOSTED FONTS ──────────────────────────────────────────────────
   Self-hosted to eliminate Google Fonts render-blocking request + privacy (no IP to Google).
   Outfit is a variable font (single file covers weights 100-900). Bebas Neue is single-weight 400.
   latin + latin-ext for full Unicode coverage of AU copy (em-dashes, smart quotes, etc.). */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── 1. TOKENS ─────────────────────────────────────────────────────────────── */
/* Canonical source: mockup/home/style.css (V1 aprobado 15/04/2026).
   Alias legacy preservados para compat con woocommerce.css y templates previos. */
:root {
  /* === MOCKUP CANONICAL (V1) === */

  /* Dark scale */
  --c-black:   #080808;
  --c-dark:    #0f0f0f;
  --c-dark-2:  #151515;
  --c-dark-3:  #1c1c1c;
  --c-dark-4:  #262626;

  /* Lines on dark */
  --c-line:         rgba(255,255,255,0.08);
  --c-line-strong:  rgba(255,255,255,0.16);

  /* Neutrals */
  --c-white:  #ffffff;
  --c-off:    #e8e6e1;              /* body text on dark */
  --c-mute:   rgba(255,255,255,0.55);
  --c-mute-2: rgba(255,255,255,0.5);  /* WCAG AA: 0.35 gave ~3.1:1 (fails normal text); 0.5 clears 4.5:1 on dark surfaces */

  /* Gold */
  --c-gold:           #fec53e;       /* gold on dark — único sobre oscuro */
  --c-gold-secondary: #fbb715;       /* gold on light bgs (statement, process, testimonials) */
  --c-gold-dim:       rgba(254,197,62,0.12);
  --c-gold-dark:      #c99200;       /* usado por Woo — mantener */

  /* Light / cream theme */
  --c-cream:          #f1ede3;
  --c-ink:            #1a1a1a;
  --c-ink-2:          #2a2a2a;
  --c-ink-mute:       #555555;
  --c-ink-mute-2:     rgba(26,26,26,0.45);
  --c-ink-line:       rgba(26,26,26,0.12);
  --c-ink-line-strong:rgba(26,26,26,0.22);

  /* Semantic / misc — legitimised 2026-06-03 (audit #consistency): these were
     previously used only as inline var() fallbacks, so the token was a phantom
     that always resolved to the literal. Defining them here = same value, no
     visual change, but now usable token-first. */
  --c-green:          #6ea76e;  /* positive / in-stock accent on dark surfaces */
  --c-cream-100:      #f7f3e9;  /* lightest warm surface, a step above --c-cream */

  /* Type families
   * --ff-mono collapses to body (Outfit) per v5.8.7 design call: small uppercase
   * labels read better in Outfit (proportional, refined, consistent across OS)
   * than in system mono (varies by OS: SF Mono / Consolas / generic). No tabular
   * use case in the theme actually requires monospace alignment. If one appears,
   * introduce a separate --ff-tabular token instead of resurrecting --ff-mono. */
  --ff-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --ff-body:    'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    var(--ff-body);

  /* Type scale (keep — used by Woo and heading utilities) */
  --text-hero:    clamp(5rem, 18vw, 16rem);
  --text-display: clamp(3rem, 8vw, 8.5rem);
  --text-section: clamp(2.5rem, 5vw, 5.5rem);
  --text-h3:      clamp(1.75rem, 4vw, 2.5rem);
  --text-xl:      clamp(1.25rem, 2vw, 1.875rem);
  --text-lg:      clamp(0.9375rem, 1.2vw, 1.125rem);
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-2xs:     0.6875rem;

  /* Spacing scale */
  --space-section: clamp(5rem, 10vw, 9rem);
  --space-2xl:     clamp(2.5rem, 5vw, 5rem);
  --space-xl:      clamp(1.75rem, 3vw, 3rem);
  --space-lg:      clamp(1.25rem, 2vw, 2rem);
  --space-md:      clamp(0.875rem, 1.25vw, 1.25rem);
  --space-sm:      clamp(0.5rem, 0.75vw, 0.75rem);

  /* NOTE — audit 2026-05-13 #6 H3: `--radius-pill` already exists below as a
   * legacy alias of `--r-pill` (line ~166, value 999px). The sweep in all CSS
   * files now uses `var(--radius-pill)` consistently — visually identical to
   * the prior mix of 99px / 100px / 999px since any value ≥ height/2 renders
   * as a full pill. Card radii use `--r-md` (8px) and `--r-lg` (16px) — see
   * the Radii block below. No new tokens added here for radii to avoid
   * shadowing the existing system. */

  /* Section padding — audit 2026-05-13 #6 H4
   * Canonical vertical rhythm. Previously fixed-rem in about.css / guides.css /
   * faq.css / single-product.css meant mobile parity broke (About had MORE
   * vertical padding at 360px than the canonical Home pages because clamp
   * wasn't applied). FC keeps its smaller denser scale via .kata-fc .section
   * override — that's intentional editorial. */
  --section-py: clamp(4rem, 9vw, 8rem);

  /* Layout */
  --gutter: clamp(1.25rem, 3vw, 2.5rem);
  /* v5.21.0 Orne: token consolidated 1480 → 1280 — single outer container
   * width cross-site (was inconsistent: Home 1480 · About/FAQ/Legal/Guides 1280
   * · Custom Kit/Compat/Contact 1200 · util-howto 1100). Mega nav (1700px) +
   * lightbox keep their explicit values per Bruno spec. */
  --maxw:   1280px;
  --nav-h:  78px;

  /* Motion */
  --ease-out:   cubic-bezier(.16,.84,.32,1);
  --ease-inout: cubic-bezier(.7,0,.3,1);
  --dur-fast:   150ms;
  --dur-snap:   250ms;  /* v5.25.0 cart: drawer slide / modal fade / coupon expand */
  --dur-med:    350ms;
  --dur-slow:   650ms;

  /* Radii */
  --r-sm:   3px;
  --r-md:   8px;
  --r-card: 12px;       /* v5.25.0 cart: summary card, methods, modals (sits between md/lg) */
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* Semantic state colors */
  --c-err:  #c8431a;    /* v5.25.0 cart: validation errors, destructive hover */

  /* === LEGACY ALIASES (compat Woo + footer.php + old templates) === */
  --max-width:     var(--maxw);
  --ease-io:       var(--ease-inout);
  --font-display:  var(--ff-display);
  --font-body:     var(--ff-body);
  --c-muted:       var(--c-mute);
  --c-border:      var(--c-line);
  --c-border-lt:   var(--c-ink-line);
  --c-border-dark: var(--c-ink-line);
  --c-off-white:   #f5f2ee;
  --radius-sm:     var(--r-sm);
  --radius-md:     var(--r-md);
  --radius-lg:     var(--r-lg);
  --radius-xl:     var(--r-xl);
  --radius-pill:   var(--r-pill);
}

/* ─── 2. RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip (not hidden) — preserves position:sticky in descendants */
  overflow-x: clip;
}

body {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-off);
  background: var(--c-black);
  /* overflow-x: clip removed — already on html (line ~150). Doubling can interfere
     with position:sticky descendants. Modern best practice: html-only. */
}

/* Custom cursor: only hidden when JS confirms init succeeded (body.has-custom-cursor class).
   If JS fails / blocked / not yet loaded, system cursor stays visible — no invisible-cursor footgun. */
body.has-custom-cursor { cursor: none; }
body.has-custom-cursor input,
body.has-custom-cursor textarea,
body.has-custom-cursor select,
body.has-custom-cursor [contenteditable] { cursor: text; }

/* Touch / small screens: restore default cursor even if JS added the class. */
@media (hover: none), (max-width: 900px) {
  body.has-custom-cursor { cursor: auto; }
  #cursor-dot, #cursor-ring { display: none !important; }
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
input, textarea, select { font-family: var(--ff-body); }

::selection { background: var(--c-gold); color: var(--c-black); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .kata-reveal { opacity: 1; transform: none; }
}

/* ─── 3. LAYOUT ─────────────────────────────────────────────────────────────── */
.kata-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.kata-main { min-height: 100dvh; }

/* ─── Global custom-logo cap ─────────────────────────────────────────────────
   the_custom_logo() prints the image at its NATIVE size (e.g. 1689×664 for
   our horizontal logo). Footer + nav already constrain explicitly via their
   own selectors, but WordPress + WooCommerce block renderers (empty-cart,
   site-logo block, etc.) call the_custom_logo() in their own context where
   no theme-scoped selector matches — leaving the image at natural size.
   This rule caps every `.custom-logo` to a sane default; specific contexts
   (footer 54px, etc.) still win on specificity.                         */
.custom-logo,
.custom-logo-link img {
  max-height: 56px;
  width: auto !important;
  height: auto !important;
  max-width: 240px;
  object-fit: contain;
}

/* ─── Cart / checkout page polish ────────────────────────────────────────────
   page.php renders the WP page wrapper with a default <h1> page-title. Tone
   down the WC block padding so the empty-cart logo + the cross-sell rail
   feel composed rather than left-overs. */
.woocommerce-cart .page-title,
.woocommerce-checkout .page-title {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  letter-spacing: -0.005em;
  line-height: 0.95;
  margin: 2rem 0 2rem;
  color: var(--c-white);
}
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content {
  padding-block: 1.5rem 4rem;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block,
.woocommerce-cart .wp-block-woocommerce-cart {
  background: var(--c-dark-2, #181818);
  color: var(--c-cream);
  padding: 2.5rem 1.5rem;
  border: 1px solid var(--c-line);
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .custom-logo,
.woocommerce-checkout .custom-logo {
  /* Empty-cart block: keep logo present but tasteful, not 1700px tall */
  max-height: 56px !important;
  margin: 0 auto 1.25rem;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.woocommerce-cart .wp-block-heading,
.woocommerce-checkout .wp-block-heading {
  font-family: var(--ff-display);
  letter-spacing: -0.005em;
  color: var(--c-white);
}
.woocommerce-cart .wc-block-cart__empty-cart__title,
.woocommerce-cart h2.wp-block-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin: 1rem 0;
  text-align: center;
}

/* ─── 4. GRAIN (fixed — dark sections only, very subtle) ────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.9'/></svg>");
  mix-blend-mode: overlay;
}
/* Mobile scroll jank: a full-viewport `position:fixed` overlay with
 * `mix-blend-mode:overlay` forces the compositor to re-blend the whole
 * screen on every scroll frame — expensive on mobile GPUs and a measurable
 * contributor to scroll stutter. The grain is opacity 0.04 (near-invisible
 * on phones), so drop it entirely on coarse-pointer / small screens. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .grain { display: none; }
}

/* ─── 5. CUSTOM CURSOR ──────────────────────────────────────────────────────── */
#cursor-dot, #cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
}
#cursor-dot {
  width: 6px; height: 6px;
  background: var(--c-gold); border-radius: 50%;
  transition: transform .15s var(--ease-out), opacity .2s;
}
#cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid var(--c-white); border-radius: 50%;
  opacity: .5;
  transition: transform .25s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out),
              opacity .2s, border-color .2s, background-color .2s;
  mix-blend-mode: difference;
}
body.cursor--hover #cursor-ring {
  width: 70px; height: 70px; border-color: var(--c-gold); opacity: .9;
}
body.cursor--click #cursor-ring {
  width: 24px; height: 24px; background: var(--c-gold); opacity: 1; border-color: transparent;
}

/* ─── 6. UTILITIES ──────────────────────────────────────────────────────────── */

/* Eyebrow label — canonical (v5.21.x Orne audit).
 * Wrapper inherits color from the section parent so dark/cream/white bgs
 * resolve correctly without per-page color locks. Opacity 0.6 fades the
 * wrapper text; __index resets to opacity 1 so the gold number stays
 * full-contrast. Index colour switches to gold-secondary in cream/white
 * contexts via section selectors below. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: inherit;
  opacity: 1;
}
.eyebrow--light  { color: var(--c-white); }
.eyebrow--ink    { color: var(--c-dark); }
.eyebrow--ink .eyebrow__dash { background: var(--c-dark); }
.eyebrow--center { display: flex; justify-content: center; }
/* Decorative section without a numeric anchor (Shop compat-nudge/chapter/coming-soon).
 * Hides the __index — pair with .eyebrow__dash for the canonical line decoration. */
.eyebrow--unnumbered .eyebrow__index { display: none; }
.eyebrow__index {
  font-family: var(--ff-display); font-size: 20px; font-weight: 400;
  color: var(--c-gold); letter-spacing: 0.02em; line-height: 1;
  opacity: 1;
}
.eyebrow__dash {
  display: inline-block; width: 38px; height: 1px;
  background: currentColor; opacity: .7;
}

/* Cream/white section contexts — switch __index to gold-secondary for better
 * contrast on light bg. Centralises the per-section overrides that previously
 * lived scattered across .statement, .testimonials, etc. */
.process .eyebrow__index,
.testimonials .eyebrow__index,
.statement .eyebrow__index,
.about-section--cream .about-eyebrow__index,
.guides-section--cream .guides-eyebrow__index,
.kata-page--compat .util-trust .eyebrow__index,
.kata-page--compat .util-howto .eyebrow__index,
.kata-page--custom-kit .ck-positioning .eyebrow__index,
.kata-page--custom-kit .ck-process .eyebrow__index {
  color: var(--c-gold-secondary);
}

/* White-bg Home sections — set explicit ink colour so the eyebrow wrapper
 * (which now inherits) renders dark-on-white instead of inheriting body white. */
.testimonials { color: var(--c-ink); }

/* Section head */
.section__head {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
.section__head--split {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: end;
}
@media (min-width: 900px) {
  .section__head--split { grid-template-columns: 1.3fr 1fr; gap: 4rem; }
}

.section__title {
  font-family: var(--ff-display);
  font-size: clamp(2.75rem, 6.5vw, 6rem);
  line-height: 0.95; letter-spacing: -0.005em;
  color: var(--c-white); font-weight: 400;
  margin-top: 1.25rem;
}
.section__title em { font-style: normal; color: var(--c-gold); }

.section__lede {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.55; color: var(--c-mute);
  max-width: 32rem;
}
.section__lede--right { max-width: 28rem; }

/* ─── 7. BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-body); font-size: 14px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 18px 28px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: all .3s var(--ease-out);
  position: relative; overflow: hidden;
}
.btn:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.btn:active        { transform: scale(0.97); }
.btn svg           { transition: transform .3s var(--ease-out); }
.btn:hover svg     { transform: translateX(4px); }

/* Mockup variant classes */
/* NOTE (Bruno 06/2026): WordPress global-styles (theme.json elements.link:hover)
   injects `:root :where(a:not(.wp-element-button):hover){ color:white }`. Our
   buttons are <a> WITHOUT .wp-element-button, and the gold variants never
   re-declared `color` on :hover, so that rule whitened the text on hover.
   Specificity of the WP selector is only (0,0,1,0) (the :where() adds 0), so a
   `.variant:hover { color: … }` (0,0,2,0) wins. We keep the lighter-gold bg
   blanch on hover (approved) but pin the text dark site-wide. */
.btn--primary { background: var(--c-gold); color: var(--c-black); border-color: var(--c-gold); }
.btn--primary:hover { background: #fcd061; border-color: #fcd061; color: var(--c-black); transform: translateY(-1px); }
.btn--ghost   { background: transparent; color: var(--c-white); border-color: var(--c-line-strong); }
.btn--ghost:hover { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); transform: translateY(-1px); }

/* audit #6 H2 — ghost variant for cream/light contexts (mirrors about-btn--ghost). */
.btn--ghost-ink { background: transparent; color: var(--c-dark); border-color: rgba(17, 17, 17, 0.25); }
.btn--ghost-ink:hover { background: var(--c-dark); color: var(--c-white); border-color: var(--c-dark); transform: translateY(-1px); }

/* Ink (for cream backgrounds) — solid dark pill */
.btn--ink     { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.btn--ink:hover  { background: #2a2620; border-color: #2a2620; color: var(--c-white); transform: translateY(-1px); }
.btn--ink:active { transform: scale(0.97); }

/* Gold solid (for dark backgrounds) — primary CTA on dark sections */
.btn--gold    { background: var(--c-gold); color: var(--c-black); border-color: var(--c-gold); font-weight: 600; }
.btn--gold:hover  { background: #fcd061; border-color: #fcd061; color: var(--c-black); transform: translateY(-1px); }
.btn--gold:active { transform: scale(0.97); }

/* Cream-on-dark (gold-secondary feel) — used inside .pdp-edit--dark CTAs */
.btn--cream   { background: var(--c-gold-secondary, #fbb715); color: var(--c-ink); border-color: var(--c-gold-secondary, #fbb715); font-weight: 600; }
.btn--cream:hover  { background: #fdc842; border-color: #fdc842; color: var(--c-ink); transform: translateY(-1px); }

.btn--sm  { padding: 12px 20px; font-size: 12px; }
.btn--lg  { padding: 22px 34px; font-size: 15px; }
.btn--full { width: 100%; justify-content: center; }

/* Legacy aliases — keep for footer.php + WooCommerce compat */
.btn-primary  { background: var(--c-gold); color: var(--c-black); border-color: var(--c-gold); }
.btn-primary:hover { background: #fcd061; border-color: #fcd061; color: var(--c-black); transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(254,197,62,0.35); }
.btn-ghost    { background: transparent; color: var(--c-white); border-color: var(--c-line-strong); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); }
.btn-outline  { background: transparent; color: var(--c-white); border-color: rgba(255,255,255,0.18); }
.btn-outline:hover { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.btn-dark     { background: rgba(0,0,0,0.85); color: var(--c-white); border-color: rgba(0,0,0,0.85); }
.btn-dark:hover { background: #000; }
.btn-outline-dark { background: transparent; color: #111; border-color: rgba(17,17,17,0.25); }
.btn-outline-dark:hover { background: rgba(17,17,17,0.07); border-color: #111; }
.btn-lg    { padding: 22px 34px; font-size: 15px; }
.btn-block { width: 100%; justify-content: center; }

/* Inline text link */
.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-body); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-white); padding-bottom: 4px;
  border-bottom: 1px solid var(--c-line-strong);
  transition: color .2s, border-color .2s, gap .3s var(--ease-out);
}
.btn-link:hover { color: var(--c-gold); border-color: var(--c-gold); gap: 10px; }
.btn-link--lg   { font-size: 14px; padding-bottom: 6px; }

/* ─── 8. SCROLL REVEAL ──────────────────────────────────────────────────────── */
.kata-reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.kata-reveal.is-visible { opacity: 1; transform: none; }

/* Word-split animation — JS wraps words in .kata-word > .kata-word-inner */
.kata-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kata-word-inner {
  display: inline-block; transform: translateY(105%);
  transition: transform 0.75s var(--ease-out);
}
.is-visible .kata-word-inner { transform: translateY(0); }

/* Clip-path reveal variant */
.kata-reveal--clip {
  clip-path: inset(0 0 100% 0); opacity: 1 !important; transform: none !important;
}
.kata-reveal--clip.is-visible {
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.85s var(--ease-out);
}

/* ─── 9. SHARED KEYFRAMES ───────────────────────────────────────────────────── */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes heroEnter { to { opacity: 1; transform: none; } }
@keyframes kenburns {
  0%   { transform: scale(1.0); }
  100% { transform: scale(1.07); }
}
@keyframes pulseGold {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.35); opacity: 0.65; }
}
@keyframes mouseWheel {
  0%   { opacity: 1; top: 7px; }
  50%  { opacity: 0.2; top: 18px; }
  100% { opacity: 1; top: 7px; }
}
/* Touch-hand bob — gentle downward drag suggesting "swipe to scroll". */
@keyframes swipeFinger {
  0%, 100% { transform: translateY(0);   opacity: 0.85; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ─── 10. NAV (5 items + 2 CTAs) ────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h);
  z-index: 100;
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  background: transparent;
  transition: background .4s var(--ease-out), backdrop-filter .4s var(--ease-out), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  /* Bruno 2026-05-13: bumped opacity 0.85 → 0.95 so the nav reads as a
     consistent dark bar across pages. With 0.85 the nav over cream content
     (e.g. FC after the hero, About cream sections) looked washed-out and
     "transparent" because 15% of the cream bg leaked through. 0.95 keeps a
     hint of cinematic depth (the blur layer still works) without losing
     legibility on light backdrops. */
  background: rgba(8,8,8,0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--c-line);
}
/* FC-only: while the hero slider is still on-screen, suppress the scrolled
   style so the nav reads transparent over the bright slide imagery.
   `body.kata-fc-hero-locked` is toggled by full-conversion.js (see
   initFc3HeroNavTransparent). CSS-gated approach (vs JS classList.remove)
   avoids desyncing main.js's cached navScrolled state — Bruno 2026-05-13. */
body.kata-fc-hero-locked .nav.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Mobile: drop backdrop-filter blur — by far the costliest compositor op on
   mid-low Android/iOS; recomposites the blurred surface every frame any
   content under the nav animates (marquees, hero kenburns, testimonials
   translateX). Solid 0.96 bg is visually near-identical and free. */
@media (max-width: 768px) {
  .nav.is-scrolled {
    background: rgba(8,8,8,0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Generic pause utility — JS toggles this on off-screen animated elements
   (marquees, hero ticker, trust marquee) so the GPU stops compositing
   off-screen layers while the user scrolls. paint() / RAF unaffected. */
.kata-anim-paused,
.kata-anim-paused * {
  animation-play-state: paused !important;
}

.nav__logo {
  display: inline-flex; align-items: center;
  color: var(--c-white); line-height: 0;
}
.nav__logo-img {
  display: block !important;
  height: 44px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain;
  /* Dark brand logo → force white on dark header */
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity .2s;
}
.nav__logo:hover .nav__logo-img { opacity: 1; }
@media (max-width: 720px) { .nav__logo-img { height: 36px; } }

/* Desktop nav menu — absolutely centered on screen */
.nav__menu {
  display: none; align-items: center; gap: 2rem;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
@media (min-width: 1100px) { .nav__menu { display: flex; } }

.nav__item         { position: relative; }
.nav__item--mega   { position: static; }

.nav__link {
  font-size: 14.5px; font-weight: 500; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.8);
  position: relative; padding: 8px 0;
  transition: color .2s;
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; font-family: inherit; cursor: pointer;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--c-gold);
  transition: right .3s var(--ease-out);
}
.nav__link:hover                       { color: var(--c-white); }
.nav__link:hover::after                { right: 0; }
.nav__link[aria-expanded="true"]       { color: var(--c-white); }
.nav__link[aria-expanded="true"]::after { right: 0; }
.nav__chevron { transition: transform .3s var(--ease-out); opacity: 0.6; }
.nav__link[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); opacity: 1; }

/* Nav icon buttons (cart, user) */
.nav__icon-btn {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  color: var(--c-mute);
  transition: color .2s;
  position: relative;
}
.nav__icon-btn:hover { color: var(--c-white); }
@media (min-width: 1100px) { .nav__icon-btn { display: flex; } }

/* Cart count badge */
.cart-count {
  position: absolute; top: 5px; right: 5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  font-size: 8px; font-weight: 800;
  color: var(--c-black); background: var(--c-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.cart-count:empty,
.cart-count[data-count="0"] { display: none; }

/* Nav CTAs */
.nav__actions  { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.nav__cta-btn  { display: none; font-size: 12px; padding: 10px 18px; }
@media (min-width: 1100px) { .nav__cta-btn { display: inline-flex; } }

/* Burger (mobile) */
.nav__burger {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 44px; padding: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block; width: 24px; height: 1.5px; background: var(--c-white);
  transition: transform .3s var(--ease-out), opacity .2s;
  margin-left: auto;
}
.nav__burger span:last-child { width: 18px; }
@media (min-width: 1100px) { .nav__burger { display: none; } }

/* ─── 11. MEGA PANELS (full-viewport, cinematic) ────────────────────────────── */
/* Bruno 2026-05-13: switched from clip-path animation to opacity + visibility.
   The clip-path approach (inset(0 0 100% 0) ↔ inset(0)) caused a visible artifact
   during CLOSE — as the bottom-clip animated from 0% → 100%, the visible portion
   shrank from the bottom up, leaving a strip of the dark mega panel showing
   at the TOP of the viewport for ~600ms (inside the nav band). Users saw it as
   a "raro shadow" appearing in the header when navigating away. Opacity-fade
   doesn't have this geometric reveal — the entire panel fades uniformly. */
.mega {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease-out), visibility 0s .35s;
  pointer-events: none;
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s var(--ease-out), visibility 0s 0s;
  pointer-events: auto;
}

/* Backdrop grain */
.mega::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  z-index: 0; pointer-events: none;
}

/* Close button in mega panels — hidden permanently (mockup behavior);
   user closes via nav trigger toggle or Esc. Keeps markup for a11y fallback. */
.mega__close { display: none !important; }

.mega__inner {
  position: relative; z-index: 1;
  /* Bruno 2026-05-09: widen mega panel so the 6-card grid breathes — was
     constrained to var(--maxw) (1480) which made cards feel cramped. */
  max-width: 1700px; width: 100%; margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center;
  gap: 2.5rem;
}

/* Panel heading — staggered entrance */
.mega__heading {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--c-white); letter-spacing: -0.01em;
  text-align: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity .5s .15s var(--ease-out), transform .5s .15s var(--ease-out);
}
.mega.is-open .mega__heading { opacity: 1; transform: none; }

.mega__grid { display: grid; gap: 1.5rem; width: 100%; }
.mega__grid--6 { grid-template-columns: repeat(6, 1fr); }
.mega__grid--4 { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin: 0 auto; }

/* Mega card — staggered entrance */
.mega__card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 1.25rem;
  border: 1px solid transparent;
  transition: border-color .3s, background .3s, transform .4s var(--ease-out);
  text-decoration: none;
  opacity: 0; transform: translateY(30px);
}
.mega.is-open .mega__card {
  opacity: 1; transform: none;
  transition: border-color .3s, background .3s,
              opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mega.is-open .mega__card:nth-child(1) { transition-delay: .12s; }
.mega.is-open .mega__card:nth-child(2) { transition-delay: .18s; }
.mega.is-open .mega__card:nth-child(3) { transition-delay: .24s; }
.mega.is-open .mega__card:nth-child(4) { transition-delay: .30s; }
.mega.is-open .mega__card:nth-child(5) { transition-delay: .36s; }
.mega.is-open .mega__card:nth-child(6) { transition-delay: .42s; }

.mega__card:hover {
  border-color: var(--c-line-strong);
  background: rgba(254,197,62,0.05);
  transform: translateY(-6px);
}
.mega__card--accent       { border-color: var(--c-line); }
.mega__card--accent:hover { border-color: var(--c-gold); background: rgba(254,197,62,0.08); }

/* Gold "Explore All Products" card — solid gold fill so it reads as the
   primary catalogue entry. Title + desc shift to ink for legibility on gold;
   icon turns ink to match. */
.mega__card--gold {
  background: var(--c-gold);
  border-color: var(--c-gold);
}
.mega__card--gold:hover {
  background: var(--c-gold-secondary, #fbb715);
  border-color: var(--c-gold-secondary, #fbb715);
  transform: translateY(-6px);
}
.mega__card--gold .mega__card-img--icon {
  /* Bruno 2026-05-09: drop the ink-tint rectangle — user wants the entire
     card reading as a single gold field, no "darker chip" behind the icon. */
  background: transparent;
}
.mega__card--gold .mega__card-img--icon svg {
  color: var(--c-ink); opacity: 0.85;
}
.mega__card--gold:hover .mega__card-img--icon svg { opacity: 1; }
.mega__card--gold .mega__card-title { color: var(--c-ink); }
.mega__card--gold .mega__card-desc  { color: rgba(26,23,20,0.78); }

.mega__card-img {
  aspect-ratio: 4 / 3; width: 100%;
  overflow: hidden; background: var(--c-dark-2);
  margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.mega__card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.mega__card:hover .mega__card-img img { transform: scale(1.08); }

.mega__card-img--icon { background: var(--c-dark-3); padding: 2rem; }
.mega__card-img--icon svg {
  width: 56px; height: 56px; color: var(--c-gold);
  opacity: 0.65; transition: opacity .3s, transform .4s var(--ease-out);
}
.mega__card:hover .mega__card-img--icon svg { opacity: 1; transform: scale(1.12); }

.mega__card-title {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 1.6vw, 1.6rem); letter-spacing: 0.02em;
  color: var(--c-white); margin-bottom: 0.4rem;
}
.mega__card-desc {
  font-size: clamp(0.85rem, 0.95vw, 1rem); line-height: 1.5;
  color: var(--c-mute); max-width: 22ch;
}
.mega__card--accent .mega__card-title { color: var(--c-gold); }

/* Footer link inside mega */
.mega__foot {
  text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s .45s var(--ease-out), transform .5s .45s var(--ease-out);
}
.mega.is-open .mega__foot { opacity: 1; transform: none; }

.mega__foot-link {
  font-family: var(--ff-display);
  font-size: 1rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-gold); padding-bottom: 2px;
  border-bottom: 1px solid rgba(254,197,62,0.4);
  transition: color .2s, border-color .2s;
}
.mega__foot-link:hover { color: var(--c-white); border-color: var(--c-white); }

/* Mega responsive */
@media (max-width: 1100px) { .mega { display: none; } }

/* Laptop range (1100-1450px) — KEEP 6 columns (single row) but compact each
   card so the panel fits on standard laptop viewports (1366×768, 1440×900)
   without scroll. Previous 3-col / 2-row layout pushed total height past
   650px once heading + foot link + safe area were stacked, requiring
   scroll. Single-row at 6 cols with title-only cards keeps total panel
   height ~440px on a 768px viewport. */
@media (max-width: 1450px) {
  .mega__grid--6 { grid-template-columns: repeat(6, 1fr); gap: 0.85rem; }
  .mega__inner { gap: 1.5rem; padding-top: 5rem; padding-bottom: 1rem; }
  .mega__heading { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
  .mega__card { padding: 0.6rem 0.5rem; }
  .mega__card-img { aspect-ratio: 4 / 3; margin-bottom: 0.5rem; }
  .mega__card-img--icon { padding: 0.85rem; }
  .mega__card-img--icon svg { width: 32px; height: 32px; }
  .mega__card-title {
    font-size: clamp(0.95rem, 1.05vw, 1.15rem);
    margin-bottom: 0.15rem;
  }
  .mega__card-desc {
    font-size: 0.75rem;
    line-height: 1.35;
    max-width: none;
    /* Cap to 2 lines so 6-col at 1280px doesn't blow the row height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mega__foot { margin-top: 0.25rem; }
}

/* Narrow laptops (1100-1280px) where 6 cols × ~180px gets cramped — drop
   the description text entirely; titles + image still convey the link. */
@media (max-width: 1280px) {
  .mega__card-desc { display: none; }
  .mega__inner { gap: 1.25rem; }
  .mega__heading { font-size: 1.6rem; }
}

/* Short viewports (laptop ≤720px height): scroll fallback so nothing gets
   cropped — switches center alignment to top + enables overflow-y. */
@media (max-width: 1450px) and (max-height: 720px) {
  .mega { align-items: flex-start; padding: 4.5rem 0 1.5rem; overflow-y: auto; }
  .mega__inner { gap: 1rem; padding-top: 0.5rem; }
  .mega__heading { font-size: 1.4rem; }
}

/* ─── 12. MOBILE MENU (slide-from-right + accordions) ───────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  height: 100dvh; max-height: 100dvh;
  background: var(--c-black);
  /* v5.24.23: switched from flex column to grid (auto / 1fr / auto / auto).
     Flex with `flex: 1` on nav allowed content to overflow visibly into the
     CTA + social rows on compact viewports — clipping the social icons.
     Grid sizes the four rows deterministically: nav (1fr) gets whatever
     space remains and scrolls internally; CTAs + social tracks (auto)
     always render at their natural size at the bottom of the visible box. */
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: var(--gutter);
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(100%);
  transition: transform .5s var(--ease-inout);
  visibility: hidden;
  /* overflow handled per-row now; nav scrolls, the rest never does. */
  overflow: hidden;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }

.mobile-menu__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2.5rem; flex-shrink: 0;
}
.mobile-menu__close {
  width: 44px; height: 44px;
  color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}

.mobile-menu__nav {
  /* v5.24.23: grid child in row 2 (1fr). min-height:0 lets the row shrink
     under content; overflow-y handles internal scroll if items exceed the
     available space. Inner flex column stays for link layout. */
  display: flex; flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* prevent iOS scroll-bleed to page behind the open menu */
}

.mobile-menu__link {
  display: block;
  font-family: var(--ff-display); font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: var(--c-white);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c-line);
  transition: color .2s;
}
.mobile-menu__link:hover { color: var(--c-gold); }

/* Accordion items */
.mobile-accordion { border-bottom: 1px solid var(--c-line); }

.mobile-accordion__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-family: var(--ff-display); font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: var(--c-white);
  padding: 0.75rem 0;
  cursor: pointer; transition: color .2s;
}
.mobile-accordion__toggle:hover { color: var(--c-gold); }
.mobile-accordion__chevron {
  transition: transform .3s var(--ease-out); opacity: 0.5; flex-shrink: 0;
}
.mobile-accordion__toggle[aria-expanded="true"] .mobile-accordion__chevron {
  transform: rotate(180deg); opacity: 1;
}

.mobile-accordion__panel {
  display: flex; flex-direction: column;
  padding: 0 0 0.75rem 0.5rem; overflow: hidden;
}
.mobile-accordion__panel[hidden] { display: none; }
.mobile-accordion__panel a {
  font-family: var(--ff-body);
  font-size: 14px; font-weight: 400; letter-spacing: 0.03em;
  color: var(--c-mute); padding: 0.5rem 0;
  min-height: 44px; display: flex; align-items: center; /* ≥44px touch target (was ~38px) */
  transition: color .15s;
}
.mobile-accordion__panel a:hover { color: var(--c-white); }
.mobile-accordion__all {
  color: var(--c-gold) !important; font-weight: 500; margin-top: 0.25rem;
}

/* Mobile CTAs */
.mobile-menu__ctas {
  display: flex; gap: 0.75rem; margin-top: 2rem; flex-shrink: 0;
}
.mobile-menu__ctas .btn { flex: 1; justify-content: center; font-size: 12px; padding: 12px 16px; }

/* Mobile social */
.mobile-menu__social {
  display: flex; gap: 1.5rem; margin-top: 1.5rem;
  font-size: 12px; letter-spacing: 0.2em;
  color: var(--c-mute); flex-shrink: 0;
}
.mobile-menu__social a { color: var(--c-mute); transition: color .2s; }
.mobile-menu__social a:hover { color: var(--c-gold); }

/* ─── 13. HERO — Morphing Van signature ─────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 2.5rem) var(--gutter) 0;
  overflow: hidden;
  color: var(--c-white);
  isolation: isolate;
}

/* Crossfading image stack */
.hero__stack {
  position: absolute; inset: 0; z-index: 0;
  background: var(--c-black);
}
.hero__layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1.1s ease-in-out;
  will-change: opacity, transform;
}
.hero__layer.is-active {
  opacity: 1; z-index: 1;
  animation: kenburns 3.2s linear forwards;
}

.hero__overlay {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,8,0.65) 0%, rgba(8,8,8,0.35) 22%, rgba(8,8,8,0.25) 45%, rgba(8,8,8,0.8) 88%, rgba(8,8,8,0.95) 100%),
    linear-gradient(90deg, rgba(8,8,8,0.5) 0%, rgba(8,8,8,0) 55%);
}
.hero__vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
}

/* Top overline */
.hero__overline {
  position: relative; z-index: 4;
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  padding-bottom: 0.5rem;
}
.hero__overline-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-gold);
  box-shadow: 0 0 12px rgba(254,197,62,0.6);
  animation: pulseGold 2s var(--ease-inout) infinite;
  flex-shrink: 0;
}
.hero__overline-text em {
  font-style: normal; color: var(--c-gold);
  font-family: var(--ff-display); letter-spacing: 0.05em; font-size: 13px;
}
@media (max-width: 520px) {
  .hero__overline { font-size: 9px; letter-spacing: 0.22em; }
  .hero__overline-text em { font-size: 11px; }
}

.hero__inner {
  position: relative; z-index: 4;
  display: flex; flex-direction: column; justify-content: center;
  flex: 1;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding-bottom: 4rem;
}

.hero__headline {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 13vw, 12rem);
  line-height: 0.86; letter-spacing: -0.015em; font-weight: 400;
  margin: 1rem 0 2rem; color: var(--c-white);
}
.hero__headline-static { display: block; color: var(--c-white); }
.hero__headline-built  { color: var(--c-white); position: relative; }

.hero__cycle {
  display: inline-block; position: relative;
  height: clamp(2.6rem, 11.5vw, 10.5rem);
  line-height: 0.86; overflow: hidden; vertical-align: top;
  color: var(--c-gold); min-width: 4ch;
}
.hero__cycle-word {
  display: block;
  clip-path: inset(0 100% 0 0);
  transform: translateY(0);
  transition: clip-path .7s var(--ease-inout), transform .7s var(--ease-inout);
  position: absolute; top: 0; left: 0; white-space: nowrap;
}
.hero__cycle-word.is-active {
  clip-path: inset(0 0 0 0); position: relative;
}
.hero__cycle-word.is-leaving {
  clip-path: inset(0 0 0 100%); position: absolute;
}

.hero__ctas {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem;
}

/* Bottom ticker */
.hero__ticker {
  position: relative; z-index: 4;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0;
  display: flex; flex-direction: column;
  background: rgba(8,8,8,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__ticker-rule {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(254,197,62,0.5) 20%, rgba(254,197,62,0.5) 80%, transparent 100%);
}
.hero__ticker-viewport {
  overflow: hidden; padding: 12px 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.hero__ticker-track {
  display: flex; align-items: center; gap: 2rem;
  white-space: nowrap;
  font-family: var(--ff-display);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: 0.18em; color: rgba(255,255,255,0.85);
  animation: marqueeScroll 90s linear infinite;
}
.hero__ticker-dot { color: var(--c-gold); font-size: 1.2em; opacity: 0.7; }
@media (prefers-reduced-motion: reduce) { .hero__ticker-track { animation: none; } }

/* Scroll indicator */
.hero__scroll {
  position: absolute; bottom: 5rem; right: var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); z-index: 4;
  text-decoration: none;
}
/* Mouse icon (desktop) */
.hero__scroll-mouse {
  display: block; width: 22px; height: 36px;
  border: 2px solid rgba(255,255,255,0.5); border-radius: 12px; position: relative;
}
.hero__scroll-mouse::before {
  content: "";
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 7px; background: var(--c-gold);
  border-radius: 2px; transform: translateX(-50%);
  animation: mouseWheel 2s var(--ease-inout) infinite;
}
/* Swipe finger (mobile) */
.hero__scroll-hand {
  display: none; width: 32px; height: 32px;
  animation: swipeFinger 2.4s var(--ease-inout) infinite;
}
.hero__scroll-hand svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .hero__scroll { right: auto; left: 50%; transform: translateX(-50%); bottom: 5.5rem; gap: 10px; }
  .hero__scroll-mouse { display: none; }
  .hero__scroll-hand  { display: block; }
}

/* Hero entrance — CSS keyframe animations (not IntersectionObserver) */
.hero__overline, .hero__headline, .hero__ctas, .hero__ticker {
  opacity: 0; transform: translateY(20px);
  animation: heroEnter 1s var(--ease-out) forwards;
}
.hero__overline { animation-delay: .1s; }
.hero__headline { animation-delay: .25s; }
.hero__ctas     { animation-delay: .55s; }
.hero__ticker   { animation-delay: .8s; }

@media (prefers-reduced-motion: reduce) {
  .hero__layer.is-active { animation: none; transform: none; }
  .hero__cycle-word { transition: none; }
}

/* Mobile: kill hero Ken Burns (scale animation) — the subtle zoom
   creates compositor pressure that compounds with other scroll-driven
   work on mid/low-end devices and contributes to scroll jank. Crossfade
   via opacity remains for the visual beat. */
@media (max-width: 900px) {
  .hero__layer.is-active { animation: none; transform: none; }
  .hero__layer { will-change: opacity; } /* drop transform from will-change too */
}
/* Touch devices of any width (large tablets / landscape phones >900px too):
   same kill. The continuous scale (Ken Burns) plus the JS reflow that restarts
   it on each crossfade competes with finger scrolling — the user felt this as
   "scroll goes slow / stutters as soon as you swipe a little" on the hero.
   Coarse-pointer catches every touch device the width query misses. */
@media (hover: none) and (pointer: coarse) {
  .hero__layer.is-active { animation: none; transform: none; }
  .hero__layer { will-change: opacity; }
}

/* ─── 14. MARQUEE ────────────────────────────────────────────────────────────── */
.marquee {
  background: var(--c-gold); color: var(--c-black);
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.15);
}
.marquee__track {
  display: flex; align-items: center; gap: 3rem;
  white-space: nowrap; padding: 1rem 0;
  font-family: var(--ff-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: 0.08em;
  animation: marqueeScroll 48s linear infinite;
}
.marquee__dot { font-size: 0.5em; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ─── 15. VEHICLES (What are you driving?) ──────────────────────────────────── */
.vehicles {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-black);
  border-top: 1px solid rgba(0,0,0,0.15);
}
.vehicles .section__head {
  text-align: center; display: flex; flex-direction: column;
  align-items: center; margin-bottom: 4rem;
}

.vehicles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  margin: 0 var(--gutter);
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: 16px; overflow: hidden;
}
@media (min-width: 720px) {
  .vehicles__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: var(--maxw);
    margin: 0 var(--gutter);
  }
}
@media (min-width: 1024px) {
  .vehicles__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 1580px) {
  .vehicles__grid { margin-left: auto; margin-right: auto; }
}
/* Laptop band (1200–1579px CSS, e.g. a 1920px screen at 125–150% scaling): the
   grid (max-width var(--maxw)) was left-aligned with a gutter — below the 1580
   centering threshold — so it leaned left with empty space on the right. Centre
   it here too. */
@media (min-width: 1200px) and (max-width: 1579px) {
  .vehicles__grid { margin-left: auto; margin-right: auto; }
}

.vehicle-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--c-dark-2);
  padding: 2.5rem 1rem 2rem;
  color: var(--c-white);
  /* Reveal animation: .kata-reveal sets initial opacity:0 + translateY(32px)
     and we transition both. Once IO adds .is-visible, the rule below drops
     transform from the transition list so the rAF+lerp magnetic effect can
     track the mouse without fighting a 900ms interp on every frame. */
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), background .3s var(--ease-out);
  cursor: pointer;
  text-decoration: none;
}
.vehicle-card.is-visible {
  transition: opacity .9s var(--ease-out), background .3s var(--ease-out);
}
.vehicle-card:hover { background: var(--c-dark-3); }

.vehicle-card__icon {
  display: flex; align-items: center; justify-content: center;
  color: var(--c-mute);
  transition: color .3s, transform .5s var(--ease-out);
  width: 119px; height: 61px;
}
.vehicle-card__icon svg {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 100%;
}
.vehicle-card:hover .vehicle-card__icon { color: var(--c-gold); transform: translateY(-2px) scale(1.05); }

.vehicle-card__label {
  font-family: var(--ff-display); font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  text-align: center; letter-spacing: 0.02em; line-height: 1.1;
}
.vehicle-card__label em {
  font-style: normal; color: var(--c-mute);
  display: block; font-size: 0.75em; margin-top: 4px;
}
.vehicle-card__sublabel {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-mute); margin-top: -4px;
}
.vehicle-card__arrow {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 14px; color: var(--c-mute);
  transition: transform .3s var(--ease-out), color .3s;
}
.vehicle-card:hover .vehicle-card__arrow { transform: translate(4px, -4px); color: var(--c-gold); }

.vehicle-card--other { background: var(--c-dark-3); }
.vehicle-card--other .vehicle-card__icon { color: var(--c-gold); }
/* Lock the "Another vehicle" arrows icon to a defined pixel size so the mobile
   breakpoint can scale it down (otherwise the 44×44 intrinsic viewBox wins
   regardless of container). */
.vehicle-card--other .vehicle-card__icon svg {
  width: 44px; height: 44px; max-width: none; max-height: none;
}

/* Mobile: shrink card + silhouette + arrow icon ~15% so Home/Compat selectors
   don't dominate the viewport on small screens. Shop mirrors these values
   below 720px (see shop.css) for cross-surface uniformity. */
@media (max-width: 719px) {
  .vehicle-card { padding: 2rem 0.85rem 1.6rem; gap: 0.85rem; }
  .vehicle-card__icon { width: 101px; height: 52px; }
  .vehicle-card--other .vehicle-card__icon svg { width: 37px; height: 37px; }
  .vehicle-card__label { font-size: clamp(0.94rem, 1.2vw, 1.15rem); }
  .vehicle-card__arrow { font-size: 12px; top: 0.85rem; right: 0.85rem; }
}

.vehicles__foot { text-align: center; margin-top: 3rem; }
.vehicles__hint {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-mute);
}

/* ─── 16. PRODUCTS ───────────────────────────────────────────────────────────── */
.products {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-dark);
  border-top: 1px solid var(--c-line);
}
.products .section__head { margin-bottom: 4rem; }

.products__grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 900px) {
  .products__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.product {
  position: relative;
  background: var(--c-dark-2);
  border: 1px solid var(--c-line);
  border-radius: 8px; overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .4s;
}
.product:hover { border-color: var(--c-gold); transform: translateY(-6px); }

/* Stretched-link overlay covers the full .product article. The visible CTA
   in the foot is a decorative span (aria-hidden); only the overlay is the
   real anchor for screen readers + clicks. */
.product__overlay {
  position: absolute; inset: 0; z-index: 2;
  text-indent: -9999px; overflow: hidden;
  border-radius: inherit;
}
.product__overlay:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 4px; }
.product__media {
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-dark-3);
}
.product__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out), filter .4s;
  filter: saturate(0.9) brightness(0.95);
}
.product:hover .product__media img { transform: scale(1.06); filter: saturate(1.05) brightness(1); }

.product__body { padding: 2rem; }
.product__name {
  font-family: var(--ff-display); font-size: clamp(2.25rem, 3.2vw, 2.75rem);
  color: var(--c-white); letter-spacing: 0.01em; margin-bottom: 0.25rem;
}
.product__tag  { font-size: 0.95rem; color: var(--c-gold); margin-bottom: 1.25rem; letter-spacing: 0.01em; }

/* §02 Section 2 simplified per Orne 07/05: gray descriptive paragraph removed,
   separator borders dropped. Bullets+dashes amarillos remain. Cards are fully
   clickable via .product__cta::before overlay (real anchor, no JS). */
.product__specs {
  margin-bottom: 1.5rem;
}
.product__specs li {
  font-size: 0.85rem; letter-spacing: 0.02em; color: var(--c-off);
  padding: 0.4rem 0;
  display: flex; align-items: center;
}
.product__specs li::before {
  content: ""; width: 12px; height: 1px; background: var(--c-gold); margin-right: 10px;
}

.product__foot {
  display: flex; align-items: center; justify-content: space-between;
}
.product__price {
  font-family: var(--ff-display); font-size: 1.2rem; color: var(--c-white); letter-spacing: 0.02em;
}
.product__price em {
  font-style: normal; color: var(--c-mute); font-size: 0.6em;
  text-transform: uppercase; letter-spacing: 0.2em; margin-right: 4px;
}
/* Decorative CTA — the real interaction is on .product__overlay above.
   The CTA mirrors hover/focus styling of its parent card via :hover/:focus
   on .product. */
.product__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-white); padding-bottom: 2px;
  border-bottom: 1px solid var(--c-line-strong);
  transition: color .2s, border-color .2s, gap .3s var(--ease-out);
  pointer-events: none;
}
.product:hover .product__cta,
.product__overlay:hover ~ .product__body .product__cta,
.product__overlay:focus-visible ~ .product__body .product__cta {
  color: var(--c-gold); border-color: var(--c-gold); gap: 10px;
}

/* ─── 17. STATEMENT (light / cream chapter) ─────────────────────────────────── */
.statement {
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter);
  background:
    url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    var(--c-cream);
  position: relative; overflow: hidden;
  color: var(--c-ink);
}
.statement__inner {
  position: relative; z-index: 2;
  max-width: 64rem; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.statement .eyebrow { color: var(--c-ink-mute); }
.statement .eyebrow__index { color: var(--c-gold-secondary); }

.statement__title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 0.95; letter-spacing: -0.01em;
  color: var(--c-ink); font-weight: 400;
  margin: 1.25rem 0 1.5rem;
}
.statement__title span { display: block; }
.statement__title em   { font-style: normal; color: var(--c-gold-secondary); }

.statement__body {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.65;
  color: var(--c-ink-2); max-width: 36rem; margin-bottom: 2rem;
}

.statement__stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
  padding: 1.5rem 0; margin-bottom: 1.5rem;
  width: 100%;
  border-top: 1px solid var(--c-ink-line);
  border-bottom: 1px solid var(--c-ink-line);
}
@media (min-width: 720px) { .statement__stats { grid-template-columns: repeat(4, 1fr); } }

.statement__stat { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.statement__stat-num {
  font-family: var(--ff-display); font-size: clamp(2.5rem, 4vw, 3.75rem);
  color: var(--c-ink); letter-spacing: 0.01em; line-height: 1;
}
.statement__stat-num em { font-style: normal; color: var(--c-gold-secondary); margin-left: 2px; }
.statement__stat-label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-ink-mute);
}

.statement__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-body); font-weight: 500;
  color: var(--c-ink); padding-bottom: 4px;
  border-bottom: 1px solid var(--c-gold-secondary);
  transition: color .2s, gap .3s var(--ease-out);
}
.statement__link:hover { color: var(--c-gold-secondary); gap: 12px; }

/* ─── 18. FULL CONVERSION ────────────────────────────────────────────────────── */
.conversion {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-dark);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.conversion__grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter); align-items: center;
}
@media (min-width: 900px) {
  .conversion__grid { grid-template-columns: 1fr 1.05fr; gap: 5rem; }
}

.conversion__content { order: 2; }
@media (min-width: 900px) { .conversion__content { order: 1; } }

.conversion__title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 7vw, 6rem); line-height: 0.95; letter-spacing: -0.01em;
  color: var(--c-white); font-weight: 400; margin-top: 1.5rem;
}
.conversion__title em { font-style: normal; color: var(--c-gold); }

.conversion__body {
  font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6;
  color: var(--c-mute); max-width: 32rem; margin-top: 1.5rem;
}

/* Mobile-only: hide FC teaser features list + media image — keep title +
 * lede + CTAs only (v5.21.x Orne, Bruno). Desktop unchanged. */
@media (max-width: 720px) {
  .conversion__features,
  .conversion__media { display: none; }
}

.conversion__features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem;
  margin: 2.5rem 0; padding: 2rem 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
@media (max-width: 500px) { .conversion__features { grid-template-columns: 1fr; } }
.conversion__features li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.95rem; color: var(--c-off);
}
.conversion__feature-num {
  font-family: var(--ff-display); font-size: 1rem; color: var(--c-gold);
  letter-spacing: 0.08em; line-height: 1; flex-shrink: 0; padding-top: 2px;
}

.conversion__ctas { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }

.conversion__media {
  order: 1;
  position: relative; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 4px;
  background: var(--c-dark-2);
}
@media (min-width: 900px) { .conversion__media { order: 2; } }
.conversion__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95); transition: transform 1.2s var(--ease-out);
}
.conversion:hover .conversion__media img,
.conversion__media:hover img { transform: scale(1.03); }
.conversion__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(8,8,8,0.35) 100%);
}

.conversion__badge {
  position: absolute; bottom: 1.25rem; left: 1.25rem;
  background: rgba(8,8,8,0.75); backdrop-filter: blur(12px);
  border: 1px solid var(--c-line);
  padding: 12px 18px;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 2;
}
.conversion__badge span   { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-mute); }
.conversion__badge strong { font-family: var(--ff-display); font-size: 1.2rem; color: var(--c-gold); letter-spacing: 0.02em; }

/* ─── 19. PROCESS / HOW IT WORKS (light chapter) ────────────────────────────── */
.process {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-white);
  color: var(--c-ink);
  position: relative;
}
/* Gold hairline chapter marker */
.process::before {
  content: ""; position: absolute; left: 50%; top: 1.5rem;
  width: 240px; height: 1px;
  background: rgba(254,197,62,0.28);
  transform: translateX(-50%); z-index: 1;
}
.process .section__head  { margin-bottom: 4rem; }
.process .section__title { color: var(--c-ink); }
.process .section__title em { color: var(--c-gold); }
.process .section__lede  { color: var(--c-ink-mute); }
.process .eyebrow        { color: var(--c-ink-mute); }
.process .eyebrow__index { color: var(--c-gold); }

/* Mobile: 1-col stack (v5.21.x Orne — Bruno: simpler vertical rhythm on mobile).
   720–900px: 2-col grid with FC card spanning both cols on row 2 (previous
   default). Desktop ≥900px is the 3-col layout. */
.process__grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
.process-card--full-conversion { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .process__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .process__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .process-card--full-conversion { grid-column: auto; }
}

.process-card {
  background: var(--c-cream); border: 1px solid var(--c-ink-line);
  padding: 2.5rem 2rem 2rem;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s;
}
.process-card:hover {
  border-color: var(--c-ink-line-strong);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(26,23,20,0.2);
}
.process-card--featured {
  background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink);
}

/* Gold variant — Custom Kit. Ink text on gold reads strongly; bar /
   label / btn-link contrasts shift to ink for legibility. */
.process-card--gold {
  background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold);
}
.process-card--gold .process-card__bar { background: rgba(26,23,20,0.18); }
.process-card--gold .process-card__bar-fill { background: var(--c-ink); }
.process-card--gold .process-card__label { color: var(--c-ink); }
.process-card--gold .process-card__title { color: var(--c-ink); }
.process-card--gold .process-card__tag { color: rgba(26,23,20,0.78); }

/* Involvement bar */
.process-card__bar {
  display: block; width: 100%; height: 2px;
  background: var(--c-ink-line);
  margin-bottom: 2rem; position: relative; overflow: hidden;
}
.process-card--featured .process-card__bar { background: rgba(255,255,255,0.14); }
.process-card__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--fill, 0%); background: var(--c-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out);
}
.process-card.is-visible .process-card__bar-fill { transform: scaleX(1); }

.process-card__label {
  font-family: var(--ff-display); font-size: 0.85rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-gold-secondary); margin-bottom: 1.25rem;
}
.process-card--featured .process-card__label { color: var(--c-gold); }

.process-card__title {
  font-family: var(--ff-display); font-size: clamp(2rem, 2.8vw, 2.5rem);
  color: var(--c-ink); letter-spacing: 0.01em; line-height: 1; margin-bottom: 0.65rem;
}
.process-card--featured .process-card__title { color: var(--c-white); }

.process-card__tag {
  color: var(--c-ink-mute); margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.5;
}
.process-card--featured .process-card__tag { color: rgba(255,255,255,0.7); }

/* Tag copy — pushed to flex:1 so cards equalise height even with different
   length copies; btn-link sits at the bottom regardless of tag length. */
.process-card__tag { flex: 1; }

/* btn-link overrides per card variant */
.process .btn-link { color: var(--c-ink); border-bottom-color: var(--c-ink-line-strong); }
.process .btn-link:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.process .process-card--featured .btn-link { color: var(--c-white); border-bottom-color: rgba(255,255,255,0.35); }
.process .process-card--featured .btn-link:hover { color: var(--c-gold); border-bottom-color: var(--c-gold); }
.process .process-card--gold .btn-link { color: var(--c-ink); border-bottom-color: rgba(26,23,20,0.4); }
.process .process-card--gold .btn-link:hover { color: var(--c-ink-2); border-bottom-color: var(--c-ink); }

/* ─── 20. POP-TOP ────────────────────────────────────────────────────────────── */
.poptop {
  position: relative;
  padding: clamp(6rem, 14vw, 14rem) var(--gutter);
  min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: center;
}
.poptop__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; z-index: 0; filter: saturate(0.9);
}
.poptop__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(8,8,8,0.35), rgba(8,8,8,0.35)),
    linear-gradient(180deg, rgba(8,8,8,0.5) 0%, rgba(8,8,8,0.2) 40%, rgba(8,8,8,0.85) 100%);
}
.poptop__content {
  position: relative; z-index: 2; max-width: 48rem;
  display: flex; flex-direction: column; align-items: center;
}
.poptop__title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 10vw, 9rem); line-height: 0.9; letter-spacing: -0.01em;
  color: var(--c-white); font-weight: 400; margin: 1.5rem 0;
}
.poptop__title em { font-style: normal; color: var(--c-gold); }
.poptop__body {
  font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5;
  color: var(--c-off); margin-bottom: 2rem;
}
.poptop__body strong { color: var(--c-gold); font-weight: 500; }
.poptop__meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.75rem;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-mute); margin-bottom: 2.5rem;
}
.poptop__dot { color: var(--c-gold); font-size: 8px; }

/* ─── 21. GALLERY ────────────────────────────────────────────────────────────── */
.gallery {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-dark); border-top: 1px solid var(--c-line);
}
.gallery .section__head { margin-bottom: 4rem; }

.gallery__mosaic {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 640px) {
  .gallery__mosaic { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1000px) {
  .gallery__mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px; gap: 1.5rem;
  }
  .gallery__item--tall { grid-row: span 2; }
  .gallery__item--wide { grid-column: span 2; }
}

.gallery__item {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--c-dark-2);
  border: 1px solid var(--c-line);
}
@media (min-width: 1000px) { .gallery__item { aspect-ratio: auto; height: 100%; } }
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease-out), filter .5s;
  filter: saturate(0.85) brightness(0.95);
}
.gallery__item:hover img { transform: scale(1.06); filter: saturate(1.05) brightness(1.05); }

.gallery__caption {
  position: absolute; bottom: 1rem; left: 1rem;
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--c-white); background: rgba(8,8,8,0.7); backdrop-filter: blur(8px);
  padding: 6px 10px; opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.gallery__item:hover .gallery__caption { opacity: 1; transform: none; }

.gallery__foot { text-align: center; margin-top: 3.5rem; }

/* ─── 22. TESTIMONIALS ───────────────────────────────────────────────────────── */
.testimonials {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-white); border-top: 1px solid var(--c-ink-line);
}
.testimonials .section__head { margin-bottom: 4rem; }
.testimonials .section__title { color: var(--c-ink); }
.testimonials .eyebrow        { color: var(--c-ink-mute); }
.testimonials .eyebrow__index { color: var(--c-gold-secondary); }

.testimonials__rating {
  text-align: right; display: flex; flex-direction: column; gap: 4px;
  font-size: 0.9rem; color: var(--c-ink-mute);
}
.testimonials__stars          { font-size: 1.25rem; color: var(--c-gold-secondary); letter-spacing: 3px; }
.testimonials__rating strong  { color: var(--c-ink); font-weight: 500; }

.testimonials__grid {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 720px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }

/* Carousel — Orne 07/05 override of the no-slider lock. 1 visible mobile,
   2 visible desktop, 5s autoplay paused on hover/focus + reduced-motion. */
.testimonials__carousel {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 var(--gutter);
}
.testimonials__viewport {
  overflow: hidden;
  /* breathing room so the .testimonial::before quote glyph (top:-8px) and
     hover lift don't get clipped by overflow:hidden */
  padding: 12px 0 16px;
  margin: -12px 0 -16px;
}
.testimonials__track {
  display: flex;
  gap: 1.5rem;
  transition: transform .6s var(--ease-out);
  will-change: transform;
}
.testimonials__slide {
  flex: 0 0 calc(100% - 0px); /* mobile: 1 visible per "page" */
  min-width: 0; /* allow shrinking inside flex */
  margin: 0; /* reset figure default */
}
@media (min-width: 720px) {
  .testimonials__track { gap: 1.75rem; }
  .testimonials__slide { flex: 0 0 calc(50% - 0.875rem); } /* 2 visible · gap/2 reserved */
}
.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2rem;
}
.testimonials__nav {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--c-ink-line);
  border-radius: var(--radius-pill);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.testimonials__nav:hover {
  border-color: var(--c-ink-line-strong);
  color: var(--c-ink);
  background: var(--c-cream, rgba(0,0,0,0.025));
}
.testimonials__nav:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
.testimonials__nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.testimonials__dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.testimonials__dot {
  width: 8px; height: 8px;
  padding: 0;
  background: var(--c-ink-line);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.testimonials__dot:hover { background: var(--c-ink-line-strong); }
.testimonials__dot[aria-selected="true"] {
  background: var(--c-gold-secondary, var(--c-gold));
  transform: scale(1.4);
}
.testimonials__dot:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .testimonials__track { transition: none; }
}

.testimonial {
  background: var(--c-white); border: 1px solid var(--c-ink-line);
  padding: 2.5rem; position: relative;
  transition: border-color .3s, transform .4s var(--ease-out), box-shadow .4s;
}
.testimonial::before {
  content: "\201C"; position: absolute; top: -8px; left: 24px;
  font-family: var(--ff-display); font-size: 5rem; color: var(--c-gold);
  line-height: 1; opacity: 0.25;
}
.testimonial:hover {
  border-color: var(--c-ink-line-strong);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px rgba(26,26,26,0.1);
}
.testimonial__stars { color: var(--c-gold-secondary); letter-spacing: 2px; margin-bottom: 1rem; font-size: 0.9rem; }
.testimonial blockquote {
  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.55;
  color: var(--c-ink-2); margin-bottom: 1.5rem; font-style: italic;
}
.testimonial figcaption {
  padding-top: 1rem; border-top: 1px solid var(--c-ink-line);
  display: flex; flex-direction: column; gap: 2px;
}
.testimonial__name { font-family: var(--ff-display); font-size: 1.1rem; color: var(--c-ink); letter-spacing: 0.02em; }
.testimonial__meta { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-ink-mute); }

/* ─── 23. TRUST / BRAND PARTNERS ────────────────────────────────────────────── */
.trust {
  padding: 3rem 0 4rem;
  background: var(--c-dark);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.trust .eyebrow { display: flex; justify-content: center; margin-bottom: 2rem; }
.trust__marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.trust__track {
  display: flex; align-items: center; gap: 2.5rem;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite;
  font-family: var(--ff-display); font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  letter-spacing: 0.12em; color: var(--c-off);
}
.trust__item { transition: color .3s, transform .3s; }
.trust__item:hover { color: var(--c-gold); transform: translateY(-2px); }
.trust__sep { color: var(--c-gold); font-size: 0.5em; }
@media (prefers-reduced-motion: reduce) { .trust__track { animation: none; } }

/* ─── 24. FINALE CTA ─────────────────────────────────────────────────────────── */
.finale {
  padding: clamp(6rem, 14vw, 12rem) var(--gutter);
  background: var(--c-black); text-align: center;
  position: relative; overflow: hidden;
}
.finale::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 120vw; height: 120vw;
  max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, rgba(254,197,62,0.12) 0%, transparent 60%);
  transform: translate(-50%, -50%); z-index: 0;
}
.finale__inner {
  position: relative; z-index: 1;
  max-width: 42rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.finale__title {
  font-family: var(--ff-display);
  font-size: clamp(3.5rem, 12vw, 10rem);
  line-height: 0.9; letter-spacing: -0.01em;
  color: var(--c-white); font-weight: 400; margin: 2rem 0 1.5rem;
}
.finale__title span { display: block; }
.finale__title em   { font-style: normal; color: var(--c-gold); }
.finale__body {
  font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.5;
  color: var(--c-mute); margin-bottom: 2.5rem;
}
.finale__ctas {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
  margin-bottom: 4rem;
}
/* Contact strip — sibling of .finale__inner so it can span the full container
   width (mirrors FC §12 finale-fc__grid). Larger display-font values, gold
   uppercase labels, generous gap. */
.finale__contact {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  width: 100%; max-width: var(--maxw); margin: 3rem auto 0;
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0;
  border-top: 1px solid var(--c-line);
}
@media (min-width: 520px) { .finale__contact { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); } }
@media (min-width: 900px) { .finale__contact { grid-template-columns: repeat(4, 1fr); } }

.finale__contact-item {
  display: flex; flex-direction: column; gap: 0.5rem; text-align: center;
}
.finale__contact-label {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-gold); font-weight: 600;
}
.finale__contact-value {
  font-family: var(--ff-display);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--c-white); letter-spacing: 0.02em; line-height: 1.3;
  transition: color .3s var(--ease-out);
}
a.finale__contact-value:hover { color: var(--c-gold); }

/* ─── 25. FOOTER (mockup V1 canonical) ──────────────────────────────────────── */
.footer {
  background: var(--c-black);
  color: var(--c-off);
  padding: 0 var(--gutter);
  border-top: 1px solid var(--c-line);
}
.footer__top {
  max-width: var(--maxw); margin: 0 auto;
  padding: 5rem 0 3rem;
  display: grid; grid-template-columns: 1fr; gap: 3rem;
}
@media (min-width: 900px) { .footer__top { grid-template-columns: 1.2fr 2fr; gap: 5rem; } }

.footer__brand { display: flex; flex-direction: column; }
.footer__logo {
  line-height: 0; margin-bottom: 0.25rem;
}
.footer__logo-img,
.footer__logo .custom-logo,
.footer__logo .custom-logo-link img {
  display: block !important;
  height: 54px !important; width: auto !important;
  max-height: 54px !important; max-width: none !important;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity .2s;
}
.footer__logo a:hover .custom-logo,
.footer__logo a:hover img { opacity: 1; }
.footer__logo .custom-logo-link { display: inline-flex; line-height: 0; }
@media (max-width: 720px) {
  .footer__logo-img,
  .footer__logo .custom-logo,
  .footer__logo .custom-logo-link img {
    height: 44px !important; max-height: 44px !important;
  }
}

.footer__tagline {
  color: var(--c-mute); margin: 0.75rem 0 1rem;
  font-size: 0.95rem; max-width: 22rem;
}

.footer__phone {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1.5rem; color: var(--c-white);
  font-size: 0.95rem;
}
.footer__phone-icon { color: var(--c-gold); flex-shrink: 0; }
.footer__phone-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.footer__phone-link:hover,
.footer__phone-link:focus-visible { border-bottom-color: var(--c-gold); }

.footer__social { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer__social a {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--c-white);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-line-strong);
  transition: color .2s, border-color .2s;
}
.footer__social a:hover { color: var(--c-gold); border-color: var(--c-gold); }
.footer__social-icon { flex-shrink: 0; }

.footer__cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem;
}
@media (min-width: 720px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer__col h4 {
  font-family: var(--ff-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: 1rem;
}
.footer__col a {
  display: block; padding: 0.3rem 0;
  font-size: 0.95rem; color: var(--c-off);
  transition: color .2s;
}
.footer__col a:hover { color: var(--c-gold); }

.footer__newsletter {
  max-width: var(--maxw); margin: 0 auto;
  padding: 2.5rem 0;
  border-top: 1px solid var(--c-line);
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  align-items: center;
}
@media (min-width: 720px) { .footer__newsletter { grid-template-columns: 1fr 1.4fr; gap: 3rem; } }
.footer__newsletter p {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--c-white); letter-spacing: 0.01em;
}
.footer__form {
  display: flex; gap: 0.75rem;
  background: var(--c-dark-2); padding: 6px;
  border-radius: var(--radius-pill); border: 1px solid var(--c-line);
}
.footer__form input {
  flex: 1; background: transparent; border: 0; outline: none;
  padding: 0.5rem 1rem; color: var(--c-white); font-family: var(--ff-body);
}
.footer__form input::placeholder { color: var(--c-mute); }
/* Honeypot — visually & functionally hidden, off-screen (bots fill it). */
.footer__hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}
/* Inline subscribe feedback. Sits under the form column on desktop. */
.footer__form-status {
  font-family: var(--ff-body); font-size: 0.85rem; line-height: 1.4;
  color: var(--c-mute); margin-top: 0.5rem;
}
.footer__form-status.is-ok { color: var(--c-gold); }
.footer__form-status.is-error { color: #ff6b6b; }
@media (min-width: 720px) { .footer__form-status { grid-column: 2; margin-top: 0.25rem; } }

.footer__bottom {
  max-width: var(--maxw); margin: 0 auto;
  padding: 1.5rem 0;
  border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-mute);
}
.footer__legal, .footer__legal span { color: var(--c-mute); }
.footer__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__links a { transition: color .2s; }
.footer__links a:hover { color: var(--c-gold); }

/* ─── 26. MAGNETIC / INTERACTIVE ────────────────────────────────────────────── */
[data-magnetic] { transition: transform .3s var(--ease-out); will-change: transform; }

/* ─── 27. MOBILE REFINEMENTS ─────────────────────────────────────────────────── */

/* Hero h1 — bigger on mobile for presence */
@media (max-width: 600px) {
  .hero__headline { font-size: clamp(4rem, 18vw, 6rem); }
  .hero__cycle    { height: clamp(3.5rem, 16vw, 5.5rem); }
}

/* All h2 section titles — slightly bigger on mobile */
@media (max-width: 600px) {
  .section__title { font-size: clamp(2.2rem, 8vw, 3rem); }
}

/* Buttons — ~33% smaller on mobile */
@media (max-width: 600px) {
  .btn       { padding: 12px 20px; font-size: 12px; gap: 8px; }
  .btn--lg   { padding: 14px 24px; font-size: 13px; }
  .hero__ctas   { flex-direction: row; flex-wrap: wrap; }
  .hero__ctas   .btn { justify-content: center; flex: 0 1 auto; width: auto; }
  .finale__ctas { flex-direction: row; flex-wrap: wrap; }
  .finale__ctas .btn { justify-content: center; flex: 0 1 auto; width: auto; }
}

/* Gallery — compact on mobile: 2-col, square, hide 7th */
@media (max-width: 639px) {
  .gallery__mosaic { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .gallery__item   { aspect-ratio: 1 / 1; }
  .gallery__item:nth-child(7) { display: none; }
  .gallery__item--tall,
  .gallery__item--wide { grid-row: span 1; grid-column: span 1; }
}

/* Small-screen misc */
@media (max-width: 520px) {
  .hero__meta  { font-size: 9px; }
  .hero__stats { gap: 1.25rem; }
}

/* ─── 28. WOOCOMMERCE ────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb { display: none; }
.woocommerce-notices-wrapper { padding-inline: var(--gutter); }

/* ─── 29. ACCESSIBILITY / UTILITIES ─────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Accessibility: screen-reader-only text (WP canonical pattern) ──────── */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	padding: 0.5rem 1rem;
	background: var(--c-gold);
	color: var(--c-dark);
	z-index: 100000;
	font-weight: 600;
}

*:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}

/* ── Toast (window.kataToast) — branded polite feedback, replaces alert() ──── */
.kata-toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}
.kata-toast {
  background: var(--c-dark-3, #1c1c1c);
  color: var(--c-off, #e8e6e1);
  border: 1px solid var(--c-line-strong, rgba(255,255,255,0.16));
  border-radius: var(--r-md, 8px);
  padding: 0.85rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease-out, ease), transform 0.25s var(--ease-out, ease);
  pointer-events: auto;
}
.kata-toast.is-in { opacity: 1; transform: none; }
.kata-toast--error { border-color: var(--c-err, #c8431a); }
@media (prefers-reduced-motion: reduce) {
  .kata-toast { transition: opacity 0.25s; transform: none; }
}

/* ─── Configurator page (/configurator) — theme-side tweaks ─────────────────
   page-configurator.php now uses the global header/footer. The plugin-owned
   .kata-build-section sat flush against .config-hero (different bg gradient)
   → visible hard edge. Padding-top gives breathing room inside the build
   section before the configurator canvas starts. Scoped to body class for
   specificity vs plugin's own rules. */
.kata-configurator .kata-build-section {
  padding-top: clamp(3rem, 7vh, 6rem);
}

/* ====================================================================
   WhatsApp floating action button (F5 · v5.24.13)
   Fixed bottom-right, globally inserted from footer.php right before
   wp_footer(). KATA gold pill that expands a label on hover/focus,
   collapses to icon-only circle on mobile. z-index 90 keeps it under
   the nav (100) and modals (200) but above content. Customizer-toggleable
   via kata_show_whatsapp_fab. Pre-fills context-aware message — see
   kata_whatsapp_context_message() in functions-contact.php.
   ==================================================================== */
.kata-wa-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  height: 56px;
  border-radius: 100px;
  background: var(--c-gold);
  color: var(--c-dark);
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  overflow: hidden;
  will-change: transform;
}
.kata-wa-fab__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  padding: 14px;
  box-sizing: border-box;
  display: block;
}
.kata-wa-fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding-right: 0;
  transition: max-width .3s var(--ease-out), padding-right .3s var(--ease-out);
}
.kata-wa-fab:hover,
.kata-wa-fab:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.2);
}
.kata-wa-fab:hover .kata-wa-fab__label,
.kata-wa-fab:focus-visible .kata-wa-fab__label {
  max-width: 160px;
  padding-right: 18px;
}
.kata-wa-fab:focus-visible {
  outline: 2px solid var(--c-white);
  outline-offset: 4px;
}

/* Mobile: smaller circle, safe-area inset, no hover-reveal label
   (tap target doesn't have a hover state on touch devices anyway). */
@media (max-width: 720px) {
  .kata-wa-fab {
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    height: 52px;
  }
  .kata-wa-fab__icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 13px;
  }
  .kata-wa-fab__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kata-wa-fab,
  .kata-wa-fab__label {
    transition: none !important;
  }
}