/**
 * Warm Boutique design system — shared CSS
 * Loaded inline (via partials/wb-head-open.php → file_get_contents) so first paint has no FOUC.
 *
 * Stage 1 (2026-05-04): seeded with the homepage CSS extracted verbatim from
 * page-redesign-c.php (lines 43-535). Future pages extend this file with their own
 * page-prefixed classes (e.g. .svc-* for Services, .ab-* for About).
 *
 * Naming convention:
 *   :root tokens      → --wb-* variables (single source of truth)
 *   shared primitives → .wb-* (pill, btn, card, ph, ba, diamond, ornament...)
 *   page-specific     → .dc-* (homepage), .svc-* (services), .ab-* (about), etc.
 */

/* === Self-hosted fonts (funnel CWV, 2026-05-25; Jost swap 2026-06-11) ===
 * Latin subset only. font-display:swap → LCP no longer blocks on font load.
 *
 * 2026-06-11 owner decision: Jost (OFL geometric sans, the legal
 * Futura / LV-web lookalike) replaces BOTH Fraunces and Montserrat
 * site-wide. Sizes / weights / casing / tracking unchanged — family swap
 * only. Spec: docs/superpowers/specs/2026-06-11-jost-font-swap-design.md
 *
 * Each @font-face declares `font-weight: 100 900` (a range) — not a fixed
 * weight — so the browser exposes the file's full variable axis to
 * font-weight requests. With fixed descriptors (300/400/500 etc.) the
 * browser cannot interpolate to weights outside the declared set and
 * falls back to faux-thin/faux-bold synthesis.
 *
 * Spec: docs/superpowers/specs/2026-05-24-funnel-cwv-design.md
 * Phantom-source post-mortem: docs/investigations/2026-05-25-phantom-fonts.md
 * Variable-axis fix (v1.19.23): code review #2 — see commit message. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jost-variable.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: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jost-italic-variable.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;
}
/* === End self-hosted fonts === */

:root {
  /* --rose deepened 2026-05-22 (Stage 2 UI-2) from #be7c68 (4.10:1 on
   * warm paper, fails body) to #9a5d4b (DESIGN.md "Burnt Rose",
   * ~5.7:1 on warm paper, passes WCAG 2.2 AA body 4.5:1).
   * Every var(--rose) callsite — wb-mc--rose, wb-edition (default),
   * wb-diamond, focus rings — picks up the new value automatically.
   * Legacy value preserved in --rose-legacy if a one-off needs the
   * lighter tone for non-text decoration.
   */
  --rose: #9a5d4b;
  --rose-legacy: #be7c68;
  --rose-soft: #fbeee8;
  --rose-soft-border: #e2cdc3;
  --gold: #a38d5d;
  --cream: #e5e0cc;
  --paper: #fbfaf6;
  --ink: #131516;
  --ink-2: #3a3a3a;
  --line: #e8e2d3;
  /* 2026-06-11 Jost swap: both tokens now resolve to Jost (owner decision,
   * LV-style single geometric sans). Token NAMES kept — hundreds of
   * callsites reference --serif/--sans; renaming is a big diff for zero
   * user-visible gain. --serif no longer means "a serif face". */
  --serif: 'Jost', system-ui, sans-serif;
  --sans: 'Jost', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.dc-warm-boutique {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; /* typeset 2026-05-19: 14→16, base legibility for the 25-55 audience */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.dc-warm-boutique a { text-decoration: none; }
/* Only inherit text color for "naked" links (no class) — buttons keep their own colors. */
body.dc-warm-boutique a:not([class]) { color: inherit; }
body.dc-warm-boutique button { font-family: inherit; cursor: pointer; }

/* ============= Skip link (WCAG 2.4.1) ============= */
.wb-skip-link {
  position: absolute; top: 0; left: 0;
  background: var(--ink); color: #fff;
  padding: 14px 20px; border-radius: 0 0 8px 0;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; text-decoration: none;
  transform: translateY(-110%);
  transition: transform 0.15s ease-out;
  z-index: 9999;
}
.wb-skip-link:focus,
.wb-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--rose);
  outline-offset: -4px;
}
/* #wb-main was an inert empty anchor pre-2026-05-22; now it's the <main>
 * element wrapping all page content (commit 9915185), so this previous
 * `height: 0; overflow: hidden` rule would clip the entire page. Left
 * intentionally blank — <main> uses default block layout. */

/* Screen-reader-only utility (WP-equivalent class so admin/plugins inherit it too).
 * Added Stage 2 2026-05-22 for the quote form's required-field affordance and
 * step announcement region. */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); 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 {
  background-color: var(--wb-paper-warm); color: var(--wb-cocoa);
  clip: auto !important; -webkit-clip-path: none; clip-path: none;
  height: auto; width: auto; padding: 14px 20px;
  display: block; font-size: 13px; font-weight: 600;
  left: 8px; top: 8px;
  text-decoration: none;
  z-index: 100000;
}


/* ============= Direction C · Warm Boutique — wrappers (still live) ============= */
.dc-page { background: var(--cream); color: var(--ink); }

.dc-btn--filled {
  background: var(--ink); color: #fff; border: 0;
  padding: 16px 28px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  display: inline-block;
}
.dc-btn--outline {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 28px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  display: inline-block;
}
.dc-sticky-bar { display: none; }

/* ============= Mobile ============= */
@media (max-width: 768px) {
  body.dc-warm-boutique { font-size: 15px; line-height: 1.55; } /* typeset 2026-05-19: 13→15 */

  .dc-nav-wrap { padding: 12px 12px 0; }
  .dc-nav { padding: 10px 10px 10px 16px; }
  .dc-nav__logo { gap: 8px; }
  .dc-nav__logo-main { font-size: 16px; }
  .dc-nav__logo-sub { display: none; }  /* 手机空间窄，副标隐藏 */
  .dc-nav__links { display: none; }
  .dc-nav__cta { background: transparent; color: var(--ink-2); padding: 0; font-size: 18px; }
  .dc-nav__cta-dot, .dc-nav__cta-text { display: none; }
  .dc-nav__cta::before { content: '☰'; }

  .dc-hero-wrap { padding: 12px; }
  .dc-hero { grid-template-columns: 1fr; padding: 24px; gap: 24px; border-radius: 24px; }
  .dc-hero__glow { top: -80px; right: -80px; width: 240px; height: 240px; }
  .dc-hero__title { font-size: 48px; margin: 16px 0 12px; }
  .dc-hero__lead { font-size: 13px; line-height: 1.65; margin-bottom: 18px; }
  .dc-hero__actions { flex-direction: column; gap: 8px; }
  .dc-hero__actions .dc-btn--filled, .dc-hero__actions .dc-btn--outline { padding: 14px 0; text-align: center; font-size: 12px; }
  .dc-trust { margin-top: 18px; gap: 12px; }
  .dc-trust__avatar { width: 28px; height: 28px; }
  .dc-trust__avatar:not(:first-child) { margin-left: -8px; }
  .dc-trust__avatar:nth-child(5) { display: none; }
  .dc-trust__h { font-size: 11px; }
  .dc-trust__sub { font-size: 10px; }

  .dc-hero__media { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; border-radius: 16px; overflow: hidden; }
  .dc-hero__media-main { grid-row: auto; }
  .dc-hero__media-main .ph { height: 260px; }
  .dc-hero__media-main video { height: 260px; }
  .dc-hero__media-detail, .dc-hero__media-quote { display: none; }

  .dc-trust-strip-wrap { padding: 0 12px 12px; }
  .dc-trust-strip { border-radius: 20px; padding: 24px 20px; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .dc-trust-strip__item:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .dc-trust-strip__item:not(:first-child) { border-left: 0; padding-left: 0; }
  .dc-trust-strip__num { font-size: 28px; }
  .dc-trust-strip__label { font-size: 9.5px; letter-spacing: 0.2em; }

  .dc-services { padding: 24px 12px; }
  .dc-services__head { margin-bottom: 18px; }
  .dc-services__title { font-size: 32px; margin: 12px 0 0; }
  .dc-services__lead { display: none; }
  .dc-services__grid { grid-template-columns: 1fr; gap: 10px; }
  .dc-service { border-radius: 18px; padding: 20px; min-height: auto; display: block; }
  .dc-service__num { font-size: 9.5px; margin-bottom: 8px; }
  .dc-service__title { font-size: 20px; margin-bottom: 6px; line-height: 1.2; }
  .dc-service__body { font-size: 12px; }
  .dc-service__cta { display: none; }

  .dc-ba-wrap { padding: 12px 12px 24px; }
  .dc-ba { border-radius: 24px; padding: 16px; }
  .dc-ba__head { display: block; margin-bottom: 12px; }
  .dc-ba__title { font-size: 24px; margin: 8px 0 0; }
  .dc-ba__filters { overflow-x: auto; flex-wrap: nowrap; margin-top: 12px; }
  .dc-ba__filter { padding: 8px 14px; font-size: 10px; white-space: nowrap; }
  .dc-ba__grid { grid-template-columns: 1fr; gap: 12px; }
  .dc-ba__card { border-radius: 14px; background: var(--cream); }
  .dc-ba__card .ba { height: 200px; }
  .dc-ba__card-img-wrap { height: 200px; }
  .dc-ba__card-meta { padding: 14px; }
  .dc-ba__card-title { font-size: 15px; }
  .dc-ba__card-sub { font-size: 11px; }
  .dc-ba__more { display: none; }

  .dc-brands { padding: 0 12px 24px; }
  .dc-brands__head { margin-bottom: 12px; }
  .dc-brands__title { font-size: 22px; margin: 0 0 12px; }
  .dc-brands__head .pill { display: none; }
  .dc-brand-chip { padding: 8px 14px; font-size: 12px; letter-spacing: 0.1em; }

  .dc-process-wrap { display: none; }

  .dc-cta-wrap { padding: 0 12px 24px; }
  .dc-cta { border-radius: 24px; padding: 28px; }
  .dc-cta__pill { display: none; }
  .dc-cta__title { font-size: 36px; margin: 0 0 12px; line-height: 1.05; }
  .dc-cta__lead { font-size: 13px; margin-bottom: 20px; }
  .dc-cta__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .dc-cta__btn--white, .dc-cta__btn--ghost {
    width: 100%; padding: 16px 0; font-size: 12px; justify-content: center;
  }

  .dc-footer-wrap { padding: 0 12px 80px; }
  .dc-footer { grid-template-columns: 1fr; gap: 16px; padding: 24px; border-radius: 20px; }

  /* DESIGN.md §4 No-Glass Rule: backdrop-filter prohibited.
   * 2026-05-22: removed blur+saturate; use opaque warm-paper instead.
   * The ambient cocoa shadow above remains as the legitimate "floating
   * chrome" affordance. */
  .dc-sticky-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--wb-line);
    box-shadow: 0 -8px 26px -18px rgba(60, 40, 25, 0.45);
    padding: 12px 16px; gap: 8px; z-index: 100;
    /* iPhone home-indicator clearance */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .dc-sticky-bar__btn {
    flex: 1; border: 0; padding: 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: #fff;
    text-align: center; display: inline-block;
  }
  /* a11y 2026-05-22: deepened from #25d366 (white-on-green = 1.98:1, fails AA)
   * to #1a8d4f (≈4.6:1, passes AA body). Still reads as WhatsApp green,
   * just a darker tone closer to WhatsApp Web's own header palette. */
  .dc-sticky-bar__btn--wa { background: #1a8d4f; }
  .dc-sticky-bar__btn--ink { background: var(--ink); }
  /* Reserve room at the bottom only on pages that actually render the
   * sticky bar (homepage + outlet pages + most page templates). Pages
   * that don't include wb-sticky-bar.php (quote, journal entries) won't
   * have .dc-sticky-bar in the DOM and skip the padding — :has() is the
   * scoping mechanism. 88px = bar (~68px) + 20px breathing room. */
  body:has(.dc-sticky-bar) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* Astra parent theme's "Scroll to Top" button sits at bottom:30px by
   * default, which our sticky bar (z-index 100) completely covers on
   * mobile. Lift it above the bar so all three bottom controls coexist. */
  #ast-scroll-top {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Hide WP admin bar margin if logged-in viewer */
html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }


/* ============================================================
 * Stage 2 — Warm Boutique secondary-page system (Services / About / Contact)
 *
 * Adds the design-kit primitives (wb-platform card, wb-chip pill, wb-page-title,
 * wb-edition, wb-diamond, wb-mc microcap) plus page-specific classes (svc-*,
 * ab-*, ct-*) for the three Stage 2 pages.
 *
 * Note: secondary pages use the cocoa-brown WB palette (#3b2a22) for darks,
 * which differs from the homepage's near-black --ink (#131516). When Stage 3
 * unifies header/footer we'll converge on cocoa across the board.
 * ============================================================ */
:root {
  --wb-primary-dark: #9a5d4b;
  --wb-cocoa: #3b2a22;
  --wb-cocoa-soft: #5a3f33;
  --wb-rose: #d9a892;
  --wb-rose-light: #f4e2d8;
  --wb-rose-tint: #fbeee8;
  --wb-rose-deep: #874f3e; /* [A11y] AA-safe warm accent — 4.93:1 on --cream, higher on paper-warm. Use for eyebrow / number / rating-star text where --rose (#9a5d4b = 3.93:1 on cream) or --wb-gilt (fails on any light bg) don't clear 4.5:1. */
  --wb-focus: var(--rose); /* [A11y] focus-ring color — was referenced undeclared (whole outline declaration invalidated, no visible ring). Matches .wb-skip-link convention. */
  --wb-cocoa-65: #6a5946; /* was referenced with this literal as var() fallback only */
  --wb-gilt: #c9a47a;
  --wb-gilt-soft: #e0c8a8;
  --wb-sand: #f0e8d4;
  --wb-paper-warm: #fdfaf3;
  --wb-line: #e8e2d3;

  /* Quote-page (qt-*) tokens — these are intentionally distinct from
     --wb-cocoa / --wb-paper-warm. The qt page uses a slightly darker,
     warmer text color and a softer paper. Defined here so a future
     re-tune doesn't leave qt-* stranded behind hardcoded hex fallbacks. */
  --wb-ink: #1f1a17;
  --wb-ink-soft: #5a504a;
  --wb-paper: #fbf6ef;
  --wb-serif: var(--serif);
  --wb-sans: var(--sans);

  /* === Type scale tokens (2026-05-22, Stage 4 UI-9 foundation) ===
   * Five-tier scale per DESIGN.md §3. Introduced as foundation — new
   * CSS should use these; existing callsites are migrated incrementally
   * as files are touched, never in a sweeping refactor (audit found
   * 33 unique font-size values across ~4900 lines and same-value
   * doesn't imply same-semantic, so bulk find-replace is risky).
   *
   * Mapping (DESIGN.md §3 → token):
   *   Display   clamp(36px, 7vw, 56px)  hero headlines, H1 on inner pages
   *   Headline  clamp(28px, 4vw, 36px)  major section headings
   *   Title     22px                    card titles, sub-section heads
   *   Body      15px                    paragraphs, address blocks
   *   Label     11px                    wb-mc eyebrow chips, edition labels
   */
  --wb-fs-display:  clamp(36px, 7vw, 56px);
  --wb-fs-headline: clamp(28px, 4vw, 36px);
  --wb-fs-title:    22px;
  --wb-fs-body:     15px;
  --wb-fs-label:    11px;

  /* === Transition duration tokens (2026-05-22, Stage 4 UI-9 foundation) ===
   * Three-tier rhythm per audit. Maps the most-used existing values
   * (0.15s / 0.18s / 0.2s → fast; 0.25s / 0.3s / 0.4s → base; 0.5s /
   * 0.6s → slow). Pick by intent, not by exact value.
   *   Fast   for hover state shifts that should feel snappy (color, border)
   *   Base   for primary interactive feedback (button hover, scale)
   *   Slow   for larger transforms (panel open, image zoom)
   */
  --wb-tx-fast: 150ms;
  --wb-tx-base: 220ms;
  --wb-tx-slow: 400ms;

  /* === Standard easing curves (companion to duration tokens) === */
  --wb-ease:        cubic-bezier(0.4, 0, 0.2, 1);   /* default in/out */
  --wb-ease-out:    cubic-bezier(0.0, 0, 0.2, 1);   /* enters: drawer open, hover-in */
  --wb-ease-in:    cubic-bezier(0.4, 0, 1, 1);     /* exits: drawer close */

  /* === Hover language tokens (2026-05-21) ===
   * Hover signals engagement via underline / fill / lift, never via
   * lightening the text color (which lowers contrast and reads as
   * "fading"). Rose is reserved for state (active / selected / focus
   * accent), not generic hover. */
  --hover-link-color:       var(--wb-cocoa);
  --hover-link-underline:   1px solid var(--wb-cocoa);
  --hover-ghost-bg:         var(--wb-rose-tint);
  --hover-ghost-border:     var(--wb-cocoa);
  --hover-chip-bg:          var(--wb-rose-tint);
  --hover-chip-border:      var(--wb-cocoa);
  --hover-chip-color:       var(--wb-cocoa);
  --hover-fill-bg:          var(--wb-cocoa-soft);
  --hover-fill-bg-accent:   var(--rose);
  --hover-shadow-button:    0 2px 4px rgba(59, 42, 34, 0.07);
}

/* === Atoms === */

.wb-mc {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500;
}
.wb-mc--rose { color: var(--wb-rose-deep); } /* [A11y] was --rose (3.93:1 on --cream pages); --wb-rose-deep clears 4.5:1 on both cream + paper-warm */
/* --wb-gilt (#c9a47a) on warm paper is 2.31:1 — below AA for body text.
 * For label-sized (10-11px) usage we fall back to cocoa-soft (10.3:1).
 * Gilt as a decorative/accent element (diamond, hairline, focus ring)
 * remains untouched — only the text-color usage is degraded for a11y.
 */
.wb-mc--gilt { color: var(--wb-cocoa-soft); }
.wb-mc--white { color: rgba(255,255,255,0.85); }

.wb-diamond {
  width: 6px; height: 6px;
  background: var(--rose);
  transform: rotate(45deg);
  display: inline-block; flex-shrink: 0;
  border-radius: 1px;
}
.wb-diamond--gilt { background: var(--wb-gilt); }
.wb-diamond--cocoa { background: var(--wb-cocoa); }

.wb-edition {
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: 0.06em; color: var(--rose);
}
/* Gilt-as-text in 11-14px contexts is sub-AA; degrade to cocoa-soft
 * (10.3:1). See wb-mc--gilt note. The gilt itself stays on diamonds
 * + focus rings + hairlines where it's decorative. */
.wb-edition--gilt { color: var(--wb-cocoa-soft); }
.wb-edition--cocoa { color: var(--wb-cocoa-soft); }
.wb-edition--14 { font-size: 14px; }
.wb-edition--16 { font-size: 16px; }

.wb-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--wb-paper-warm); border: 1px solid var(--wb-line);
  color: var(--wb-cocoa);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.wb-chip--rose { background: var(--wb-rose-tint); color: var(--rose); border-color: #ecd1c5; box-shadow: none; }
.wb-chip--ink { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.22); box-shadow: none; }
.wb-chip--cream { background: var(--cream); color: var(--wb-cocoa); border-color: var(--wb-gilt-soft); box-shadow: none; }

.wb-platform {
  background: var(--wb-paper-warm); border-radius: 28px;
  border: 1px solid var(--wb-line);
  box-shadow: 0 24px 60px -36px rgba(80,50,30,0.22), inset 0 1px 0 rgba(255,255,255,0.85);
  position: relative; overflow: hidden;
}
.wb-platform--accent {
  background: var(--rose); border: none;
  box-shadow: 0 30px 70px -36px rgba(190,124,104,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
}
.wb-platform--dark {
  background: var(--wb-cocoa); border: none;
  box-shadow: 0 30px 70px -40px rgba(40,22,15,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.wb-platform--32 { border-radius: 32px; }
.wb-platform--36 { border-radius: 36px; }

/* === Page title section === */
.wb-page-title { padding: 36px 32px 24px; background: var(--cream); }
.wb-page-title__row {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
}
.wb-page-title__copy { flex: 1; }
.wb-page-title__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.wb-page-title__h {
  font-family: var(--serif); font-size: 76px; font-weight: 300;
  line-height: 0.96; letter-spacing: -0.035em; margin: 0; color: var(--wb-cocoa);
}
.wb-page-title__h em { font-style: italic; color: var(--rose); font-weight: 200; }
.wb-page-title__h-period { color: var(--rose); }
.wb-page-title__sub {
  font-size: 16px; line-height: 1.7; color: var(--wb-cocoa-soft);
  max-width: 560px; margin: 22px 0 0;
}
.wb-page-title__edition { text-align: right; flex-shrink: 0; }
.wb-page-title__edition .wb-mc { margin-top: 6px; font-size: 9px; }
.wb-page-title__rule {
  height: 1px; margin-top: 24px;
  background: linear-gradient(90deg, var(--wb-gilt-soft), transparent);
}

/* === Legal / T&C prose page === */
.wb-legal-wrap { padding: 10px 32px 64px; }
.wb-legal {
  max-width: 760px; margin: 0 auto;
  font-family: var(--sans);
  font-size: 15px; line-height: 1.78; color: var(--wb-cocoa-soft);
}
.wb-legal > h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: 27px; line-height: 1.28; color: var(--wb-cocoa);
  letter-spacing: -0.012em;
  margin: 50px 0 16px; padding-top: 24px;
  border-top: 1px solid var(--wb-gilt-soft);
}
.wb-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.wb-legal > h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 15px; line-height: 1.4; color: var(--wb-cocoa);
  margin: 32px 0 10px;
}
.wb-legal h2 b, .wb-legal h3 b { font-weight: inherit; }
.wb-legal p { margin: 0 0 14px; }
.wb-legal ul { margin: 0 0 18px; padding: 0; list-style: none; }
.wb-legal li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.wb-legal li::before {
  content: ""; position: absolute; left: 3px; top: 0.66em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--wb-gilt);
}
.wb-legal li p { margin: 0 0 8px; }
.wb-legal li p:last-child { margin-bottom: 0; }
.wb-legal b, .wb-legal strong { color: var(--wb-cocoa); font-weight: 600; }
/* a11y 2026-05-22: rose #9a5d4b on cream is 3.93:1 — passes large-text but
 * fails 15px body. cocoa on cream is 11:1; underline keeps it discoverable
 * as a link even at the same hue as body text. */
.wb-legal a { color: var(--wb-cocoa); text-decoration: underline; font-weight: 500; }

/* === Page: SERVICES === */
.svc-page { background: var(--cream); color: var(--wb-cocoa); font-family: var(--sans); }
.svc-grid-wrap { padding: 0 32px 32px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.svc-mat-wrap { padding: 24px 32px 32px; }
.svc-mat { padding: 40px 44px; border-radius: 32px; }
.svc-mat__head {
  display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px;
}
.svc-mat__h {
  font-family: var(--serif); font-size: 38px; font-weight: 300;
  margin: 14px 0 0; letter-spacing: -0.025em; color: var(--wb-cocoa);
}
.svc-mat__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.svc-mat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc-mat__card {
  background: var(--cream); padding: 22px 20px; border-radius: 18px;
  border: 1px solid var(--wb-line);
}
.svc-mat__card-name { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--wb-cocoa); margin-bottom: 12px; }
.svc-mat__card-desc { font-size: 12px; line-height: 1.65; color: var(--wb-cocoa-soft); margin: 0; }

.svc-cta-wrap { padding: 0 32px 48px; }
.svc-cta { padding: 52px 48px; border-radius: 36px; }
.svc-cta__row { display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; }
.svc-cta__copy { color: #fff; }
.svc-cta__cap { color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.svc-cta__h {
  font-family: var(--serif); font-size: 44px; font-weight: 300;
  line-height: 1.05; letter-spacing: -0.025em; margin: 0; color: #fff;
}
.svc-cta__h em { font-style: italic; }
.svc-cta__btn {
  background: var(--wb-cocoa); color: #fff !important; border: none;
  padding: 20px 32px; border-radius: 999px; font-size: 13px; font-weight: 600;
  display: inline-flex; gap: 14px; align-items: center;
  letter-spacing: 0.04em; text-decoration: none;
  box-shadow: 0 16px 32px -16px rgba(40,22,15,0.7);
}
.svc-cta__btn-icon {
  width: 36px; height: 36px; border-radius: 50%; background: #25d366;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex: 0 0 auto;
}
.svc-cta__btn-icon svg { width: 20px; height: 20px; display: block; }

/* === Page: ABOUT === */
.ab-page { background: var(--cream); color: var(--wb-cocoa); font-family: var(--sans); }
.ab-story-wrap { padding: 0 32px 32px; }
.ab-story { padding: 48px; border-radius: 32px; }
.ab-story__row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.ab-story__media {
  border-radius: 24px; padding: 12px;
  background: var(--cream); border: 1px solid var(--wb-gilt-soft);
}
.ab-story__media-inner {
  aspect-ratio: 4/5; border-radius: 16px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #efe9d8 0 14px, #e5dcc4 14px 15px);
  position: relative;
  display: flex; align-items: flex-end; padding: 16px;
}
.ab-story__media-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 12px; background: rgba(255,255,255,0.6); color: var(--wb-cocoa-soft); /* [A11y] was #8a7a5c 3.43:1 on the white-wash photo overlay */
}
.ab-story__h {
  font-family: var(--serif); font-size: 48px; font-weight: 300;
  margin: 18px 0 22px; letter-spacing: -0.025em; line-height: 1.05; color: var(--wb-cocoa);
}
.ab-story__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.ab-story__p { font-size: 15px; line-height: 1.75; color: var(--wb-cocoa-soft); margin: 0 0 16px; }
/* Stage 3 UI-13 (2026-05-22): DESIGN.md §5 prohibits border-left >1px
 * as a colored accent. Replaced the gilt side-stripe with a leading
 * gilt diamond + 1px hairline above; the italic display face still does
 * the editorial work. */
.ab-story__quote {
  font-family: var(--serif); font-size: 22px; font-style: italic;
  color: var(--wb-cocoa); font-weight: 400; line-height: 1.4;
  padding: 18px 22px 0;
  border-top: 1px solid var(--wb-line);
  margin-top: 22px;
  position: relative;
}
.ab-story__quote::before {
  content: ''; position: absolute;
  top: -4px; left: 22px;
  width: 8px; height: 8px;
  background: var(--wb-gilt);
  transform: rotate(45deg);
  border-radius: 1px;
}
.ab-story__quote-attr {
  display: block; font-size: 11px; font-style: normal; color: var(--wb-cocoa-soft);
  letter-spacing: 0.16em; text-transform: uppercase; margin-top: 10px;
}

.ab-stats-wrap { padding: 0 32px 32px; }
.ab-stats { padding: 48px; border-radius: 32px; }
.ab-stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ab-stats__col { padding-left: 28px; border-left: 1px solid rgba(255,255,255,0.1); }
.ab-stats__col:first-child { padding-left: 0; border-left: none; }
.ab-stats__num {
  font-family: var(--serif); font-size: 60px; font-weight: 300;
  color: #fff; letter-spacing: -0.025em; line-height: 1;
}
.ab-stats__lab {
  margin-top: 12px;
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-gilt); font-weight: 500;
}

.ab-pillars-wrap { padding: 0 32px 48px; }
.ab-pillars { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.ab-cert { padding: 40px; border-radius: 32px; }
.ab-cert__h {
  font-family: var(--serif); font-size: 32px; font-weight: 400;
  margin: 14px 0 24px; letter-spacing: -0.02em; color: var(--wb-cocoa);
}
.ab-cert__h em { color: var(--rose); font-style: italic; }
.ab-cert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ab-cert__item {
  background: var(--cream); padding: 20px; border-radius: 16px;
  border: 1px solid var(--wb-line);
  display: flex; align-items: center; gap: 14px;
}
.ab-cert__cc {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--wb-paper-warm); border: 1px solid var(--wb-gilt-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 13px; color: var(--rose);
  font-weight: 600; letter-spacing: 0.04em;
}
.ab-cert__name { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--wb-cocoa); }
.ab-cert__what { font-size: 11.5px; color: var(--wb-cocoa-soft); margin-top: 2px; }

.ab-rules { padding: 40px; border-radius: 32px; }
.ab-rules__h {
  font-family: var(--serif); font-size: 32px; font-weight: 400;
  margin: 14px 0 22px; letter-spacing: -0.02em; color: var(--wb-cocoa);
}
.ab-rules__h em { color: var(--rose); font-style: italic; }
.ab-rules__item {
  padding: 14px 0; border-top: 1px solid var(--wb-line);
  display: flex; gap: 16px; align-items: flex-start;
}
.ab-rules__item:first-child { border-top: 1px solid var(--wb-gilt-soft); }
.ab-rules__name { font-family: var(--serif); font-size: 17px; font-weight: 500; margin-bottom: 4px; color: var(--wb-cocoa); }
.ab-rules__desc { font-size: 12.5px; color: var(--wb-cocoa-soft); line-height: 1.6; }

/* === Page: CONTACT === */
.ct-page { background: var(--cream); color: var(--wb-cocoa); font-family: var(--sans); }
.ct-outlets-wrap { padding: 0 32px 32px; }
.ct-outlets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ct-outlet { padding: 32px; border-radius: 28px; scroll-margin-top: 96px; }
.ct-outlet__head {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px;
}
.ct-outlet__flag { font-size: 26px; }
.ct-outlet__tag {
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 500; padding: 5px 11px; border-radius: 999px;
  background: var(--wb-rose-tint); color: var(--rose);
  border: 1px solid var(--wb-gilt-soft);
}
.ct-outlet--primary .ct-outlet__tag {
  background: rgba(201,164,122,0.18); color: #fff; /* [A11y] was --wb-gilt 4.19:1 on this dark (wb-platform--dark) card; white matches __name */
  border-color: rgba(201,164,122,0.3);
}
.ct-outlet__name {
  font-family: var(--serif); font-size: 26px; font-weight: 500;
  margin: 0 0 18px; letter-spacing: -0.012em; line-height: 1.15; color: var(--wb-cocoa);
}
.ct-outlet--primary .ct-outlet__name { color: #fff; }
.ct-outlet__map {
  display: block;  /* <a> defaults to inline; aspect-ratio needs block */
  aspect-ratio: 4/3; border-radius: 14px; margin-bottom: 20px;
  overflow: hidden; position: relative;
  background: repeating-linear-gradient(135deg, #efe9d8 0 14px, #e5dcc4 14px 15px);
}
.ct-outlet--primary .ct-outlet__map {
  background: repeating-linear-gradient(135deg, #1f2122 0 14px, #2a2c2e 14px 15px);
}
.ct-outlet__map--photo { background: var(--wb-cocoa-soft, #2a2520); }
.ct-outlet__map-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.ct-outlet__map--photo:hover .ct-outlet__map-img,
.ct-outlet__map--photo:focus-visible .ct-outlet__map-img { transform: scale(1.04); }
/* DESIGN.md §4 No-Glass: backdrop-filter removed 2026-05-22.
 * Solid warm-paper pill with cocoa shadow conveys the floating
 * affordance without violating the rule. */
.ct-outlet__map-pill {
  position: absolute; bottom: 14px; left: 14px;
  background: var(--wb-paper-warm); color: var(--wb-cocoa);
  padding: 6px 12px; border-radius: 999px;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  box-shadow: 0 4px 16px rgba(59, 42, 34, 0.22);
  z-index: 1;
}
.ct-outlet--primary .ct-outlet__map-pill {
  background: rgba(255,255,255,0.18); color: #fff;
}
.ct-outlet__map--photo .ct-outlet__map-pill {
  background: rgba(255,255,255,0.94); color: var(--wb-cocoa);
}
.ct-outlet__addr {
  font-size: 13px; line-height: 1.65; color: var(--wb-cocoa-soft);
  white-space: pre-line; margin-bottom: 18px;
}
.ct-outlet--primary .ct-outlet__addr { color: rgba(255,255,255,0.78); }
.ct-outlet__meta {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--wb-gilt-soft);
}
.ct-outlet--primary .ct-outlet__meta { border-top-color: rgba(255,255,255,0.12); }
.ct-outlet__meta-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--wb-cocoa); }
.ct-outlet--primary .ct-outlet__meta-row { color: #fff; }
.ct-outlet__meta-row .wb-mc { font-size: 9px; }
.ct-outlet--primary .ct-outlet__meta-row .wb-mc { color: var(--wb-gilt); }
.ct-outlet__meta-row-val { font-weight: 600; white-space: pre-line; text-align: right; }
/* Outlet card action stack — pill row (WhatsApp + Directions) and a
 * tertiary text link below ("Atelier details" / "Visit SG site").
 * Hierarchy refined 2026-05-22: third action is a typeset link, not a
 * third pill — keeps the two real CTAs equal-height and the card calm. */
.ct-outlet__actions {
  display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap;
  align-items: center;
}
.ct-outlet__btn {
  padding: 14px 18px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 180ms ease,
              background 180ms ease,
              border-color 180ms ease,
              color 180ms ease;
}
/* Two pill CTAs share the row equally. */
.ct-outlet__btn--wa,
.ct-outlet__btn--out { flex: 1; min-width: 0; }
/* WhatsApp (solid, primary CTA) — warm rose on primary card, ink on default */
.ct-outlet__btn--wa {
  background: var(--wb-cocoa); color: #fff !important;
  box-shadow: 0 10px 22px -14px rgba(40,22,15,0.65),
              inset 0 1px 0 rgba(255,255,255,0.12);
}
.ct-outlet--primary .ct-outlet__btn--wa {
  background: var(--rose);
  box-shadow: 0 12px 26px -14px rgba(190,100,84,0.55),
              inset 0 1px 0 rgba(255,255,255,0.18);
}
.ct-outlet__btn--wa:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -16px rgba(40,22,15,0.7),
              inset 0 1px 0 rgba(255,255,255,0.18);
}
.ct-outlet--primary .ct-outlet__btn--wa:hover {
  box-shadow: 0 18px 36px -16px rgba(190,100,84,0.65),
              inset 0 1px 0 rgba(255,255,255,0.24);
}
/* Directions (outline, neutral) */
.ct-outlet__btn--out {
  background: transparent; color: var(--wb-cocoa) !important;
  border-color: var(--wb-line);
}
.ct-outlet--primary .ct-outlet__btn--out {
  color: #fff !important; border-color: rgba(255,255,255,0.45);
}
.ct-outlet__btn--out:hover {
  background: var(--wb-paper-warm);
  border-color: var(--wb-cocoa);
  transform: translateY(-1px);
}
.ct-outlet--primary .ct-outlet__btn--out:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.65);
}

.ct-bot-wrap { padding: 0 32px 48px; }
.ct-bot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.ct-pickup { padding: 44px; border-radius: 32px; }
.ct-pickup__cap { color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.ct-pickup__h {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  color: #fff; margin: 0 0 18px; letter-spacing: -0.025em; line-height: 1.1;
}
.ct-pickup__h em { font-style: italic; }
.ct-pickup__p {
  font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.85);
  max-width: 460px; margin: 0;
}
.ct-getintouch { padding: 36px; border-radius: 32px; }
.ct-getintouch__list { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.ct-getintouch__row {
  display: flex; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--wb-line);
}
.ct-getintouch__row:last-child { border-bottom: 0; }
.ct-getintouch__val { font-size: 13px; font-weight: 600; color: var(--wb-cocoa); }

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .wb-page-title { padding: 24px 16px 16px; }
  .wb-page-title__row { display: block; }
  .wb-page-title__h { font-size: 42px; line-height: 1; }
  .wb-page-title__sub { font-size: 13px; line-height: 1.65; margin-top: 16px; max-width: none; }
  .wb-page-title__edition { display: none; }
  .wb-page-title__rule { margin-top: 18px; }

  .wb-legal-wrap { padding: 6px 16px 48px; }
  .wb-legal { font-size: 14.5px; }
  .wb-legal > h2 { font-size: 22px; margin-top: 38px; padding-top: 20px; }
  .wb-legal > h3 { font-size: 14.5px; margin-top: 26px; }

  /* Services mobile */
  .svc-grid-wrap { padding: 0 12px 16px; }
  .svc-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc-mat-wrap { padding: 0 12px 16px; }
  .svc-mat { padding: 24px 20px; border-radius: 24px; }
  .svc-mat__head { display: block; margin-bottom: 16px; }
  .svc-mat__h { font-size: 26px; margin: 10px 0 0; }
  .svc-mat__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .svc-mat__card { padding: 16px 14px; border-radius: 14px; }
  .svc-mat__card-name { font-size: 15px; }
  .svc-mat__card-desc { font-size: 11px; }

  .svc-cta-wrap { padding: 0 12px 80px; }
  .svc-cta { padding: 28px 22px; border-radius: 24px; }
  .svc-cta__row { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .svc-cta__h { font-size: 28px; }
  .svc-cta__btn { width: 100%; justify-content: center; padding: 16px 20px; font-size: 12px; }

  /* About mobile */
  .ab-story-wrap { padding: 0 12px 16px; }
  .ab-story { padding: 18px; border-radius: 22px; }
  .ab-story__row { grid-template-columns: 1fr; gap: 18px; }
  .ab-story__h { font-size: 28px; margin: 8px 0 12px; }
  .ab-story__p { font-size: 13.5px; line-height: 1.7; margin-bottom: 14px; }
  /* Stage 3 hotfix: padding-left was a legacy indent for the now-removed
   * 2px gilt border-left. Realign to the diamond+top-border treatment. */
  .ab-story__quote { font-size: 16px; padding: 12px 14px 0; }
  .ab-story__quote-attr { font-size: 9.5px; margin-top: 8px; }

  .ab-stats-wrap { padding: 0 12px 16px; }
  .ab-stats { padding: 22px; border-radius: 22px; }
  .ab-stats__row { grid-template-columns: 1fr 1fr; gap: 20px; }
  .ab-stats__col { padding-left: 0; border-left: none; }
  .ab-stats__num { font-size: 32px; }
  .ab-stats__lab { font-size: 9px; margin-top: 6px; }

  .ab-pillars-wrap { padding: 0 12px 80px; }
  .ab-pillars { grid-template-columns: 1fr; gap: 12px; }
  .ab-cert, .ab-rules { padding: 22px; border-radius: 22px; }
  .ab-cert__h, .ab-rules__h { font-size: 22px; margin: 12px 0 16px; }
  .ab-cert__grid { grid-template-columns: 1fr; gap: 10px; }
  .ab-cert__item { padding: 14px; border-radius: 14px; }
  .ab-cert__cc { width: 38px; height: 38px; font-size: 12px; }
  .ab-cert__name { font-size: 15px; }
  .ab-cert__what { font-size: 11px; }
  .ab-rules__name { font-size: 15px; }
  .ab-rules__desc { font-size: 12px; }

  /* Contact mobile */
  .ct-outlets-wrap { padding: 0 12px 16px; }
  .ct-outlets { grid-template-columns: 1fr; gap: 12px; }
  .ct-outlet { padding: 20px; border-radius: 22px; }
  .ct-outlet__name { font-size: 20px; margin: 0 0 14px; }
  .ct-outlet__map { aspect-ratio: 5/3; margin-bottom: 14px; }
  .ct-outlet__addr { font-size: 12.5px; margin-bottom: 14px; }
  .ct-outlet__meta { padding-top: 14px; gap: 8px; }

  .ct-bot-wrap { padding: 0 12px 80px; }
  .ct-bot { grid-template-columns: 1fr; gap: 12px; }
  .ct-pickup, .ct-getintouch { padding: 24px; border-radius: 22px; }
  .ct-pickup__h { font-size: 24px; }
  .ct-pickup__p { font-size: 13px; }
}

/* ============================================================
 * Stage 4 — Case Study (single post) + Brand category landing
 * ============================================================ */

/* Breadcrumb (used by both pages) */
.wb-breadcrumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500;
}
.wb-breadcrumb a { color: inherit; text-decoration: none; }
.wb-breadcrumb__sep { opacity: 0.5; }
.wb-breadcrumb__current { color: var(--wb-cocoa); font-weight: 700; }

/* === CASE STUDY === */
.cs-page { background: var(--cream); color: var(--wb-cocoa); font-family: var(--sans); }
.cs-bc-wrap { padding: 36px 32px 0; }
.cs-title-wrap { padding: 24px 32px 24px; }
.cs-title__h {
  font-family: var(--serif);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 300;
  margin: 18px 0 0;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--wb-cocoa);
  text-wrap: balance;
  hyphens: manual;
}
.cs-title__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.cs-title__sub {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 200;
  /* a11y-reviewer (2026-05-25): --rose on cream = 3.93:1 FAIL WCAG AA 4.5:1
     at 18-23.99px desktop + all mobile sizes. Italic + weight 200 already
     provides visual hierarchy without rose hue. wb-cocoa-soft = 7.23:1. */
  color: var(--wb-cocoa-soft);
  font-size: clamp(18px, 3vw, 26px);
  line-height: 1.3;
  margin: 10px 0 0;
  letter-spacing: -0.005em;
}
.cs-title__rule {
  height: 1px; margin-top: 22px;
  background: linear-gradient(90deg, var(--wb-gilt-soft), transparent);
}
.cs-title__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 18px;
  align-items: center;
}
.cs-title__chips .wb-chip { font-size: 11px; }
.cs-title__chips-sep {
  color: var(--wb-cocoa-soft);
  font-size: 10px;
}

/* === Case study: editorial photo essay (fallback when no ACF rich data) === */
.cs-essay-wrap { padding: 0 32px 56px; }
.cs-essay { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

.cs-essay__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-essay__grid figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--cream); }
.cs-essay__grid figure img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }

/* === Case study: related-cases strip === */
.cs-related-wrap { padding: 0 32px 80px; max-width: 920px; margin: 0 auto; }
.cs-related__h { margin: 0 0 16px; }
.cs-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-related__card { display: block; text-decoration: none; color: inherit; }
.cs-related__card-img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--cream); margin-bottom: 10px; }
.cs-related__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.cs-related__card:hover .cs-related__card-img img { transform: scale(1.04); }
/* Brand-logo placeholder when the related post has no featured image
   (~87% of imported cases per CLAUDE.md). Center the logo, desaturate
   and dial back opacity so it reads as a decorative placeholder, not a
   real product photo. */
.cs-related__card-img--logo {
  background: var(--wb-paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-related__card-img--logo .cs-related__card-img__logo {
  width: 55%;
  height: auto;
  max-height: 60%;
  object-fit: contain;
  opacity: 0.65;
  filter: grayscale(1);
  transform: none;
}
.cs-related__card:hover .cs-related__card-img--logo .cs-related__card-img__logo {
  transform: none;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.cs-related__card-title { font-size: 14px; line-height: 1.4; color: var(--wb-cocoa); font-weight: 600; margin: 0 0 4px; }
.cs-related__card-eyebrow { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wb-cocoa-soft); }

/* === Case study: native dialog lightbox === */
.cs-lightbox { padding: 0; border: 0; max-width: 90vw; max-height: 90vh; background: transparent; overflow: visible; }
.cs-lightbox::backdrop { background: rgba(20, 14, 11, 0.92); }
.cs-lightbox img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; object-fit: contain; }
.cs-lightbox__close {
	position: absolute; top: -40px; right: -4px;
	background: transparent; border: 0; color: #fff;
	font-size: 32px; line-height: 1; padding: 0 8px; cursor: pointer;
}

/* === BRAND CATEGORY === */
.br-page { background: var(--cream); color: var(--wb-cocoa); font-family: var(--sans); }
.br-bc-wrap { padding: 36px 32px 0; }
.br-bc { margin-bottom: 22px; }

.br-hero-wrap { padding: 0 32px 32px; }
.br-hero { padding: 0; border-radius: 36px; }
.br-hero__row { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; }
.br-hero__copy {
  padding: 52px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.br-hero__h {
  font-family: var(--serif); font-size: 80px; font-weight: 300;
  margin: 20px 0 14px; letter-spacing: -0.035em; line-height: 0.95; color: var(--wb-cocoa);
  text-transform: uppercase; /* brand names display ALL CAPS site-wide */
}
.br-hero__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.br-hero__specialism {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 22px;
}
.br-hero__specialism-line { width: 32px; height: 1px; background: var(--wb-gilt); }
.br-hero__lead {
  font-size: 15px; line-height: 1.75; color: var(--wb-cocoa-soft);
  max-width: 440px; margin: 0;
}
.br-hero__stats {
  display: flex; gap: 28px; padding-top: 28px;
  border-top: 1px solid var(--wb-gilt-soft);
}
.br-hero__stat-num {
  font-family: var(--serif); font-size: 28px; color: var(--wb-cocoa);
  font-weight: 400; letter-spacing: -0.02em;
}
.br-hero__stat-lab {
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500; margin-top: 4px;
}
.br-hero__media {
  position: relative; overflow: hidden;
  background: repeating-linear-gradient(135deg, #efe9d8 0 14px, #e5dcc4 14px 15px);
}
.br-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-hero__media-caption {
  position: absolute; bottom: 24px; left: 24px;
  background: rgba(40,22,15,0.8); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
}
.br-hero__media-caption-sep {
  width: 1px; height: 10px; background: rgba(255,255,255,0.25);
}

.br-cases-wrap { padding: 0 32px 48px; }
.br-cases-head {
  display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 22px;
}
.br-cases-head__h {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  margin: 0; letter-spacing: -0.025em; color: var(--wb-cocoa);
}
.br-cases-head__h em { color: var(--rose); font-style: italic; }
.br-cases-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.br-case {
  background: var(--wb-paper-warm); padding: 10px; border-radius: 18px;
  border: 1px solid var(--wb-gilt-soft);
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.br-case:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -16px rgba(80,50,30,0.25); }
.br-case__img-wrap {
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 1; background: var(--wb-sand);
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
/* contain (not cover) preserves before/after composite shots un-cropped; the
   sand mat + padding turns the resulting letterbox into a deliberate frame so
   mixed aspect ratios sit evenly across the grid. */
.br-case__img-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.br-case__meta { padding: 14px 8px 6px; display: flex; align-items: baseline; gap: 10px; }
.br-case__no { flex-shrink: 0; }
.br-case__title {
  font-family: var(--serif); font-size: 14px; font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.br-case__sub { font-size: 10.5px; color: var(--wb-cocoa-soft); margin-top: 2px; }

/* Mobile (case study + brand) */
@media (max-width: 768px) {
  .cs-bc-wrap, .br-bc-wrap { padding: 18px 16px 0; }
  .cs-title-wrap { padding: 14px 16px 16px; }
  .cs-title__h {
    font-size: clamp(22px, 6vw + 4px, 30px);
    margin: 12px 0 0;
    letter-spacing: -0.015em;
  }
  .cs-title__sub {
    font-size: clamp(15px, 4vw, 20px);
    margin-top: 8px;
  }
  .cs-title__chips {
    margin-top: 14px;
    gap: 6px 8px;
  }
  .cs-title__chips .wb-chip { font-size: 10px; padding: 4px 9px; }
  .cs-title__rule { margin-top: 16px; }

  .cs-essay-wrap { padding: 0 16px 60px; }
  .cs-essay { gap: 20px; }
  .cs-essay__grid { gap: 12px; }
  .cs-essay__grid figure { border-radius: 14px; }
  .cs-related-wrap { padding: 0 0 40px; }
  .cs-related__grid {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 16px 8px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cs-related__grid::-webkit-scrollbar { display: none; }
  .cs-related__card {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
  .cs-related__card-img { aspect-ratio: 1 / 1; }
  .cs-lightbox__close { top: -36px; }

  /* Brand mobile */
  .br-hero-wrap { padding: 0 12px 16px; }
  .br-hero { border-radius: 24px; }
  .br-hero__row { grid-template-columns: 1fr; min-height: 0; }
  .br-hero__copy { padding: 26px 22px; }
  .br-hero__h { font-size: 50px; line-height: 1; }
  .br-hero__lead { font-size: 13.5px; }
  .br-hero__stats { gap: 18px; padding-top: 18px; flex-wrap: wrap; }
  .br-hero__stat-num { font-size: 22px; }
  .br-hero__media { aspect-ratio: 4/3; }

  .br-cases-wrap { padding: 0 12px 80px; }
  .br-cases-head { display: block; margin-bottom: 14px; }
  .br-cases-head__h { font-size: 24px; }
  .br-cases-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .br-case { padding: 8px; border-radius: 14px; }
  .br-case__img-wrap { padding: 8px; }
  .br-case__title { font-size: 13px; }
}

/* Phones (<480px): case-study gallery → single column, and each image at its
 * natural ratio so before|after posters fill the width instead of sitting
 * letterboxed in a 4:5 slot. width/height attrs on every <img> keep CLS at 0.
 * (≥480px keeps the two-column 4:5 grid.) */
@media (max-width: 479px) {
  .cs-essay__grid { grid-template-columns: 1fr; gap: 16px; }
  .cs-essay__grid figure { aspect-ratio: auto; border-radius: 16px; }
  .cs-essay__grid figure img { height: auto; }
}

/* [Fix-br-1] Brand archive — empty state */
.br-empty-state {
  padding: 40px 0 60px;
  text-align: center;
}
.br-empty-state__msg {
  font-size: 15px; color: var(--wb-cocoa-soft);
  margin: 0 0 14px;
}
/* Stage 2 UI-4: tools-first jumps on empty state. */
.br-empty-state__jumps {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center;
  font-size: 13px; color: var(--wb-cocoa-soft);
}
.br-empty-state__jumps a {
  color: var(--wb-cocoa);
  border-bottom: 1px solid var(--wb-gilt);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.br-empty-state__jumps a:hover { color: var(--rose); border-color: var(--rose); }

/* Stage 2 UI-4: recovery-tool footer note (small editorial caption beneath
 * the search field on 404/empty-search). Replaces the previous large
 * editorial-poster hero as the first thing on the page. */
.wb-recovery-tool__note {
  margin: 18px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 13px;
  color: var(--wb-cocoa-soft);
  line-height: 1.5;
}
.wb-recovery-tool__chip {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--wb-gilt-soft);
  background: var(--wb-rose-tint);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 600;
}

/* [Fix-br-2] Brand archive — cross-link CTA to /before-afters/?house=<slug> */
.br-arclink-wrap { padding: 0 32px 80px; }
.br-arclink {
  display: grid; grid-template-columns: 1fr auto; gap: 36px;
  align-items: center;
  padding: 34px 40px; border-radius: 28px;
  background: var(--wb-paper-warm);
  border: 1px solid var(--wb-gilt-soft);
}
.br-arclink__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.br-arclink__h {
  font-family: var(--serif); font-size: 32px; font-weight: 300;
  margin: 0 0 10px; letter-spacing: -0.02em; color: var(--wb-cocoa);
  line-height: 1.15;
}
.br-arclink__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.br-arclink__sub {
  font-size: 14px; color: var(--wb-cocoa-soft); line-height: 1.55;
  margin: 0; max-width: 54ch;
}
.br-arclink__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: 999px;
  background: var(--wb-cocoa); color: var(--cream);
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s ease;
}
.br-arclink__cta:hover { background: #2a1a10; }
.br-arclink__cta-arrow { transition: transform 0.2s ease; }
.br-arclink__cta:hover .br-arclink__cta-arrow { transform: translateX(3px); }

@media (max-width: 768px) {
  .br-arclink-wrap { padding: 0 12px 60px; }
  .br-arclink {
    grid-template-columns: 1fr; gap: 20px;
    padding: 24px 22px; border-radius: 20px;
  }
  .br-arclink__h { font-size: 24px; }
  .br-arclink__sub { font-size: 13px; }
  .br-arclink__cta { padding: 13px 22px; font-size: 12px; justify-content: center; }
}

/* ============================================================
 * Stage 5 — Before & After archive (gallery page)
 * ============================================================ */
.bna-page { background: var(--cream); color: var(--wb-cocoa); font-family: var(--sans); }

.bna-filters-wrap { padding: 0 32px 24px; }
.bna-filters { padding: 22px 28px; border-radius: 24px; }
.bna-filters__row {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.bna-filters__group {
  display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0;
}
.bna-filters__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bna-filter {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--wb-line); background: transparent;
  font-size: 11px; letter-spacing: 0.08em; font-weight: 500;
  color: var(--wb-cocoa-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.bna-filter--house { text-transform: uppercase; letter-spacing: 0.1em; }
.bna-filter--active {
  background: var(--wb-cocoa); color: #fff !important; border-color: var(--wb-cocoa);
  font-weight: 600;
}
.bna-filter--service-active {
  background: var(--wb-rose-tint); color: var(--rose) !important; border-color: var(--wb-gilt-soft);
  font-weight: 600;
}
.bna-filters__sort {
  display: flex; align-items: center; gap: 12px;
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500; flex-shrink: 0;
}
.bna-filters__sort-current { color: var(--wb-cocoa); font-weight: 700; }
.bna-filter-sort {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--wb-line); background: transparent;
  font-size: 10px; letter-spacing: 0.08em; font-weight: 500;
  color: var(--wb-cocoa-soft); text-decoration: none;
  display: inline-flex; align-items: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bna-filter-sort:hover { background: var(--hover-chip-bg); color: var(--hover-chip-color); border-color: var(--hover-chip-border); }
.bna-filter-sort--active {
  background: var(--wb-cocoa); color: #fff !important; border-color: var(--wb-cocoa);
  font-weight: 600;
}
.bna-filters__divider {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wb-line);
  display: flex; align-items: center; gap: 18px;
}

.bna-grid-wrap { padding: 0 32px 48px; }
.bna-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bna-card {
  background: var(--wb-paper-warm); padding: 12px; border-radius: 22px;
  border: 1px solid var(--wb-gilt-soft);
  box-shadow: 0 14px 30px -20px rgba(80,50,30,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: block;
}
.bna-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(80,50,30,0.3); }
.bna-card__img-wrap {
  aspect-ratio: 4 / 3;
  border-radius: 14px; overflow: hidden; position: relative;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.bna-card__img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bna-card__meta {
  padding: 16px 8px 6px;
  display: flex; align-items: baseline; gap: 12px;
}
.bna-card__no { flex-shrink: 0; }
.bna-card__title-wrap { flex: 1; min-width: 0; }
.bna-card__title {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  line-height: 1.2; color: var(--wb-cocoa);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bna-card__sub { font-size: 11px; color: var(--wb-cocoa-soft); margin-top: 2px; }
.bna-card__arrow { color: var(--wb-cocoa-soft); font-size: 14px; flex-shrink: 0; }

.bna-empty {
  padding: 80px 24px; text-align: center;
  color: var(--wb-cocoa-soft); font-size: 14px;
}
.bna-empty strong { color: var(--wb-cocoa); }

.bna-loadmore {
  margin-top: 36px; display: flex; justify-content: space-between; align-items: center;
}
.bna-loadmore__count {
  font-size: 12.5px; color: var(--wb-cocoa-soft);
  display: inline-flex; align-items: center; gap: 12px;
}
.bna-loadmore__count-line { width: 24px; height: 1px; background: var(--wb-gilt); }
.bna-loadmore__count strong { color: var(--wb-cocoa); font-weight: 600; }
.bna-loadmore__btn {
  background: var(--wb-cocoa); color: #fff !important; border: none;
  padding: 15px 32px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; font-family: inherit; text-decoration: none;
  box-shadow: 0 12px 24px -12px rgba(40,22,15,0.6);
}
.bna-loadmore__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bna-loadmore__btn--loading { opacity: 0.6; pointer-events: none; }

@media (max-width: 768px) {
  .bna-filters-wrap { padding: 0 12px 12px; }
  .bna-filters { padding: 14px; border-radius: 18px; }
  .bna-filters__row { display: block; }
  .bna-filters__group { gap: 8px; flex-direction: column; align-items: stretch; }
  .bna-filters__sort {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wb-line);
    flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .bna-filter-sort { font-size: 10px; white-space: nowrap; }
  .bna-filters__chips {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .bna-filter { white-space: nowrap; flex-shrink: 0; }
  .bna-filters__divider { margin-top: 10px; padding-top: 10px; flex-direction: column; align-items: stretch; gap: 8px; }

  .bna-grid-wrap { padding: 0 12px 80px; }
  /* Tablet portrait / unfolded foldables (480–768px): two columns. */
  .bna-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bna-card { padding: 8px; border-radius: 16px; }
  .bna-card__title { font-size: 13px; }
  .bna-card__sub { font-size: 10px; }
  .bna-card__arrow { display: none; }
  .bna-loadmore { display: block; }
  .bna-loadmore__count { display: block; margin-bottom: 14px; }
  .bna-loadmore__count-line { display: none; }
  .bna-loadmore__btn { width: 100%; padding: 16px; justify-content: center; text-align: center; }
}

/* Phones (<480px): single column so the before|after composite reads at
 * full width — two columns squeezed each half to ~80px, too small to judge
 * a restoration. The wider single card warrants desktop-ish meta sizing. */
@media (max-width: 479px) {
  .bna-grid { grid-template-columns: 1fr; gap: 14px; }
  .bna-card { padding: 12px; border-radius: 22px; }
  .bna-card__title { font-size: 16px; }
  .bna-card__sub { font-size: 11px; }
  .bna-card__arrow { display: inline; }
}


/* ============================================================
 * Stage 1.5 (2026-05-04) — Warm Boutique v3 chrome + homepage
 *   - Atoms: .wb-ornament, .wb-object-label
 *   - Chrome: .wb-announce, .wb-nav-v2, .wb-footer-v2
 *   - Homepage v3 sections: .dc2-* (parallel to legacy .dc-* used by other 5 pages)
 *   Source: canvas/direction-c.jsx (1132 lines, lines 105-1130)
 * ============================================================ */

/* === Atom additions === */
.wb-ornament {
  display: inline-flex; align-items: center; gap: 8px; color: var(--wb-gilt);
}
.wb-ornament__line {
  display: inline-block; width: 88px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wb-gilt) 50%, transparent);
}
.wb-ornament--wide .wb-ornament__line { width: 120px; }

.wb-object-label {
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--wb-gilt-soft);
  color: var(--wb-cocoa);
}
.wb-object-label--dark { border-top-color: rgba(255,255,255,0.18); color: #fff; }
.wb-object-label__no { flex-shrink: 0; }
.wb-object-label__body { flex: 1; min-width: 0; }
.wb-object-label__title {
  font-family: var(--serif); font-size: 16px; font-weight: 500; line-height: 1.2;
  margin: 0;
}
.wb-object-label__sub {
  font-size: 11px; color: var(--wb-cocoa-soft); margin-top: 2px; letter-spacing: 0.02em;
}
.wb-object-label--dark .wb-object-label__sub { color: rgba(255,255,255,0.65); }

/* Add a 28px Platform variant (footer card) */
.wb-platform--28 { border-radius: 28px; }

/* === Body class for v3 homepage === */
body.dc2-page {
  background: var(--cream); color: var(--wb-cocoa);
  font-family: var(--sans); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.dc2-page a { text-decoration: none; }
body.dc2-page a:not([class]) { color: inherit; }
body.dc2-page button { font-family: inherit; cursor: pointer; }
body.dc2-page * , body.dc2-page *::before, body.dc2-page *::after { box-sizing: border-box; }

/* === Announcement utility strip === */
.wb-announce {
  background: var(--wb-cocoa); color: #fff;
  padding: 12px 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  position: relative;
}
.wb-announce__rule {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,164,122,0.33), transparent);
}
.wb-announce__left, .wb-announce__right {
  display: flex; gap: 26px; align-items: center;
}
.wb-announce__right { opacity: 0.85; }
.wb-announce__pickup {
  display: inline-flex; gap: 9px; align-items: center; color: var(--wb-gilt);
}
.wb-announce__cert { opacity: 0.7; }
.wb-announce__sep { opacity: 0.25; }
.wb-announce__sep--faint { opacity: 0.4; }
.wb-announce__lang { display: inline-flex; gap: 12px; }
.wb-announce__lang--active { color: var(--wb-gilt); }
.wb-announce__phone { color: #fff; }

/* === Nav v2 (2-tier with R logo + 5 menu items + CTA) === */
/* Sticky: the announcement strip scrolls away, the pill nav follows the scroll.
 * The <header> wrapper must not box the sticky nav in (position:sticky only
 * sticks within its parent's height), so it is display:contents — announce
 * and nav-wrap participate in body's layout directly. role="banner" keeps
 * the landmark semantics. */
.wb-nav-v2-chrome { display: contents; }
.wb-nav-v2-wrap {
  padding: 22px 32px 10px;
  position: sticky; top: 0; z-index: 200;
  background: var(--cream);
  box-shadow: 0 8px 22px -16px rgba(80,50,30,0.45);
}
.wb-nav-v2 {
  background: var(--wb-paper-warm); border-radius: 999px;
  padding: 10px 12px 10px 26px;
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--wb-line);
  box-shadow: 0 22px 50px -32px rgba(80,50,30,0.3), inset 0 1px 0 rgba(255,255,255,0.9);
}
.wb-nav-v2__brand {
  display: inline-flex; align-items: center; gap: 14px; color: inherit;
}
.wb-nav-v2__logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d9a892, var(--rose) 55%, var(--wb-primary-dark));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 21px; font-style: italic; font-weight: 500;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.18),
    inset 0 2px 4px rgba(255,255,255,0.25),
    0 4px 10px -4px rgba(154,93,75,0.5);
  border: 1px solid var(--wb-gilt-soft);
}
/* .wb-nav-v2__brand prefix (0,0,2,0) beats WooCommerce's .woocommerce img /
 * .woocommerce-page img { height: auto } (0,0,1,1), which otherwise blows the
 * logo up to its 186px natural height on every WC page (cart/checkout/shop/...). */
.wb-nav-v2__brand .wb-nav-v2__logo-img {
  display: block; height: 60px; width: auto; max-width: 280px;
  object-fit: contain;
}
.wb-nav-v2__lockup { line-height: 1.05; display: inline-flex; flex-direction: column; }
.wb-nav-v2__name {
  font-family: var(--serif); font-size: 20px; font-weight: 500; letter-spacing: -0.012em;
  color: var(--wb-cocoa);
}
.wb-nav-v2__name em { color: var(--rose); font-style: italic; font-weight: 400; }
.wb-nav-v2__est {
  font-size: 8.5px; letter-spacing: 0.32em; color: var(--wb-cocoa-soft);
  margin-top: 3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.wb-nav-v2__est-rule { width: 14px; height: 1px; background: var(--wb-gilt); display: inline-block; }
.wb-nav-v2__links {
  display: flex; gap: 30px; font-size: 12.5px; color: var(--wb-cocoa-soft);
  font-weight: 500; letter-spacing: 0.02em;
}
.wb-nav-v2__link {
  display: inline-flex; align-items: center; gap: 6px; color: inherit;
}
.wb-nav-v2__link-dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--rose);
}
.wb-nav-v2__actions { display: flex; align-items: center; gap: 8px; }
.wb-nav-v2__signin {
  padding: 12px 14px; border-radius: 999px; background: transparent;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 600;
}
.wb-nav-v2__cta {
  background: var(--wb-cocoa); color: #fff; border: none;
  padding: 14px 22px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; font-family: inherit;
  display: inline-flex; gap: 12px; align-items: center; letter-spacing: 0.04em;
  box-shadow: 0 10px 22px -10px rgba(40,22,15,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
}
.wb-nav-v2__cta-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--wb-gilt);
  box-shadow: 0 0 0 3px rgba(201,164,122,0.2);
}
.wb-nav-v2__cta-arrow { opacity: 0.7; }

/* === Mobile burger + drawer === */
.wb-nav-v2__burger {
  display: none;
  width: 44px; height: 44px; border-radius: 50%; /* adapt 2026-05-19: 40→44 min touch target */
  background: transparent; border: 1px solid var(--wb-line);
  align-items: center; justify-content: center; padding: 0;
  flex-direction: column; gap: 4px;
  cursor: pointer; flex-shrink: 0;
}
.wb-nav-v2__burger-line {
  display: block; width: 18px; height: 1.5px;
  background: var(--wb-cocoa); border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.wb-nav-v2__burger[aria-expanded="true"] .wb-nav-v2__burger-line:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.wb-nav-v2__burger[aria-expanded="true"] .wb-nav-v2__burger-line:nth-child(2) {
  opacity: 0;
}
.wb-nav-v2__burger[aria-expanded="true"] .wb-nav-v2__burger-line:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* DESIGN.md §4 No-Glass: backdrop-filter removed 2026-05-22.
 * Drawer now uses opaque warm-paper with the gilt-soft hairline,
 * preserving the floating affordance via shadow. Slide-in transition
 * added (UI-5, audit 2026-05-22). */
.wb-nav-v2__drawer {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  margin: 8px 14px 0;
  background: var(--wb-paper-warm);
  border: 1px solid var(--wb-gilt-soft);
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 32px 60px -28px rgba(40, 24, 14, 0.45);
  flex-direction: column;
  /* Cap height so long menus (Visit dropdown + Contact + CTA) scroll
   * internally instead of being clipped below the viewport. Uses dvh
   * so the mobile address bar collapse doesn't strand the CTA. */
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.wb-nav-v2__drawer:not([hidden]) {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wb-nav-v2__drawer { transition: none; transform: none; }
}
.wb-nav-v2__drawer-link {
  display: block; padding: 14px 18px;
  font-family: var(--serif); font-size: 18px; font-weight: 500;
  color: var(--wb-cocoa); border-bottom: 1px solid var(--wb-line);
}
.wb-nav-v2__drawer-link:last-of-type { border-bottom: none; }
.wb-nav-v2__drawer-cta {
  margin-top: 8px;
  background: var(--wb-cocoa); color: #fff;
  padding: 14px 22px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  display: inline-flex; gap: 12px; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -10px rgba(40,22,15,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
}
.wb-nav-v2__drawer-cta .wb-nav-v2__cta-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--wb-gilt);
  box-shadow: 0 0 0 3px rgba(201,164,122,0.2);
}
body.wb-mobile-menu-open { overflow: hidden; }

/* === Hero (v3) === */
.dc2-hero-wrap { padding: 10px 32px 26px; }
.dc2-hero {
  position: relative;
  background: var(--wb-paper-warm); border-radius: 36px;
  border: 1px solid var(--wb-line);
  box-shadow: 0 24px 60px -36px rgba(80,50,30,0.22), inset 0 1px 0 rgba(255,255,255,0.85);
  overflow: hidden;
}
.dc2-hero__wash {
  position: absolute; top: -260px; right: -180px;
  width: 660px; height: 660px; border-radius: 50%;
  background: radial-gradient(circle, rgba(190,124,104,0.12), transparent 60%);
  pointer-events: none;
}
.dc2-hero__corner {
  position: absolute; width: 18px; height: 18px; opacity: 0.6;
  border-color: var(--wb-gilt);
}
.dc2-hero__corner--tl { top: 16px; left: 16px;     border-top: 1px solid; border-left: 1px solid; }
.dc2-hero__corner--tr { top: 16px; right: 16px;    border-top: 1px solid; border-right: 1px solid; }
.dc2-hero__corner--bl { bottom: 16px; left: 16px;  border-bottom: 1px solid; border-left: 1px solid; }
.dc2-hero__corner--br { bottom: 16px; right: 16px; border-bottom: 1px solid; border-right: 1px solid; }

.dc2-hero__inner {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px;
  padding: 60px 56px 56px;
  align-items: center; position: relative;
}
.dc2-hero__edition {
  position: absolute; top: 30px; right: 36px;
  display: flex; gap: 10px; align-items: center;
}
.dc2-hero__edition-rule { width: 28px; height: 1px; background: var(--wb-gilt); display: inline-block; }
.dc2-hero__edition-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wb-gilt); display: inline-block; }

/* LEFT */
.dc2-hero__copy { position: relative; }
.dc2-hero__title {
  font-family: var(--serif);
  font-size: 96px; line-height: 0.94; letter-spacing: -0.038em;
  font-weight: 300; margin: 24px 0 22px;
  color: var(--wb-cocoa);
}
.dc2-hero__title em { font-style: italic; color: var(--rose); font-weight: 200; }
.dc2-hero__title-period { color: var(--rose); }

.dc2-hero__atelier-mark {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
}
.dc2-hero__atelier-mark-rule { width: 36px; height: 1px; background: var(--wb-gilt); display: inline-block; }
.dc2-hero__atelier-mark-text {
  font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--wb-gilt); font-weight: 500;
}
.dc2-hero__lead {
  font-size: 16.5px; line-height: 1.72; color: var(--wb-cocoa-soft);
  max-width: 500px; margin: 0 0 36px;
}
.dc2-hero__actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 36px;
}
.dc2-btn-primary {
  background: var(--wb-cocoa); color: #fff; border: none;
  padding: 16px 22px 16px 16px; border-radius: 999px; font-size: 13px;
  font-weight: 600; font-family: inherit;
  display: inline-flex; gap: 12px; align-items: center;
  text-decoration: none;
  box-shadow:
    0 16px 32px -16px rgba(40,22,15,0.7),
    inset 0 1px 0 rgba(255,255,255,0.1);
  letter-spacing: 0.02em;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.dc2-btn-primary:hover,
.dc2-btn-primary:focus-visible {
  transform: translateY(-2px);
  background: #2a1d17;
  box-shadow:
    0 22px 40px -16px rgba(40,22,15,0.85),
    inset 0 1px 0 rgba(255,255,255,0.12);
  outline: none;
}
.dc2-btn-primary__icon {
  width: 28px; height: 28px; border-radius: 50%; background: #25d366;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(37,211,102,0.22),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    inset 0 1px 2px rgba(255,255,255,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dc2-btn-primary__icon svg { width: 16px; height: 16px; display: block; }
.dc2-btn-primary:hover .dc2-btn-primary__icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 4px rgba(37,211,102,0.32),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    inset 0 1px 2px rgba(255,255,255,0.35);
}
.dc2-btn-primary__arrow {
  opacity: 0.55; transition: transform 0.2s ease, opacity 0.2s ease;
}
.dc2-btn-primary:hover .dc2-btn-primary__arrow {
  transform: translateX(3px);
  opacity: 0.9;
}

.dc2-btn-secondary {
  background: var(--wb-paper-warm); color: var(--wb-cocoa);
  border: 1px solid var(--wb-gilt-soft);
  padding: 17px 26px; border-radius: 999px; font-size: 13px;
  font-weight: 500; font-family: inherit;
  display: inline-flex; gap: 10px; align-items: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 12px -8px rgba(80,50,30,0.2);
  transition: transform 0.2s ease, background 0.2s ease,
              color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.dc2-btn-secondary:hover,
.dc2-btn-secondary:focus-visible {
  transform: translateY(-2px);
  background: var(--wb-cocoa); color: #fff;
  border-color: var(--wb-cocoa);
  box-shadow:
    0 16px 28px -14px rgba(40,22,15,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
  outline: none;
}
.dc2-btn-secondary__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
  display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(190,124,104,0.18);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.dc2-btn-secondary:hover .dc2-btn-secondary__dot {
  background: var(--wb-gilt);
  box-shadow: 0 0 0 4px rgba(201,164,122,0.28);
}

.dc2-trust {
  display: flex; gap: 22px; align-items: center;
  padding: 22px 0 0;
  border-top: 1px solid var(--wb-gilt-soft);
  position: relative;
}
.dc2-trust__cap {
  position: absolute; top: -5px; left: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--cream); border: 1px solid var(--wb-gilt);
}
.dc2-trust__avatars { display: flex; }
.dc2-trust__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 8px rgba(80,50,30,0.18);
  object-fit: cover; object-position: center;
}
.dc2-trust__avatar:not(:first-child) { margin-left: -13px; }
.dc2-trust__h {
  font-size: 13px; font-weight: 600; color: var(--wb-cocoa);
  display: flex; gap: 10px; align-items: center;
}
.dc2-trust__stars { color: var(--wb-gilt); letter-spacing: 0.08em; font-size: 14px; }
.dc2-trust__sub { font-size: 12px; color: var(--wb-cocoa-soft); margin-top: 3px; }

/* === Hero — cinematic video-background variant === */
.dc2-hero--video {
  background: #19110c;
  border-color: rgba(212,179,164,0.20);
  box-shadow: 0 28px 64px -38px rgba(30,16,8,0.6);
}
.dc2-hero__video-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
  filter: brightness(1.12) saturate(1.05);
}
.dc2-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(25,16,11,0.80) 0%, rgba(25,16,11,0.55) 48%, rgba(25,16,11,0.16) 100%),
    linear-gradient(to top, rgba(25,16,11,0.46), transparent 46%);
}
.dc2-hero--video .dc2-hero__inner {
  grid-template-columns: 1fr;
  position: relative; z-index: 2;
  padding: 88px 60px 80px;
  min-height: 544px; align-content: center;
}
.dc2-hero--video .dc2-hero__copy { max-width: 640px; }
.dc2-hero--video .dc2-hero__corner { z-index: 2; opacity: 0.6; }
.dc2-hero--video .dc2-hero__title { color: #f6efe4; }
.dc2-hero--video .dc2-hero__title em,
.dc2-hero--video .dc2-hero__title-period { color: #e9b7a3; }
.dc2-hero--video .dc2-hero__lead { color: rgba(244,236,225,0.84); }
.dc2-hero--video .wb-chip {
  background: rgba(244,236,225,0.09);
  border-color: rgba(233,183,163,0.42);
  color: #ecdacf;
}
.dc2-hero--video .dc2-btn-primary { background: #f4ebe0; color: var(--wb-cocoa); }
.dc2-hero--video .dc2-btn-primary:hover,
.dc2-hero--video .dc2-btn-primary:focus-visible { background: #ffffff; }
.dc2-hero--video .dc2-btn-secondary {
  background: rgba(244,236,225,0.06); color: #f1e7da;
  border-color: rgba(244,236,225,0.34);
  box-shadow: none;
}
.dc2-hero--video .dc2-btn-secondary:hover,
.dc2-hero--video .dc2-btn-secondary:focus-visible {
  background: #f4ebe0; color: var(--wb-cocoa); border-color: #f4ebe0;
}
.dc2-hero--video .dc2-trust { border-top-color: rgba(233,183,163,0.26); }
.dc2-hero--video .dc2-trust__h { color: #f3ebde; }
.dc2-hero--video .dc2-trust__sub { color: rgba(243,235,222,0.62); }
.dc2-hero--video .dc2-trust__cap { background: #19110c; }

/* RIGHT — collage */
.dc2-hero__media {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dc2-hero__media-main {
  grid-column: 1 / -1;
  border-radius: 26px; overflow: hidden;
  background: var(--wb-paper-warm); padding: 10px;
  box-shadow: 0 36px 70px -40px rgba(80,50,30,0.5), inset 0 1px 0 rgba(255,255,255,0.85);
  border: 1px solid var(--wb-gilt-soft);
  position: relative;
}
.dc2-hero__media-main-inner {
  border-radius: 18px; overflow: hidden; position: relative;
  height: 300px; background: repeating-linear-gradient(135deg, #e3c8be 0 14px, #d4b3a4 14px 15px);
}
.dc2-hero__media-main-inner video,
.dc2-hero__media-main-inner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.dc2-hero__review {
  grid-column: 1 / -1; /* distill 2026-05-19: full width since the fake live-counter tile was removed */
  border-radius: 22px; padding: 20px;
  background: var(--wb-cocoa); color: #fff;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 22px 40px -22px rgba(40,22,15,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
.dc2-hero__review-glow {
  position: absolute; top: -40px; right: -40px; width: 140px; height: 140px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,164,122,0.15), transparent 70%);
}
.dc2-hero__review-h {
  position: relative;
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  /* a11y 2026-05-22: was var(--wb-gilt) — 2.22:1 on paper-warm fails AA. */
  color: var(--wb-cocoa-soft); font-weight: 600;
}
.dc2-hero__review-stars { color: var(--wb-cocoa-soft); letter-spacing: 0.08em; font-size: 11px; margin-bottom: 8px; }
.dc2-hero__review-q {
  font-family: var(--serif); font-size: 16px; line-height: 1.32;
  font-style: italic; font-weight: 400;
  position: relative;
}
.dc2-hero__review-attr {
  margin-top: 10px; font-size: 10.5px; opacity: 0.65;
  display: flex; align-items: center; gap: 8px;
}
.dc2-hero__review-attr-rule { width: 18px; height: 1px; background: var(--wb-gilt); display: inline-block; }

.dc2-hero__counter {
  border-radius: 22px; padding: 20px;
  background: linear-gradient(135deg, var(--rose), var(--wb-primary-dark));
  color: #fff;
  display: flex; flex-direction: column; gap: 16px; justify-content: space-between;
  box-shadow: 0 22px 40px -22px rgba(190,124,104,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative; overflow: hidden;
  border: 1px solid var(--wb-gilt-soft);
}
.dc2-hero__counter-h {
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.9); font-weight: 500;
  display: inline-flex; gap: 8px; align-items: center;
}
.dc2-hero__counter-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.3); display: inline-block;
}
.dc2-hero__counter-num {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  letter-spacing: -0.025em; line-height: 1;
  display: flex; align-items: baseline; gap: 8px;
}
.dc2-hero__counter-suffix { font-size: 14px; font-style: italic; opacity: 0.85; }
.dc2-hero__counter-sub { margin-top: 6px; font-size: 11.5px; opacity: 0.92; }

/* === Atelier note === */
.dc2-atelier-note { padding: 4px 32px 28px; }
.dc2-atelier-note__row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 24px; align-items: center; padding: 6px 16px;
}
.dc2-atelier-note__quote {
  font-family: var(--serif); font-size: 18px; font-style: italic;
  color: var(--wb-cocoa); font-weight: 400; line-height: 1.3; text-align: center;
}
.dc2-atelier-note__attr {
  /* a11y 2026-05-22: was var(--wb-gilt) — 2.22:1 on cream fails AA. */
  margin-left: 14px; color: var(--wb-cocoa-soft); font-style: normal;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}
.dc2-atelier-note__rule {
  height: 1px; margin-top: 6px;
  background: linear-gradient(90deg, transparent, var(--wb-gilt-soft), transparent);
}

/* === Stats ribbon (dark Platform with quote + 3 stats) === */
.dc2-stats-wrap { padding: 0 32px 24px; }
.dc2-stats {
  position: relative; padding: 28px 36px; border-radius: 24px;
  background: var(--wb-cocoa); color: #fff; overflow: hidden;
  box-shadow: 0 20px 50px -36px rgba(40,22,15,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  /* Promote to its own compositing layer so iOS momentum-scroll doesn't
   * repaint the radial glows + box-shadow on every frame (2026-05-22). */
  transform: translateZ(0);
  will-change: transform;
}
.dc2-stats__glow-1 {
  position: absolute; left: -120px; top: -120px; width: 260px; height: 260px;
  border-radius: 50%; background: radial-gradient(circle, rgba(190,124,104,0.19), transparent 70%);
}
.dc2-stats__glow-2 {
  position: absolute; right: -100px; bottom: -150px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,164,122,0.11), transparent 70%);
}
.dc2-stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  align-items: center; position: relative;
}
.dc2-stats__cell {
  padding-left: 22px; position: relative;
}
.dc2-stats__cell-rule {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201,164,122,0.33), transparent);
}
/* In the 1x4 layout the leftmost cell has no neighbour to its left — hide
 * its decorative rule so the strip starts clean. */
.dc2-stats__cell:first-child .dc2-stats__cell-rule { display: none; }
.dc2-stats__num {
  font-family: var(--serif); font-size: 38px; font-weight: 300;
  color: #fff; letter-spacing: -0.025em; line-height: 1;
  display: inline-flex; align-items: baseline;
  /* Reduce font-swap layout shift: fallback gets x-height nudged
   * closer to Jost so the swap-in moves these numbers less. */
  font-size-adjust: 0.54;
}
.dc2-stats__num-plus {
  color: var(--wb-gilt); font-size: 22px; font-style: italic; font-weight: 200; margin-left: 2px;
}
.dc2-stats__label {
  margin-top: 10px; font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}

/* === Services v3 (4 cards, first one is rose accent) === */
.dc2-services { padding: 40px 32px 48px; }
.dc2-services__head { text-align: center; margin-bottom: 44px; }
.dc2-services__cap {
  margin-top: 16px; margin-bottom: 14px;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-rose-deep); font-weight: 500; /* [A11y] was --rose 3.93:1 on --cream */
}
.dc2-services__h {
  font-family: var(--serif); font-size: 64px; font-weight: 300;
  line-height: 1.0; margin: 0; letter-spacing: -0.03em; color: var(--wb-cocoa);
}
.dc2-services__h em { font-style: italic; color: var(--rose); font-weight: 200; }
.dc2-services__lede {
  font-size: 14.5px; color: var(--wb-cocoa-soft);
  max-width: 540px; margin: 20px auto 0; line-height: 1.65;
}
.dc2-services__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
/* Service card — Editorial restraint (2026-05-22).
 * Pulled the round glyph badge, heavy box-shadow, and inset highlight that
 * were making every card shout. Each card now reads like a small magazine
 * column: tiny "№ XX" eyebrow → gilt hairline → confident serif title →
 * lede in cocoa-soft. Only the hover state animates (border warms, card
 * lifts 4px onto a cream wash). */
.dc2-svc {
  background: var(--wb-paper-warm); color: var(--wb-cocoa);
  border-radius: 20px; padding: 30px 28px 26px;
  border: 1px solid var(--wb-gilt-soft);
  min-height: 300px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-shadow: none;
}
.dc2-svc__plate {
  display: flex; justify-content: flex-start; align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wb-gilt-soft);
  position: relative;
}
.dc2-svc__no {
  display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--serif);
}
.dc2-svc__no-pre {
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500;
}
.dc2-svc__no-num {
  font-size: 18px; font-style: italic; font-weight: 400;
  color: var(--wb-cocoa); letter-spacing: -0.005em;
}
.dc2-svc__no-of {
  font-size: 9.5px; letter-spacing: 0.24em; color: var(--wb-cocoa-soft); margin-left: 2px;
}
/* The round ornament badge was the loudest "template" element on the card —
 * removed in favour of typographic restraint. */
.dc2-svc__glyph { display: none; }
.dc2-svc__bubble { display: none; }
.dc2-svc__h {
  font-family: var(--serif); font-size: 27px; font-weight: 400;
  line-height: 1.18; margin: 0 0 14px; letter-spacing: -0.012em;
  color: var(--wb-cocoa);
}
.dc2-svc__body {
  font-size: 13.5px; line-height: 1.7; margin: 0;
  flex: 1; color: var(--wb-cocoa-soft);
}
/* Subtle "→" cue at the bottom-right that appears only on hover —
 * keeps the card calm at rest, lets you know it's clickable when you
 * approach it. Decorative; the whole card is the link. */
.dc2-svc:not(.dc2-svc--more)::after {
  content: '→';
  position: absolute; right: 26px; bottom: 22px;
  font-family: var(--serif); font-size: 18px; font-style: italic;
  color: var(--wb-gilt);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22,1,0.36,1);
}
.dc2-svc:not(.dc2-svc--more):hover::after {
  opacity: 1; transform: translateX(0);
}


/* Marquee IO park — JS toggles this class on .dc2-wall__track / .dc2-houses__track to pause off-screen animations. */
.wb-mq-off { animation-play-state: paused !important; }

/* === Services — 8 strips (label column + horizontal marquee of case cards) === */
.dc2-svc-strips { padding: 40px 32px 56px; }
.dc2-svc-strips .dc2-services__head { text-align: center; margin-bottom: 44px; }

.dc2-svc-strip {
  display: grid;
  grid-template-columns: minmax(220px, 28%) 1fr;
  gap: 32px;
  align-items: start;
  padding: 28px 0;
}
/* Sibling combinator (not :first-of-type) — the section's first <div> is
   .dc2-services__head, so :first-of-type would never match a .dc2-svc-strip.
   This also degrades cleanly when a strip is `continue`d (fewer than 3 posts):
   the next-rendered strip still picks up the border naturally. */
.dc2-svc-strip + .dc2-svc-strip { border-top: 1px solid var(--wb-gilt-soft); }
/* `--rev` carries no styling — it's a JS hook. The marquee IIFE reads the
   modifier to (a) initialise scrollLeft to the track's far end and (b) flip
   the sign of its per-millisecond nudge. Same convention as the legacy
   `.dc2-bna-row--rev`. */

.dc2-svc-strip__label { display: flex; flex-direction: column; gap: 10px; }
.dc2-svc-strip__label-no {
  font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--wb-rose-deep); /* [A11y] was --wb-gilt 1.75:1 on --cream */
}
.dc2-svc-strip__label-name {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  color: var(--wb-cocoa); letter-spacing: -0.014em; margin: 0;
}
.dc2-svc-strip__label-lede {
  font-size: 14px; line-height: 1.55; color: var(--wb-cocoa-soft); margin: 0;
}
.dc2-svc-strip__label-link {
  display: inline-flex; gap: 8px; align-items: center;
  margin-top: 4px; padding: 0;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wb-cocoa); text-decoration: none;
  border-bottom: 1px solid var(--wb-cocoa);
  align-self: flex-start;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.dc2-svc-strip__label-link:hover,
.dc2-svc-strip__label-link:focus-visible { color: var(--rose); border-color: var(--rose); }
.dc2-svc-strip__label-count { white-space: nowrap; }

.dc2-svc-strip__viewport {
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dc2-svc-strip__viewport::-webkit-scrollbar { display: none; }
.dc2-svc-strip__track { display: flex; width: max-content; }

.dc2-svc-strip-card { flex: 0 0 460px; margin-right: 16px; display: block; text-decoration: none; }
.dc2-svc-strip-card__img {
  border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1;
  border: 1px solid var(--wb-gilt-soft);
  background: var(--wb-paper-warm);
}
.dc2-svc-strip-card__img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.dc2-svc-strip-card__meta {
  margin-top: 11px; font-size: 12.5px; line-height: 1.45; color: var(--wb-cocoa-soft);
  transition: color 0.2s ease;
}
.dc2-svc-strip-card:hover .dc2-svc-strip-card__meta,
.dc2-svc-strip-card:focus-visible .dc2-svc-strip-card__meta { color: var(--wb-cocoa); }

@media (max-width: 768px) {
  .dc2-svc-strips { padding: 24px 14px 36px; }
  .dc2-svc-strip { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
  .dc2-svc-strip__label-name { font-size: 22px; }
  .dc2-svc-strip-card { flex: 0 0 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc2-svc-strip-card--dup { display: none; }
}

/* === Houses (curated brand wall, masonry) === */
.dc2-houses { padding: 40px 32px 52px; }
.dc2-houses__head { max-width: 560px; margin: 0 auto; text-align: center; }
.dc2-houses__sub-row {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px;
}
.dc2-houses__sub-rule { width: 32px; height: 1px; background: var(--wb-gilt); display: inline-block; }
.dc2-houses__sub-text {
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500;
}
.dc2-houses__h {
  font-family: var(--serif); font-size: 44px; font-weight: 300;
  margin: 0 0 16px; letter-spacing: -0.025em; line-height: 1.06; color: var(--wb-cocoa);
}
.dc2-houses__h em { font-style: italic; color: var(--rose); font-weight: 200; }
.dc2-houses__lede {
  font-size: 14px; line-height: 1.7; color: var(--wb-cocoa-soft);
  margin: 0 auto; max-width: 440px;
}
/* Vertical-scroll brand wall — 3 columns drifting in alternating directions. */
.dc2-houses__marquee {
  display: flex; gap: 8px;
  max-width: 880px; margin: 38px auto 0;
  height: 432px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.dc2-houses__col { flex: 1; min-width: 0; overflow: hidden; }
.dc2-houses__track {
  display: flex; flex-direction: column;
  animation-name: wb-houses-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
.dc2-houses__col--down .dc2-houses__track { animation-direction: reverse; }
.dc2-houses__marquee:hover .dc2-houses__track { animation-play-state: paused; }
@keyframes wb-houses-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.dc2-house-logo {
  flex: 0 0 92px; height: 92px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px;
}
.dc2-house-logo img {
  display: block; width: auto; height: auto;
  max-height: 52px; max-width: 134px;
  opacity: 0.68;
  transition: opacity 0.3s ease;
}
.dc2-house-logo:hover img { opacity: 1; }
.dc2-house-logo__a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  text-decoration: none; color: inherit;
  outline-offset: 4px;
}
.dc2-houses__more-row { text-align: center; margin-top: 26px; }
.dc2-houses__more {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wb-cocoa); color: #fff; border-radius: 999px;
  padding: 14px 26px;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600;
  box-shadow: 0 10px 22px -12px rgba(40,22,15,0.5);
  transition: transform 0.25s ease, background 0.25s ease;
}
.dc2-houses__more span { color: var(--wb-gilt); }
.dc2-houses__more:hover { transform: translateY(-2px); background: #2a1d17; }

/* === Instagram feed (Smash Balloon shortcode, restyled to Warm Boutique) === */
.dc2-ig { padding: 40px 32px 54px; }
.dc2-ig__head { max-width: 560px; margin: 0 auto 34px; text-align: center; }
.dc2-ig__sub-row {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px;
}
.dc2-ig__sub-rule { width: 32px; height: 1px; background: var(--wb-gilt); display: inline-block; }
.dc2-ig__sub-text {
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500;
}
.dc2-ig__h {
  font-family: var(--serif); font-size: 44px; font-weight: 300;
  margin: 0 0 16px; letter-spacing: -0.025em; line-height: 1.06; color: var(--wb-cocoa);
}
.dc2-ig__h em { font-style: italic; color: var(--rose); font-weight: 200; }
.dc2-ig__lede {
  font-size: 14px; line-height: 1.7; color: var(--wb-cocoa-soft);
  margin: 0 auto; max-width: 440px;
}
.dc2-ig__feed { max-width: 1140px; margin: 0 auto; }
/* Smash Balloon internals — scoped overrides */
.dc2-ig #sb_instagram { background: transparent !important; padding-bottom: 0 !important; }
.dc2-ig #sb_instagram .sb_instagram_header { display: none !important; }
.dc2-ig #sb_instagram .sbi_photo,
.dc2-ig #sb_instagram .sbi_photo_wrap,
.dc2-ig #sb_instagram .sbi_photo img { border-radius: 14px; }
.dc2-ig #sb_instagram .sbi_photo_wrap { overflow: hidden; }
.dc2-ig #sb_instagram #sbi_load {
  margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.dc2-ig #sb_instagram .sbi_load_btn {
  background: var(--wb-cocoa) !important; color: #fff !important;
  border-radius: 999px !important; padding: 15px 28px !important; margin: 0 !important;
  font-family: var(--sans) !important; font-size: 11px !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  font-weight: 600 !important; transition: transform 0.25s ease, background 0.25s ease;
}
.dc2-ig #sb_instagram .sbi_load_btn:hover { transform: translateY(-2px); background: #2a1d17 !important; }
.dc2-ig #sb_instagram .sbi_follow_btn { margin: 0 !important; }
.dc2-ig #sb_instagram .sbi_follow_btn a {
  background: transparent !important; color: var(--wb-cocoa) !important;
  border: 1px solid var(--wb-gilt-soft) !important;
  border-radius: 999px !important; padding: 14px 26px !important;
  font-family: var(--sans) !important; font-size: 11px !important;
  letter-spacing: 0.18em !important; text-transform: uppercase !important;
  font-weight: 600 !important; transition: background 0.25s ease;
}
.dc2-ig #sb_instagram .sbi_follow_btn a:hover { background: var(--wb-paper-warm) !important; }
.dc2-ig #sb_instagram .sbi_follow_btn .svg-inline--fa { color: var(--wb-gilt) !important; }

/* === Process (dark, Roman numerals) === */
.dc2-process-wrap { padding: 0 32px 48px; }
.dc2-process {
  position: relative; padding: 56px; border-radius: 36px;
  background: var(--wb-cocoa); color: #fff; overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(40,22,15,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.dc2-process__glow-1 {
  position: absolute; right: -160px; bottom: -160px; width: 480px; height: 480px;
  border-radius: 50%; background: radial-gradient(circle, rgba(190,124,104,0.15), transparent 65%);
}
.dc2-process__glow-2 {
  position: absolute; left: -120px; top: -120px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,164,122,0.11), transparent 70%);
}
.dc2-process__head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 44px; position: relative; gap: 24px; flex-wrap: wrap;
}
.dc2-process__cap {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-gilt); font-weight: 500; margin-bottom: 14px;
}
.dc2-process__h {
  font-family: var(--serif); font-size: 52px; font-weight: 300;
  margin: 0; letter-spacing: -0.025em; line-height: 1; color: #fff;
}
.dc2-process__h em { font-style: italic; color: var(--rose); font-weight: 200; }
.dc2-process__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  position: relative;
}
.dc2-process__step {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px; padding: 26px 24px;
  position: relative; overflow: hidden;
}
.dc2-process__step-illust {
  display: flex; align-items: center; justify-content: center;
  height: 88px; margin-bottom: 18px;
  color: rgba(255,255,255,0.78);
  transition: color 0.25s ease, transform 0.25s ease;
}
.dc2-process__step-illust svg { width: auto; height: 100%; display: block; }
.dc2-process__step:hover .dc2-process__step-illust {
  color: var(--wb-gilt); transform: translateY(-2px);
}
.dc2-process__step--first .dc2-process__step-illust { color: var(--wb-gilt); }
.dc2-process__step--first::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--wb-gilt), transparent);
}
.dc2-process__step-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 22px;
}
.dc2-process__step-roman {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; font-weight: 400; font-style: italic;
}
.dc2-process__step--first .dc2-process__step-roman {
  background: linear-gradient(135deg, var(--rose), var(--wb-primary-dark));
  border-color: var(--wb-gilt-soft);
  box-shadow: 0 14px 28px -14px rgba(190,124,104,0.7), inset 0 1px 0 rgba(255,255,255,0.25);
}
.dc2-process__step-num {
  font-family: var(--serif); font-size: 36px; font-weight: 200;
  color: rgba(255,255,255,0.18); letter-spacing: -0.04em; line-height: 1; font-style: italic;
}
.dc2-process__step-h {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  margin-bottom: 12px; letter-spacing: -0.005em; color: #fff;
}
.dc2-process__step-body { font-size: 12.5px; line-height: 1.7; opacity: 0.7; color: #fff; }

/* === Testimonials === */
.dc2-tests { padding: 0 32px 48px; }
.dc2-tests__head {
  margin-bottom: 32px; display: flex; justify-content: space-between; align-items: end;
  gap: 24px; flex-wrap: wrap;
}
.dc2-tests__h {
  font-family: var(--serif); font-size: 48px; font-weight: 300;
  margin: 18px 0 0; letter-spacing: -0.025em; line-height: 1.05; color: var(--wb-cocoa);
}
.dc2-tests__h em { font-style: italic; color: var(--rose); font-weight: 200; }
.dc2-tests__rating-row { display: flex; gap: 22px; align-items: center; }
.dc2-tests__rating {
  display: flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; color: inherit;
  transition: transform 0.2s ease;
}
.dc2-tests__rating:hover {
  transform: translateY(-1px);
}
/* WCAG 1.4.11: keyboard focus needs a perceptible visual indicator, not just a transform.
   Using --ink (ratio 13.84:1 on cream) for the outline — --rose on cream is only 2.53:1. */
.dc2-tests__rating:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}
.dc2-tests__rating-num {
  font-family: var(--serif); font-size: 40px; color: var(--rose);
  font-weight: 300; line-height: 1; letter-spacing: -0.02em;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.dc2-tests__rating-of {
  font-size: 16px; color: var(--wb-cocoa-soft); font-style: italic;
}
.dc2-tests__rating-sub {
  font-size: 11px; color: var(--wb-cocoa-soft); margin-top: 6px; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s ease;
}
.dc2-tests__rating:hover .dc2-tests__rating-sub { color: var(--rose); }
.dc2-tests__rating-g {
  display: inline-block; flex-shrink: 0;
}
.dc2-tests__rating-arrow {
  margin-left: 2px; opacity: 0.5;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.dc2-tests__rating:hover .dc2-tests__rating-arrow {
  transform: translateX(3px); opacity: 1;
}
.dc2-tests__nav { display: flex; gap: 8px; }
.dc2-tests__nav-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--wb-gilt-soft); background: var(--wb-paper-warm);
  font-size: 16px; color: var(--wb-cocoa);
}
.dc2-tests__nav-btn--active {
  background: var(--wb-cocoa); color: #fff; border: none;
  box-shadow: 0 8px 18px -8px rgba(40,22,15,0.5);
}
.dc2-tests__grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 32px;
  padding: 4px 32px;
  margin: 0 -32px;

  scrollbar-width: none;

  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.dc2-tests__grid::-webkit-scrollbar { display: none; }
.dc2-tests__grid:focus-visible {
  outline: 2px solid var(--wb-focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.dc2-test {
  /* Desktop: 3.2 cards visible. Container's neg-margin (0 -32px) and
     padding (4px 32px) cancel, so 100% inside flex-basis already equals
     the section content width. Subtract only the gap budget:
     (3.2 - 1) × 16px ≈ 35px. */
  flex: 0 0 calc((100% - 35px) / 3.2);
  scroll-snap-align: start;

  background: var(--wb-paper-warm); color: var(--wb-cocoa);
  border-radius: 26px; padding: 28px 26px;
  border: 1px solid var(--wb-line);
  box-shadow: 0 14px 30px -20px rgba(80,50,30,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 300px; position: relative;
}
.dc2-test:nth-child(3n+2) {
  background: var(--wb-cocoa); color: #fff;
  border-color: var(--wb-cocoa-soft);
  box-shadow: 0 26px 52px -24px rgba(40,22,15,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.dc2-test__quote-mark {
  position: absolute; top: 14px; right: 22px;
  font-family: var(--serif); font-size: 64px; line-height: 0.6;
  color: rgba(201,164,122,0.55); font-style: italic;
}
.dc2-test:nth-child(3n+2) .dc2-test__quote-mark { color: rgba(201,164,122,0.35); }
.dc2-test__stars {
  color: var(--rose); letter-spacing: 0.1em; font-size: 13px; margin-bottom: 16px;
}
.dc2-test:nth-child(3n+2) .dc2-test__stars { color: var(--wb-gilt); }
.dc2-test__q {
  font-family: var(--serif); font-size: 19.5px; font-weight: 400;
  line-height: 1.45; letter-spacing: -0.005em;
}
.dc2-test__attr {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--wb-gilt-soft);
  display: flex; align-items: center; gap: 12px;
}
.dc2-test:nth-child(3n+2) .dc2-test__attr { border-top-color: rgba(255,255,255,0.15); }
.dc2-test__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(80,50,30,0.18);
  flex-shrink: 0;
}
.dc2-test__avatar--photo { object-fit: cover; }
.dc2-test__attr-body { flex: 1; min-width: 0; }
.dc2-test__name { font-weight: 600; font-size: 13px; }
.dc2-test__meta {
  font-size: 11.5px; opacity: 0.7;
  display: inline-flex; align-items: center; gap: 6px;
}
.dc2-test__google { display: inline-block; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .dc2-tests__grid { scroll-behavior: auto; }
}

/* === FAQ + CTA === */
.dc2-faq-cta-wrap { padding: 0 32px 48px; }
.dc2-faq-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.dc2-faq {
  padding: 36px 38px; border-radius: 32px;
  background: var(--wb-paper-warm); border: 1px solid var(--wb-line);
  box-shadow: 0 24px 60px -36px rgba(80,50,30,0.22), inset 0 1px 0 rgba(255,255,255,0.85);
}
.dc2-faq__h {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  margin: 16px 0 26px; letter-spacing: -0.025em; color: var(--wb-cocoa);
}
.dc2-faq__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.dc2-faq__item {
  padding: 20px 0; border-top: 1px solid var(--wb-line);
}
.dc2-faq__item:first-of-type { border-top-color: var(--wb-gilt-soft); }
.dc2-faq__item:last-of-type { border-bottom: 1px solid var(--wb-gilt-soft); }
.dc2-faq__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  width: 100%; background: none; border: none; margin: 0;
  padding: 8px 0; /* adapt 2026-05-19: lifts the hit target to 44px (28px glyph + 16px) */
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.dc2-faq__q-row { display: flex; align-items: baseline; gap: 14px; flex: 1; }
.dc2-faq__q {
  font-family: var(--serif); font-size: 17.5px; font-weight: 500;
  color: var(--wb-cocoa); line-height: 1.3;
}
.dc2-faq__toggle {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cream); color: var(--wb-cocoa);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; flex-shrink: 0;
  border: none;
}
.dc2-faq__item--open .dc2-faq__toggle {
  background: var(--rose); color: #fff;
}
.dc2-faq__a {
  font-size: 13px; color: var(--wb-cocoa-soft); line-height: 1.7;
  margin-top: 12px; padding-left: 32px; display: none;
}
.dc2-faq__item--open .dc2-faq__a { display: block; }

.dc2-cta {
  position: relative; padding: 44px; border-radius: 32px;
  background: var(--rose); color: #fff; overflow: hidden;
  box-shadow: 0 30px 70px -36px rgba(190,124,104,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 360px;
}
.dc2-cta__glow-1 {
  position: absolute; top: -140px; right: -140px; width: 400px; height: 400px;
  border-radius: 50%; background: rgba(255,255,255,0.1);
}
.dc2-cta__glow-2 {
  position: absolute; bottom: -120px; left: -120px; width: 300px; height: 300px;
  border-radius: 50%; background: rgba(255,255,255,0.06);
}
.dc2-cta__edition {
  position: absolute; top: 24px; right: 28px;
  display: flex; align-items: center; gap: 10px; z-index: 1;
}
.dc2-cta__edition-rule { width: 24px; height: 1px; background: rgba(255,255,255,0.5); display: inline-block; }
.dc2-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 28px; height: 100%; }
.dc2-cta__h {
  font-family: var(--serif); font-size: 58px; font-weight: 300;
  margin: 20px 0 16px; line-height: 1.0; letter-spacing: -0.028em; color: #fff;
}
.dc2-cta__h em { font-style: italic; font-weight: 200; }
.dc2-cta__lede { font-size: 15px; opacity: 0.92; line-height: 1.7; max-width: 380px; color: #fff; margin: 0; }
.dc2-cta__buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.dc2-cta__btn-white {
  background: #fff; color: var(--rose); border: none;
  padding: 14px 22px 14px 14px; border-radius: 999px; font-size: 13px;
  font-weight: 700; font-family: inherit; text-decoration: none;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  box-shadow:
    0 12px 30px -10px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.85);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.dc2-cta__btn-white:hover,
.dc2-cta__btn-white:focus-visible {
  transform: translateY(-2px);
  background: var(--wb-rose-tint);
  box-shadow:
    0 18px 38px -12px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.85);
  outline: none;
}
.dc2-cta__btn-white-lhs { display: inline-flex; gap: 12px; align-items: center; }
.dc2-cta__btn-white-icon {
  width: 32px; height: 32px; border-radius: 50%; background: #25d366;
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow:
    0 0 0 3px rgba(37,211,102,0.22),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    inset 0 1px 2px rgba(255,255,255,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dc2-cta__btn-white-icon svg { width: 18px; height: 18px; display: block; }
.dc2-cta__btn-white:hover .dc2-cta__btn-white-icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 4px rgba(37,211,102,0.32),
    inset 0 -2px 4px rgba(0,0,0,0.18),
    inset 0 1px 2px rgba(255,255,255,0.35);
}
.dc2-cta__btn-white > span:last-child {
  transition: transform 0.2s ease;
}
.dc2-cta__btn-white:hover > span:last-child { transform: translateX(3px); }

.dc2-cta__btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 18px 26px; border-radius: 999px; font-size: 13px;
  font-weight: 600; font-family: inherit; text-decoration: none;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  transition: transform 0.2s ease, background 0.2s ease,
              border-color 0.2s ease, box-shadow 0.25s ease;
}
.dc2-cta__btn-ghost:hover,
.dc2-cta__btn-ghost:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.85);
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  outline: none;
}
.dc2-cta__btn-ghost > span:last-child {
  transition: transform 0.2s ease;
}
.dc2-cta__btn-ghost:hover > span:last-child { transform: translateX(3px); }

/* === Footer v2 (cream platform with R logo) === */
.wb-footer-v2-wrap { padding: 32px 32px 24px; }
.wb-footer-v2 { padding: 44px 44px 28px; }
.wb-footer-v2__ornament-row { text-align: center; margin-bottom: 36px; }
.wb-footer-v2__cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px;
}
.wb-footer-v2__brand-col { min-width: 0; }
.wb-footer-v2__brand {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.wb-footer-v2__logo {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #d9a892, var(--rose) 55%, var(--wb-primary-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 20px; font-style: italic;
  box-shadow:
    inset 0 -3px 6px rgba(0,0,0,0.18),
    inset 0 2px 4px rgba(255,255,255,0.25);
  border: 1px solid var(--wb-gilt-soft);
}
/* Same WooCommerce .woocommerce img override guard as the nav logo — keep the
 * footer logo at its fixed height on WC pages. */
.wb-footer-v2__brand-col .wb-footer-v2__logo-img {
  display: block; height: 64px; width: auto; max-width: 280px;
  object-fit: contain;
}
.wb-footer-v2__lockup { display: flex; flex-direction: column; }
.wb-footer-v2__name {
  font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--wb-cocoa);
}
.wb-footer-v2__name em { color: var(--rose); font-style: italic; }
.wb-footer-v2__est {
  font-size: 8.5px; letter-spacing: 0.32em; color: var(--wb-cocoa-soft); margin-top: 2px;
}
.wb-footer-v2__blurb {
  font-size: 13px; color: var(--wb-cocoa-soft); line-height: 1.7;
  margin: 0 0 18px; max-width: 290px;
}
.wb-footer-v2__social { display: flex; gap: 8px; }
.wb-footer-v2__social { gap: 10px; }
.wb-footer-v2__social-chip {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--wb-gilt-soft); background: var(--wb-paper-warm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wb-cocoa);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 10px -6px rgba(80,50,30,0.25);
  transition: transform 0.2s ease, background 0.2s ease,
              color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wb-footer-v2__social-chip svg {
  width: 18px; height: 18px; display: block;
}
.wb-footer-v2__social-chip:hover,
.wb-footer-v2__social-chip:focus-visible {
  background: var(--rose); color: #fff;
  border-color: var(--rose);
  transform: translateY(-2px);
  box-shadow:
    0 10px 22px -8px rgba(190,124,104,0.55),
    inset 0 1px 0 rgba(255,255,255,0.25);
  outline: none;
}
.wb-footer-v2__col {}
.wb-footer-v2__col-h {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--rose); margin-bottom: 18px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.wb-footer-v2__col-body {
  font-size: 12.5px; color: var(--wb-cocoa-soft); line-height: 1.85;
  font-weight: 500; letter-spacing: 0.02em;
  display: flex; flex-direction: column;
}
.wb-footer-v2__col-body a, .wb-footer-v2__col-body span {
  color: inherit; display: inline-block; padding: 3px 0;
}
/* Sister-site footer line (2026-05-22): quiet cross-link to reeluxs.com.
 * Sits between the columns row and the copyright base. Hairline rule
 * above; small uppercase label + link with italic brand-name em. */
.wb-footer-v2__sister {
  padding-top: 22px;
  border-top: 1px solid var(--wb-line);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.wb-footer-v2__sister a {
  color: var(--wb-cocoa);
  font-family: var(--serif);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.wb-footer-v2__sister a em {
  font-style: italic;
}
.wb-footer-v2__sister a:hover {
  border-bottom-color: var(--wb-gilt);
}
.wb-footer-v2__sister a:focus-visible {
  outline: 2px solid var(--wb-cocoa);
  outline-offset: 3px;
  border-radius: 2px;
}

.wb-footer-v2__base {
  padding-top: 22px; border-top: 1px solid var(--wb-gilt-soft);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 11px; color: var(--wb-cocoa-soft); letter-spacing: 0.04em;
}
.wb-footer-v2__base-links { display: flex; gap: 22px; }
.wb-footer-v2__base-links a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.wb-footer-v2__base-links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* === Mobile (Stage 1.5 v3) === */
@media (max-width: 1024px) {
  .dc2-hero__title { font-size: 76px; }
  .dc2-services__h, .dc2-houses__h, .dc2-process__h, .dc2-tests__h { font-size: 44px; }
  .dc2-hero__inner { gap: 36px; padding: 44px 36px; }
  .dc2-services__grid { grid-template-columns: repeat(2, 1fr); }
  .dc2-process__grid { grid-template-columns: repeat(2, 1fr); }
  /* Tablet: 2.2 cards visible. gap budget = 1.2 × 16px ≈ 19px. */
  .dc2-test { flex: 0 0 calc((100% - 19px) / 2.2); }
  .dc2-faq-cta { grid-template-columns: 1fr; }
  .wb-footer-v2__cols { grid-template-columns: 1fr 1fr; }
  .dc2-houses__marquee { max-width: 620px; height: 400px; }
  .dc2-stats__grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  /* 2x2 layout: rule appears only on the right-column cells as a divider
   * between left and right columns. Left-column cells (1, 3) hide it. */
  .dc2-stats__cell:nth-child(2n+1) .dc2-stats__cell-rule { display: none; }
  .dc2-stats__cell:nth-child(2n) .dc2-stats__cell-rule { display: block; }
}

@media (max-width: 768px) {
  .wb-announce {
    padding: 10px 14px; font-size: 9px; letter-spacing: 0.16em;
    flex-direction: column; gap: 6px;
  }
  .wb-announce__left, .wb-announce__right { gap: 12px; }
  .wb-announce__cert, .wb-announce__sep { display: none; }

  .wb-nav-v2-wrap { padding: 14px 14px 6px; }
  .wb-nav-v2 { padding: 8px 8px 8px 16px; gap: 8px; }
  .wb-nav-v2__logo { width: 36px; height: 36px; font-size: 17px; }
  .wb-nav-v2__brand .wb-nav-v2__logo-img { height: 42px; max-width: 180px; }
  .wb-footer-v2__brand-col .wb-footer-v2__logo-img { height: 48px; max-width: 220px; }
  .wb-nav-v2__name { font-size: 16px; }
  .wb-nav-v2__est { font-size: 7.5px; letter-spacing: 0.24em; }
  .wb-nav-v2__links, .wb-nav-v2__signin, .wb-nav-v2__cta { display: none; }
  .wb-nav-v2__burger { display: inline-flex; }

  .dc2-hero-wrap { padding: 6px 14px 20px; }
  .dc2-hero__inner { grid-template-columns: 1fr; padding: 32px 22px; gap: 28px; }
  .dc2-hero--video .dc2-hero__inner { padding: 60px 24px 52px; min-height: 440px; }
  .dc2-hero__edition { position: static; margin-bottom: 16px; }
  .dc2-hero__title { font-size: 44px; line-height: 1.0; margin: 16px 0 14px; }
  .dc2-hero__lead { font-size: 14.5px; margin: 0 0 24px; }
  .dc2-hero__actions { gap: 8px; margin-bottom: 24px; }
  .dc2-btn-primary, .dc2-btn-secondary { padding: 14px 20px; font-size: 12px; }
  .dc2-trust { gap: 14px; }
  .dc2-trust__avatar { width: 32px; height: 32px; }
  .dc2-trust__avatar:not(:first-child) { margin-left: -10px; }
  .dc2-hero__media { gap: 10px; }

  .dc2-atelier-note { padding: 4px 14px 24px; }
  .dc2-atelier-note__row { grid-template-columns: 1fr; gap: 8px; padding: 0; }
  .dc2-atelier-note__quote { font-size: 16px; }
  .dc2-atelier-note__attr { display: block; margin-left: 0; margin-top: 4px; }

  .dc2-stats-wrap { padding: 0 14px 18px; }
  .dc2-stats { padding: 22px 18px; border-radius: 20px; }
  /* Stay 2x2 on phones to keep the section compact (was 1-column when there
   * were only 3 stats; now 4 stats — 1 column would feel too tall). */
  .dc2-stats__grid { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .dc2-stats__cell { padding-left: 14px; }
  .dc2-stats__num { font-size: 26px; }
  .dc2-stats__num-plus { font-size: 16px; }
  .dc2-stats__label { margin-top: 6px; font-size: 9.5px; letter-spacing: 0.22em; }

  .dc2-services { padding: 24px 14px 36px; }
  .dc2-services__h { font-size: 32px; }
  .dc2-services__grid { grid-template-columns: 1fr; gap: 12px; }
  .dc2-svc { min-height: auto; padding: 22px; border-radius: 22px; }
  .dc2-svc__h { font-size: 22px; }

  .dc2-houses { padding: 24px 14px 38px; }
  .dc2-houses__h { font-size: 32px; }
  .dc2-houses__marquee { gap: 4px; height: 326px; margin-top: 26px; }
  .dc2-house-logo { flex-basis: 74px; height: 74px; padding: 0 7px; }
  .dc2-house-logo img { max-height: 38px; max-width: 96px; }

  .dc2-ig { padding: 26px 14px 40px; }
  .dc2-ig__h { font-size: 32px; }
  .dc2-ig__head { margin-bottom: 26px; }

  .dc2-process-wrap { padding: 0 14px 36px; }
  .dc2-process { padding: 28px 22px; border-radius: 24px; }
  .dc2-process__h { font-size: 32px; }
  .dc2-process__grid { grid-template-columns: 1fr; gap: 12px; }
  .dc2-process__step-illust { height: 52px; margin-bottom: 12px; }
  .dc2-process__step { padding: 20px 20px; border-radius: 20px; }
  .dc2-process__step-h { font-size: 16px; }
  .dc2-process__step-body { font-size: 13px; line-height: 1.6; }

  .dc2-tests { padding: 0 14px 36px; }
  .dc2-tests__h { font-size: 32px; }
  .dc2-tests__rating-num { font-size: 28px; }
  /* Mobile: 1.1 cards visible. Container padding/neg-margin shrink to 14px
     to match the section padding override above. gap budget = 0.1 × 16px ≈ 2px. */
  .dc2-tests__grid {
    padding: 4px 14px;
    margin: 0 -14px;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .dc2-test { flex: 0 0 calc((100% - 2px) / 1.1); }
  .dc2-test { min-height: auto; padding: 22px; border-radius: 22px; }
  .dc2-test__q { font-size: 16.5px; }
  .dc2-test__quote-mark { font-size: 48px; right: 16px; top: 10px; }
  .dc2-tests__nav { display: none; }

  .dc2-faq-cta-wrap { padding: 0 14px 36px; }
  .dc2-faq { padding: 24px; border-radius: 22px; }
  .dc2-faq__h { font-size: 28px; }
  .dc2-faq__q { font-size: 15px; }
  .dc2-cta { padding: 28px; border-radius: 22px; min-height: auto; }
  .dc2-cta__h { font-size: 38px; }

  .wb-footer-v2-wrap { padding: 18px 14px; }
  .wb-footer-v2 { padding: 28px 22px 22px; border-radius: 22px; }
  .wb-footer-v2__cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .wb-footer-v2__brand-col { grid-column: 1 / -1; }
  .wb-footer-v2__col-h { font-size: 11px; margin-bottom: 14px; }
  .wb-footer-v2__col-body { font-size: 13px; line-height: 1.85; }
  .wb-footer-v2__col-body a, .wb-footer-v2__col-body span { padding: 5px 0; }
  .wb-footer-v2__base { font-size: 10px; flex-direction: column; gap: 6px; }
}

/* ============================================================
 * Stage 1.5+ polish (1.13.0) — global button hover states
 *   Adds smooth transitions + lift/scale/shadow feedback to every
 *   button-like element across the site. Does not touch base
 *   colors/sizing, only enhances :hover and :focus-visible states.
 * ============================================================ */

/* ---- Nav v2 ---- */
.wb-nav-v2__cta {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.wb-nav-v2__cta:hover,
.wb-nav-v2__cta:focus-visible {
  transform: translateY(-2px); background: #2a1d17;
  box-shadow: 0 16px 28px -10px rgba(40,22,15,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
  outline: none;
}
.wb-nav-v2__cta-dot { transition: box-shadow 0.2s ease; }
.wb-nav-v2__cta:hover .wb-nav-v2__cta-dot {
  box-shadow: 0 0 0 4px rgba(201,164,122,0.32);
}
.wb-nav-v2__cta-arrow { transition: transform 0.2s ease, opacity 0.2s ease; }
.wb-nav-v2__cta:hover .wb-nav-v2__cta-arrow { transform: translateX(3px); opacity: 1; }

.wb-nav-v2__signin {
  transition: color 0.2s ease, background 0.2s ease;
}
.wb-nav-v2__signin:hover,
.wb-nav-v2__signin:focus-visible {
  color: var(--rose); outline: none;
}

.wb-nav-v2__link {
  transition: color 0.2s ease;
}
.wb-nav-v2__link:hover { color: var(--wb-cocoa); }

.wb-nav-v2__drawer-link { transition: color 0.2s ease, padding-left 0.2s ease; }
.wb-nav-v2__drawer-link:hover { color: var(--wb-cocoa); background: var(--hover-chip-bg); padding-left: 24px; }

.wb-nav-v2__drawer-cta {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.wb-nav-v2__drawer-cta:hover {
  transform: translateY(-2px); background: #2a1d17;
  box-shadow: 0 14px 24px -10px rgba(40,22,15,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}

.wb-nav-v2__burger { transition: background 0.2s ease, border-color 0.2s ease; }
.wb-nav-v2__burger:hover {
  background: var(--hover-ghost-bg);
  border-color: var(--hover-ghost-border);
  box-shadow: var(--hover-shadow-button);
}

/* ---- Mobile sticky bar ---- */
.dc-sticky-bar__btn {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dc-sticky-bar__btn:hover, .dc-sticky-bar__btn:active {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -6px rgba(0,0,0,0.4);
}
.dc-sticky-bar__btn--wa:hover { background: #156a3c; }
.dc-sticky-bar__btn--ink:hover { background: #2a1d17; }

/* ---- Service cards (homepage, editorial restraint) ---- */
.dc2-svc {
  transition: transform 280ms cubic-bezier(0.22,1,0.36,1),
              border-color 200ms ease,
              background 200ms ease;
}
.dc2-svc:not(.dc2-svc--more):hover {
  transform: translateY(-4px);
  border-color: var(--wb-gilt);
  background: var(--cream);
}
/* On hover, also nudge the number to gilt — small refinement signal */
/* a11y 2026-05-22: hover color was var(--wb-gilt) — 2.22:1 on paper-warm
 * fails AA. Resting state is cocoa-soft (7.23:1); on hover deepen to
 * cocoa for max contrast + keeps the typographic refinement signal. */
.dc2-svc:not(.dc2-svc--more):hover .dc2-svc__no-num { color: var(--wb-cocoa); }
.dc2-svc:not(.dc2-svc--more):hover .dc2-svc__plate { border-bottom-color: var(--wb-gilt); }


/* ---- Houses brand wall — hover handled in the Houses section above ---- */

/* ---- Process steps (dark Platform) ---- */
.dc2-process__step {
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.dc2-process__step:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(201,164,122,0.4);
}

/* ---- Testimonials nav arrows ---- */
.dc2-tests__nav-btn {
  transition: transform 0.2s ease, background 0.2s ease,
              color 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.dc2-tests__nav-btn:hover {
  background: var(--wb-cocoa); color: #fff; border-color: var(--wb-cocoa);
  transform: scale(1.06);
}
.dc2-tests__nav-btn--active:hover { background: #2a1d17; }

.dc2-test {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dc2-test:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -22px rgba(80,50,30,0.3), inset 0 1px 0 rgba(255,255,255,0.85);
}
.dc2-test:nth-child(3n+2):hover {
  box-shadow: 0 32px 56px -22px rgba(40,22,15,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ---- FAQ toggle (+/-) ---- */
.dc2-faq__item { transition: padding-left 0.2s ease; }
.dc2-faq__item:hover { padding-left: 6px; }
.dc2-faq__toggle {
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.dc2-faq__toggle:hover {
  transform: scale(1.1); background: var(--rose); color: #fff;
}
.dc2-faq__item--open .dc2-faq__toggle:hover { background: var(--wb-primary-dark); }

/* ---- B&A archive page filters + load more ---- */
.bna-filter {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bna-filter:hover {
  background: var(--wb-cocoa); color: #fff; border-color: var(--wb-cocoa);
}
.bna-filter--active, .bna-filter--service-active {
  transition: background 0.2s ease;
}
.bna-loadmore__btn {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.bna-loadmore__btn:hover {
  transform: translateY(-2px); background: #2a1d17;
  box-shadow: 0 18px 32px -12px rgba(40,22,15,0.7);
}
.bna-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bna-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -22px rgba(80,50,30,0.3), inset 0 1px 0 rgba(255,255,255,0.85);
}

/* DESIGN.md §5 Disabled state — was claimed implemented for .dc2-btn-primary
 * but the rule was missing. Added 2026-05-22 (Stage 3 review finding). */
.dc2-btn-primary:disabled,
.dc2-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.dc2-btn-primary:hover:disabled,
.dc2-btn-secondary:hover:disabled {
  transform: none;
  box-shadow: none;
}

/* ---- Service page (svc-) buttons ---- */
.svc-cta__btn {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.svc-cta__btn:hover {
  transform: translateY(-2px); background: #fff; color: var(--rose);
  box-shadow: 0 18px 32px -12px rgba(0,0,0,0.25);
}


/* ---- Footer column links ---- */
.wb-footer-v2__col-body a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.wb-footer-v2__col-body a:hover {
  color: var(--rose); padding-left: 4px;
}

/* ---- Announcement strip phone link ---- */
.wb-announce__phone { transition: color 0.2s ease; }
.wb-announce__phone:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---- Brand image ---- */
.wb-nav-v2__brand { transition: opacity 0.2s ease; }
.wb-nav-v2__brand:hover { opacity: 0.85; }
.wb-footer-v2__brand-col img.wb-footer-v2__logo-img { transition: opacity 0.2s ease; }
.wb-footer-v2__brand-col img.wb-footer-v2__logo-img:hover { opacity: 0.85; }

/* ============================================================
 * 1.16.2 — Testimonials head: 5-avatar customer stack
 *   Mirrors hero `.dc2-trust__avatars` so the social-proof visual
 *   echoes between hero and testimonials section header.
 * ============================================================ */
.dc2-tests__avatars { display: flex; align-items: center; }
.dc2-tests__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 8px rgba(80,50,30,0.18);
  object-fit: cover; object-position: center;
}
.dc2-tests__avatar:not(:first-child) { margin-left: -12px; }
@media (max-width: 768px) {
  .dc2-tests__avatar { width: 30px; height: 30px; }
  .dc2-tests__avatar:not(:first-child) { margin-left: -10px; }
}

/* Reduce motion preference: disable all polish transitions */
@media (prefers-reduced-motion: reduce) {
  .wb-nav-v2__cta, .wb-nav-v2__signin, .wb-nav-v2__link,
  .wb-nav-v2__drawer-link, .wb-nav-v2__drawer-cta, .wb-nav-v2__burger,
  .dc-sticky-bar__btn, .dc2-svc, .dc2-svc::after, .dc2-svc__more-arrow,
  .dc2-house-logo img, .dc2-houses__more, .dc2-process__step,
  .dc2-tests__nav-btn, .dc2-test,
  .dc2-faq__item, .dc2-faq__toggle,
  .bna-filter, .bna-loadmore__btn, .bna-card,
  .svc-cta__btn,
  .ct-outlet__btn,
  .wb-footer-v2__col-body a, .wb-announce__phone,
  .wb-nav-v2__brand, .wb-footer-v2__brand-col img.wb-footer-v2__logo-img {
    transition: none !important;
  }
  /* Brand wall: stop the vertical scroll, show one static set per column. */
  .dc2-houses__track { animation: none !important; }
  .dc2-houses__marquee { height: auto; -webkit-mask-image: none; mask-image: none; }
  .dc2-houses__col { overflow: visible; }
  .dc2-house-logo--dup { display: none; }
}

/* ============================================================
 * [A11y-1] Visible keyboard focus (audit 2026-05-19).
 * Per-component :focus-visible rules above set `outline: none`
 * and replaced it with hover-like drop shadows — keyboard users
 * had no distinguishable focus indicator on the primary CTAs and
 * form fields. This restores a real ring. Ink ring works on the
 * cream / paper / rose backgrounds; dark sections get a light one.
 * Appended last so the !important list overrides those rules.
 * ============================================================ */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.dc2-btn-primary:focus-visible,
.dc2-btn-secondary:focus-visible,
.dc2-tests__rating:focus-visible,
.dc2-cta__btn-white:focus-visible,
.dc2-cta__btn-ghost:focus-visible,
.wb-footer-v2__social-chip:focus-visible,
.wb-nav-v2__cta:focus-visible,
.wb-nav-v2__signin:focus-visible,
.qt-cta__btn:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px !important;
}
/* Controls sitting on dark section backgrounds need a light ring. */
.dc2-tests__rating:focus-visible { outline-color: var(--paper) !important; }

/* ============================================================
 * [A11y-2] Reduced-motion completion (audit 2026-05-19).
 * The block above only nulls `transition` on a fixed element
 * list; keyframe animations (pulsing live-counter dot, etc.) and
 * scroll behavior were still running. This covers everything.
 * The hero <video autoplay loop> is paused via JS in the
 * template — CSS cannot stop it.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * [Resp-1] Mobile FAB collision (audit 2026-05-19).
 * The "Click to Chat for WhatsApp" plugin (#ht-ctc-chat) floats
 * a WhatsApp button bottom-right; on the redesign pages it landed
 * on top of the mobile sticky bar, clipping the "Get a Quote"
 * button. The redesign already carries its own mobile WhatsApp
 * affordances (sticky bar + nav CTA + footer chip), so the plugin
 * widget is redundant on mobile here — hide it below the sticky
 * bar's breakpoint. Desktop keeps the plugin button.
 * ============================================================ */
@media (max-width: 768px) {
  body.dc-warm-boutique #ht-ctc-chat,
  body.dc-warm-boutique .ht-ctc-cta {
    display: none !important;
  }
}


/* ============================================================
 * [UX-2] Trust line at the closing CTA (clarify 2026-05-19).
 * Surfaces the handover-anxiety reassurance (insured pickup,
 * honest assessment, no surprise charges) right at the
 * conversion point, instead of leaving it buried in FAQ item 4.
 * ============================================================ */
.dc2-cta__trust {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
}

/* ============================================================
 * [A11y-4] Screen-reader-only utility (contact page audit 2026-05-19).
 * Used for <h2> section labels that provide heading structure for
 * AT users without altering the visual layout.
 * ============================================================ */
.wb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
 * [A11y-5] Contact page link variants (contact page audit 2026-05-19).
 * Email / phone values in the "Get in touch" panel and phone numbers
 * in outlet meta rows are now real <a> links. These inherit the
 * existing val styles and add a subtle underline on hover/focus.
 * Phone numbers in the dark outlet card stay white; light card inherits cocoa.
 * ============================================================ */
.ct-getintouch__val--link {
  color: inherit;
  text-decoration: none;
}
.ct-getintouch__val--link:hover,
.ct-getintouch__val--link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ct-outlet__meta-row-val--tel {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.ct-outlet__meta-row-val--tel:hover,
.ct-outlet__meta-row-val--tel:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ============================================================
 * [W3] Happy-owners customer photo wall (2026-05-19).
 * Two rows of real customer photos auto-scrolling in opposite
 * directions — the Warm Boutique replacement for the old
 * ha-scrolling-image gallery. The PHP prints each row's photo
 * set twice; translateX(-50%) over the doubled track gives a
 * seamless loop. Each card carries its own margin-right (not a
 * flex gap) so -50% lands exactly on one set boundary.
 * ============================================================ */
.dc2-wall-wrap {
  padding: 64px 0 72px;
  background: var(--cream);
  overflow: hidden;
}
.dc2-wall__head {
  max-width: 1200px;
  margin: 0 auto 36px;
  padding: 0 32px;
}
.dc2-wall__h {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.dc2-wall__h em { font-style: italic; font-weight: 300; color: var(--rose); }
.dc2-wall__lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--wb-cocoa-soft);
  max-width: 440px;
  margin: 0;
}
.dc2-wall__row {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.dc2-wall__row + .dc2-wall__row { margin-top: 16px; }
.dc2-wall__track {
  display: flex;
  flex: 0 0 auto;
  animation: dc2-wall-scroll 70s linear infinite;
  will-change: transform;
}
.dc2-wall__row--rev .dc2-wall__track { animation-direction: reverse; }
.dc2-wall__row:hover .dc2-wall__track { animation-play-state: paused; }
.dc2-wall__card {
  flex: 0 0 auto;
  height: 300px;
  margin: 0 16px 0 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 14px 30px -20px rgba(80, 50, 30, 0.35);
}
.dc2-wall__card img {
  display: block;
  height: 100%;
  width: auto;
}
@keyframes dc2-wall-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .dc2-wall-wrap { padding: 40px 0 48px; }
  .dc2-wall__head { margin-bottom: 24px; padding: 0 18px; }
  .dc2-wall__card { height: 200px; border-radius: 14px; margin-right: 10px; }
  .dc2-wall__row + .dc2-wall__row { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc2-wall__track { animation: none; }
  .dc2-wall__row {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ============================================================
 * Services IA v3 (2026-05-21 — flat 14)
 *   - Homepage:   .dc2-services__grid--7   .dc2-svc--more
 *   - Services:   .svc-anchors             .svc-card-v2
 *                 .svc-network
 * Reuses tokens: --wb-gilt --wb-cocoa --wb-rose --wb-page-bg
 * ============================================================ */

/* === Homepage 3×2 + 1 grid === */
.dc2-services__grid.dc2-services__grid--7 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1023px) {
  .dc2-services__grid.dc2-services__grid--7 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .dc2-services__grid.dc2-services__grid--7 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .dc2-services__grid--7 .dc2-svc--more { grid-column: span 2; }
  .dc2-services__grid--7 .dc2-svc { padding: 20px 18px; min-height: auto; border-radius: 18px; }
  /* On 2-col mobile, drop the glyph badge so the card reads as a clean
   * caption + title + lede stack — same rhythm as the "+2 more" card. */
  .dc2-services__grid--7 .dc2-svc:not(.dc2-svc--more) .dc2-svc__glyph { display: none; }
  .dc2-services__grid--7 .dc2-svc:not(.dc2-svc--more) .dc2-svc__plate {
    justify-content: flex-start; margin-bottom: 14px;
  }
  .dc2-services__grid--7 .dc2-svc__no-num { font-size: 19px; }
  .dc2-services__grid--7 .dc2-svc__h { font-size: 19px; line-height: 1.22; margin-bottom: 10px; font-weight: 600; }
  .dc2-services__grid--7 .dc2-svc__body { font-size: 12.5px; line-height: 1.6; font-weight: 500; color: var(--wb-cocoa); }
  /* "+2 more" card on its own row stays comfortable */
  .dc2-services__grid--7 .dc2-svc--more { padding: 20px; }
  .dc2-services__grid--7 .dc2-svc__h--more { font-size: 14px; }
  .dc2-services__grid--7 .dc2-svc__body--more { font-size: 11px; }
}

/* "+8 more" catch-all tile — same restraint as siblings, but dashed gilt
 * border signals "summary" rather than "individual service". */
.dc2-svc.dc2-svc--more {
  background: transparent;
  border: 1px dashed var(--wb-gilt);
  box-shadow: none;
  color: var(--wb-cocoa);
  transition: background 220ms ease;
}
.dc2-svc.dc2-svc--more:hover {
  background: rgba(201, 164, 122, 0.06);
}
.dc2-svc__plate--more {
  border-bottom-color: var(--wb-gilt);
}
.dc2-svc__no--more {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  font-size: 16px; letter-spacing: -0.005em;
  color: var(--wb-rose-deep); /* [A11y] was --wb-gilt 1.75:1 on --cream */
  text-transform: none;
}
.dc2-svc__h--more {
  font-family: var(--serif);
  font-size: 22px; font-weight: 400; line-height: 1.22;
  color: var(--wb-cocoa); opacity: 1;
}
.dc2-svc__body--more {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--serif); font-style: italic;
  font-size: 14px; letter-spacing: 0;
  text-transform: none;
  color: var(--wb-rose-deep); /* [A11y] was --wb-gilt 2.22:1 on light */
}
.dc2-svc__more-arrow { transition: transform 240ms cubic-bezier(0.22,1,0.36,1); }
.dc2-svc.dc2-svc--more:hover .dc2-svc__more-arrow { transform: translateX(6px); }

/* === Services page: anchor chip row === */
.svc-anchors-wrap {
  padding: 18px 32px 0;
}
.svc-anchors {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.svc-anchors::-webkit-scrollbar { height: 4px; }
.svc-anchors::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 999px; }
.svc-anchors__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  background: rgba(255, 252, 247, 0.85);
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.svc-anchors__chip:hover {
  border-color: var(--wb-gilt, #c9a47a);
  background: rgba(201, 164, 122, 0.08);
}
.svc-anchors__chip-no {
  font-family: var(--wb-mono, ui-monospace, "SF Mono", Menlo, monospace);
  color: var(--wb-gilt, #c9a47a);
  font-weight: 600;
}
.svc-anchors__chip-text { color: inherit; }

/* === Services page: 3-col compact card grid === */
.svc-grid-wrap { padding: 36px 32px; }
.svc-grid.svc-grid--v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .svc-grid.svc-grid--v2 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
.svc-card-v2 {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 24px;
}
.svc-card-v2__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.svc-card-v2__num {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--wb-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-gilt, #c9a47a);
}
.svc-card-v2__num-num {
  font-size: 20px;
  letter-spacing: 0.04em;
  color: inherit;
}
.svc-card-v2__glyph {
  font-size: 28px;
  color: var(--wb-gilt, #c9a47a);
  line-height: 1;
}
.svc-card-v2__title {
  margin: 0;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.svc-card-v2__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.78;
}

@media (max-width: 639px) {
  .svc-grid.svc-grid--v2 { grid-template-columns: 1fr; gap: 16px; }
  .svc-card-v2 { padding: 24px 20px; }
  .svc-card-v2__title { font-size: 20px; }
}

/* === Services page: card footer CTA === */
.svc-card-v2__foot {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.svc-card-v2__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-cocoa, #3b2a1f);
  transition: color 0.2s ease;
}
.svc-card-v2__cta:hover { color: var(--wb-gilt, #c9a47a); }
.svc-card-v2__cta-arrow { transition: transform 0.2s ease; }
.svc-card-v2__cta:hover .svc-card-v2__cta-arrow { transform: translateX(4px); }

/* === Services page — collapsible "More details" toggle (2026-05-25) === */
.svc-card-v2__more {
  margin-top: 4px;
}
.svc-card-v2__toggle {
  margin-top: 14px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-gilt, #c9a47a);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}
.svc-card-v2__toggle:hover { color: var(--wb-cocoa, #3b2a1f); }
.svc-card-v2__toggle:focus-visible {
  outline: 2px solid var(--wb-cocoa, #3b2a1f);
  outline-offset: 4px;
  border-radius: 2px;
  color: var(--wb-cocoa, #3b2a1f);
}
.svc-card-v2__toggle-chev {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
}

/* === Services page: Service Network block === */
.svc-network-wrap { padding: 0 32px 36px; }
.svc-network { padding: 40px 48px; }
.svc-network__head { margin-bottom: 24px; }
.svc-network__head .wb-chip { margin-bottom: 12px; }
.svc-network__h {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.svc-network__h-period { color: var(--wb-gilt, #c9a47a); }
.svc-network__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
  margin-top: 18px;
}
.svc-network__col-cap {
  font-family: var(--wb-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wb-gilt, #c9a47a);
  margin-bottom: 10px;
}
.svc-network__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-network__list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
@media (max-width: 639px) {
  .svc-network__grid { grid-template-columns: 1fr; gap: 22px; }
  .svc-network { padding: 28px 22px; }
  .svc-grid-wrap, .svc-network-wrap { padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
 * Edge templates — archive family (.wb-list-*)
 * Used by home.php, tag.php, taxonomy-service.php, archive.php,
 * and search.php (when results > 0). Reuses .br-cases-grid /
 * .br-case for cards — only the hero and pagination are new.
 * ============================================================ */

.wb-list-page-shell { padding-bottom: 64px; }

.wb-list-hero {
  padding: 56px 32px 28px;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.wb-list-hero__chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.wb-list-hero__h {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--wb-cocoa);
  margin: 0 0 8px;
}
.wb-list-hero__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.wb-list-hero__rule { width: 40px; height: 1px; background: var(--wb-gilt); margin: 14px 0 18px; }
.wb-list-hero__lead {
  font-size: 16px; line-height: 1.55;
  color: var(--wb-cocoa-soft);
  max-width: 620px; margin: 0;
}
.wb-list-hero__count { margin-top: 14px; }

.wb-list-grid-wrap { padding: 0 32px 40px; }
.wb-list-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.wb-list-page {
  padding: 8px 32px 0;
  display: flex; justify-content: center; gap: 6px;
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 13px;
}
.wb-list-page .page-numbers {
  display: inline-block;
  min-width: 36px; padding: 8px 12px;
  border: 1px solid var(--wb-gilt-soft);
  border-radius: 999px;
  color: var(--wb-cocoa);
  text-decoration: none;
  text-align: center;
  transition: background 0.15s, color 0.15s;
}
.wb-list-page .page-numbers:hover { background: var(--hover-chip-bg); border-color: var(--hover-chip-border); color: var(--hover-chip-color); }
.wb-list-page .page-numbers.current { background: var(--wb-cocoa); color: #fff; border-color: var(--wb-cocoa); }
.wb-list-page .page-numbers.dots { border: 0; padding: 8px 4px; }
.wb-list-page .prev, .wb-list-page .next { letter-spacing: 0.1em; }

@media (max-width: 768px) {
  .wb-list-hero { padding: 32px 16px 18px; }
  .wb-list-hero__h { font-size: 40px; }
  .wb-list-hero__lead { font-size: 14px; }
  .wb-list-grid-wrap { padding: 0 12px 24px; }
  .wb-list-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .wb-list-page { padding: 8px 12px 0; flex-wrap: wrap; }
  .wb-list-page .page-numbers { min-width: 32px; padding: 6px 10px; font-size: 12px; }
}

/* ============================================================
 * Edge templates — recovery family (.wb-recovery-*)
 * Used by 404.php and search.php (when results = 0). Search-first
 * layout: hero + form + jump links + 6 recent-case grid.
 * ============================================================ */

.wb-recovery-page { padding-bottom: 80px; }

.wb-recovery-hero {
  padding: 72px 32px 18px;
  max-width: 720px; margin: 0 auto;
  text-align: center;
}
.wb-recovery-hero__chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.wb-recovery-hero__h {
  font-family: var(--serif);
  font-size: 56px; font-weight: 300; line-height: 1.05;
  letter-spacing: -0.02em; color: var(--wb-cocoa);
  margin: 0 0 6px;
}
.wb-recovery-hero__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.wb-recovery-hero__sub {
  font-size: 14px; line-height: 1.55;
  color: var(--wb-cocoa-soft);
  max-width: 480px; margin: 14px auto 0;
}

.wb-recovery-tool { max-width: 580px; margin: 28px auto 36px; padding: 0 32px; }
.wb-recovery-tool__form {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--wb-gilt);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  background: #fff;
}
.wb-recovery-tool__form-glyph { color: var(--wb-gilt); font-size: 16px; line-height: 1; }
.wb-recovery-tool__form input[type="search"] {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--serif);
  font-size: 15px; color: var(--wb-cocoa);
}
.wb-recovery-tool__form input[type="search"]::placeholder {
  color: var(--wb-cocoa-soft); font-style: italic;
}
.wb-recovery-tool__form:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(255, 161, 134, 0.18); }
.wb-recovery-tool__form button {
  padding: 10px 18px;
  border: 0;
  background: var(--wb-cocoa); color: #fff;
  border-radius: 999px;
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer;
}
.wb-recovery-tool__form button:hover { background: var(--hover-fill-bg-accent); }
.wb-recovery-tool__jumps {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 18px;
  padding-top: 20px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.wb-recovery-tool__jumps a {
  color: var(--wb-cocoa); text-decoration: none;
  border-bottom: 1px dotted var(--wb-gilt);
  padding-bottom: 2px;
}
.wb-recovery-tool__jumps a:hover { background: var(--hover-chip-bg); border-color: var(--hover-chip-border); color: var(--hover-chip-color); }
.wb-recovery-tool__jumps span { color: var(--wb-cocoa-soft); opacity: 0.5; }

.wb-recovery-suggest { max-width: 1200px; margin: 0 auto; padding: 24px 32px 0; }
.wb-recovery-suggest__h {
  font-family: var(--serif);
  font-size: 28px; font-weight: 300; line-height: 1.15;
  color: var(--wb-cocoa);
  margin: 0 0 6px;
  text-align: center;
}
.wb-recovery-suggest__h em { color: var(--rose); font-style: italic; }
.wb-recovery-suggest__sub {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--wb-cocoa-soft);
  text-align: center;
  margin: 0 0 22px;
}
.wb-recovery-suggest__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}

@media (max-width: 768px) {
  .wb-recovery-hero { padding: 40px 16px 12px; }
  .wb-recovery-hero__h { font-size: 36px; }
  .wb-recovery-tool { padding: 0 16px; }
  .wb-recovery-suggest { padding: 18px 12px 0; }
  .wb-recovery-suggest__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ============================================================
 * Edge templates — search modal + nav search button
 * Modal is rendered once at footer scope (wb-search-modal.php),
 * triggered by the ⌕ button in wb-nav-v2.php.
 * ============================================================ */

.wb-nav-v2__search {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: 38px; height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--wb-gilt);
  border-radius: 999px;
  color: var(--wb-cocoa);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(59, 42, 34, 0.04);
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.wb-nav-v2__search-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
.wb-nav-v2__search:hover {
  background: var(--hover-ghost-bg);
  border-color: var(--hover-ghost-border);
  box-shadow: var(--hover-shadow-button);
}
.wb-nav-v2__search:active { transform: translateY(0.5px); box-shadow: 0 1px 1px rgba(59, 42, 34, 0.05); }
.wb-nav-v2__search:focus-visible { outline: 2px solid var(--wb-cocoa); outline-offset: 3px; }

/* ============================================================
 * Search modal — editorial two-column (2026-05-21)
 * Left col: search input + popular houses + specialisms.
 * Right col: featured recent case study (≥720px only).
 * Input is hairline-only (no pill, no rose halo, no submit button —
 * Enter submits, hint reveals on focus).
 * ============================================================ */
/* DESIGN.md §4 No-Glass: backdrop-filter removed 2026-05-22.
 * Scrim is now an opaque cocoa-alpha overlay (still reads "modal
 * dimming"); the panel beneath uses warm-paper instead of #fff. */
.wb-search-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: 80px 24px 24px;
  background: rgba(40, 22, 15, 0.78);
  /* Scroll the overlay itself when the panel is taller than the viewport
   * (short laptop windows, long service-chip names). Without this the body is
   * scroll-locked AND the fixed overlay has overflow:visible, so anything below
   * the fold is unreachable — lower chips / "All services" / the featured case
   * can't be clicked. overscroll-behavior keeps the scroll from chaining to the
   * locked page behind it. (2026-06-13) */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.wb-search-modal[data-open="true"] { display: flex; }
/* Body scroll-lock rule lives further down (was already there before Stage 2). */

.wb-search-modal__panel {
  width: 100%; max-width: 880px;
  background: var(--wb-paper-warm);
  border: 1px solid var(--wb-gilt-soft);
  border-radius: 14px;
  box-shadow: 0 24px 60px -20px rgba(40, 22, 15, 0.4);
  padding: 28px 32px;
}

.wb-search-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.wb-search-modal__title {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--wb-cocoa);
}
/* Bumped to 44×44 for WCAG 2.5.5 minimum target size (2026-05-22, UI-6). */
.wb-search-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--wb-cocoa-soft);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s, color 0.15s;
}
.wb-search-modal__close:focus-visible {
  outline: 2px solid var(--wb-cocoa);
  outline-offset: 2px;
}
.wb-search-modal__close:hover {
  background: var(--hover-ghost-bg);
  color: var(--wb-cocoa);
}

.wb-search-modal__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 36px;
}
.wb-search-modal__main { min-width: 0; }

/* Search input — hairline bottom, no pill, no halo, no submit button */
.wb-search-modal__form {
  display: flex; align-items: center; gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--wb-cocoa);
  border-radius: 0;
  padding: 8px 0 10px;
  margin-bottom: 24px;
}
.wb-search-modal__form input[type="search"] {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  color: var(--wb-cocoa);
  padding: 0;
}
.wb-search-modal__form input[type="search"]::placeholder {
  color: var(--wb-cocoa-soft);
  font-style: italic;
  opacity: 0.7;
}
.wb-search-modal__form:focus-within { box-shadow: 0 1px 0 var(--wb-cocoa); }
.wb-search-modal__form-hint {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-rose-deep); /* [A11y] was --wb-gilt 2.22:1 on paper-warm panel */
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.wb-search-modal__form-hint kbd {
  display: inline-block;
  font-family: var(--sans);
  font-size: 9px;
  padding: 2px 6px;
  border: 1px solid var(--wb-gilt-soft);
  border-radius: 4px;
  background: var(--wb-paper-warm);
  color: var(--wb-cocoa);
  margin-left: 4px;
  letter-spacing: 0.08em;
}
.wb-search-modal__form:focus-within .wb-search-modal__form-hint { opacity: 1; }

.wb-search-modal__section { padding: 14px 0; border-top: 1px solid var(--wb-paper-warm); }
.wb-search-modal__section:first-of-type { border-top: 0; padding-top: 0; }
.wb-search-modal__section-label {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--wb-rose-deep); /* [A11y] was --wb-gilt 2.22:1 */
  margin-bottom: 10px;
}
.wb-search-modal__list { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-search-modal__list a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--wb-gilt-soft);
  border-radius: 999px;
  color: var(--wb-cocoa);
  font-size: 12px;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.wb-search-modal__list a:hover { background: var(--hover-chip-bg); border-color: var(--hover-chip-border); color: var(--hover-chip-color); }
.wb-search-modal__see-all {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-cocoa);
  text-decoration: none;
}
.wb-search-modal__see-all:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.wb-search-modal__recent {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.wb-search-modal__recent-label {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wb-rose-deep); /* [A11y] was --wb-gilt 2.22:1 */
  padding-bottom: 4px;
}
.wb-search-modal__recent li a {
  display: block; padding: 6px 0;
  color: var(--wb-cocoa-soft);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px dotted var(--wb-gilt-soft);
}
.wb-search-modal__recent li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: var(--wb-cocoa);
}
.wb-search-modal__recent[hidden] { display: none; }

/* Featured case study (right column) */
.wb-search-modal__featured-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.wb-search-modal__featured-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--wb-paper-warm);
  margin-bottom: 14px;
}
.wb-search-modal__featured-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.wb-search-modal__featured-link:hover .wb-search-modal__featured-media img { transform: scale(1.04); }
.wb-search-modal__featured-eyebrow {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wb-rose-deep); /* [A11y] was --wb-gilt 2.22:1 */
}
.wb-search-modal__featured-brand {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wb-cocoa);
  margin-top: 6px;
}
.wb-search-modal__featured-title {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
  color: var(--wb-cocoa);
  margin: 6px 0 8px;
  font-weight: 400;
}
.wb-search-modal__featured-lede {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--wb-cocoa-soft);
  margin: 0 0 12px;
}
.wb-search-modal__featured-cta {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wb-cocoa);
}
.wb-search-modal__featured-link:hover .wb-search-modal__featured-cta {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.wb-search-modal-open { overflow: hidden; }

@media (max-width: 720px) {
  .wb-search-modal__body { grid-template-columns: 1fr; gap: 0; }
  .wb-search-modal__featured { display: none; }
  .wb-search-modal__panel { padding: 22px; max-width: 100%; }
  .wb-search-modal__form input[type="search"] { font-size: 18px; }
}
@media (max-width: 540px) {
  .wb-search-modal { padding: 24px 12px; align-items: stretch; }
}

/* ============================================================
 * Journal repurpose (2026-05-21) — single-entry article layout
 * ============================================================ */

.wb-journal-entry-page { padding-bottom: 96px; }

.wb-journal-entry-hero {
  max-width: 720px; margin: 56px auto 28px; padding: 0 32px;
  text-align: left;
}
.wb-journal-entry-hero__topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.wb-journal-entry-hero__date {
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wb-cocoa-soft);
}
.wb-journal-entry-hero__h {
  font-family: var(--serif);
  font-size: 52px; font-weight: 300; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--wb-cocoa);
  margin: 0 0 8px;
}
.wb-journal-entry-hero__h em { color: var(--rose); font-style: italic; font-weight: 200; }
.wb-journal-entry-hero__rule { width: 40px; height: 1px; background: var(--wb-gilt); margin: 14px 0 18px; }
.wb-journal-entry-hero__lede {
  font-family: var(--serif);
  font-size: 18px; line-height: 1.6;
  color: var(--wb-cocoa-soft);
  margin: 0;
}

.wb-journal-entry-figure {
  max-width: 980px; margin: 24px auto 36px; padding: 0 32px;
}
.wb-journal-entry-figure img {
  width: 100%; height: auto; display: block;
  border-radius: 18px;
}

.wb-journal-entry-body {
  max-width: 660px; margin: 0 auto; padding: 0 32px;
  font-family: var(--serif);
  font-size: 18px; line-height: 1.75; color: var(--wb-cocoa);
}
.wb-journal-entry-body p { margin: 0 0 1.2em; }
.wb-journal-entry-body h2 {
  font-family: var(--serif);
  font-size: 28px; font-weight: 400; line-height: 1.2;
  margin: 2em 0 0.6em;
  color: var(--wb-cocoa);
}
.wb-journal-entry-body h3 {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500; line-height: 1.25;
  margin: 1.8em 0 0.4em;
  color: var(--wb-cocoa);
}
.wb-journal-entry-body ul, .wb-journal-entry-body ol {
  margin: 0 0 1.2em 1.4em; padding: 0;
}
.wb-journal-entry-body li { margin: 0 0 0.4em; }
/* Stage 3 UI-13: respect DESIGN.md §5 side-stripe ban. Use 1px hairline
 * top + leading-diamond signature instead of the 2px gilt side-stripe. */
.wb-journal-entry-body blockquote {
  margin: 1.4em -16px;
  padding: 22px 24px 18px;
  border-top: 1px solid var(--wb-line);
  font-style: italic; color: var(--wb-cocoa-soft);
  position: relative;
}
.wb-journal-entry-body blockquote::before {
  content: ''; position: absolute;
  top: -4px; left: 24px;
  width: 8px; height: 8px;
  background: var(--wb-gilt);
  transform: rotate(45deg);
  border-radius: 1px;
}
.wb-journal-entry-body figure {
  margin: 1.6em 0;
}
.wb-journal-entry-body figure.alignwide {
  margin-left: calc(50% - 50vw + 32px);
  margin-right: calc(50% - 50vw + 32px);
  max-width: 980px;
}
.wb-journal-entry-body figure img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
}
.wb-journal-entry-body figcaption {
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--wb-cocoa-soft);
  text-align: center;
  margin-top: 10px;
}
.wb-journal-entry-body a {
  color: var(--rose); text-decoration: underline; text-decoration-color: var(--wb-gilt-soft);
}
.wb-journal-entry-body a:hover { text-decoration-color: var(--wb-cocoa); text-decoration-thickness: 2px; }

.wb-journal-entry-meta {
  max-width: 720px; margin: 48px auto 0; padding: 0 32px;
}
.wb-journal-entry-meta__rule {
  width: 100%; height: 1px; background: var(--wb-gilt-soft); margin-bottom: 24px;
}
.wb-journal-entry-meta__atelier {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.wb-journal-entry-meta__pub {
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wb-cocoa-soft);
}
.wb-journal-entry-meta__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.wb-journal-entry-meta__cta {
  flex: 1; min-width: 200px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
  text-align: center; text-decoration: none;
}
.wb-journal-entry-meta__cta--ghost {
  border: 1px solid var(--wb-cocoa); color: var(--wb-cocoa);
}
.wb-journal-entry-meta__cta--ghost:hover { background: var(--hover-ghost-bg); }
.wb-journal-entry-meta__cta--filled {
  background: var(--wb-cocoa); color: #fff;
}
.wb-journal-entry-meta__cta--filled:hover { background: var(--hover-fill-bg-accent); }

@media (max-width: 768px) {
  .wb-journal-entry-hero { padding: 0 16px; margin-top: 32px; }
  .wb-journal-entry-hero__h { font-size: 36px; }
  .wb-journal-entry-hero__lede { font-size: 16px; }
  .wb-journal-entry-figure { padding: 0 12px; margin: 16px auto 24px; }
  .wb-journal-entry-body { padding: 0 18px; font-size: 17px; }
  .wb-journal-entry-body h2 { font-size: 24px; }
  .wb-journal-entry-body h3 { font-size: 20px; }
  .wb-journal-entry-body figure.alignwide {
    margin-left: calc(50% - 50vw + 12px);
    margin-right: calc(50% - 50vw + 12px);
  }
  .wb-journal-entry-meta { padding: 0 18px; margin-top: 32px; }
  .wb-journal-entry-meta__cta { min-width: 0; width: 100%; }
}

/* ============================================================
 * Journal repurpose — chip filter row on /journal/
 * ============================================================ */

.wb-journal-chips {
  max-width: 980px; margin: 0 auto 28px; padding: 0 32px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.wb-journal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--wb-gilt-soft);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans, 'Jost', sans-serif);
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--wb-cocoa); text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wb-journal-chip:hover { background: var(--hover-chip-bg); border-color: var(--hover-chip-border); color: var(--hover-chip-color); }
.wb-journal-chip--active {
  background: var(--wb-cocoa); color: #fff; border-color: var(--wb-cocoa);
}
.wb-journal-chip--active:hover { background: var(--wb-cocoa); color: #fff; border-color: var(--wb-cocoa); }
.wb-journal-chip__n {
  font-size: 10px; letter-spacing: 0.1em;
  opacity: 0.7;
}

@media (max-width: 768px) {
  .wb-journal-chips { padding: 0 16px; }
  .wb-journal-chip { padding: 7px 12px; font-size: 11.5px; }
}

/* =========================================================================
   Location page (/outlet/<slug>/) — single-outlet landing
   ========================================================================= */
.loc-page { background: var(--wb-paper-warm); }

.loc-hero-wrap {
	margin: 24px auto 0;
	max-width: 1200px;
	padding: 0 28px;
}
/* Hero override of ct-outlet__map for the full-width single-outlet page:
 *   1. 14px card-scale radius is too small for a 1200px hero — restore 32px.
 *   2. 4/3 is the right shape for mobile (matches 16:9 source photos with
 *      minimal crop) but on desktop produces an ~860px hero that overshoots
 *      the first fold. Use 16/9 on desktop for a cinematic, fold-friendly
 *      ratio that also happens to be the native ratio of plaza/trx photos. */
.loc-hero-wrap .ct-outlet__map {
	border-radius: 32px;
	aspect-ratio: 21 / 9;
}
@media (max-width: 760px) {
	.loc-hero-wrap .ct-outlet__map { aspect-ratio: 4 / 3; }
}

.loc-meta-wrap {
	margin: 32px auto 0;
	max-width: 1200px;
	padding: 0 28px;
}
.loc-meta {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	padding: 32px;
	background: var(--wb-paper-warm);
	border: 1px solid var(--wb-gilt-soft);
	border-radius: 32px;
}
.loc-meta__col { display: flex; flex-direction: column; gap: 8px; }
.loc-meta__val { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--wb-cocoa); }
.loc-meta__val a { color: var(--wb-cocoa); text-decoration: none; border-bottom: 1px solid var(--wb-gilt); }
.loc-meta__val a:hover { color: var(--wb-cocoa-soft); }

@media (max-width: 760px) {
	.loc-meta { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
}

.loc-getting-here-wrap {
	margin: 48px auto 0;
	max-width: 1000px;
	padding: 0 28px;
}
.loc-getting-here__head { text-align: center; }
.loc-getting-here__h {
	font-family: var(--serif);
	font-size: 36px;
	font-weight: 400;
	margin: 16px 0 32px;
}
.loc-getting-here__rows { display: flex; flex-direction: column; gap: 20px; }
.loc-getting-here__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 24px;
	padding: 16px 0;
	border-top: 1px solid var(--wb-gilt-soft);
}
.loc-getting-here__row p { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--wb-cocoa); }
.loc-getting-here__row--cta { border-top: none; justify-content: center; padding-top: 16px; }

.loc-nearby-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-nearby-chip {
	padding: 6px 12px;
	background: var(--wb-paper-warm);
	border: 1px solid var(--wb-gilt-soft);
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 13px;
	color: var(--wb-cocoa);
}

.loc-maps-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	background: var(--wb-cocoa);
	color: var(--wb-paper-warm);
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	transition: background 0.2s;
}
.loc-maps-btn:hover { background: var(--wb-cocoa-soft); }

/* ── Outlet map embed (P5, 2026-06-04) — keyless lazy iframe ── */
.loc-map-embed-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px 64px;
}
.loc-map-embed {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--wb-line);
	box-shadow: 0 18px 40px -28px rgba(59, 42, 34, 0.45);
	line-height: 0;
	background: var(--wb-paper-warm);
}
.loc-map-embed iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}
@media (max-width: 640px) {
	.loc-map-embed iframe { height: 320px; }
}

/* ── Visible Google rating pill (P5) — brand-wide; mirrors homepage look but
      uses cocoa (not rose) for AA contrast on warm paper ── */
.loc-rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding: 8px 15px;
	border: 1px solid var(--wb-line);
	border-radius: 999px;
	background: var(--wb-paper-warm);
	text-decoration: none;
	color: var(--wb-cocoa);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.loc-rating:hover { transform: translateY(-1px); border-color: var(--wb-gilt); }
.loc-rating:focus-visible { outline: 2px solid var(--wb-cocoa); outline-offset: 3px; }
.loc-rating__stars { color: var(--wb-rose-deep); font-size: 13px; letter-spacing: 1px; } /* [A11y] was --wb-gilt 2.22:1 on paper-warm */
.loc-rating__num {
	font-family: var(--wb-serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--wb-cocoa);
	line-height: 1;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
}
.loc-rating__of { font-size: 12px; color: var(--wb-cocoa-soft); font-style: italic; }
.loc-rating__g { display: inline-block; flex-shrink: 0; }
.loc-rating__label {
	font-size: 11px;
	color: var(--wb-cocoa-soft);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.loc-rating__arrow { margin-left: 2px; opacity: 0.5; transition: transform 0.2s ease, opacity 0.2s ease; }
.loc-rating:hover .loc-rating__arrow { transform: translateX(3px); opacity: 1; }

@media (max-width: 760px) {
	.loc-getting-here__row { grid-template-columns: 1fr; gap: 8px; }
}

.loc-services-back-wrap {
	margin: 48px auto 0;
	max-width: 720px;
	padding: 32px 28px;
	text-align: center;
}
.loc-services-back__eyebrow,
.loc-cases__eyebrow {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}
.loc-services-back__h {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
	margin: 0 0 16px;
	color: var(--wb-cocoa);
}
.loc-services-back__p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 24px;
	color: var(--wb-cocoa);
}
.loc-services-back__cta {
	display: inline-block;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--wb-cocoa);
	text-decoration: none;
	border-bottom: 1px solid var(--wb-gilt);
	padding-bottom: 2px;
}

/* Pre-owned shelf section (Stage 4, 2026-05-22): visible on /outlet/<slug>/.
 * Matches loc-services-back in scale and layout; uses wb-platform--accent
 * (rose-wash) tint to differentiate from the cocoa "what lives here" block
 * just above. The em italic in the headline follows the DESIGN.md
 * italic-em doctrine. */
.loc-preowned-wrap {
	margin: 48px auto 0;
	max-width: 720px;
}
.loc-preowned {
	background: var(--wb-rose-tint);
	border: 1px solid var(--wb-gilt-soft);
	border-radius: 32px;
	padding: 36px 32px;
	text-align: center;
}
.loc-preowned__eyebrow {
	display: flex;
	justify-content: center;
	margin-bottom: 16px;
}
.loc-preowned__h {
	font-family: var(--serif);
	font-size: 28px;
	font-weight: 400;
	margin: 0 0 16px;
	color: var(--wb-cocoa);
}
.loc-preowned__h em {
	font-style: italic;
}
.loc-preowned__p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 auto 24px;
	max-width: 560px;
	color: var(--wb-cocoa);
}
.loc-preowned__cta {
	display: inline-block;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--wb-cocoa);
	text-decoration: none;
	border-bottom: 1px solid var(--wb-gilt);
	padding-bottom: 2px;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.loc-preowned__cta:hover {
	color: var(--rose);
	border-bottom-color: var(--rose);
}
.loc-preowned__cta:focus-visible {
	outline: 2px solid var(--wb-cocoa);
	outline-offset: 3px;
	border-radius: 2px;
}
@media (max-width: 600px) {
	.loc-preowned { padding: 28px 20px; border-radius: 22px; }
	.loc-preowned__h { font-size: 24px; }
}

.loc-cases-wrap {
	margin: 48px auto 0;
	max-width: 1200px;
	padding: 0 28px;
}
.loc-cases__h {
	font-family: var(--serif);
	font-size: 32px;
	font-weight: 400;
	margin: 0 0 24px;
	text-align: center;
	color: var(--wb-cocoa);
}
.loc-cases__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.loc-case {
	display: block;
	background: var(--wb-paper-warm);
	border: 1px solid var(--wb-gilt-soft);
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s;
}
.loc-case:hover { transform: translateY(-2px); }
.loc-case__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.loc-case__body { padding: 12px 14px; }
.loc-case__title {
	margin: 0;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wb-cocoa);
}

.loc-cta-wrap {
	margin: 48px auto;
	max-width: 1000px;
	padding: 0 28px;
}
.loc-cta { text-align: center; padding: 48px 32px; }
.loc-cta__cap { display: inline-block; margin-bottom: 16px; }
.loc-cta__h {
	font-family: var(--serif);
	font-size: 40px;
	font-weight: 400;
	margin: 0 0 16px;
}
.loc-cta__p {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 32px;
	color: var(--wb-cocoa);
	max-width: 540px;
	margin-inline: auto;
}
.loc-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.loc-cta__btn {
	padding: 14px 28px;
	border-radius: 999px;
	text-decoration: none;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 500;
	transition: all 0.2s;
}
.loc-cta__btn--wa { background: var(--wb-cocoa); color: var(--wb-paper-warm); }
.loc-cta__btn--wa:hover { background: var(--wb-cocoa-soft); }
.loc-cta__btn--out { background: transparent; color: var(--wb-cocoa); border: 1px solid var(--wb-cocoa); }
.loc-cta__btn--out:hover { background: var(--wb-cocoa); color: var(--wb-paper-warm); }

/* =========================================================================
   Homepage: Visit-the-ateliers section
   ========================================================================= */
.dc2-locations-wrap {
	margin: 0 auto;
	padding: 64px 28px;
	background: var(--wb-paper-warm);
}
.dc2-locations { max-width: 1200px; margin: 0 auto; }
.dc2-locations__head { text-align: center; margin-bottom: 40px; }
.dc2-locations__h {
	font-family: var(--serif);
	font-size: clamp(32px, 4vw, 44px);
	font-weight: 400;
	margin: 16px 0 12px;
	color: var(--wb-cocoa);
}
.dc2-locations__sub {
	font-family: var(--sans);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wb-cocoa-soft);
	max-width: 540px;
	margin: 0 auto;
}
.dc2-locations__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.dc2-locations__card {
	background: var(--wb-paper-warm);
	color: var(--wb-cocoa);
	border: 1px solid var(--wb-gilt-soft);
	border-radius: 32px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
/* Plaza Damas (primary): tonal inversion instead of a perimeter gilt accent */
.dc2-locations__card--primary {
	background: var(--wb-cocoa);
	color: var(--wb-paper-warm);
	border: 1px solid var(--wb-gilt);
}
.dc2-locations__card--primary .dc2-locations__addr,
.dc2-locations__card--primary .dc2-locations__name {
	color: var(--wb-paper-warm);
}
/* Eyebrow tag ("BOUTIQUE · MAIN") and hours line on the dark cocoa card —
 * default .wb-mc is cocoa-soft (low contrast on cocoa). Lift to gilt so
 * both the boutique tag and the open hours read clearly. */
.dc2-locations__card--primary .wb-mc {
	color: var(--wb-gilt);
}
.dc2-locations__card--primary .dc2-locations__cta {
	color: var(--wb-paper-warm);
	border-top-color: var(--wb-gilt-soft);
}
.dc2-locations__card--primary .dc2-locations__cta:hover {
	color: var(--wb-gilt);
}
/* Singapore (external site): rose-wash accent + clear external signal */
.dc2-locations__card--external {
	background: var(--wb-rose-tint);
	border-color: var(--wb-rose-light);
}
.dc2-locations__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; }
.dc2-locations__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dc2-locations__name {
	margin: 0;
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 400;
	color: var(--wb-cocoa);
}
.dc2-locations__addr {
	margin: 0;
	font-family: var(--sans);
	font-size: 13px;
	line-height: 1.55;
	color: var(--wb-cocoa-soft);
}
.dc2-locations__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 0 0;
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wb-cocoa);
	text-decoration: none;
	border-top: 1px solid var(--wb-gilt-soft);
	margin-inline: -24px;
	padding-inline: 24px;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.dc2-locations__cta:hover { color: var(--wb-cocoa-soft); }

@media (max-width: 980px) {
	.dc2-locations__grid { grid-template-columns: 1fr; gap: 16px; }
	.dc2-locations__img { aspect-ratio: 16 / 10; }
}

/* =========================================================================
   Nav v2: Visit ▾ dropdown
   ========================================================================= */
.wb-nav-v2__dropdown {
	position: relative;
	display: inline-block;
}
.wb-nav-v2__dropdown > summary {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	list-style: none;
}
.wb-nav-v2__dropdown > summary::-webkit-details-marker { display: none; }
.wb-nav-v2__chev { font-size: 10px; transition: transform 0.2s; }
.wb-nav-v2__dropdown[open] .wb-nav-v2__chev { transform: rotate(180deg); }

.wb-nav-v2__dropdown-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--wb-gilt-soft);
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	z-index: 100;
}
.wb-nav-v2__dropdown-link {
	padding: 8px 12px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--wb-ink);
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.15s;
}
.wb-nav-v2__dropdown-link:hover { background: var(--wb-paper-warm); }

.wb-nav-v2__drawer-group { padding: 8px 0; }
.wb-nav-v2__drawer-grouph {
	padding: 8px 18px;
	font-family: var(--sans);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wb-cocoa);
}
.wb-nav-v2__drawer-link--child { padding-left: 32px; }

/* Hide dropdown on mobile (drawer takes over) */
@media (max-width: 880px) {
	.wb-nav-v2__dropdown-panel { display: none; }
	.wb-nav-v2__dropdown[open] .wb-nav-v2__dropdown-panel { display: none; }
}

/* Tertiary action — italic serif typeset link below the WA + Directions
 * pill row (sibling of .ct-outlet__actions, not a flex item inside it).
 * Width naturally shrinks to text, so the underline lives under the link
 * not across the card. Refined 2026-05-22. */
.ct-outlet__btn--details {
	margin-top: 14px;
	padding: 2px 0;
	color: var(--wb-cocoa);
	font-family: var(--serif);
	font-size: 14px; letter-spacing: 0;
	font-style: italic;
	font-weight: 400;
	display: inline-flex; align-items: center; gap: 4px;
	text-decoration: none;
	position: relative;
}
.ct-outlet--primary .ct-outlet__btn--details { color: var(--wb-gilt); }
/* Animated underline — text-width by definition because the link is
 * inline-flex on its own line; the ::after width is 100% of the link's
 * own box, which now equals the text length. */
.ct-outlet__btn--details::after {
	content: ''; position: absolute;
	left: 0; bottom: 0;
	height: 1px; width: 100%;
	background: currentColor;
	opacity: 0.35;
	transform: scaleX(0.4); transform-origin: left;
	transition: opacity 200ms ease, transform 260ms cubic-bezier(0.22,1,0.36,1);
}
.ct-outlet__btn--details:hover::after {
	opacity: 1; transform: scaleX(1);
}

/* ─── Case-study restore-at-atelier CTA (Tier 1, 2026-05-23) ─── */
.cs-restore-cta-wrap {
	max-width: 920px;
	margin: 56px auto 24px;
	padding: 0 24px;
}
.cs-restore-cta {
	padding: 40px 32px;
}
.cs-restore-cta__h {
	font-family: var(--serif); /* was var(--wb-font-display, …) — that var was never defined; the 'Fraunces' fallback string did the work (fixed 2026-06-11) */
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.15;
	margin: 12px 0 16px;
}
.cs-restore-cta__h em {
	font-style: italic;
}
.cs-restore-cta__p {
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 540px;
}
.cs-restore-cta__p a {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cs-restore-cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.cs-restore-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.cs-restore-cta__btn--wa {
	background: #25D366;
	color: #fff;
}
.cs-restore-cta__btn--wa:hover {
	transform: translateY(-1px);
}

/* ─── Brand archive → services cross-link (Tier 1, 2026-05-23) ─── */
.ba-services-intro-wrap {
	max-width: 980px;
	margin: 24px auto 36px;
	padding: 0 24px;
}
.ba-services-intro {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wb-cocoa-65, #6a5946);
	margin: 0;
}
.ba-services-intro__link {
	display: inline-block;
	margin-left: 6px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ============================================================
 * Home — Journal latest 3 (R4 new section)
 * ============================================================ */
.dc2-journal {
	padding: 80px 0;
	background: var(--wb-paper-warm);
}
.dc2-journal__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
	padding: 0 24px;
}
.dc2-journal__sub-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}
.dc2-journal__sub-rule {
	flex: 1;
	max-width: 60px;
	height: 1px;
	background: var(--wb-gilt-soft);
}
.dc2-journal__sub-text {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wb-gilt);
}
.dc2-journal__h {
	font-family: var(--serif);
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--wb-cocoa);
	margin: 0 0 12px;
}
.dc2-journal__h em { font-style: italic; }
.dc2-journal__lede {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wb-cocoa-soft);
	margin: 0;
}
.dc2-journal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}
.dc2-journal__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--cream);
	border: 1px solid var(--wb-line);
	border-radius: 18px;
	overflow: hidden;
	padding-bottom: 22px;
}
.dc2-journal__card-img {
	display: block;
	overflow: hidden;
}
.dc2-journal__card-img img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.dc2-journal__card:hover .dc2-journal__card-img img {
	transform: scale(1.03);
}
.dc2-journal__card-title {
	font-family: var(--serif);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 20px 0;
	color: var(--wb-cocoa);
}
.dc2-journal__card-title a {
	color: inherit;
	text-decoration: none;
}
.dc2-journal__card-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dc2-journal__card-meta {
	font-size: 12px;
	color: var(--wb-cocoa-soft);
	margin: 0 20px;
}
.dc2-journal__card-link {
	display: inline-block;
	margin: 6px 20px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--wb-gilt);
	text-decoration: none;
	letter-spacing: 0.02em;
	margin-top: auto;
}
.dc2-journal__card-link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.dc2-journal__footer {
	text-align: center;
	margin-top: 40px;
	padding: 0 24px;
}
.dc2-journal__footer a {
	font-size: 14px;
	font-weight: 500;
	color: var(--wb-gilt);
	text-decoration: none;
	letter-spacing: 0.02em;
}
.dc2-journal__footer a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
@media (max-width: 600px) {
	.dc2-journal {
		padding: 60px 0;
	}
	.dc2-journal__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
 * About — Our process (R4 structural swap replacing Certifications)
 * ============================================================ */
.ab-process-wrap {
	padding: 0 20px 40px;
}
.ab-process {
	max-width: 1060px;
	margin: 0 auto;
	padding: 36px 40px;
}
.ab-process__h {
	font-family: var(--serif);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wb-cocoa);
	margin: 14px 0 28px;
}
.ab-process__h em { font-style: italic; }
.ab-process__list {
	counter-reset: ab-process;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}
.ab-process__list li {
	counter-increment: ab-process;
	position: relative;
	padding-top: 14px;
	border-top: 1px solid var(--wb-gilt-soft);
}
.ab-process__list li::before {
	content: counter(ab-process, decimal-leading-zero);
	display: block;
	font-family: var(--serif);
	font-size: 13px;
	color: var(--wb-gilt);
	font-style: italic;
	margin-bottom: 8px;
}
.ab-process__list h3 {
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 500;
	color: var(--wb-cocoa);
	margin: 0 0 8px;
}
.ab-process__list p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wb-cocoa-soft);
	margin: 0;
}
@media (max-width: 600px) {
	.ab-process {
		padding: 28px 20px;
	}
	.ab-process__list {
		grid-template-columns: 1fr;
	}
}

/* === Services page — honest limit + inspect first sub-elements (R2 2026-05-24) === */
.svc-card-v2__honest,
.svc-card-v2__inspect {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wb-cocoa, #3b2a1f);
  opacity: 0.82;
}
.svc-card-v2__honest-label,
.svc-card-v2__inspect-label {
  display: block;
  font-family: var(--serif, 'Jost', system-ui, sans-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--wb-gilt, #c9a47a);
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}

/* === Services page — closing CTA actions group (primary + secondary) === */
.svc-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.svc-cta__secondary {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.svc-cta__secondary:hover { color: #fff; }

@media (max-width: 639px) {
  .svc-cta__actions { width: 100%; }
  .svc-cta__secondary { font-size: 12px; }
}

/* Backward-compat anchor targets — empty inline element with a real (zero-height) layout box.
   display: contents on an empty element generates NO box and breaks scroll-to-fragment;
   display: block + height/width 0 keeps the element addressable for /service/#<legacy-id>
   without disturbing the surrounding flow. Lives inside <article> so the scroll lands on
   the card containing it. — Task 8 / services-12 plan */
.wb-legacy-anchor { display: block; width: 0; height: 0; overflow: hidden; }

/* =====================================================================
 * Quote page — WhatsApp-first redesign (2026-05-25)
 * Three full-width sections + reused FAQ + sticky bar.
 * ===================================================================== */

/* --- Section spacing (consistent with other dc-page sections) --- */
.qt-cta-wrap,
.qt-prep-wrap,
.qt-next-wrap { padding: 48px 24px; }

@media (min-width: 768px) {
    .qt-cta-wrap,
    .qt-prep-wrap,
    .qt-next-wrap { padding: 72px 48px; }
}

/* --- Primary CTA card --- */
.qt-cta {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 28px;
}

@media (min-width: 768px) {
    .qt-cta { padding: 56px 48px; }
}

.qt-cta__h {
    font-family: var(--wb-serif, 'Jost', sans-serif);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 400;
    line-height: 1.15;
    margin: 18px 0 14px;
    color: var(--wb-ink, #1f1a17);
}

.qt-cta__h em {
    font-style: italic;
    color: var(--wb-rose, #d9a892);
}

.qt-cta__p {
    color: var(--wb-ink-soft, #5a504a);
    line-height: 1.55;
    margin: 0 auto 28px;
    max-width: 52ch;
}

.qt-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #25d366;
    /* Dark green text on WhatsApp brand green clears WCAG AA (~8.6:1)
     * while preserving brand colour. White-on-#25d366 was 1.98:1 — the
     * a11y review on 2026-05-25 flagged it as the page's primary CTA. */
    color: #053a18;
    font-family: var(--wb-sans, 'Jost', sans-serif);
    font-weight: 700;
    font-size: 16px;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.28);
}

.qt-cta__btn:hover,
.qt-cta__btn:focus-visible {
    background: #1fb958;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.34);
    color: #053a18;
}

.qt-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    /* Dark green circle + WhatsApp-green check. Circle vs #25d366 button
     * background is 3.27:1, clearing WCAG 1.4.11 non-text contrast (3:1).
     * Tonally pairs with the dark #053a18 button label — single visual
     * centre instead of competing whites. (a11y re-audit 2026-05-25 P2.) */
    background: #053a18;
    color: #25d366;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
}

.qt-cta__alt {
    margin-top: 18px;
    font-size: 14px;
    color: var(--wb-ink-soft, #5a504a);
}

.qt-cta__alt a {
    color: var(--wb-cocoa, #6b4f3a);
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Inline-block + padding/negative-margin reaches >=24x24 effective
     * touch target (WCAG 2.2 SC 2.5.8) without disturbing the visual
     * baseline of the surrounding "or … or …" line. */
    display: inline-block;
    padding: 6px 4px;
    margin: -6px -4px;
}

.qt-cta__alt a:hover,
.qt-cta__alt a:focus-visible {
    color: var(--wb-rose, #d9a892);
}

/* --- Preparation checklist (6-photo grid) --- */
.qt-prep {
    max-width: 1080px;
    margin: 0 auto;
}

.qt-prep__head {
    text-align: center;
    margin-bottom: 32px;
}

.qt-prep__h {
    font-family: var(--wb-serif, 'Jost', sans-serif);
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 400;
    line-height: 1.2;
    margin: 14px 0 10px;
    color: var(--wb-ink, #1f1a17);
}

.qt-prep__h em {
    font-style: italic;
    color: var(--wb-rose, #d9a892);
}

.qt-prep__sub {
    color: var(--wb-ink-soft, #5a504a);
    max-width: 52ch;
    margin: 0 auto;
    line-height: 1.55;
}

.qt-prep__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 540px) {
    .qt-prep__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
    .qt-prep__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
}

.qt-prep__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 12px;
    background: var(--wb-paper-warm, #f4ede4);
    border-radius: 12px;
    text-align: center;
}

.qt-prep__svg {
    color: var(--wb-cocoa, #6b4f3a);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.qt-prep__svg svg { width: 100%; height: 100%; }

.qt-prep__label {
    font-family: var(--wb-sans, 'Jost', sans-serif);
    font-size: 13px;
    color: var(--wb-ink, #1f1a17);
    font-weight: 500;
}

/* --- What happens next + Trust --- */
.qt-next {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    gap: 24px;
}

@media (min-width: 900px) {
    .qt-next { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

.qt-next__timeline-card { padding: 32px 28px; }

.qt-next__list {
    margin-top: 22px;
    display: grid;
    gap: 18px;
}

.qt-next__row {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;
}

.qt-next__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: var(--wb-serif, 'Jost', sans-serif);
    font-size: 14px;
    margin-top: 2px;
}

.qt-next__when {
    color: #fff;
    font-family: var(--wb-sans, 'Jost', sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.qt-next__what {
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    line-height: 1.5;
}

.qt-next__trust { padding: 28px; }

.qt-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.qt-trust-avatars {
    display: inline-flex;
}

.qt-trust-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wb-rose, #d9a892), var(--wb-cocoa, #6b4f3a));
    margin-left: -8px;
    border: 2px solid var(--wb-paper, #fbf6ef);
}

.qt-trust-avatar:first-child { margin-left: 0; }

.qt-trust__main { flex: 1; min-width: 180px; }

.qt-trust__h {
    font-family: var(--wb-sans, 'Jost', sans-serif);
    font-weight: 600;
    color: var(--wb-ink, #1f1a17);
    font-size: 15px;
    margin-bottom: 2px;
}

.qt-trust__sub {
    color: var(--wb-ink-soft, #5a504a);
    font-size: 13px;
}

.qt-trust__stars {
    color: var(--wb-gilt, #b08a5f);
    letter-spacing: 0.06em;
    font-size: 18px;
}

/* ─── B&A chip row — foldable (15-term taxonomy refactor, 2026-05-28) ───── */
.bna-filter-row {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.bna-filter-row[data-collapsed="true"] .bna-filter--overflow {
	display: none;
}
.bna-filter-show-more {
	background: transparent;
	border: 1px solid var(--wb-cocoa-soft, #c9bfae);
	color: var(--wb-cocoa, #3a2e1f);
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.875rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}
.bna-filter-show-more:hover {
	background: var(--wb-rose-tint, #fbeee8);
}
.bna-filter-show-more:focus-visible {
	outline: 2px solid var(--wb-rose, #d9a892);
	outline-offset: 2px;
}
.bna-filter-show-more__chev {
	font-size: 0.75rem;
}
@media (max-width: 768px) {
	/* Phone: the 15 service labels are long — wrapped chips stack one per
	 * line into a wall. Swap the fold for a single horizontal swipe row
	 * (same pattern as the house chips / .dc-ba__filters): all chips
	 * visible, 'More services' toggle becomes desktop-only. */
	.bna-filter-row {
		flex-wrap: nowrap; overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}
	.bna-filter-row .bna-filter { flex-shrink: 0; }
	.bna-filter-row[data-collapsed="true"] .bna-filter--overflow { display: inline-flex; }
	.bna-filter-show-more { display: none; }
}

/* ============================================================
 * P2 internal-linking hub (2026-06-03)
 * ============================================================ */

/* /service/ card secondary link → its service-tag archive */
.svc-card-v2__examples {
	font-family: var(--sans, "Jost", sans-serif);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wb-cocoa-soft, #5a3f33);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.svc-card-v2__examples:hover {
	color: var(--wb-cocoa, #3b2a22);
	border-bottom-color: currentColor;
}
.svc-card-v2__examples:focus-visible {
	outline: 2px solid var(--wb-cocoa, #3b2a22);
	outline-offset: 3px;
	border-radius: 2px;
}
.svc-card-v2__examples-arrow { margin-left: 4px; }

/* Clickable hero service chip on case pages */
a.wb-chip--link {
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
a.wb-chip--link:hover {
	border-color: var(--wb-cocoa-soft, #5a3f33);
	color: var(--wb-cocoa, #3b2a22);
}
a.wb-chip--link:focus-visible {
	outline: 2px solid var(--wb-cocoa, #3b2a22);
	outline-offset: 2px;
}

/* Service archive "About this service" intro block */
.svc-archive-intro-wrap {
	max-width: 980px;
	margin: 0 auto 40px;
	padding: 0 32px;
}
.svc-archive-intro {
	border-top: 1px solid var(--wb-line);
	padding-top: 24px;
}
.svc-archive-intro__eyebrow {
	display: inline-block;
	margin-bottom: 12px;
}
.svc-archive-intro__lede {
	margin: 0 0 18px;
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--wb-cocoa-soft);
}
.svc-archive-intro__links {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}
.svc-archive-intro__link {
	font-family: var(--sans, "Jost", sans-serif);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wb-cocoa, #3b2a22);
	text-decoration: none;
	border-bottom: 1px solid var(--wb-gilt-30, rgba(176,141,87,.4));
	padding-bottom: 2px;
	transition: border-color 0.2s ease;
}
.svc-archive-intro__link:hover { border-bottom-color: var(--wb-gilt, #c9a47a); }
.svc-archive-intro__link:focus-visible {
	outline: 2px solid var(--wb-focus, #6b4f3a);
	outline-offset: 3px;
}
@media (max-width: 768px) {
	.svc-archive-intro-wrap { padding: 0 16px; margin-bottom: 28px; }
	.svc-archive-intro { padding-top: 20px; }
	.svc-archive-intro__links { gap: 16px; }
}

/* ── Content-gap landing prose (2026-06-22) ──────────────────────── */
.svc-archive-body,
.br-seo-body {
	max-width: 980px;
	margin: 0 auto 44px;
	padding: 0 32px;
}
.svc-archive-body__inner,
.br-seo-body__inner {
	border-top: 1px solid var(--wb-line);
	padding-top: 28px;
}
.svc-archive-body__h,
.br-seo-body__h {
	font-family: var(--serif, "Jost", sans-serif);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 500;
	color: var(--wb-cocoa, #3b2a22);
	margin: 0 0 16px;
}
.svc-archive-body__p,
.br-seo-body__p {
	margin: 0 0 14px;
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.75;
	color: var(--wb-cocoa-soft);
}
.svc-archive-body__link,
.br-seo-body__link {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--sans, "Jost", sans-serif);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wb-cocoa, #3b2a22);
	text-decoration: none;
	border-bottom: 1px solid var(--wb-gilt-30, rgba(176,141,87,.4));
	padding: 10px 0 2px;
	transition: border-color 0.2s ease;
}
.svc-archive-body__link:hover,
.br-seo-body__link:hover { border-bottom-color: var(--wb-gilt, #c9a47a); }
.svc-archive-body__link:focus-visible,
.br-seo-body__link:focus-visible {
	outline: 2px solid var(--wb-focus, #6b4f3a);
	outline-offset: 3px;
}
@media (max-width: 768px) {
	.svc-archive-body,
	.br-seo-body { padding: 0 16px; margin-bottom: 32px; }
	.svc-archive-body__inner,
	.br-seo-body__inner { padding-top: 22px; }
	.svc-archive-body__h,
	.br-seo-body__h { font-size: 19px; }
}
/* ============================================================
 * [WC-1] WooCommerce storefront — shop archive + product grid
 * Matches the Warm Boutique card vocabulary (cf. dc2-svc-strip-card):
 * gilt-soft border, paper-warm surface, 16px radius, Jost weight 300 titles.
 * ============================================================ */
.wb-shop { max-width: 1160px; margin: 0 auto; padding: clamp(40px, 6vw, 76px) clamp(16px, 4vw, 40px) 84px; }
.wb-shop__hero { text-align: center; max-width: 600px; margin: 0 auto clamp(28px, 5vw, 52px); }
.wb-shop__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--wb-rose-deep); font-weight: 600; }
.wb-shop__eyebrow-rule { width: 32px; height: 1px; background: var(--wb-gilt); display: inline-block; }
.wb-shop__title { font-family: var(--serif); font-size: clamp(32px, 5vw, 46px); font-weight: 300; letter-spacing: -0.025em; line-height: 1.08; color: var(--wb-cocoa); margin: 0; }
.wb-shop__intro { margin: 16px auto 0; max-width: 480px; font-size: 14px; line-height: 1.7; color: var(--wb-cocoa-soft); }

.wb-shop__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--wb-line); }
.wb-shop__toolbar .woocommerce-result-count { margin: 0; font-size: 12px; color: var(--wb-cocoa-soft); }
.wb-shop__toolbar .woocommerce-ordering { margin: 0; }
.wb-shop__toolbar .woocommerce-ordering select { font-family: var(--sans); font-size: 13px; padding: 8px 12px; border: 1px solid var(--wb-line); border-radius: 10px; background: var(--wb-paper-warm); color: var(--wb-cocoa); }

.wb-shop .products { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 3vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.wb-pcard { margin: 0; padding: 0; }
.wb-pcard__link { display: block; text-decoration: none; }
.wb-pcard__media { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; border: 1px solid var(--wb-gilt-soft); background: var(--wb-paper-warm); transition: border-color var(--wb-tx-base) var(--wb-ease), box-shadow var(--wb-tx-base) var(--wb-ease); }
.wb-pcard__media img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform var(--wb-tx-slow) var(--wb-ease); }
.wb-pcard__link:hover .wb-pcard__media { border-color: var(--wb-gilt); box-shadow: 0 14px 32px -20px rgba(59, 42, 34, 0.45); }
.wb-pcard__link:hover .wb-pcard__media img { transform: scale(1.035); }
.wb-pcard__badge { position: absolute; top: 12px; left: 12px; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--wb-paper-warm); background: var(--wb-rose-deep); padding: 5px 10px; border-radius: 999px; }
.wb-pcard__title { display: block; font-family: var(--serif); font-size: 16px; font-weight: 400; line-height: 1.35; color: var(--wb-cocoa); margin: 14px 0 4px; }
.wb-pcard__price { display: block; font-size: 14px; font-weight: 600; color: var(--wb-rose-deep); }
.wb-pcard__price del { color: var(--wb-cocoa-soft); font-weight: 400; margin-right: 6px; }
.wb-pcard__price ins { text-decoration: none; }
.wb-pcard .wb-pcard__cta, .wb-pcard .added_to_cart { display: inline-block; margin-top: 12px; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: var(--wb-cocoa); background: none; border: 1px solid var(--wb-gilt); border-radius: 999px; padding: 9px 18px; text-decoration: none; line-height: 1; transition: background var(--wb-tx-base) var(--wb-ease), color var(--wb-tx-base) var(--wb-ease), border-color var(--wb-tx-base) var(--wb-ease); cursor: pointer; }
.wb-pcard .wb-pcard__cta:hover, .wb-pcard .added_to_cart:hover { background: var(--wb-cocoa); color: var(--wb-paper-warm); border-color: var(--wb-cocoa); }

.wb-shop__pagination { margin-top: 48px; text-align: center; }
.wb-shop__pagination .page-numbers { list-style: none; display: inline-flex; gap: 8px; padding: 0; margin: 0; }
.wb-shop__pagination .page-numbers li { margin: 0; }
.wb-shop__pagination .page-numbers a, .wb-shop__pagination .page-numbers span { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--wb-line); border-radius: 10px; color: var(--wb-cocoa); text-decoration: none; font-size: 13px; }
.wb-shop__pagination .page-numbers .current { background: var(--wb-cocoa); color: var(--wb-paper-warm); border-color: var(--wb-cocoa); }
.wb-shop__empty { text-align: center; color: var(--wb-cocoa-soft); padding: clamp(48px, 8vw, 84px) 0; }
.wb-shop__empty-lead { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 3.5vw, 28px); line-height: 1.15; color: var(--wb-cocoa); margin: 0 0 12px; }
.wb-shop__empty-text { max-width: 460px; margin: 0 auto 28px; font-size: 14px; line-height: 1.7; }
.wb-shop__empty-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* High specificity (.wb-shop … a.button = 0,0,3,1) to beat WooCommerce's inlined
 * .woocommerce-js a.button (0,0,2,1), which otherwise forces 0 radius / its own padding. */
.wb-shop .wb-shop__empty-actions a.button { display: inline-block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--wb-paper-warm); background: var(--wb-cocoa); border: 1px solid var(--wb-cocoa); border-radius: 999px; padding: 14px 28px; text-decoration: none; line-height: 1; transition: background var(--wb-tx-base) var(--wb-ease), border-color var(--wb-tx-base) var(--wb-ease), color var(--wb-tx-base) var(--wb-ease); }
.wb-shop .wb-shop__empty-actions a.button:hover { background: var(--wb-rose-deep); border-color: var(--wb-rose-deep); color: var(--wb-paper-warm); }
.wb-shop .wb-shop__empty-actions a.button--ghost { background: none; color: var(--wb-cocoa); border-color: var(--wb-gilt); }
.wb-shop .wb-shop__empty-actions a.button--ghost:hover { background: var(--wb-cocoa); color: var(--wb-paper-warm); border-color: var(--wb-cocoa); }

/* ============================================================
 * [WC-2] WooCommerce single product
 * ============================================================ */
/* Direct-child only: the related-products loop renders `li.product` which also
 * matches `.wb-shop--single .product` — scoping to `>` keeps the two-column grid
 * on the main product container and leaves the related cards as .wb-pcard. */
.wb-shop--single > .product { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 56px); }
@media (min-width: 880px) { .wb-shop--single > .product { grid-template-columns: 1fr 1fr; align-items: start; } }
/* WC defaults float .images/.summary to 48% (a column layout) which collides with
 * our grid — each lands at 48% of its grid cell, leaving two cramped half-columns.
 * WC's selectors are `.woocommerce div.product div.images/div.summary` = (0,0,3,2);
 * stack the element's two classes to reach (0,0,4,0) and win cleanly (no !important). */
.wb-shop--single .product .images.woocommerce-product-gallery { float: none; width: 100%; margin: 0; max-width: 100%; position: relative; }
.wb-shop--single .woocommerce-product-gallery__image img { border-radius: 18px; border: 1px solid var(--wb-gilt-soft); background: var(--wb-paper-warm); }
/* flexslider prev/next text nav is redundant with the thumbnail rail — hide it. */
.wb-shop--single .flex-direction-nav { display: none; }
.wb-shop--single .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 14px 0 0; padding: 0; }
.wb-shop--single .flex-control-thumbs li { width: 64px; margin: 0; }
.wb-shop--single .flex-control-thumbs img { border-radius: 10px; border: 1px solid var(--wb-gilt-soft); cursor: pointer; opacity: 0.55; transition: opacity var(--wb-tx-base) var(--wb-ease); }
.wb-shop--single .flex-control-thumbs img.flex-active, .wb-shop--single .flex-control-thumbs img:hover { opacity: 1; }
.wb-shop--single .woocommerce-product-gallery__trigger { display: none; }
.wb-shop--single .product .summary.entry-summary { float: none; width: 100%; margin: 0; }
.wb-shop--single .product_title { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; color: var(--wb-cocoa); margin: 0 0 16px; }
.wb-shop--single .price { font-size: 22px; color: var(--wb-rose-deep); font-weight: 600; margin: 0 0 20px; }
.wb-shop--single .price del { color: var(--wb-cocoa-soft); font-weight: 400; }
.wb-shop--single .woocommerce-product-details__short-description { font-size: 15px; line-height: 1.75; color: var(--wb-cocoa-soft); margin: 0 0 24px; }
.wb-shop--single .quantity input { width: 64px; border: 1px solid var(--wb-line); border-radius: 10px; padding: 12px 10px; font-family: var(--sans); text-align: center; }
.wb-shop .button, .wb-shop button.button, .wb-shop--single .single_add_to_cart_button { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--wb-paper-warm); background: var(--wb-cocoa); border: 1px solid var(--wb-cocoa); border-radius: 999px; padding: 14px 28px; cursor: pointer; line-height: 1; transition: background var(--wb-tx-base) var(--wb-ease), border-color var(--wb-tx-base) var(--wb-ease); }
.wb-shop .button:hover, .wb-shop--single .single_add_to_cart_button:hover { background: var(--wb-rose-deep); border-color: var(--wb-rose-deep); }
.wb-shop--single .product_meta { margin-top: 22px; font-size: 12.5px; color: var(--wb-cocoa-soft); }
.wb-shop--single .woocommerce-tabs { grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 72px); }
.wb-shop--single .woocommerce-tabs ul.tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; padding: 0 0 12px; margin: 0 0 24px; border-bottom: 1px solid var(--wb-line); }
.wb-shop--single .woocommerce-tabs ul.tabs li { margin: 0; }
.wb-shop--single .woocommerce-tabs ul.tabs li a { text-decoration: none; color: var(--wb-cocoa-soft); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.wb-shop--single .woocommerce-tabs ul.tabs li.active a { color: var(--wb-cocoa); }
.wb-shop--single .woocommerce-Tabs-panel { font-size: 15px; line-height: 1.75; color: var(--wb-cocoa-soft); }
.wb-shop--single .related.products, .wb-shop--single .upsells.products { grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 72px); }
.wb-shop--single .related.products > h2, .wb-shop--single .upsells.products > h2 { font-family: var(--serif); font-weight: 300; font-size: 26px; color: var(--wb-cocoa); margin: 0 0 24px; }

/* ============================================================
 * [WC-3] Cart / Checkout / My Account — WC Blocks inside the wb chrome
 * (page-redesign-commerce.php). Keep block markup, restyle to Warm Boutique.
 * ============================================================ */
.wb-shop--commerce { max-width: 1080px; }
.wb-shop__hero--commerce { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.wb-commerce-body { font-family: var(--sans); color: var(--wb-cocoa); }

/* Headings inside cart/checkout blocks */
.wb-commerce-body h2, .wb-commerce-body h3,
.wb-commerce-body .wc-block-components-title, .wb-commerce-body .wp-block-woocommerce-checkout-order-summary-block h2 {
	font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; color: var(--wb-cocoa);
}

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-notice-banner { border-radius: 12px; border: 1px solid var(--wb-line); }

/* Inputs / selects */
.wb-commerce-body .wc-block-components-text-input input,
.wb-commerce-body input[type="text"], .wb-commerce-body input[type="email"],
.wb-commerce-body input[type="tel"], .wb-commerce-body select, .wb-commerce-body textarea {
	border: 1px solid var(--wb-line) !important; border-radius: 10px !important; font-family: var(--sans);
}
.wb-commerce-body .wc-block-components-text-input.is-active label,
.wb-commerce-body input:focus, .wb-commerce-body select:focus { border-color: var(--wb-gilt) !important; }

/* Buttons — cocoa pill, gilt-outline secondary */
.wb-commerce-body .wc-block-components-button,
.wb-commerce-body .wp-block-button__link,
.wb-commerce-body .button, .wb-commerce-body button.button {
	border-radius: 999px !important; font-family: var(--sans) !important; font-size: 13px;
	letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
	background: var(--wb-cocoa) !important; color: var(--wb-paper-warm) !important; border: 1px solid var(--wb-cocoa) !important;
}
.wb-commerce-body .wc-block-components-button:hover,
.wb-commerce-body .button:hover { background: var(--wb-rose-deep) !important; border-color: var(--wb-rose-deep) !important; }
.wb-commerce-body a.wc-block-cart__submit-button { text-decoration: none; }

/* Order summary / totals */
.wb-commerce-body .wc-block-components-totals-item__value,
.wb-commerce-body .wc-block-formatted-money-amount,
.wb-commerce-body .wc-block-components-order-summary { color: var(--wb-cocoa); }
.wb-commerce-body .wc-block-components-totals-footer-item { font-family: var(--serif); }
.wb-commerce-body .wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wb-commerce-body .wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--wb-line); border-radius: 16px; background: var(--wb-paper-warm);
}
/* Payment method radios */
.wb-commerce-body .wc-block-components-radio-control__option { border-radius: 12px; }
.wb-commerce-body .wc-block-components-payment-method-label { color: var(--wb-cocoa); }

/* [WC-4] care-product structured detail sections (synced from bag-spa) */
.wb-pcare {
	max-width: 64rem;
	margin: 2.5rem auto 0;
	padding: 0 1.25rem;
	display: grid;
	gap: 1.75rem;
}
.wb-pcare__title {
	font-size: 1.05rem;
	letter-spacing: .02em;
	margin: 0 0 .5rem;
	color: var(--wb-cocoa);
}
.wb-pcare__body {
	color: var(--wb-cocoa-65);
	line-height: 1.7;
}
.wb-pcare__body ul,
.wb-pcare__body ol { margin: .25rem 0 .25rem 1.25rem; }
.wb-pcare__body li { margin: .15rem 0; }

/* ============================================================
 * [WC-5] Variable-product variation selector (Warm Boutique)
 *   WC renders the native variations_form on variable single products.
 *   Style its native DOM hooks to match the boutique system. No new copy.
 * ============================================================ */
.wb-shop--single .variations_form .variations { border: 0; margin: 0 0 20px; width: 100%; border-collapse: collapse; }
.wb-shop--single .variations_form .variations tr { border: 0; }
.wb-shop--single .variations_form .variations th,
.wb-shop--single .variations_form .variations td { padding: 6px 0; border: 0; vertical-align: middle; }
.wb-shop--single .variations_form .variations th.label label {
  margin: 0; font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--wb-cocoa, #3b2a22);
}
.wb-shop--single .variations_form .variations td.value select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--wb-line, #e6ddd0); border-radius: 10px;
  background: var(--wb-paper-warm, #fffdf9); color: var(--wb-cocoa, #3b2a22);
  font-family: var(--sans); font-size: 14px;
}
.wb-shop--single .variations_form .variations td.value select:focus-visible {
  outline: 2px solid var(--wb-focus, var(--wb-rose-deep, #9a5d4b)); outline-offset: 2px;
}
.wb-shop--single .single_variation_wrap { margin-top: 4px; }
.wb-shop--single .single_variation_wrap .woocommerce-variation-price { margin: 4px 0 12px; }
.wb-shop--single .single_variation_wrap .woocommerce-variation-availability {
  font-size: 13px; color: var(--wb-cocoa-soft, #6a5946); margin: 0 0 14px;
}
.wb-shop--single .variations_form .single_add_to_cart_button.disabled,
.wb-shop--single .variations_form .single_add_to_cart_button:disabled { opacity: 0.45; cursor: not-allowed; }
.wb-shop--single .variations_form .reset_variations {
  display: inline-block; margin: 0 0 12px 12px; color: var(--wb-rose-deep, #9a5d4b);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.03em;
}