/**
 * 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 {
  /* Espresso Noir 反转(2026-06-12,spec §3.1)。浅色原值见 git 历史。
   * rose/gold 取的是本家族在 MY DESIGN.md 里已存在的亮档,不引入新色相。
   * (浅色系时代的 --rose 曾为 WCAG 调深至 #9a5d4b;暗底下取亮档。) */
  --rose: #d9a892;
  --rose-legacy: #be7c68;
  --rose-soft: #2a1d18;
  --rose-soft-border: #43302a;
  --gold: #c9a47a;
  --cream: #120e0c;
  --paper: #151110;
  --ink: #f0e9df;
  --ink-2: #b8aa97;
  --line: #352a21;
  /* Jost swap (mirrors MY 2026-06-11 owner decision): both tokens resolve to
   * Jost. ~190 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: #d9a892;
  --wb-cocoa: #efe6d8;        /* 角色反转:浅色系的深字色 → 暗色系的亮字色(190 处调用——文字与背景两类;~40 处 background 调用点配 #fff 白字,需 DARK DELTA 逐一覆盖(见 Task 3)) */
  --wb-cocoa-soft: #cdbfae;
  --wb-rose: #d9a892;
  --wb-rose-light: #3a2a23;
  --wb-rose-tint: #2a1d18;
  --wb-rose-deep: #9a5d4b;    /* SG 暗色系:亮板/白底上的 rose 文字档(浅色时代的 WCAG rose)。MY 浅色值为 #874f3e;DELTA 段同值重定义,以此为准(Align-8 对账) */
  --wb-gilt: #c9a47a;
  --wb-gilt-soft: #54422f;
  --wb-sand: #241b14;
  --wb-paper-warm: #151110;   /* body 底(body background-color 引用) */
  --wb-line: #352a21;

  /* 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.
     SG 暗色反转(Align-8):ink 族 = 文字角色 → 调亮;paper = 面色 → espresso。 */
  --wb-ink: #f0e9df;
  --wb-ink-soft: #b8aa97;
  --wb-paper: #151110;
  --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: 18.5px; 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: 16.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(--cream);
  display: flex; align-items: center; justify-content: center;
}
.br-case__img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.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; }
.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__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__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);
}
.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__logo-img { height: 42px; max-width: 180px; }
  .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);
}
.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: 920px;
	margin: 0 auto 8px;
	padding: 0 24px;
}
.svc-archive-intro__lede {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--wb-ink-soft, #4a4039);
}
.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-cocoa, #3b2a22);
	outline-offset: 3px;
}

/* ============================================================
 * SG RETAINED — Quote 4-step form(qf-*)样式族(Align-8,2026-06-12)
 * 背景:spec §2.2 owner 钦定 page-redesign-quote.php 整页保留(SG 去估价
 * 表单版);但 MY 现版主体已把 quote 页迁移为 qt-* CTA 形态并删光了全部
 * qf-* 规则 —— spec 例外②("删 .qf-estimate")的前提失效(MY 主体 0 命中,
 * qf-estimate 在 SG 侧早已随 5f37113 删除)。
 * 故本段自 SG 旧主体(对齐前)原样搬运 qf-* 族,置于主体尾、DARK DELTA 前,
 * 保证 DELTA 段的 qf-* 暗色覆盖仍有底可盖。内容五块:
 *   1 表单级错误 + aria-invalid(原 Stage 2 UI-3)
 *   2 Stage 6 — Quote 4-step form 主区(含响应式)
 *   3 qf 按钮 transition 族(原 transitions 区的 qf 行)
 *   4 reduced-motion / focus-visible 补条(MY 主体清单已无 qf 项)
 *   5 [A11y-6] quote form accessibility fixes
 * ============================================================ */

/* -- 1. 表单级错误 + aria-invalid -- */
/* Inline form-level error (replaces alert() in the quote wizard).
 * Stage 2 UI-3 (2026-05-22). Uses Burnt Rose so the error reads as
 * brand-warm-corrective rather than punitive red. */
.qf-form-error {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--wb-rose-tint);
  border: 1px solid var(--wb-primary-dark);
  color: var(--wb-primary-dark);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.qf-field__input[aria-invalid="true"],
.qf-field__textarea[aria-invalid="true"] {
  border-color: var(--wb-primary-dark) !important;
  box-shadow: 0 0 0 3px rgba(154, 93, 75, 0.18) !important;
}

/* -- 2. Stage 6 — Quote 4-step form 主区 -- */
/* ============================================================
 * Stage 6 — Quote 4-step form
 * ============================================================ */
.qf-page { background: var(--cream); color: var(--wb-cocoa); font-family: var(--sans); }
.qf-wrap { padding: 0 32px 48px; }
.qf-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

.qf-form { padding: 44px 48px; border-radius: 32px; }
.qf-stepper {
  display: flex; align-items: center; gap: 14px; margin-bottom: 36px;
}
.qf-step-link { display: inline-flex; align-items: center; gap: 10px; }
.qf-step-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 1px solid var(--wb-gilt-soft); color: var(--wb-cocoa-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 13px;
}
.qf-step--done .qf-step-num { background: var(--wb-cocoa); color: #fff; border: none; }
.qf-step--current .qf-step-num { background: var(--wb-cocoa); color: #fff; border: none; }
.qf-step-label {
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500;
}
.qf-step--current .qf-step-label { color: var(--wb-cocoa); font-weight: 700; }
.qf-step-line { flex: 1; height: 1px; background: var(--wb-gilt-soft); }
.qf-step--done + .qf-step-line { background: var(--wb-cocoa); }

.qf-section { display: none; }
.qf-section--active { display: block; }
.qf-section__h {
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  margin: 0 0 26px; letter-spacing: -0.015em; color: var(--wb-cocoa);
}
.qf-section__h em { color: var(--rose); font-style: italic; }

.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.qf-row--single { grid-template-columns: 1fr; }
.qf-field { }
.qf-field__label {
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--wb-cocoa-soft); font-weight: 500; margin-bottom: 8px; display: block;
}
.qf-field__input,
.qf-field__textarea {
  width: 100%; background: #fff; border: 1px solid var(--wb-line);
  border-radius: 14px; padding: 14px 16px;
  font-size: 14px; color: var(--wb-cocoa); font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.qf-field__input:focus,
.qf-field__textarea:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(190,124,104,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}
.qf-field__textarea { min-height: 80px; line-height: 1.6; resize: vertical; }
.qf-field__hint {
  margin-top: 6px; font-size: 11px; color: var(--wb-cocoa-soft);
}

.qf-services { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.qf-service {
  position: relative;
  padding: 11px 18px; border-radius: 999px;
  background: transparent; color: var(--wb-cocoa-soft);
  border: 1px solid var(--wb-line);
  font-size: 12px; letter-spacing: 0.06em; font-weight: 500;
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
}
.qf-service input { position: absolute; opacity: 0; pointer-events: none; }
.qf-service:has(input:checked),
.qf-service.is-checked {
  background: var(--wb-cocoa); color: #fff; border-color: var(--wb-cocoa); font-weight: 600;
}
.qf-service:has(input:checked) .qf-service__check,
.qf-service.is-checked .qf-service__check { color: var(--wb-gilt); display: inline; }
.qf-service__check { display: none; }

.qf-actions {
  display: flex; justify-content: space-between; margin-top: 30px; gap: 12px;
}
.qf-btn-back, .qf-btn-next {
  border-radius: 999px; padding: 14px 28px; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; letter-spacing: 0.08em;
  display: inline-flex; gap: 12px; align-items: center;
}
.qf-btn-back {
  background: transparent; color: var(--wb-cocoa-soft);
  border: 1px solid var(--wb-line);
}
.qf-btn-next {
  background: var(--wb-cocoa); color: #fff; border: none;
  box-shadow: 0 12px 24px -12px rgba(40,22,15,0.6);
}
.qf-btn-next:disabled { opacity: 0.5; cursor: not-allowed; }
.qf-btn-back[disabled] { visibility: hidden; }

.qf-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px;
}
.qf-photo-tile {
  aspect-ratio: 1; border-radius: 14px; overflow: hidden; position: relative;
  border: 1px solid var(--wb-line); background: var(--wb-paper-warm);
  display: flex; align-items: center; justify-content: center;
}
.qf-photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.qf-photo-tile__remove {
  position: absolute; top: 8px; right: 8px;
  background: rgba(40,22,15,0.7); color: #fff; border: none;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-size: 14px; line-height: 1;
}
.qf-photo-add {
  aspect-ratio: 1; border-radius: 14px;
  border: 1.5px dashed var(--wb-gilt-soft); background: var(--wb-paper-warm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--wb-cocoa-soft); font-size: 11px; gap: 6px; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.qf-photo-add:hover { background: var(--hover-chip-bg); border-color: var(--hover-chip-border); color: var(--hover-chip-color); }
.qf-photo-add__plus { font-size: 22px; color: var(--rose); }
.qf-photo-input { display: none; }

/* Right column sidebar */
.qf-side { display: flex; flex-direction: column; gap: 16px; }
.qf-side-photos { padding: 28px; border-radius: 28px; }
.qf-side-photos__head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
}
.qf-side-photos__hint {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  margin-top: 16px; color: var(--wb-cocoa-soft); line-height: 1.7; font-weight: 500;
}

.qf-next-card { padding: 28px; border-radius: 28px; }
.qf-next-card__list { margin-top: 18px; }
.qf-next-card__row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.1);
}
.qf-next-card__row:first-child { border-top: 0; }
.qf-next-card__num {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--wb-gilt);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 12px; flex-shrink: 0;
}
.qf-next-card__when {
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--wb-gilt); font-weight: 500; margin-bottom: 4px;
}
.qf-next-card__what { font-size: 12.5px; color: rgba(255,255,255,0.85); line-height: 1.55; }

.qf-trust-card { padding: 22px 24px; border-radius: 24px; }
.qf-trust-row { display: flex; align-items: center; gap: 14px; }
.qf-trust-avatars { display: flex; }
.qf-trust-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff;
}
.qf-trust-avatar:not(:first-child) { margin-left: -10px; }
.qf-trust-avatar:nth-child(1) { background: #d4b3a4; }
.qf-trust-avatar:nth-child(2) { background: #bfa685; }
.qf-trust-avatar:nth-child(3) { background: #c9a48f; }
.qf-trust-avatar:nth-child(4) { background: #e8dcc7; }
.qf-trust__main { flex: 1; }
.qf-trust__h { font-size: 12px; font-weight: 600; color: var(--wb-cocoa); }
.qf-trust__sub { font-size: 11px; color: var(--wb-cocoa-soft); margin-top: 2px; }
.qf-trust__stars { color: var(--wb-gilt); font-size: 13px; }

.qf-success {
  padding: 64px 48px; border-radius: 32px; text-align: center;
}
.qf-success__icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--rose);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; margin-bottom: 18px;
}
.qf-success__h {
  font-family: var(--serif); font-size: 36px; font-weight: 300;
  margin: 0 0 12px; letter-spacing: -0.025em; color: var(--wb-cocoa);
}
.qf-success__h em { color: var(--rose); font-style: italic; }
.qf-success__sub {
  font-size: 14px; line-height: 1.7; color: var(--wb-cocoa-soft);
  max-width: 420px; margin: 0 auto 24px;
}
.qf-success__ref {
  display: inline-block; padding: 8px 20px; border-radius: 999px;
  background: var(--wb-rose-tint); color: var(--rose);
  font-family: var(--serif); font-style: italic; font-size: 14px;
  letter-spacing: 0.04em; margin-bottom: 24px;
}
.qf-success__cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px; border-radius: 999px;
  background: #25d366; color: #fff !important;
  font-size: 13px; font-weight: 700; text-decoration: none;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 24px -12px rgba(37,211,102,0.5);
}

@media (max-width: 768px) {
  .qf-wrap { padding: 0 12px 80px; }
  .qf-grid { grid-template-columns: 1fr; }
  .qf-form { padding: 22px; border-radius: 22px; }
  .qf-stepper { gap: 6px; margin-bottom: 22px; }
  .qf-step-num { width: 22px; height: 22px; font-size: 11px; }
  .qf-step-label { display: none; }
  .qf-section__h { font-size: 22px; margin-bottom: 18px; }
  .qf-row { grid-template-columns: 1fr; gap: 10px; }
  .qf-actions { gap: 8px; }
  .qf-btn-back, .qf-btn-next { padding: 14px 18px; font-size: 11.5px; }
  .qf-photos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .qf-side-photos, .qf-next-card, .qf-trust-card { padding: 22px; border-radius: 22px; }
  .qf-success { padding: 32px 22px; border-radius: 22px; }
  .qf-success__h { font-size: 26px; }
}

/* -- 3. qf 按钮 transition 族 -- */
/* ---- Quote form 4-step buttons ---- */
.qf-btn-next {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.qf-btn-next:hover:not(:disabled) {
  transform: translateY(-2px); background: #2a1d17;
  box-shadow: 0 18px 32px -14px rgba(40,22,15,0.7);
}
/* Stage 3 hotfix: align opacity with the earlier .qf-btn-next:disabled
 * rule and with DESIGN.md §5 (50%, not 40%). */
.qf-btn-next:disabled { opacity: 0.5; cursor: not-allowed; }
.qf-btn-back {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qf-btn-back:hover {
  background: var(--wb-cocoa); color: #fff; border-color: var(--wb-cocoa);
}
.qf-success__cta {
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.qf-success__cta:hover {
  transform: translateY(-2px); background: #1ebe5a;
  box-shadow: 0 18px 32px -12px rgba(37,211,102,0.6);
}

/* -- 4. reduced-motion / focus-visible 补条(MY 主体的对应清单已移除 qf 项) -- */
@media (prefers-reduced-motion: reduce) {
  .qf-btn-next, .qf-btn-back, .qf-success__cta { transition: none !important; }
}
.qf-field__input:focus-visible,
.qf-field__textarea:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px !important;
}

/* -- 5. [A11y-6] Quote form accessibility fixes -- */
/* ============================================================
 * [A11y-6] Quote form accessibility fixes (audit 2026-05-19).
 * - qf-services-fieldset: reset fieldset defaults (border, padding) so
 *   the visual layout is unchanged. Legend gets display:block so it
 *   flows as a normal block element above the service chips flex row.
 * - qf-required-star: rose asterisk on required-field labels and
 *   the "select all that apply" legend.
 * - button.qf-photo-add in the sidebar: inherits qf-photo-add styles
 *   already defined; just resets button-specific defaults.
 * ============================================================ */

.qf-services-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0; /* fieldsets have an odd min-width: min-content default */
}
.qf-services-fieldset > legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 14px;
  /* qf-field__label class handles font/color/size */
}

.qf-required-star {
  color: var(--rose);
  font-weight: 700;
  margin-left: 2px;
}

/* sidebar Add button resets — qf-photo-add class already supplies border/background/cursor/font-size */
button.qf-photo-add {
  padding: 0; /* remove browser default button padding */
  font-family: inherit;
  color: inherit;
}

/* ============================================================
 * SG DARK DELTA — Espresso Noir(2026-06-12)
 * token 反转覆盖不到的硬编码残留集中在此段;
 * 从 MY cherry-pick CSS 改动时,主体逐行可比,本段整段审计。
 * 分区:1 全局原语 / 2 cocoa 双角色修正 / 3 houses logo(Task 4)
 *       / 4 表单与 focus / 5 chrome / 6 按页面收口(Task 8)
 * qf-estimate 规则随估价 UI 删除(Task 5),主体删行例外之一
 * ============================================================ */

/* -- 1. 全局原语 -- */
:root {
  --wb-surface: #1e1712;        /* 卡片/面板面色(浅色系无此 token,新增) */
  --wb-surface-deep: #120e0c;   /* 深一档分区 */
  --wb-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
  /* on-cream 族:反转后 --wb-cocoa(#efe6d8)/--rose(#d9a892)在 ~40 处
   * background 调用点成了"亮板"。板上的文字/线条/填充用这一族深色。
   * #1c130d on #efe6d8 ≈ 13:1;on #d9a892 ≈ 8.8:1。 */
  --wb-on-cream: #1c130d;
  --wb-on-cream-soft: rgba(28,19,13,0.72);
  --wb-on-cream-faint: rgba(28,19,13,0.65); /* alpha 0.55→0.65;blended≈(102,93,84)on #efe6d8 = 5.22:1(AA ✓) */
  --wb-on-cream-line: rgba(28,19,13,0.14);
  --wb-on-cream-fill: rgba(28,19,13,0.07);
  --wb-gilt-deep: #7a5a2e;      /* gilt 族在亮板上的可读档(on #efe6d8 ≈ 4.9:1) */
  --wb-rose-deep: #9a5d4b;      /* 浅色时代的 WCAG rose;白底/亮板上的 rose 文字用它 */
  /* 浅色 hover 阴影(rgba(59,42,34,.07))在暗底上没存在感 → 黑系 */
  --hover-shadow-button: 0 2px 4px rgba(0,0,0,0.4);
}
body.dc-warm-boutique { background: var(--paper); }
/* 页面级 page class(dc-page/dc2-page/svc-page/ab-page/ct-page…)底色全走
 * var(--cream) token,已随反转变暗 —— 已确认,无需逐页覆盖。 */

/* -- 2. cocoa / rose 双角色修正 --
 * 主体里 background: var(--wb-cocoa|--rose) 现 = 亮板,配套的硬编码
 * #fff / rgba(255,…) 白字逐 selector 覆盖为 on-cream 深字。
 * 不动:1252 .br-arclink__cta(字色 var(--cream),token 已深)、
 *       4741 .loc-maps-btn / 4927/4930 .loc-cta__btn--* / 4973 .dc2-locations__card--primary
 *       (字色 var(--wb-paper-warm),token 已深;primary 卡内 gilt 后代另行覆盖)、
 *       4750/4928 cocoa-soft 底 hover(字色同上,核实无需覆盖)、
 *       .wb-diamond--cocoa(381)/.wb-nav-v2__burger-line(1817)/
 *       .qf-step--done + .qf-step-line(1441)无文字、
 *       .dc2-hero__counter / .wb-mc--white / .wb-object-label--dark 模板未引用。 */

/* 2.1 实心控件(cocoa 亮底 + #fff 白字) */
.qf-step--done .qf-step-num,
.qf-step--current .qf-step-num,
.qf-service:has(input:checked),
.qf-service.is-checked,
.qf-btn-next,
.wb-nav-v2__cta,
.wb-nav-v2__drawer-cta,
.dc2-btn-primary,
.dc2-btn-secondary:hover,
.dc2-btn-secondary:focus-visible,
.dc2-bna__filter:hover,
.dc2-bna__filter--active,
.dc2-bna__cta:hover,
.dc2-houses__more,
.dc2-tests__nav-btn:hover,
.dc2-tests__nav-btn--active,
.bna-filter:hover,
.qf-btn-back:hover,
.wb-list-page .page-numbers.current,
.wb-recovery-tool__form button,
.wb-journal-entry-meta__cta--filled,
.wb-journal-chip--active,
.wb-journal-chip--active:hover { color: var(--wb-on-cream); }

/* 2.2 主体原行带 !important 的同病组 */
.svc-cta__btn,
.ct-outlet__btn--wa,
.bna-filter--active,
.bna-filter-sort--active,
.bna-loadmore__btn,
.dc2-ig #sb_instagram .sbi_load_btn { color: var(--wb-on-cream) !important; }

/* 2.3 hover 翻回深底(#2a1d17)的控件,文字回白 */
.dc2-btn-primary:hover,
.dc2-btn-primary:focus-visible,
.dc2-houses__more:hover,
.wb-nav-v2__cta:hover,
.wb-nav-v2__cta:focus-visible,
.wb-nav-v2__drawer-cta:hover,
.qf-btn-next:hover:not(:disabled),
.dc2-tests__nav-btn--active:hover { color: #fff; }
.dc2-ig #sb_instagram .sbi_load_btn:hover,
.bna-loadmore__btn:hover { color: #fff !important; }
/* video hero 变体例外:按钮底是 #f4ebe0/#fff(亮),hover 也亮 → 全程深字。
 * 放在 2.3 之后,同特异性后到者胜。 */
.dc2-hero--video .dc2-btn-primary,
.dc2-hero--video .dc2-btn-primary:hover,
.dc2-hero--video .dc2-btn-primary:focus-visible,
.dc2-hero--video .dc2-btn-secondary:hover,
.dc2-hero--video .dc2-btn-secondary:focus-visible { color: var(--wb-on-cream); }
/* hover 用 --hover-chip-bg(暗)的 active chip:保持亮底,避免暗底配上面的深字 */
.bna-filter-sort--active:hover { background: var(--wb-cocoa); border-color: var(--wb-cocoa); }
.wb-list-page .page-numbers.current:hover {
  background: var(--wb-cocoa); border-color: var(--wb-cocoa); color: var(--wb-on-cream);
}

/* 2.4 亮板容器 + 各自的硬编码白字/白线后代 */
.wb-platform--dark,
.wb-platform--accent { color: var(--wb-on-cream); }

/* announce 条(cocoa 亮底) */
.wb-announce,
.wb-announce__phone { color: var(--wb-on-cream); }
.wb-announce__pickup,
.wb-announce__lang--active { color: var(--wb-gilt-deep); }

/* wb-chip--ink:白透膜 chip,只出现在亮板里(dc2-cta / cs-tl / qf-next-card) */
.wb-chip--ink {
  background: var(--wb-on-cream-fill);
  color: var(--wb-on-cream);
  border-color: rgba(28,19,13,0.22);
}
/* 首页 dc2-cta 里 wb-diamond 带 inline style="background:#fff" → 需 !important 压过 */
.dc2-cta .wb-chip--ink .wb-diamond { background: var(--wb-on-cream) !important; }

/* 首页 hero review 卡(cocoa 亮底;-h/-stars 原是 cocoa-soft,现亮灰不可读) */
.dc2-hero__review { color: var(--wb-on-cream); }
.dc2-hero__review-h,
.dc2-hero__review-stars { color: var(--wb-on-cream-soft); }

/* 首页 stats 带(cocoa 亮底) */
.dc2-stats,
.dc2-stats__num { color: var(--wb-on-cream); }
.dc2-stats__label { color: var(--wb-on-cream-soft); }
.dc2-stats__num-plus { color: var(--wb-gilt-deep); }

/* 首页 process 面板(cocoa 亮底,白透步骤卡全套) */
.dc2-process,
.dc2-process__h,
.dc2-process__step-h,
.dc2-process__step-body { color: var(--wb-on-cream); }
.dc2-process__cap { color: var(--wb-gilt-deep); }
.dc2-process__meta-sub { color: var(--wb-on-cream-faint); }
.dc2-process__step {
  background: var(--wb-on-cream-fill);
  border-color: var(--wb-on-cream-line);
}
.dc2-process__step:hover { background: rgba(28,19,13,0.10); }
.dc2-process__step-illust { color: var(--wb-on-cream-soft); }
.dc2-process__step:hover .dc2-process__step-illust,
.dc2-process__step--first .dc2-process__step-illust { color: var(--wb-gilt-deep); }
.dc2-process__step-roman {
  background: var(--wb-on-cream-fill);
  border-color: rgba(28,19,13,0.18);
  color: var(--wb-on-cream);
}
.dc2-process__step-num { color: rgba(28,19,13,0.20); }

/* 首页 testimonials 深卡变体(cocoa 亮底) */
.dc2-test--dark { color: var(--wb-on-cream); }
.dc2-test--dark .dc2-test__stars { color: var(--wb-gilt-deep); }
.dc2-test--dark .dc2-test__attr { border-top-color: var(--wb-on-cream-line); }
.dc2-test--dark .wb-edition--gilt { color: var(--wb-gilt-deep); } /* D 项恢复 gilt 后,亮卡内例外 */

/* About stats(wb-platform--dark 上) */
.ab-stats__col { border-left-color: var(--wb-on-cream-line); }
.ab-stats__num { color: var(--wb-on-cream); }
.ab-stats__lab { color: var(--wb-gilt-deep); }

/* Case-study timeline(wb-platform--dark 上) */
.cs-tl__h,
.cs-tl__what { color: var(--wb-on-cream); }
.cs-tl__h em { color: var(--wb-gilt-deep); } /* rose-deep(#9a5d4b)on cocoa(#efe6d8)=4.20:1 FAIL→gilt-deep(#7a5a2e)=4.90:1 AA ✓ */
.cs-tl__row { border-top-color: var(--wb-on-cream-line); }
.cs-tl__when { color: var(--wb-gilt-deep); }
.cs-tl__sub { color: var(--wb-on-cream-soft); }

/* Quote 侧栏 next-card(wb-platform--dark 上) */
.qf-next-card__row { border-top-color: var(--wb-on-cream-line); }
.qf-next-card__num {
  background: var(--wb-on-cream-fill);
  color: var(--wb-on-cream); /* gilt-deep(#7a5a2e)on rose(#d9a892)=2.99:1 FAIL→on-cream(#1c130d)=8.68:1 AA ✓ */
}
.qf-next-card__when { color: var(--wb-on-cream); } /* gilt-deep on rose=2.99:1 FAIL→on-cream=8.68:1 AA ✓ */
.qf-next-card__what { color: var(--wb-on-cream-soft); }

/* Contact 主门店卡(wb-platform--dark 上) */
.ct-outlet--primary .ct-outlet__tag { color: var(--wb-gilt-deep); border-color: rgba(122,90,46,0.4); }
.ct-outlet--primary .ct-outlet__name,
.ct-outlet--primary .ct-outlet__meta-row { color: var(--wb-on-cream); }
.ct-outlet--primary .ct-outlet__addr { color: var(--wb-on-cream-soft); }
.ct-outlet--primary .ct-outlet__meta { border-top-color: var(--wb-on-cream-line); }
.ct-outlet--primary .ct-outlet__meta-row .wb-mc { color: var(--wb-gilt-deep); }
.ct-outlet--primary .ct-outlet__btn--out { color: var(--wb-on-cream) !important; border-color: rgba(28,19,13,0.45); }
.ct-outlet--primary .ct-outlet__btn--out:hover {
  background: var(--wb-on-cream-fill);
  border-color: rgba(28,19,13,0.7);
}
.ct-outlet--primary .ct-outlet__btn--details { color: var(--wb-gilt-deep); }

/* rose 亮板(wb-platform--accent:svc-cta / ct-pickup / cs-cta) */
.svc-cta__copy,
.svc-cta__h,
.ct-pickup__h,
.cs-cta__h { color: var(--wb-on-cream); }
.svc-cta__cap,
.ct-pickup__cap,
.ct-pickup__p,
.cs-cta__sub { color: rgba(28,19,13,0.8); }
.svc-cta__btn:hover { color: var(--wb-rose-deep) !important; } /* hover 翻白底 */

/* 首页 dc2-cta(rose 亮底) */
.dc2-cta,
.dc2-cta__h,
.dc2-cta__lede { color: var(--wb-on-cream); }
.dc2-cta__trust { color: rgba(28,19,13,0.8); }
.dc2-cta__btn-white { color: var(--wb-rose-deep); } /* 白底上的 rose 字 */
.dc2-cta__btn-white:hover,
.dc2-cta__btn-white:focus-visible { color: var(--rose); } /* hover 底翻 rose-tint(暗) */
.dc2-cta__btn-ghost { color: var(--wb-on-cream); border-color: rgba(28,19,13,0.5); }
.dc2-cta__btn-ghost:hover,
.dc2-cta__btn-ghost:focus-visible {
  background: var(--wb-on-cream-fill);
  border-color: rgba(28,19,13,0.8);
}

/* 零星 rose/cocoa 亮底小件 */
.dc2-faq__item--open .dc2-faq__toggle,
.dc2-faq__toggle:hover { color: var(--wb-on-cream); }
.wb-footer-v2__social-chip:hover,
.wb-footer-v2__social-chip:focus-visible { color: var(--wb-on-cream); }
.qf-success__icon { color: var(--wb-on-cream); }
.dc2-locations__card--primary .wb-mc { color: var(--wb-gilt-deep); }
.dc2-locations__card--primary .dc2-locations__cta:hover { color: var(--wb-gilt-deep); }

/* over-photo 白底徽章:白底故意保留(压在照片上),字改深 */
.dc2-bna__feat-tag,
.ct-outlet__map--photo .ct-outlet__map-pill,
.cs-hero__split-icon { color: var(--wb-on-cream); }

/* 旧 dc-chrome:--ink 现为亮米白,实心件改深字 */
.dc-btn--filled,
.dc-sticky-bar__btn--ink { color: var(--wb-on-cream); }
/* skip-link:亮底深字在暗页面反而醒目 → 保留 --ink 亮底,只把白字改深 */
.wb-skip-link { color: var(--wb-on-cream); }

/* 白/浅底残留 → surface 角色化 */
.wb-recovery-tool__form { background: var(--wb-surface); }
.wb-nav-v2__dropdown-panel {
  background: var(--wb-surface);
  border-color: var(--wb-line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
/* (Align-8 删除:原有 .wb-nav-v2__dropdown-link { color: var(--ink); } 修补——
 * 旧主体 var(--wb-ink) 未定义;MY 现版主体已定义 --wb-ink,SG 暗色反转后 = #f0e9df,
 * 与 var(--ink) 同值,该覆盖冗余。) */
.svc-anchors__chip { background: var(--wb-surface); border-color: var(--wb-line); }
.svc-anchors::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
/* 故意不改清单(B 组保留项):
 *   - 照片占位斜纹 #efe9d8/#e5dcc4(546/667/1073/929 等)与 cs-hero rose 占位:照片替身,保留;
 *   - .ab-story__media-label(553)白透底压在照片上:over-photo 徽章,保留;
 *   - .qf-photo-tile__remove(1544)/.br-hero__media-caption(1078)深透底白字:本就是暗底,正确;
 *   - .qf-trust-avatar 色块(1597-1600)与白描边:装饰,保留;
 *   - WhatsApp 绿底(#25d366)白字件(sticky-bar --wa / btn-icon / qf-success__cta):品牌件,保留;
 *   - .dc2-cta__glow-*、.dc2-hero__review-glow 等白透光斑:装饰,保留;
 *   - .ct-outlet--primary .ct-outlet__map-pill(694)压在深色地图占位上:保留。 */

/* -- 3. houses logo:深色 PNG 在黑底上消失 → 统一提成米白单色 -- */
/* 实测 selector:.dc2-house-logo img
 * 主体里已有 opacity: 0.68 + transition(line 2527-2533),无 filter 声明 → 直接追加;
 * hover 主体已覆盖 opacity: 1 → 暗色版同款,只加 filter: none 使彩色版 hover 还原 */
.dc2-house-logo img {
  filter: brightness(0) invert(1);
  opacity: .72;                  /* 略高于主体 .68,因底色更深对比度已够 */
}
.dc2-house-logo:hover img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* -- 3b. 照片hairline描边:亮图防"浮"出暗底 -- */
/* dc2-wall__card:主体已有 border:1px solid var(--line)(line 3715),
 *   暗色下用 --wb-line token 保持一致 */
.dc2-wall__card {
  border-color: var(--wb-line);
}
/* bna-card:主体已有 border:1px solid var(--wb-gilt-soft)(line 1329)
 *   暗色底用 --wb-line token 保持一致 */
.bna-card {
  border-color: var(--wb-line);
}
/* dc2-bna-card__img(首页 BNA 预览):主体已有 border:1px solid var(--wb-gilt-soft) */
.dc2-bna-card__img {
  border-color: var(--wb-line);
}
/* ct-outlet__map--photo(Contact/Location 门店照片容器):主体无 border → 新增 */
.ct-outlet__map--photo {
  border: 1px solid var(--wb-line);
}

/* -- 4. 表单与 focus -- */
.dc-warm-boutique input[type="text"],
.dc-warm-boutique input[type="email"],
.dc-warm-boutique input[type="tel"],
.dc-warm-boutique textarea,
.dc-warm-boutique select {
  background: var(--wb-surface);
  color: var(--ink);
  border-color: var(--wb-line);
}
.dc-warm-boutique ::placeholder { color: #9d8f7c; }
/* qf 表单输入框主体写死 #fff 底 + 白色 inset 高光 → surface 化 */
.qf-field__input,
.qf-field__textarea {
  background: var(--wb-surface);
  color: var(--ink);
  border-color: var(--wb-line);
  box-shadow: none;
}
.qf-field__input:focus,
.qf-field__textarea:focus {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(217,168,146,0.18);
}
/* focus 环总查:主体所有 outline 色里只有 3508 的 var(--paper)(现深)在暗底上隐形,
 * 其余 var(--ink)/var(--wb-cocoa)/var(--rose) 反转后均为亮色、可见 → 不动。
 * (计划里的全局 :focus-visible { outline-color: var(--wb-rose) } 因此不需要,避免
 * 把已可见的 ink 亮环错杀成 rose。) */
.dc2-tests__rating:focus-visible { outline-color: var(--wb-rose) !important; }

/* P0-1: 亮板(cocoa #efe6d8 / rose #d9a892)内全局 focus 环
 * 主体全局 :where():focus-visible(0,1,0)设 outline: 2px solid var(--ink)(暗底下--ink=#f0e9df 亮色);
 * 亮板内 --ink 亮色压在 #efe6d8 / #d9a892 上对比度 1.03–1.75:1 隐形。
 * 本规则 (0,2,0) 赢过全局 (0,1,0),只覆盖 outline-color,保留其余。 */
.wb-platform--dark :where(a, button, input, summary, [tabindex]):focus-visible,
.wb-platform--accent :where(a, button, input, summary, [tabindex]):focus-visible {
  outline-color: var(--wb-on-cream); /* #1c130d on #efe6d8≈13:1 / on #d9a892≈8.8:1 AA ✓ */
}

/* P0-2: [A11y-1] 名单里的 rose 板按钮(主体 !important)
 * .dc2-cta__btn-white / .dc2-cta__btn-ghost 坐在 rose 亮板(#d9a892)上,
 * 主体以 !important 强制 outline-color: var(--ink)(亮色),对比度 1.75:1 隐形。
 * 合法的 !important 对抗 !important:同选择器后到者胜(DELTA 在文件末)。 */
.dc2-cta__btn-white:focus-visible,
.dc2-cta__btn-ghost:focus-visible {
  outline-color: var(--wb-on-cream) !important; /* on rose #d9a892 ≈ 8.8:1 AA ✓ */
}

/* P1-4: skip-link focus outline
 * 主体 line 85-90: outline: 2px solid var(--rose)(#d9a892)压在 --ink(#f0e9df)亮底上 1.75:1 隐形。
 * 同特异性(0,2,0),DELTA 在后,outline-color 覆盖。 */
.wb-skip-link:focus,
.wb-skip-link:focus-visible { outline-color: var(--wb-on-cream); } /* on --ink(#f0e9df)亮底≈12.5:1 AA ✓ */

/* -- 5. chrome 与阴影 -- */
/* nav/footer R logo:rose 径向渐变现为亮底,白字母改深 */
.wb-nav-v2__logo,
.wb-footer-v2__logo { color: var(--wb-on-cream); }
/* C 组:暖棕浅阴影 + 高强度白 inset 高光在暗底上 = 没存在感/刺眼白边 → 黑系阴影 + 微光 */
.wb-platform,
.wb-nav-v2,
.dc2-hero,
.dc2-hero__media-main,
.dc2-bna,
.dc2-faq,
.bna-card {
  box-shadow: var(--wb-shadow), inset 0 1px 0 rgba(255,255,255,0.04);
}
.wb-chip { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.dc2-btn-secondary {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px -8px rgba(0,0,0,0.4);
}
.dc2-bna__item { box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.dc2-test { box-shadow: 0 14px 30px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04); }
.dc2-bna__item:hover,
.dc2-test:hover,
.bna-card:hover { box-shadow: var(--wb-shadow); }
/* 注:上面 .wb-platform 的覆盖同特异性后到,也会盖掉 --dark/--accent 自带的
 * 深暖阴影(亮板配黑系投影,在暗页上成立);同理 .dc2-test 盖掉 --dark 变体、
 * .dc2-hero 盖掉 --video 变体的阴影 —— 均为黑系对黑系,Task 8 视觉终评。 */

/* -- 5b. chrome 收口(Task 8 视觉走查 round 1)-- */
/* SG 站仍载入 per-page Elementor CSS(post-<id>.css;Elementor/HFE 插件
 * 未像 MY 那样物理删除)。其中
 *   body.elementor-page-2479:not(.elementor-motion-effects-element-type-background)
 * 浅底 #f2efec 以 (0,2,1) 特异性压过分区 1 里 (0,1,1) 的 body 规则,
 * 在 About 等旧 Elementor 页 footer 之下露出大块浅板 → 叠类提到 (0,3,1)。
 * 不用 !important(对手不是 !important/inline)。 */
body.dc-warm-boutique.dc-warm-boutique.dc-warm-boutique { background: var(--paper); }
/* 嫌疑 3:sticky bar 暖棕阴影(rgba(60,40,25,.45))在暗底上无存在感,
 * 且 bar 底色与页面同为 var(--paper) → 只剩 1px 线分界。
 * surface 抬一档 + 黑系阴影,恢复"悬浮 chrome"层次。 */
.dc-sticky-bar {
  background: var(--wb-surface);
  box-shadow: 0 -8px 26px -18px rgba(0,0,0,0.7);
}
/* 嫌疑 2:hover/focus 翻 cocoa 亮底后,rose 圆点对亮底 ~1.5:1 几乎消失
 * → 亮底上用 gilt-deep(与 2.x 的 on-cream 策略一致)。 */
.dc2-btn-secondary:hover .dc2-btn-secondary__dot,
.dc2-btn-secondary:focus-visible .dc2-btn-secondary__dot { background: var(--wb-gilt-deep); }

/* -- D 组待重评项 -- */
/* gilt 文字降级是浅色时代规则(gilt on light paper 2.31:1);
 * 暗底 gilt on #151110 = 8.10:1 已过 AA → 恢复。
 * restored on dark; was downgraded for light-paper AA。
 * 亮板内的例外(.dc2-test--dark .wb-edition--gilt)已在 2.4 处理。 */
.wb-mc--gilt,
.wb-edition--gilt { color: var(--wb-gilt); }
/* SG 外链卡:--wb-rose-light(#3a2a23)边压在 --wb-rose-tint(#2a1d18)底上 1.19:1 → 用标准线 */
.dc2-locations__card--external { border-color: var(--wb-line); }
/* 待评(Task 8 截图定,本任务不动值):
 *   - --wb-gilt-soft(#54422f)作分隔线对 #151110 仅 2.01:1 —— 刻意低调 vs 隐形;
 *   - .dc2-process__step--first::before gilt 流光线压在亮板上(装饰);
 *   - .svc-cta__btn(cocoa 亮底钮)落在 rose 亮板上,底对底 1.4:1 的钮形辨识度。 */

/* -- 6. 按页面收口(Task 8 在此追加) -- */

/* About:.ab-story__media-inner 是纯 CSS 照片占位(模板里永远没有 <img>),
 * 浅色时代米色斜纹(#efe9d8/#e5dcc4)在暗页上成了整块刺眼亮板——
 * B 组"照片替身保留"决定对这种永久性占位不成立 → 深色斜纹(sand 族),
 * 徽章从白透底翻成深透底 + gilt 字(over-photo 徽章策略的暗色版)。 */
.ab-story__media-inner {
  background: repeating-linear-gradient(135deg, #241b14 0 14px, #2a2017 14px 15px);
}
.ab-story__media-label {
  background: rgba(18,14,12,0.62);
  color: var(--wb-gilt);
}

/* Legal(/tc/,Privacy 上线后同样适用):post_content 是旧 Elementor 标记,
 * post-<id>.css 给顶部 section 上了纯白底(选择器 (0,3,0),第三方生成
 * CSS 压不过去 → !important 例外成立,对手等同 inline)。
 * 同段的白底 SaaS 风聊天插画(uploads/2024/05/24a.jpg)与品牌/暗色都
 * 强冲突 → 隐藏;Task 9 重写 legal 内容时再定去留。 */
.wb-legal .elementor-section { background-color: transparent !important; }
.wb-legal .elementor-widget-image { display: none; }
/* round 2:白底拿掉后,同 section 的 Elementor heading 自带深灰字
 * (post-<id>.css (0,3,0))在暗底上近乎隐形 → 提亮(同样 !important 例外)。 */
.wb-legal .elementor-heading-title { color: var(--wb-cocoa) !important; }

/* 首页 Visit 区单门店重排(owner 反馈 2026-06-12):MY 的三门店网格
 * (repeat(3,1fr))在 SG 单门店下只填 1/3、右侧 2/3 空;且
 * tanjong-pagar.webp 是 765×1020 竖图,5/4 居中裁切只剩天花板。
 * → 单卡改整行横版 feature:照片左 54%(裁切点下移到招牌/门面),
 *   信息右侧垂直居中;≤980px 回纵向堆叠(沿用主体既有断点)。 */
.dc2-locations__grid { grid-template-columns: 1fr; }
.dc2-locations__card--primary {
  flex-direction: row;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
}
.dc2-locations__card--primary .dc2-locations__img {
  width: 54%;
  aspect-ratio: auto;
  height: 440px;   /* 固定高度:竖图(765×1020)无约束时按原比例撑到 ~770px,cover 裁切不会发生 */
  object-position: center 60%;
}
/* 营业时间是 \n 分两行的数据("Mon–Sat · 10:30am–7pm\nSun · Closed"),
 * HTML 折叠后读成 "7PM SUN · CLOSED" → 还原换行 */
.dc2-locations__addr + .wb-mc { white-space: pre-line; }
.dc2-locations__card--primary .dc2-locations__body {
  padding: 44px 48px;
  justify-content: center;
  gap: 12px;
}
@media (max-width: 980px) {
  .dc2-locations__card--primary { flex-direction: column; }
  .dc2-locations__card--primary .dc2-locations__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;     /* 重置桌面档的 height:440px,否则 390px 宽 × 440px 高成竖版大图 */
    min-height: 0;
    object-position: center 58%;
  }
  .dc2-locations__card--primary .dc2-locations__body { padding: 26px 24px; }
}

/* -- 7. MY 对齐批次(2026-06-12):MY 分叉后新增区块的暗色收口 --
 * 圈定法:git show main(对齐前)主体 1-5113 vs 现主体 1-5539 逐行 diff,
 * 新增 ~1156 行全量审计(:root 反转差异忽略)。
 * 覆盖对象:首页 svc strips / 评论 nth-child 亮卡 / 搜索 modal 标签 /
 * 评分 pill / services 收口 CTA / brand-archive 引言 / case related logo 占位 /
 * qt-*(SG 模板未引用,防御性)/ MY 浅色 a11y 降档的暗底回退。
 * 纪律同前:主体零散不改;!important 只对抗主体 !important/第三方/inline(本段 0 处)。
 * 故意不改清单与移交 Task 10 截图复核项在段尾注释。 */

/* 7.1 MY 浅色 a11y 降档回退 —— 同 D 组逻辑反向应用:
 * MY 分叉后把一批 gilt/rose 小字按"浅底对比度"降为 --wb-rose-deep(#9a5d4b),
 * 暗底(#120e0c/#151110)上 rose-deep 仅 ≈3.5:1 = 回归 → 恢复分叉前原值
 * (--rose 亮档 / --wb-gilt on #151110 = 8.10:1,均过 AA)。
 * .dc2-svc__no--more / .dc2-svc__body--more 已无模板引用(死规则),顺手同组。 */
.wb-mc--rose,
.dc2-services__cap { color: var(--rose); }
.dc2-svc-strip__label-no,
.dc2-svc__no--more,
.dc2-svc__body--more,
.wb-search-modal__form-hint,
.wb-search-modal__section-label,
.wb-search-modal__recent-label,
.wb-search-modal__featured-eyebrow,
.loc-rating__stars { color: var(--wb-gilt); }

/* 7.2 首页评论区:MY 把 .dc2-test--dark 类改成 :nth-child(3n+2) 位置变体
 * (模板已无 --dark 类,分区 2.4 的 .dc2-test--dark 三条成死选择器)。
 * 亮卡(background: var(--wb-cocoa) 现 #efe6d8)配对深字,逐条镜像 2.4:
 * 变体特异性 (0,2,0) 高于分区 5 的 .dc2-test (0,1,0),阴影不被盖 —— 但其
 * 自带阴影 rgba(40,22,15,.6/.7) 已是黑系暖调,暗底成立,不另写。 */
.dc2-test:nth-child(3n+2) { color: var(--wb-on-cream); }
.dc2-test:nth-child(3n+2) .dc2-test__stars { color: var(--wb-gilt-deep); }
.dc2-test:nth-child(3n+2) .dc2-test__attr { border-top-color: var(--wb-on-cream-line); }
.dc2-test:nth-child(3n+2) .wb-edition--gilt { color: var(--wb-gilt-deep); } /* D 组恢复 gilt 后,亮卡内例外(镜像 2.4 的 --dark 例外) */

/* 7.3 services 收口 CTA 次级链接:.svc-cta 坐 rose 亮板(wb-platform--accent),
 * MY 新增 rgba(255,…)/#fff 白字压亮板 → on-cream 族(主链路 __copy/__h/__cap/__btn
 * 已在 2.4,本条补 MY 分叉后新增的 __secondary)。 */
.svc-cta__secondary { color: var(--wb-on-cream-soft); }
.svc-cta__secondary:hover { color: var(--wb-on-cream); }

/* 7.4 brand-archive 引言:--wb-cocoa-65 两站均未定义,fallback #6a5946
 * 在暗底上 ≈2.7:1(正文 15px)→ cocoa-soft(亮档)。 */
.ba-services-intro { color: var(--wb-cocoa-soft); }

/* 7.5 case related 卡 brand-logo 占位(MY 新增 --logo 变体):深色 PNG 经
 * grayscale(1) 后在暗占位(--wb-paper-warm)上消失 → 同分区 3 提成米白单色。
 * hover 规则只动 opacity/transform,filter 不丢,无需配对覆盖。 */
.cs-related__card-img--logo .cs-related__card-img__logo { filter: brightness(0) invert(1); }

/* 7.6 暖棕浅阴影 → 黑系(同 C 组)。loc-map-embed 当前 SG 模板未引用
 * (wb-location.php 未同步 P5 地图嵌入),防御性先收。 */
.loc-map-embed { box-shadow: var(--wb-shadow); }

/* 7.7 focus 补环:.dc2-tests__grid:focus-visible 的 var(--wb-focus) 在 MY/SG
 * 两边都未定义 → 整条声明 computed-value 失效 = 滚动区无 focus 环(上游 MY
 * 同病,顺手在暗色侧自修;色随分区 4 的 .dc2-tests__rating 用 rose)。 */
.dc2-tests__grid:focus-visible { outline: 2px solid var(--wb-rose); }

/* 7.8 qt-*(MY 版 quote 页形态;SG 保留 qf 表单,零模板引用 —— 防御性,
 * 防未来 cherry-pick 模板时白字漏暗色):MY 模板里坐 wb-platform--dark
 * (现 cocoa 亮板)的白字/白透组 → on-cream 族。 */
.qt-next__num { background: var(--wb-on-cream-fill); color: var(--wb-on-cream); }
.qt-next__when { color: var(--wb-on-cream); }
.qt-next__what { color: var(--wb-on-cream-soft); }

/* -- 7 段尾:故意不改清单(新增行审计里判"合法/装饰",与 B/C 组逻辑一致)--
 *   - WhatsApp 绿族:.qt-cta__btn(#25d366 底 + #053a18 深绿字,自带 AA)、
 *     .cs-restore-cta__btn--wa(#25D366+#fff,色相自立于主题;白字 1.98:1 是
 *     MY 上游浅色侧同样存在的旧账,非暗色回归)、.dc-sticky-bar__btn--wa
 *     (#1a8d4f 加深版)及其绿系投影 —— 均保留。
 *   - .ab-story__media-label 的 MY a11y 改色:分区 6 已整体翻深透底 + gilt 字,
 *     后到覆盖,无需重做。
 *   - .ct-outlet--primary .ct-outlet__tag 的 MY 新底 rgba(201,164,122,.18):
 *     gilt 透膜压 cocoa 亮板成立;字色/边线 2.4 已覆盖。
 *   - .dc2-test:nth-child(3n+2) .dc2-test__quote-mark rgba(201,164,122,.35):
 *     装饰引号,镜像 2.4 对 --dark 同值的保留决定。
 *   - .dc2-test__avatar 白描边 + inline 头像色块:分隔环,两主题通用。
 *   - .dc2-svc-strip-card__img / .cs-related__card-img--logo 底 --wb-paper-warm:
 *     token 已深,照片/logo 占位成立。
 *   - qt-trust-avatar(rose→cocoa 渐变 + var(--wb-paper) 环):零引用,环色
 *     token 已深(页底色抠像逻辑成立),不动。
 * -- 移交 Task 10 截图复核项 --
 *   1. 首页评论区 nth-child(3n+2) 亮卡:深字/星色/边线实拍确认(本段 7.2)。
 *   2. /service/ 收口 CTA:rose 亮板上 __secondary 下划线链接的辨识度(7.3)。
 *   3. 评分 pill(contact/outlet):gilt 星 + cocoa 数字在 paper-warm 上的层次(7.1)。
 *   4. 搜索 modal:gilt 标签恢复后整体层次(7.1)。
 *   5. 首页 svc strips:label-no 斜体 gilt + 横滑卡片 meta 的可读性(7.1)。
 *   6. 若未来同步 MY quote 模板(qt-*):.qt-prep__tile 底 --wb-paper-warm 与
 *      页底几乎同色(卡片消失)+ qt-trust 渐变头像亮档 —— 需届时重审(7.8 只
 *      收了白字组)。
 *   7. brand archive(/brand/*)引言 cocoa-soft 亮档实拍(7.4)。 */

/* -- 7.9 Align sweep round 2(Task 10 走查修复)--
 * Contact:MY 模板 .ct-outlets 是 repeat(3,1fr)(PD / TRX / SG 三卡);
 * SG 单门店只渲染 1 卡 → 桌面卡片缩在左 1/3,右 2/3 空板。收窄为单列
 * 居中(≤760px)。移动端 868 行的 1fr 同特异性但本规则后到,
 * minmax(0,760px) 在窄容器等效 1fr,行为不变。 */
.ct-outlets { grid-template-columns: minmax(0, 760px); justify-content: center; }