/* Shared section primitives for the theme renderer.
   Theme-specific CSS overrides these via [data-theme="..."] rules
   in the per-theme bundles. Frameworks (alternating, accent-bands,
   layered) apply via [data-framework="..."] in frameworks.css. */

@layer theme, framework, section;

/* --- design token DEFAULTS (historically Darkside Tattoo's palette) ---
   🚨 These are scoped to the theme wrapper, NOT to :root, and the scoping is
   load-bearing.

   Until 2026-08-16 this block sat on bare `:root` — i.e. on <html> — so one
   client's palette (near-black, cream, gold #dcb96a, Cinzel) was the
   document-wide default on EVERY themed tenant. Inside [data-theme] that was
   invisible, because each theme re-declares the same tokens and the nearer
   element wins by inheritance. Outside it, it was silent breakage: anything
   mounted as a sibling of the theme wrapper — which is where the root
   layout's platform-wide ornaments live — inherited Darkside's colours
   instead of nothing. Worse, because the vars were SET, a defensive
   `var(--accent, my-fallback)` never reached its fallback, so a component
   could not opt out even by writing one. That is exactly how the sticky
   "Book Consultation" bar rendered gold on every themed tenant for months,
   and why two rounds of fixes that corrected the VALUES changed nothing:
   the lookup was being intercepted upstream (docs/SESSION-LOG.md 2026-08-16).

   Scoped here to [data-theme], the defaults reach every section (all of
   which render inside the wrapper) and reach nothing else. A layout-level
   component now genuinely sees these vars as unset and gets its own
   fallback — or, better, uses a dedicated `--tn-*` var.

   🚨 `:where()` + `@layer theme` is what keeps the theme bundles winning,
   and BOTH halves are required. Read before touching either.

   - `:where([data-theme])` has specificity (0,0,0); a theme bundle's
     `[data-theme="darkside"]` is (0,1,0), so the bundle wins. A bare
     `[data-theme]` here would be (0,1,0) too — an exact tie that the
     defaults would win on source order, flattening every theme.
   - These defaults sit in `@layer theme`, the SAME layer as the bundles, so
     that specificity is what decides. Layer order beats specificity, so a
     block in `@layer section` (the last layer) would outrank every theme
     bundle no matter how weak its selector.

   🚨 Do NOT "improve" this by giving the defaults their own earlier layer.
   That was tried on 2026-08-16 and is broken in production: `@layer` order
   is fixed by the FIRST declaration the document parses, and that is
   `app/globals.css:32` (`@layer app-base, theme, framework, section;`),
   which loads before ThemeShell's links. A new layer name declared later in
   sections.css gets appended LAST — i.e. highest precedence — so the
   defaults would beat all 15 theme bundles. scripts/check-theme-a11y.tsx
   caught exactly that, because its fixture declares its own layer list too.
   Staying inside an already-declared layer removes the ordering dependency
   entirely. */
@layer theme {
  :where([data-theme]) {
    --bg: #0c0c0c;
    --bg-mid: #141414;
    --section-bg: var(--bg);
    --text: #ece6dc;
    --accent: #dcb96a;
    --accent-text: #dcb96a;
    --muted: #8a857a;
    --rule: rgba(220, 185, 106, 0.18);
    --font-display: 'Cinzel', Georgia, serif;
    /* 🚨 --font-heading FOLLOWS --font-display inside a themed subtree, and
       that is what makes an interior page's H1 match its own H2s.

       --font-display is the canonical name (167 reads in this file), and a
       theme bundle re-declares it per theme. --font-heading is the permanent
       alias for customer-editable custom_css (app/layout.tsx) and is ALSO the
       dominant idiom in the shared interior components — PageHeader's
       .tn-page-header__title, ShopPage, image-detail, /area, /faq, Footer —
       which render inside this wrapper on a themed tenant but were written
       against the non-themed vocabulary. Theme bundles never declared the
       alias, so those reads fell through to the :root value in
       app/layout.tsx: the tenant's brand heading font, or its seed when the
       brand row is blank. Measured on art-immortal /piercing: the H1 rendered
       Roboto Slab 38px while every H2 in the same page rendered the theme's
       Archivo Black — different family, 6px apart, so the page title neither
       matched nor outranked its own section headings.

       Declared here rather than at 100+ call sites, and as a var() rather
       than a literal so it tracks whatever the bundle set. ThemeShell still
       wins: a brand font override is an INLINE style setting both names, and
       inline beats this. */
    --font-heading: var(--font-display);
    --font-body: 'Inter', system-ui, sans-serif;
    --btn-radius: 0;
    --btn-weight: 600;
    --btn-transform: uppercase;
    --btn-tracking: 0.08em;
  }
}

@layer section {

  /* --- theme wrapper base ---
     The ThemeShell div carries data-theme and the var bundle, but until
     2026-07-21 nothing set the wrapper's own color/background/font — so
     every element that INHERITS its text color picked it up from the
     surrounding page body instead of the theme. In the owner preview and
     builder iframes the body carries the network chrome's dark-mode CSS
     (near-white text), which ghosted all inheriting text (FAQ headlines,
     accordion questions, plain links) on light themes like Atelier
     (operator screenshot 2026-07-21). Explicitly-colored elements
     (accent eyebrows, muted body copy) looked fine, which is why it read
     as "some text missing" rather than a dead page. */
  [data-theme] {
    color: var(--text);
    background: var(--bg);
    font-family: var(--font-body);
  }

  /* --- long-token overflow guard ---
     Content arriving from the Instagram ingest routinely contains tokens
     that CANNOT break at a normal wrap opportunity: @handles, hashtags and
     bare URLs. `@paradisetattoogathering` is a single 24-character word;
     in a display-serif heading at phone width it is wider than the column,
     and with no wrap rule it does not merely overflow its own box -- it
     widens the whole section and clips every neighbouring line at the
     viewport edge (operator screenshots, 2026-08-02: "Back in offic",
     "Check out Cecil Porters new site! Bee").

     break-word rather than anywhere: it only breaks a token that cannot
     otherwise fit, so ordinary copy keeps its natural wrapping and
     min-content sizing is left alone.

     Declared once on the theme wrapper's text elements so every theme and
     every section inherits it -- this class of bug should not be fixable
     one section at a time. */
  [data-theme] :is(h1, h2, h3, h4, h5, h6, p, li, dd, dt, blockquote, figcaption, a, span) {
    overflow-wrap: break-word;
  }

  /* Scroll anchor emitted by SectionRouter before each section so nav +
     interior /#{sectionKey} links (/#about, /#services, /#roster, /#consult, …)
     land at the top of the section. Zero-height so it never affects layout;
     scroll-margin-top offsets a fixed/overlay nav. */
  .section-anchor { display: block; height: 0; scroll-margin-top: 88px; }

  /* --- per-section animation kill-switch ---
     SectionRouter emits a hidden <span data-animations-off="true"> MARKER
     immediately before a section when the operator has disabled animations
     for that section in the builder. This selector suppresses every
     animation + transition in the section that follows the marker without
     us having to touch the 30+ keyframes/animation rules scattered through
     the section/theme CSS. Section-level fades, hero slideshows, glow
     pulses, etc. all freeze on their first frame.

     🚨 `+ [data-section]`, never a wrapper. It used to be a
     display:contents span AROUND the section, which took the section out of
     the framework element's child list and inverted the positional colour
     recipes (docs/SECTION-RECIPES.md §0b). The marker has no box (hidden)
     and is not a <section>, so layout and nth-of-type are both unaffected. */
  [data-animations-off="true"] + [data-section],
  [data-animations-off="true"] + [data-section] *,
  [data-animations-off="true"] + [data-section] *::before,
  [data-animations-off="true"] + [data-section] *::after {
    animation: none !important;
    transition: none !important;
  }

  /* --- reset ---
     Ported from assembler global reset (lines 11-24). Applied here so
     the section renderer is self-contained. If a surrounding layout
     already resets these, the cascade still wins correctly. */
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { height: 100%; }
  body { min-height: 100%; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  summary { cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  summary::marker { content: ''; }

  /* The design token defaults moved OUT of this layer and off :root on
     2026-08-16 — see the @layer tokens block at the top of this file for
     why. Button tokens (--btn-*) are still shared primitives referenced by
     every CTA in every section; they just live on the theme wrapper now. */

  /* --- page canvas ---
     🚨 Deliberately does NOT set background / color / font-family.
     app/layout.tsx emits an UNLAYERED `html {}` + `body {}` rule carrying
     the tenant's resolved brand values, and unlayered beats any layer at
     any specificity — so the three declarations that used to live here
     (`background: var(--bg)` etc.) were already overridden on every tenant
     render and were dead weight. They were also the only reason this rule
     needed document-scope theme tokens at all. Verified 2026-08-16 by
     diffing computed styles on a real served page before/after removal:
     zero change, on <body> included.
     The container context is real and stays — section variants query it. */
  body {
    container-type: inline-size;
    container-name: preview;
  }

  /* Every top-level section in the renderer carries `.slot` so framework
     selectors can target them by nth-of-type. */
  body > .slot {
    width: 100%;
    background: var(--section-bg);
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: inherit;
    line-height: 1.15;
    font-family: var(--font-display);
  }

  /* --- sr-only ---
     Standard visually-hidden utility. Used by nav hamburger labels,
     rating aria-labels, and any other screen-reader-only text. */
  .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;
  }

  /* --- tn-section-h ---
     Nine sections announced themselves with a <div> — the pricing eyebrow, the
     third-party-trust eyebrow, AboutC's kicker — so the only headings on those
     blocks were the per-ITEM h3s (a tier name, an award), leaving an h1 -> h3
     skip and no heading a crawler or a screen-reader user could use to find
     the section. They are <h2> now.

     This class exists ONLY to undo what the UA stylesheet adds when a div
     becomes an h2: a top margin and bold weight. It is deliberately
     LOW-SPECIFICITY (0,1,1) so every existing
     [data-section][data-variant] .x__eyebrow rule still wins on font-size,
     colour, letter-spacing and margin-bottom — the promotion must be
     semantic only, with nothing moving on the page. Verified by
     scripts/check-section-heading-promo.tsx, which diffs the computed styles
     of the div and the h2 against the real sections.css. */
  .tn-section-h {
    margin-top: 0;
    /* 🚨 font-family and line-height are here because the guard caught them,
       not because they were predicted: a generic `h1,h2,h3 { font-family:
       var(--font-display) }` rule elsewhere in this file re-typefaced eight of
       the nine the moment the tag changed, and heading line-heights shrank
       every one of them by 3-4px. `inherit` reproduces exactly what the <div>
       inherited; a section rule that sets any of these still wins on
       specificity. */
    font-weight: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
  }

  /* --- section-announce ---
     The heading a section gets when its DESIGN ships none (see
     components/themes/sections/SectionAnnounce.tsx). Hidden by default via
     .sr-only; this is what it looks like once an operator switches it on.

     Deliberately plain: it has to sit above eighteen different section
     designs across seventeen themes without fighting any of them, so it takes
     the theme's display face and ink and nothing else. A variant that wants a
     heading of its own draws one; this is the one that was missing. */
  .section-announce {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--text);
    text-align: center;
  }

  /* --- nav-cta ---
     Shared CTA pill used across all nav variants (horizontal-wordmark,
     logo-centered, hamburger-desktop). Defined here so all three nav
     section files can use it without redeclaring it. */
  .nav-cta {
    padding: 8px 18px;
    border: 1px solid var(--accent);
    color: var(--accent-text);
    font-size: 11px;
    letter-spacing: var(--btn-tracking, 0.16em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 100px);
    font-weight: var(--btn-weight, 500);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .nav-cta:hover { background: var(--accent); color: var(--accent-contrast, var(--bg)); }

  /* --- mobile-overlay ---
     Shared fullscreen menu overlay used by nav variants A and B on mobile.
     Variant C (hamburger-desktop) uses its own .nav-hb__overlay but the
     same structural pattern applies. */
  .mobile-overlay-toggle { list-style: none; cursor: pointer; }
  .mobile-overlay-toggle::-webkit-details-marker { display: none; }
  .mobile-overlay-toggle::marker { display: none; content: ''; }

  .mobile-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
  }
  .mobile-hamburger span {
    display: block;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
  }

  .mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* Theme bg: the text is var(--text), so a fixed dark was invisible on light themes. */
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* `safe` keeps a long nav scrollable; old Safari keeps the line above. */
    justify-content: safe center;
    overflow-y: auto;
    padding: 72px 24px;
    align-items: center;
    gap: 48px;
  }
  .mobile-overlay-close {
    /* fixed, not absolute: the overlay scrolls, and an absolute close scrolled
       away with the first links, leaving a long menu with no way out. */
    position: fixed;
    z-index: 2;
    top: 20px;
    right: 16px;
    /* 44x44. Measured at 28x28 — the one control that dismisses a full-screen
       overlay, so a miss leaves the visitor stuck on a menu (2026-09-07). The
       glyph is unchanged; the box around it grew, and the top/right came in
       by 8px so it sits where it did. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 300;
    color: var(--text);
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
  }
  .mobile-overlay-close:hover { opacity: 1; color: var(--accent-text); }
  .mobile-overlay a {
    /* 38px measured; 44 is the floor for a primary menu row. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    transition: color 0.15s;
  }
  .mobile-overlay a:hover { color: var(--accent-text); }
  /* A dropdown's children are SUBORDINATE here, not eleven more shouts.
     The drawer draws every link at 28px uppercase display on a >=44px row,
     which is right for a top-level destination and wrong for a category
     under one: measured on Art Immortal 2026-10-01, merging the Popular
     Galleries children in took the drawer from 11 rows to 17 at that size,
     and the operator's report was "big massive list".
     The generic .nav-dd__child rule cannot help — it offers padding-left in
     a column that is CENTER-aligned, so the indent it relies on is invisible
     and the child still inherits 28px uppercase. Size and weight are the
     only subordination signals that survive centering, so they carry it.
     Tap target stays at 36px: above the 24px floor of WCAG 2.5.8 AA, below
     the 44px a primary row gets, which is the hierarchy made physical. */
  .mobile-overlay .nav-dd__child {
    padding-left: 0;
    min-height: 36px;
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .mobile-overlay .nav-cta {
    font-family: var(--font-body);
    font-size: 13px;
    padding: 12px 28px;
    margin-top: 12px;
  }

  /* <details> overlay hidden when closed (no-JS pattern) */
  .mobile-details:not([open]) .mobile-overlay { display: none; }

  /* =====================================================================
     Hero section — all variants
     Scoped to [data-section="hero"][data-variant="<letter>"] so the same
     class names can safely coexist on one page (variant catalog view).
     CSS ported from assembler index.html lines 682-1001 + 5339-5479.
     ===================================================================== */

  /* --- Variant A: image-static --- */
  [data-section="hero"][data-variant="a"] .hero-static {
    position: relative; height: 720px; overflow: hidden;
  }
  [data-section="hero"][data-variant="a"] .hero-static__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.72) contrast(1.05);
  }
  [data-section="hero"][data-variant="a"] .hero-static__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 56px;
    background: linear-gradient(to top, rgba(12,12,12,0.75) 0%, rgba(12,12,12,0) 50%);
  }
  [data-section="hero"][data-variant="a"] .hero-static__eyebrow {
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 18px;
  }
  [data-section="hero"][data-variant="a"] .hero-static__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 88px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 14px;
    line-height: 0.95;
  }
  [data-section="hero"][data-variant="a"] .hero-static__name .accent { color: var(--accent-text); }
  [data-section="hero"][data-variant="a"] .hero-static__tagline {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text);
    opacity: 0.86;
    margin-bottom: 30px;
    letter-spacing: 0.02em;
  }
  [data-section="hero"][data-variant="a"] .hero-static__cta {
    align-self: flex-start;
    padding: 14px 28px;
    border: 1px solid var(--accent);
    color: var(--accent-text);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
    transition: background 0.15s, color 0.15s;
  }
  [data-section="hero"][data-variant="a"] .hero-static__cta:hover {
    background: var(--accent); color: var(--accent-contrast, var(--bg));
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="a"] .hero-static__caption {
      padding-left: 24px; padding-right: 24px;
    }
    [data-section="hero"][data-variant="a"] .hero-static__name { font-size: 56px; }
    [data-section="hero"][data-variant="a"] .hero-static { height: 580px; }
  }

  /* --- Variant B: split-image-text --- */
  [data-section="hero"][data-variant="b"] .hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 640px;
  }
  [data-section="hero"][data-variant="b"] .hero-split__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 64px;
    background: var(--section-bg);
  }
  [data-section="hero"][data-variant="b"] .hero-split__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 22px;
  }
  [data-section="hero"][data-variant="b"] .hero-split__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 64px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.05;
    margin-bottom: 18px;
  }
  [data-section="hero"][data-variant="b"] .hero-split__name .accent { color: var(--accent-text); }
  [data-section="hero"][data-variant="b"] .hero-split__tag {
    font-size: 15px;
    color: var(--text);
    opacity: 0.78;
    line-height: 1.65;
    max-width: 38ch;
    margin-bottom: 28px;
  }
  [data-section="hero"][data-variant="b"] .hero-split__creds {
    display: flex;
    gap: 28px;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 32px;
  }
  [data-section="hero"][data-variant="b"] .hero-split__cred-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  [data-section="hero"][data-variant="b"] .hero-split__cred-num {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--accent-text);
    font-weight: 500;
  }
  [data-section="hero"][data-variant="b"] .hero-split__cred-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  [data-section="hero"][data-variant="b"] .hero-split__ctas {
    display: flex; gap: 14px; align-items: center;
  }
  [data-section="hero"][data-variant="b"] .hero-split__cta-primary {
    padding: 14px 28px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
  }
  [data-section="hero"][data-variant="b"] .hero-split__cta-secondary {
    padding: 14px 18px;
    color: var(--text);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.14em);
    text-transform: var(--btn-transform, uppercase);
    border-bottom: 1px solid var(--rule);
    font-weight: var(--btn-weight, 500);
  }
  [data-section="hero"][data-variant="b"] .hero-split__cta-secondary:hover {
    color: var(--accent-text); border-color: var(--accent);
  }
  [data-section="hero"][data-variant="b"] .hero-split__img-wrap {
    position: relative; overflow: hidden;
  }
  [data-section="hero"][data-variant="b"] .hero-split__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="b"] .hero-split { grid-template-columns: 1fr; }
    [data-section="hero"][data-variant="b"] .hero-split__text { padding: 56px 24px; }
    [data-section="hero"][data-variant="b"] .hero-split__name { font-size: 48px; }
    [data-section="hero"][data-variant="b"] .hero-split__img-wrap {
      min-height: 360px; position: relative;
    }
  }

  /* --- Variant C: image-with-overlay --- */
  [data-section="hero"][data-variant="c"] .hero-overlay {
    position: relative; height: 800px; overflow: hidden;
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.45) contrast(1.08);
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__veil {
    position: absolute; inset: 0;
    background: radial-gradient(
      ellipse at 50% 35%,
      rgba(12,12,12,0) 0%,
      rgba(12,12,12,0.75) 70%,
      rgba(12,12,12,0.95) 100%
    );
  }
  /* Dark-theme HeroC: the default brightness(0.45) + near-opaque veil crushed a
     lone portrait to black on dark backgrounds, so the hero read empty for thin
     tenants (2026-07-25 gallery audit, flaw 2). Lighten the image + soften the
     veil for dark themes; light themes keep the strong scrim for white-text
     legibility. */
  [data-theme="studio-note"] [data-section="hero"][data-variant="c"] .hero-overlay__img,
  [data-theme="obsidian"] [data-section="hero"][data-variant="c"] .hero-overlay__img,
  [data-theme="darkside"] [data-section="hero"][data-variant="c"] .hero-overlay__img {
    filter: brightness(0.7) contrast(1.05);
  }
  [data-theme="studio-note"] [data-section="hero"][data-variant="c"] .hero-overlay__veil,
  [data-theme="obsidian"] [data-section="hero"][data-variant="c"] .hero-overlay__veil,
  [data-theme="darkside"] [data-section="hero"][data-variant="c"] .hero-overlay__veil {
    background: radial-gradient(
      ellipse at 50% 40%,
      rgba(12,12,12,0) 0%,
      rgba(12,12,12,0.35) 65%,
      rgba(12,12,12,0.6) 100%
    );
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__content {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 56px;
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 18px;
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__wordmark .accent { color: var(--accent-text); }
  [data-section="hero"][data-variant="c"] .hero-overlay__rule {
    width: 64px;
    height: 1px;
    background: var(--accent);
    margin-bottom: 30px;
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 52px;
    letter-spacing: 0.01em;
    color: var(--text);
    line-height: 1.15;
    max-width: 880px;
    margin-bottom: 16px;
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__sub {
    font-size: 14px;
    color: var(--text);
    opacity: 0.72;
    letter-spacing: 0.06em;
    margin-bottom: 44px;
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__ctas { display: flex; gap: 16px; }
  [data-section="hero"][data-variant="c"] .hero-overlay__cta-primary {
    padding: 15px 32px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__cta-secondary {
    padding: 15px 32px;
    border: 1px solid var(--accent);
    color: var(--accent-text);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
    transition: background 0.15s, color 0.15s;
  }
  [data-section="hero"][data-variant="c"] .hero-overlay__cta-secondary:hover {
    background: var(--accent); color: var(--accent-contrast, var(--bg));
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="c"] .hero-overlay__content {
      padding-left: 24px; padding-right: 24px;
    }
    [data-section="hero"][data-variant="c"] .hero-overlay { height: 640px; }
    [data-section="hero"][data-variant="c"] .hero-overlay__tagline { font-size: 34px; }
    [data-section="hero"][data-variant="c"] .hero-overlay__wordmark {
      font-size: 22px; letter-spacing: 0.24em;
    }
    [data-section="hero"][data-variant="c"] .hero-overlay__ctas {
      flex-direction: column; width: 100%; max-width: 320px;
    }
    [data-section="hero"][data-variant="c"] .hero-overlay__ctas a {
      width: 100%; text-align: center;
    }
  }

  /* --- Variant D: ken-burns-slideshow --- */
  @keyframes kenburns {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
  }
  [data-section="hero"][data-variant="d"] .hero-burns {
    position: relative; height: 780px; overflow: hidden; background: var(--section-bg);
  }
  [data-section="hero"][data-variant="d"] .hero-burns__slides { position: absolute; inset: 0; }
  [data-section="hero"][data-variant="d"] .hero-burns__slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__slide.is-active { opacity: 1; }
  [data-section="hero"][data-variant="d"] .hero-burns__slide img {
    width: 100%; height: 100%; object-fit: cover;
    animation: kenburns 20s ease-in-out infinite;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__slide--1 img {
    animation-delay: 0s; transform-origin: center center;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__slide--2 img {
    animation-delay: 0s; transform-origin: top left;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__slide--3 img {
    animation-delay: 0s; transform-origin: bottom right;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__slide--4 img {
    animation-delay: 0s; transform-origin: top right;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
      to top,
      rgba(12,12,12,0.8) 0%,
      rgba(12,12,12,0.2) 40%,
      rgba(12,12,12,0.1) 100%
    );
    z-index: 1;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__content {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column;
    justify-content: flex-end;
    padding: 64px;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__eyebrow {
    font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--accent-text); margin-bottom: 18px;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__name {
    font-family: var(--font-display); font-weight: 600; font-size: 80px;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text); margin-bottom: 14px; line-height: 0.95;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__name .accent { color: var(--accent-text); }
  [data-section="hero"][data-variant="d"] .hero-burns__tagline {
    font-size: 16px; color: var(--text); opacity: 0.86;
    margin-bottom: 30px; max-width: 540px;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__cta {
    align-self: flex-start; padding: 14px 28px;
    border: 1px solid var(--accent); color: var(--accent-text);
    font-size: 12px; letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
    transition: background 0.15s, color 0.15s;
  }
  [data-section="hero"][data-variant="d"] .hero-burns__cta:hover {
    background: var(--accent); color: var(--accent-contrast, var(--bg));
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="d"] .hero-burns { height: 580px; }
    [data-section="hero"][data-variant="d"] .hero-burns__content { padding: 32px 24px; }
    [data-section="hero"][data-variant="d"] .hero-burns__name { font-size: 48px; }
  }

  /* --- Variant E: parallax-pan --- */
  @keyframes heroPan {
    0%   { object-position: 30% center; }
    100% { object-position: 70% center; }
  }
  [data-section="hero"][data-variant="e"] .hero-pan {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    background: var(--bg);
  }
  [data-section="hero"][data-variant="e"] .hero-pan__img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
    animation: heroPan 20s ease-in-out infinite alternate;
  }
  [data-section="hero"][data-variant="e"] .hero-pan__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 56px;
    background: linear-gradient(to top, rgba(12,12,12,0.95) 0%, transparent 100%);
  }
  [data-section="hero"][data-variant="e"] .hero-pan__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 8px;
  }
  [data-section="hero"][data-variant="e"] .hero-pan__name {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  [data-section="hero"][data-variant="e"] .hero-pan__name .accent { color: var(--accent-text); }
  [data-section="hero"][data-variant="e"] .hero-pan__tagline {
    font-size: 16px;
    color: var(--muted);
    max-width: 540px;
    margin-bottom: 20px;
  }
  [data-section="hero"][data-variant="e"] .hero-pan__cta {
    display: inline-block;
    padding: 12px 28px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 4px;
  }

  /* --- Variant L: literary-quote ---
     Ported from the Nevermore Tattoo Collective source design. The source
     renders its backdrop grayscale at 30% opacity under a top-to-bottom
     gradient, so the photo reads as texture and never competes with the
     type -- reproduced here with the filter + veil rather than by baking a
     treated image, so any tenant's own photo gets the same handling. --- */
  [data-section="hero"][data-variant="l"] .hero-literary {
    position: relative;
    min-height: 760px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  [data-section="hero"][data-variant="l"] .hero-literary__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.42) contrast(1.06);
  }
  [data-section="hero"][data-variant="l"] .hero-literary__veil {
    position: absolute; inset: 0;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 80%, transparent) 0%,
      color-mix(in srgb, var(--bg) 62%, transparent) 45%,
      var(--bg) 100%
    );
  }
  [data-section="hero"][data-variant="l"] .hero-literary__content {
    position: relative;
    max-width: 900px;
    padding: 96px 24px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
  }
  /* Not raw var(--accent): measured on Nevermore, whose accent resolves to
     the source's own --primary (#8E0B0B), that is 2.01:1 on near-black --
     the SOURCE DESIGN ITSELF fails WCAG here, and rendering it literally
     would ship an unreadable eyebrow. Mixing toward --text keeps the hue
     (still plainly red) and lifts it to ~5:1. The mix direction is
     self-correcting across themes: on a light theme it darkens the accent
     instead, improving contrast there too. */
  [data-section="hero"][data-variant="l"] .hero-literary__eyebrow {
    color: color-mix(in srgb, var(--accent) 55%, var(--text));
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0 0 24px;
  }
  /* The wordmark is the whole point of this variant: display scale, wide
     tracking, serif. clamp() keeps a long studio name on one or two lines
     instead of overflowing the way a fixed 9rem would. */
  [data-section="hero"][data-variant="l"] .hero-literary__wordmark {
    font-family: var(--font-display);
    font-size: clamp(44px, 9vw, 132px);
    line-height: 0.9;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 32px;
    text-wrap: balance;
  }
  [data-section="hero"][data-variant="l"] .hero-literary__rule {
    width: 64px; height: 1px;
    /* Same reasoning as the eyebrow, but a decorative divider needs less
       lift than text, so it keeps more of the accent. */
    background: color-mix(in srgb, var(--accent) 70%, var(--text));
    margin: 0 0 32px;
  }
  [data-section="hero"][data-variant="l"] .hero-literary__quote {
    max-width: 34em;
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.7;
    font-style: italic;
    color: var(--muted, var(--text));
    margin: 0 0 44px;
  }
  [data-section="hero"][data-variant="l"] .hero-literary__ctas {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  }
  [data-section="hero"][data-variant="l"] .hero-literary__cta {
    padding: 20px 40px;
    color: var(--text);
    font-size: 13px;
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    font-weight: var(--btn-weight, 500);
    border: 1px solid color-mix(in srgb, var(--text) 50%, transparent);
    border-radius: var(--btn-radius, 0);
    transition: background 0.4s, color 0.4s, border-color 0.4s;
  }
  [data-section="hero"][data-variant="l"] .hero-literary__cta:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast, var(--bg));
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="l"] .hero-literary { min-height: 560px; }
    [data-section="hero"][data-variant="l"] .hero-literary__content { padding: 64px 20px; }
    [data-section="hero"][data-variant="l"] .hero-literary__quote { margin-bottom: 32px; }
    [data-section="hero"][data-variant="l"] .hero-literary__cta { padding: 16px 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-section="hero"][data-variant="l"] .hero-literary__cta { transition: none; }
  }

  /* --- Variant M: luminous-mark ---
     The source lights its logo with a pulsing gold drop-shadow (40px -> 100px
     over 5s) and parallaxes it behind the wordmark. Reproduced with a CSS
     glow keyed to --accent so any tenant's mark gets the same treatment, and
     the animation is dropped entirely under prefers-reduced-motion. --- */
  [data-section="hero"][data-variant="m"] .hero-mark {
    position: relative;
    min-height: 90vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background-image: radial-gradient(
      circle at 50% 45%,
      color-mix(in srgb, var(--accent) 12%, transparent) 0%,
      var(--bg) 65%
    );
  }
  /* The source layers this exactly: a warm radial wash, the mark FULL-BLEED
     as object-cover at 60% opacity, then a 30% background scrim over it.
     Full-bleed is why the source has no hard edge -- an earlier cut here
     floated the mark centred at `object-fit: contain`, which framed its
     opaque black field as a visible rectangle. Copying the source's
     treatment removes the edge at the root rather than masking it. */
  [data-section="hero"][data-variant="m"] .hero-mark__glow {
    /* Taller than the hero (inset -12% top/bottom) so the scroll parallax
       below can drift it 20% without ever exposing a bare edge. */
    position: absolute; inset: -12% 0;
    /* Scroll parallax: --hm-scroll (0..1 over the first 1000px) is written by
       HeroMarkMotion; the backdrop moves 20%, the copy 10% (source values). */
    transform: translateY(calc(var(--hm-scroll, 0) * 20%));
    will-change: transform;
    pointer-events: none;
    overflow: hidden;
    /* 🚨 z-index:0 is load-bearing, not tidiness. Without it this element is
       positioned at z-index:auto, so it establishes NO stacking context and
       its ::after scrim (z-index:3) competes in the PARENT context — where it
       outranks .hero-mark__content at auto/0 and paints the 55% wash straight
       over the wordmark. Measured on prod: type declared rgb(230,225,213)
       rendered at rgb(106,101,91), under half its intended brightness.
       Setting z-index here contains ::before/img/::after inside this layer. */
    z-index: 0;
  }
  /* from-primary/30 via-transparent — the hot centre behind the mark. */
  [data-section="hero"][data-variant="m"] .hero-mark__glow::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(
      circle at center,
      color-mix(in srgb, var(--accent) 30%, transparent) 0%,
      transparent 55%
    );
  }
  [data-section="hero"][data-variant="m"] .hero-mark__glow img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    /* Hover tilt: the section is the hover target (source), 0 -> 2deg over
       1.5s ease-out, back on leave. Scaled 1.1 like the source so the
       rotation never shows a corner. */
    transform: scale(1.1) rotate(0deg);
    transition: transform 1.5s ease-out;
    /* The SOURCE's density, restored. An earlier cut knocked this to 0.22
       with a 55% scrim because the artwork's engraved wordmark doubles the
       h1 -- but the doubling is the design (operator confirmed against the
       original 2026-08-24), and the mid-grey scrim was what washed the whole
       hero out. The artwork is dark-on-dark; at 0.6 it reads as rich
       texture, and the h1 carries its own text-shadow. */
    opacity: 0.6;
    z-index: 2;
    animation: hero-mark-breathe 5s ease-in-out infinite;
  }
  /* bg-background/30 — knocks the mark back so the wordmark stays first. */
  [data-section="hero"][data-variant="m"] .hero-mark__glow::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
    background: color-mix(in srgb, var(--bg) 30%, transparent);
  }
  /* Source: drop-shadow 40px -> 100px of gold over 5s. No transform here --
     the mark is object-cover now, so scaling it would crop rather than
     breathe. */
  @keyframes hero-mark-breathe {
    0%, 100% {
      filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 40%, transparent));
      opacity: 0.5;
    }
    50% {
      filter: drop-shadow(0 0 100px color-mix(in srgb, var(--accent) 90%, transparent));
      opacity: 0.7;
    }
  }
  [data-section="hero"][data-variant="m"] .hero-mark[data-hover="1"] .hero-mark__glow img {
    transform: scale(1.1) rotate(2deg);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__content {
    position: relative;
    transform: translateY(calc(var(--hm-scroll, 0) * 10%));
    /* Explicitly above the glow layer rather than relying on DOM order. */
    z-index: 1;
    text-align: center;
    padding: 96px 24px;
    max-width: 1000px;
  }
  [data-section="hero"][data-variant="m"] .hero-mark__wordmark {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 7vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 24px;
    /* The mark sits directly behind the type, so the wordmark carries its own
       shadow rather than relying on a veil that would dim the glow. */
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__lead { color: var(--text); }
  [data-section="hero"][data-variant="m"] .hero-mark__tail {
    color: var(--accent-text);
    font-size: 0.86em;
  }
  [data-section="hero"][data-variant="m"] .hero-mark__sub {
    margin: 0 0 44px;
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--text);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.95);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__ctas {
    display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  }
  [data-section="hero"][data-variant="m"] .hero-mark__cta {
    padding: 16px 32px;
    font-size: 13px;
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    font-weight: var(--btn-weight, 500);
    border-radius: var(--btn-radius, 0);
    border: 1px solid transparent;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
  }
  [data-section="hero"][data-variant="m"] .hero-mark__cta--primary {
    background: var(--accent); color: var(--accent-contrast, var(--bg)); border-color: var(--accent);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__cta--primary:hover {
    background: var(--text); border-color: var(--text);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__cta--ghost {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 30%, transparent);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__cta--ghost:hover {
    background: var(--text); color: var(--bg);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__cta--accent {
    color: var(--accent-text);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
  [data-section="hero"][data-variant="m"] .hero-mark__cta--accent:hover {
    background: var(--accent); color: var(--accent-contrast, var(--bg));
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="m"] .hero-mark { min-height: 640px; }
    [data-section="hero"][data-variant="m"] .hero-mark__content { padding: 64px 20px; }
    /* No width override on the glow img here. It dates from when the mark was
       a centered graphic; the img is inset:0 + object-cover now, so an
       explicit width anchors it LEFT and strips the right 12% down to the
       radial-gradient backdrop (Black Lantern on a phone, 2026-08-26 —
       measured 343px of a 390px viewport). Cover crops; it never overflows. */
    [data-section="hero"][data-variant="m"] .hero-mark__cta { padding: 14px 22px; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-section="hero"][data-variant="m"] .hero-mark__glow,
    [data-section="hero"][data-variant="m"] .hero-mark__content { transform: none; }
    [data-section="hero"][data-variant="m"] .hero-mark__glow img {
      animation: none;
      transition: none;
      opacity: 0.6;
      filter: drop-shadow(0 0 60px color-mix(in srgb, var(--accent) 55%, transparent));
    }
    [data-section="hero"][data-variant="m"] .hero-mark__cta { transition: none; }
  }

  /* --- Games section — all variants share one teaser card ---
     Each variant links OUT to the real game rather than embedding it: the
     games are full-screen kiosk experiences, and inlining one would ship a
     heavy client bundle to every homepage visitor whether they play or not. */
  [data-section="games"] .game-teaser {
    display: grid; gap: 28px; align-items: center;
    grid-template-columns: 1fr;
    max-width: 1100px; margin: 0 auto; padding: clamp(48px, 8vh, 88px) 24px;
  }
  @container preview (min-width: 820px) {
    [data-section="games"] .game-teaser { grid-template-columns: 1.1fr 1fr; }
  }
  [data-section="games"] .game-teaser__art {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  }
  [data-section="games"] .game-teaser__art img {
    width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
    border-radius: var(--btn-radius, 4px);
  }
  [data-section="games"] .game-teaser__eyebrow {
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted, var(--text)); margin: 0 0 10px;
  }
  [data-section="games"] .game-teaser__title {
    font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height: 1.1; margin: 0 0 14px; color: var(--text);
  }
  [data-section="games"] .game-teaser__blurb {
    margin: 0 0 24px; color: var(--muted, var(--text)); line-height: 1.6;
    max-width: 46ch;
  }
  [data-section="games"] .game-teaser__cta {
    display: inline-block; padding: 14px 28px; font-size: 13px;
    letter-spacing: var(--btn-tracking, 0.14em);
    text-transform: var(--btn-transform, uppercase);
    font-weight: var(--btn-weight, 500);
    border-radius: var(--btn-radius, 0);
    background: var(--accent, transparent); color: var(--bg, currentColor);
    border: 1px solid var(--accent, currentColor);
  }
  [data-section="games"] .game-teaser__cta:hover {
    background: transparent; color: var(--text);
  }

  /* --- Estimator: the band around the shared BudgetCalculator ornament.
     The calculator carries its own layout (see components/ornaments); this
     only supplies the section framing and heading, so the same ornament can
     sit on a custom template and in a builder section without forking. --- */
  [data-section="estimator"] .tn-calc-band {
    max-width: 1000px; margin: 0 auto;
    padding: clamp(48px, 8vh, 88px) 24px;
  }
  [data-section="estimator"] .tn-calc-band__head {
    text-align: center; margin-bottom: 36px;
  }
  [data-section="estimator"] .tn-calc-band__eyebrow {
    font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted, var(--text)); margin: 0 0 10px;
  }
  [data-section="estimator"] .tn-calc-band__title {
    font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    line-height: 1.1; margin: 0 0 12px; color: var(--text);
  }
  [data-section="estimator"] .tn-calc-band__note {
    margin: 0 auto; max-width: 52ch; line-height: 1.6;
    color: var(--muted, var(--text)); font-size: 0.95rem;
  }

  /* =====================================================================
     Nav section — all variants
     Scoped to [data-section="nav"][data-variant="<letter>"] so the same
     class names can safely coexist on one page (variant catalog view).
     CSS ported from assembler index.html lines 427-679 + 5249-5338.
     Shared rules (.nav-cta, .mobile-overlay, .mobile-hamburger) are
     already defined above — not redeclared here.
     ===================================================================== */

  /* --- Variant A: nav-horizontal-wordmark --- */
  [data-section="nav"][data-variant="a"] .nav-hw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 56px;
    border-bottom: 1px solid var(--rule);
    background: var(--section-bg);
  }
  [data-section="nav"][data-variant="a"] .nav-hw__logo {
    display: block;
    height: var(--nav-logo-height, 44px);
    width: auto;
    max-width: min(60vw, 320px);
    object-fit: contain;
  }
  [data-section="nav"][data-variant="a"] .nav-hw__wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.12em;
    font-size: 18px;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap;
  }
  [data-section="nav"][data-variant="a"] .nav-hw__wordmark .accent { color: var(--accent-text); }
  [data-section="nav"][data-variant="a"] .nav-hw__links {
    display: flex;
    gap: 28px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  [data-section="nav"][data-variant="a"] .nav-hw__links a {
    color: var(--text);
    opacity: 0.78;
    transition: opacity 0.15s, color 0.15s;
  }
  [data-section="nav"][data-variant="a"] .nav-hw__links a:hover { opacity: 1; color: var(--accent-text); }
  [data-section="nav"][data-variant="a"] .nav-hw__right { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
  [data-section="nav"][data-variant="a"] .nav-hw__burger { display: none; }
  /* The wordmark is a nowrap flex item, so a long tenant name (GBP business
     names run 40+ chars: "Justin (iam3) Leifeste / Texas Tattoo Artist")
     overflowed the bar and pushed the hamburger clean off the right edge —
     the phone was left with no way to open the menu (caught 2026-07-26).
     Let the wordmark shrink; never the burger. */
  /* The wordmark is also the Home link and measured 19px tall on a phone.
     The bar is taller than that, so filling it costs no layout. */
  [data-section="nav"][data-variant="a"] .nav-hw > a {
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  [data-section="nav"][data-variant="a"] .nav-hw__wordmark { overflow: hidden; text-overflow: ellipsis; }
  @container (max-width: 900px) {
    [data-section="nav"][data-variant="a"] .nav-hw { padding: 18px 24px; gap: 12px; }
    [data-section="nav"][data-variant="a"] .nav-hw__links { display: none; }
    [data-section="nav"][data-variant="a"] .nav-hw__right .nav-cta { display: none; }
    /* 🚨 44x44. Measured at 16x24 on a real iPhone viewport — under WCAG
       2.5.8's 24px floor on one axis and nowhere near the 44pt Apple asks
       for, on the ONE control that opens navigation on a phone. The glyph
       stays the size it was; the TARGET grows around it, and the negative
       margin keeps the bar's height unchanged. */
    [data-section="nav"][data-variant="a"] .nav-hw__burger {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      margin: -10px -10px -10px 0;
      cursor: pointer;
    }
    /* Wrap to at most 2 lines on a phone rather than ellipsing most of the
       name away — this bar isn't sticky, so the extra line costs nothing. */
    [data-section="nav"][data-variant="a"] .nav-hw__wordmark {
      white-space: normal;
      overflow-wrap: anywhere;
      font-size: 15px;
      line-height: 1.25;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  /* --- Variant B: nav-logo-centered --- */
  [data-section="nav"][data-variant="b"] .nav-lc {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 56px;
    border-bottom: 1px solid var(--rule);
    background: var(--section-bg);
    position: relative;
  }
  [data-section="nav"][data-variant="b"] .nav-lc__left,
  [data-section="nav"][data-variant="b"] .nav-lc__right-links {
    display: flex;
    gap: 28px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  [data-section="nav"][data-variant="b"] .nav-lc__left a,
  [data-section="nav"][data-variant="b"] .nav-lc__right-links a {
    color: var(--text);
    opacity: 0.78;
    transition: opacity 0.15s, color 0.15s;
  }
  [data-section="nav"][data-variant="b"] .nav-lc__left a:hover,
  [data-section="nav"][data-variant="b"] .nav-lc__right-links a:hover { opacity: 1; color: var(--accent-text); }
  [data-section="nav"][data-variant="b"] .nav-lc__logo {
    height: 40px;
    width: auto;
    margin: 0 48px;
  }
  [data-section="nav"][data-variant="b"] .nav-lc__wordmark {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 48px;
    color: var(--text);
  }
  [data-section="nav"][data-variant="b"] .nav-lc__right {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  [data-section="nav"][data-variant="b"] .nav-lc__burger { display: none; }
  @container (max-width: 900px) {
    [data-section="nav"][data-variant="b"] .nav-lc { padding: 18px 24px; justify-content: space-between; }
    [data-section="nav"][data-variant="b"] .nav-lc__left { display: none; }
    [data-section="nav"][data-variant="b"] .nav-lc__right-links { display: none; }
    [data-section="nav"][data-variant="b"] .nav-lc__right .nav-cta { display: none; }
    [data-section="nav"][data-variant="b"] .nav-lc__logo { margin: 0; height: 36px; }
    [data-section="nav"][data-variant="b"] .nav-lc__burger { display: block; }
  }

  /* --- Variant C: nav-hamburger-desktop --- */
  [data-section="nav"][data-variant="c"] .nav-hb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 56px;
    border-bottom: 1px solid var(--rule);
    background: var(--section-bg);
  }
  [data-section="nav"][data-variant="c"] .nav-hb__logo {
    height: 36px;
    width: auto;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__wordmark {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
  }
  [data-section="nav"][data-variant="c"] .nav-hb__toggle { list-style: none; cursor: pointer; }
  [data-section="nav"][data-variant="c"] .nav-hb__toggle::-webkit-details-marker { display: none; }
  [data-section="nav"][data-variant="c"] .nav-hb__toggle::marker { display: none; content: ''; }
  [data-section="nav"][data-variant="c"] .nav-hb__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 28px;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__hamburger span {
    display: block;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: opacity 0.15s;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Same as .mobile-overlay: a long nav overflowed BOTH ends of a centred
       column with no scroll, so its first and last items were unreachable. */
    justify-content: safe center;
    overflow-y: auto;
    padding: 72px 24px;
    align-items: center;
    gap: 48px;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__overlay-close {
    position: fixed;
    /* Above the links: scrolled to the end, a positioned dropdown child sat
       under the X and took the tap. */
    z-index: 2;
    top: 28px;
    right: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 32px;
    font-weight: 300;
    color: var(--text);
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s, color 0.15s;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__overlay-close:hover { opacity: 1; color: var(--accent-text); }
  [data-section="nav"][data-variant="c"] .nav-hb__overlay a {
    text-align: center;
    font-family: var(--font-display);
    font-size: 36px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    transition: color 0.15s;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__overlay a:hover { color: var(--accent-text); }
  /* Dropdown children are subordinate — see .mobile-overlay .nav-dd__child.
     This overlay is CENTERED, so an indent cannot read and size carries it.
     Variant-scoped because the rule above is, and the base nav-dd__child rule
     loses to it on specificity. */
  [data-section="nav"][data-variant="c"] .nav-hb__overlay .nav-dd__child {
    padding-left: 0;
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__overlay .nav-cta {
    font-family: var(--font-body);
    font-size: 14px;
    padding: 14px 32px;
    margin-top: 12px;
  }
  [data-section="nav"][data-variant="c"] .nav-hb__details:not([open]) .nav-hb__overlay { display: none; }
  @container (max-width: 900px) {
    [data-section="nav"][data-variant="c"] .nav-hb { padding: 18px 24px; }
    [data-section="nav"][data-variant="c"] .nav-hb__overlay-close { right: 24px; }
  }

  /* --- Variant D: nav-underline-draw --- */
  [data-section="nav"][data-variant="d"] .nav-draw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--section-bg);
    padding: 18px 56px;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="nav"][data-variant="d"] .nav-draw__wordmark {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  [data-section="nav"][data-variant="d"] .nav-draw__wordmark .accent { color: var(--accent-text); }
  [data-section="nav"][data-variant="d"] .nav-draw__right { display: flex; align-items: center; gap: 6px; }
  [data-section="nav"][data-variant="d"] .nav-draw__links { display: flex; gap: 28px; margin-right: 20px; }
  [data-section="nav"][data-variant="d"] .nav-draw__links a {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    transition: color 0.2s;
  }
  [data-section="nav"][data-variant="d"] .nav-draw__links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  [data-section="nav"][data-variant="d"] .nav-draw__links a:hover { color: var(--text); }
  [data-section="nav"][data-variant="d"] .nav-draw__links a:hover::after { transform: scaleX(1); }
  [data-section="nav"][data-variant="d"] .nav-draw__cta {
    background: linear-gradient(135deg, var(--accent), #c9a44e);
    background-size: 200% 200%;
    color: var(--bg);
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: background-position 0.4s ease;
  }
  [data-section="nav"][data-variant="d"] .nav-draw__cta:hover { background-position: 100% 100%; }
  [data-section="nav"][data-variant="d"] .nav-draw__burger { display: none; }
  [data-section="nav"][data-variant="d"] .nav-draw > a { min-width: 0; }
  [data-section="nav"][data-variant="d"] .nav-draw__right { flex-shrink: 0; }
  @container (max-width: 768px) {
    [data-section="nav"][data-variant="d"] .nav-draw { padding: 18px 24px; gap: 12px; }
    [data-section="nav"][data-variant="d"] .nav-draw__links { display: none; }
    /* Without this the phone got wordmark + Book and NO menu at all. */
    [data-section="nav"][data-variant="d"] .nav-draw__burger { display: block; margin-left: 14px; }
  }

  /* --- Variant E: nav-blur-reveal --- */
  @keyframes navReveal {
    from { filter: blur(6px); opacity: 0.5; }
    to { filter: blur(0); opacity: 1; }
  }
  [data-section="nav"][data-variant="e"] .nav-reveal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--section-bg);
    padding: 18px 56px;
    border-bottom: 1px solid var(--rule);
    /* No `forwards`: a held blur(0) filter traps the fixed mobile overlay in the nav. */
    animation: navReveal 1s ease;
  }
  [data-section="nav"][data-variant="e"] .nav-reveal__wordmark {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  [data-section="nav"][data-variant="e"] .nav-reveal__wordmark .accent { color: var(--accent-text); }
  [data-section="nav"][data-variant="e"] .nav-reveal__right { display: flex; align-items: center; gap: 6px; }
  [data-section="nav"][data-variant="e"] .nav-reveal__links { display: flex; gap: 28px; margin-right: 20px; }
  [data-section="nav"][data-variant="e"] .nav-reveal__links a {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s;
  }
  [data-section="nav"][data-variant="e"] .nav-reveal__links a:hover { color: var(--accent-text); }
  [data-section="nav"][data-variant="e"] .nav-reveal__burger { display: none; }
  @container (max-width: 768px) {
    [data-section="nav"][data-variant="e"] .nav-reveal__links { display: none; }
    [data-section="nav"][data-variant="e"] .nav-reveal__right > .nav-cta { display: none; }
    [data-section="nav"][data-variant="e"] .nav-reveal__burger { display: block; }
  }

  /* --- Variant F: nav-three-zone-event-headline --- */
  /* Single-row 3-zone bar: logo LEFT, italic-bold event headline CENTER,
     anchor links RIGHT. No hamburger, no scroll behavior, no CTA pill.
     The persistent center event-info zone distinguishes this from A–E. */
  [data-section="nav"][data-variant="f"] .nav-tze {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 48px;
    height: 60px;
    border-bottom: 1px solid var(--rule);
    background: var(--section-bg);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  [data-section="nav"][data-variant="f"] .nav-tze__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
  }
  [data-section="nav"][data-variant="f"] .nav-tze__brand img {
    height: 30px;
    width: auto;
  }
  [data-section="nav"][data-variant="f"] .nav-tze__headline {
    text-align: center;
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--accent-text);
  }
  [data-section="nav"][data-variant="f"] .nav-tze__headline em { font-style: italic; }
  [data-section="nav"][data-variant="f"] .nav-tze__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
  }
  [data-section="nav"][data-variant="f"] .nav-tze__burger { display: none; }
  [data-section="nav"][data-variant="f"] .nav-tze__links {
    display: flex;
    gap: 24px;
  }
  [data-section="nav"][data-variant="f"] .nav-tze__links a {
    color: var(--text);
    opacity: 0.78;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: opacity 0.15s, color 0.15s;
  }
  [data-section="nav"][data-variant="f"] .nav-tze__links a:hover {
    opacity: 1;
    color: var(--accent-text);
  }
  @container (max-width: 900px) {
    [data-section="nav"][data-variant="f"] .nav-tze {
      grid-template-columns: auto 1fr;
      padding: 0 24px;
    }
    [data-section="nav"][data-variant="f"] .nav-tze__headline { display: none; }
    [data-section="nav"][data-variant="f"] .nav-tze__links { display: none; }
    [data-section="nav"][data-variant="f"] .nav-tze__burger { display: block; }
  }

  /* --- Variant G: nav-brand-left-centered-links-cta --- */
  /* auto 1fr auto 3-zone sticky nav. LEFT = brand serif 26px.
     CENTER = flex row up to 6 anchor links (centered). RIGHT = phone + accent CTA pill.
     Glassmorphism backdrop-filter. Center links hidden ≤1024px; phone hidden ≤640px. */
  [data-section="nav"][data-variant="g"] .nav-bzc::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--section-bg, #0c0c0c) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc {
    position: sticky;
    top: 0;
    height: 64px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 32px;
    /* The glass lives on ::before. A backdrop-filter on THIS element made it
       the containing block for the fixed mobile menu, which then drew inside
       the 64px bar (check-nav-mobile, 2026-09-26). */
    border-bottom: 1px solid var(--rule);
    z-index: 50;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-body), sans-serif;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__brand {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__brand img {
    height: 30px;
    width: auto;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__links {
    display: flex;
    justify-content: center;
    gap: 28px;
    color: var(--text);
    opacity: 0.80;
    font-weight: 500;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__links a {
    opacity: 0.80;
    transition: opacity 0.15s, color 0.15s;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__links a:hover {
    opacity: 1;
    color: var(--accent-text);
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__cta-row {
    display: flex;
    align-items: center;
    gap: 18px;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__phone {
    color: var(--text);
    opacity: 0.80;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: none;
    transition: opacity 0.15s;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__phone:hover { opacity: 1; }
  [data-section="nav"][data-variant="g"] .nav-bzc__cta {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 22px;
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: filter 0.15s ease;
    border-radius: 0;
  }
  [data-section="nav"][data-variant="g"] .nav-bzc__cta:hover { filter: brightness(1.10); }
  [data-section="nav"][data-variant="g"] .nav-bzc__burger { display: none; }
  @container (max-width: 1024px) {
    [data-section="nav"][data-variant="g"] .nav-bzc__links { display: none; }
    /* Without this the phone got brand + Book and NO menu at all. */
    [data-section="nav"][data-variant="g"] .nav-bzc__burger { display: block; }
    /* The centre column is empty once the links hide — collapse to two
       tracks and let the 26px serif brand shrink, or it runs under the CTA
       once the burger joins the right zone. */
    [data-section="nav"][data-variant="g"] .nav-bzc { grid-template-columns: minmax(0, 1fr) auto; }
    [data-section="nav"][data-variant="g"] .nav-bzc__brand {
      min-width: 0;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
    }
    [data-section="nav"][data-variant="g"] .nav-bzc__cta-row { flex-shrink: 0; gap: 12px; }
  }
  @container (max-width: 640px) {
    [data-section="nav"][data-variant="g"] .nav-bzc { padding: 0 18px; }
    [data-section="nav"][data-variant="g"] .nav-bzc__phone { display: none; }
    [data-section="nav"][data-variant="g"] .nav-bzc__cta { padding: 0 16px; font-size: 12px; }
  }

  /* --- Variant J: nav-dd (top nav with per-item dropdowns) ---
     Brand left | top links center (any item with children opens its own
     single-column dropdown) | accent CTA right. Dropdowns open on hover AND
     focus-within (keyboard-accessible), no JS. All colors from theme
     tokens so the panels inherit correct contrast. */
  [data-section="nav"][data-variant="j"] .nav-dd {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 72px;
    padding: 0 32px;
    background: var(--bg, #0a0a0a);
    color: var(--text, #f0f0f0);
    position: relative;
    z-index: 40;
  }
  [data-section="nav"][data-variant="j"] .nav-dd__brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    font-family: var(--font-display, inherit);
    font-size: 22px;
    letter-spacing: 0.04em;
    text-decoration: none;
    flex: 0 0 auto;
  }
  [data-section="nav"][data-variant="j"] .nav-dd__brand img { height: 40px; width: auto; }
  [data-section="nav"][data-variant="j"] .nav-dd__bar {
    display: flex;
    align-items: center;
    gap: 26px;
    flex: 1 1 auto;
  }
  [data-section="nav"][data-variant="j"] .nav-dd__link {
    color: var(--text, inherit);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.86;
    transition: opacity 0.15s ease, color 0.15s ease;
    white-space: nowrap;
  }
  [data-section="nav"][data-variant="j"] .nav-dd__link:hover {
    opacity: 1;
    color: var(--accent-text, #dcb96a);
  }
  [data-section="nav"] .nav-dd__item { position: relative; }

  /* The DRAWER shape of the same data (ThemeNavLinks expandChildren).
     A hover panel is wrong inside a scrolling overlay — `position:absolute`
     would clip it or drop it off-screen, and a phone has no hover to open it
     with — so the children render inline, indented under their parent. Both
     tiers are real links, so every destination stays one tap away and
     check-nav-mobile still counts them as reachable.

     🚨 No wrapper element and so no `display:contents` to make one behave:
     that value is dropped from the accessibility tree by older WebKit, and
     `safari 12` is pinned for the kiosk fleet. The drawer gets a flat list of
     <a>s, indented by class, which needs no layout escape hatch at all. */
  [data-section="nav"] .nav-dd__child {
    padding-left: 1.25em;
    opacity: 0.78;
  }
  [data-section="nav"] .nav-dd__trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  [data-section="nav"] .nav-dd__caret { font-size: 9px; opacity: 0.7; }
  /* The dropdown panel — hidden until the item is hovered/focused.
     A ~10px invisible bridge (top padding on the panel) keeps hover alive
     while the cursor crosses the gap from the trigger. */
  [data-section="nav"] .nav-dd__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    padding: 10px 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  [data-section="nav"] .nav-dd__item:hover .nav-dd__panel,
  [data-section="nav"] .nav-dd__item:focus-within .nav-dd__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  [data-section="nav"] .nav-dd__panel-link {
    color: var(--text, #f0f0f0);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 18px;
    background: var(--bg-mid, #141414);
    border-left: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent);
    opacity: 0.85;
    transition: background 0.14s ease, opacity 0.14s ease, color 0.14s ease;
  }
  [data-section="nav"] .nav-dd__panel-link:first-of-type {
    border-top: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent);
    box-shadow: 0 -1px 0 color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent);
  }
  [data-section="nav"] .nav-dd__panel-link:last-of-type {
    border-bottom: 1px solid color-mix(in srgb, var(--text, #f0f0f0) 10%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  }
  [data-section="nav"] .nav-dd__panel-link:hover {
    opacity: 1;
    color: var(--accent-text, #dcb96a);
    background: color-mix(in srgb, var(--accent, #dcb96a) 12%, var(--bg-mid, #141414));
  }
  [data-section="nav"][data-variant="j"] .nav-dd__actions { flex: 0 0 auto; }
  [data-section="nav"][data-variant="j"] .nav-dd__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    background: var(--accent, #dcb96a);
    color: var(--accent-contrast, var(--bg, #0a0a0a));
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 0.15s ease;
    white-space: nowrap;
  }
  [data-section="nav"][data-variant="j"] .nav-dd__cta:hover { filter: brightness(1.08); }
  [data-section="nav"][data-variant="j"] .nav-dd__mobile { display: none; }
  [data-section="nav"][data-variant="j"] .nav-dd__mobile-group { display: contents; }
  [data-section="nav"][data-variant="j"] .nav-dd__mobile-sub { padding-left: 16px; opacity: 0.8; }
  /* Responsive: collapse the desktop bar into the hamburger overlay */
  @container (max-width: 1024px) {
    [data-section="nav"][data-variant="j"] .nav-dd__bar,
    [data-section="nav"][data-variant="j"] .nav-dd__actions { display: none; }
    [data-section="nav"][data-variant="j"] .nav-dd__mobile { display: block; margin-left: auto; }
  }
  @container (max-width: 640px) {
    [data-section="nav"][data-variant="j"] .nav-dd { padding: 0 18px; height: 60px; gap: 12px; }
    /* `flex: 0 0 auto` on the brand meant a long tenant name pushed the
       hamburger off the right edge — measured x=484 on a 390px viewport
       (audit 2026-07-26), the same failure variant A had. Let the brand
       shrink; never the menu. */
    [data-section="nav"][data-variant="j"] .nav-dd__brand {
      flex: 0 1 auto;
      min-width: 0;
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 18px;
    }
    [data-section="nav"][data-variant="j"] .nav-dd__mobile { flex-shrink: 0; }
  }

  /* --- Variant H: nav-sidebar-refreshed ---
     Vertical left rail for [data-framework="sidebar"]. Logo at top,
     configured navItems below, CTA + contact at bottom.
     Mobile: top bar + details/summary hamburger drawer. */
  [data-section="nav"][data-variant="h"] .nav-sb {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100dvh;
    padding: 32px 20px 24px;
    background: var(--section-bg, var(--bg));
    border-right: 1px solid var(--rule);
    gap: 0;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__brand {
    display: block;
    margin-bottom: 36px;
    text-decoration: none;
    flex-shrink: 0;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__logo {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__wordmark {
    font-family: var(--font-display), sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__links {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__link {
    display: block;
    padding: 11px 0;
    font-family: var(--font-body), sans-serif;
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--text);
    opacity: 0.72;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    transition: opacity 0.15s, color 0.15s;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__link:hover {
    opacity: 1;
    color: var(--accent-text);
  }
  /* Dropdown children are subordinate. A sidebar is LEFT-ALIGNED and already
     draws links at 12px, where shrinking further is a legibility bug — so
     the indent carries it here, which is the opposite choice from the
     centered drawers. `padding: 11px 0` above beats the base nav-dd__child
     rule on specificity, which is why the indent was measuring as zero. */
  [data-section="nav"][data-variant="h"] .nav-sb__link.nav-dd__child {
    padding-left: 18px;
    text-transform: none;
    letter-spacing: 0.06em;
    font-weight: 400;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--rule);
    flex-shrink: 0;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    font-family: var(--font-body), sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 0.15s;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__cta:hover { filter: brightness(1.1); }
  [data-section="nav"][data-variant="h"] .nav-sb__phone {
    font-size: 13px;
    color: var(--text);
    opacity: 0.65;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.15s;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__phone:hover { opacity: 1; }
  [data-section="nav"][data-variant="h"] .nav-sb__ig {
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  [data-section="nav"][data-variant="h"] .nav-sb__ig:hover { opacity: 1; }
  /* Mobile hamburger drawer — hidden on desktop */
  [data-section="nav"][data-variant="h"] .nav-sb__drawer { display: none; }
  @media (max-width: 768px) {
    [data-section="nav"][data-variant="h"] .nav-sb {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      min-height: unset;
      height: auto;
      position: sticky;
      top: 0;
      z-index: 50;
      border-right: none;
      border-bottom: 1px solid var(--rule);
    }
    [data-section="nav"][data-variant="h"] .nav-sb__brand {
      margin-bottom: 0;
      /* Base rule pins this flex-shrink: 0, so a long tenant name overflowed
         the row and pushed the drawer toggle past the edge (x=402 on a 390px
         viewport, audit 2026-07-26). */
      flex-shrink: 1;
      min-width: 0;
      overflow: hidden;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__wordmark {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer { flex-shrink: 0; }
    [data-section="nav"][data-variant="h"] .nav-sb__links,
    [data-section="nav"][data-variant="h"] .nav-sb__meta { display: none; }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer {
      display: block;
      position: relative;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer > summary {
      list-style: none;
      cursor: pointer;
      color: var(--text);
      font-size: 22px;
      line-height: 1;
      padding: 4px 6px;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      /* The 44px target must not grow the live header: the glyph box was
         ~30px, so pull the extra back out of the flow. */
      margin: -7px 0;
      position: relative;
      /* Above the overlay: once open, the toggle IS the close control. */
      z-index: 1001;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer[open] > summary { font-size: 0; }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer[open] > summary::before {
      content: '\00d7';
      font-size: 32px;
      font-weight: 300;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer > summary::-webkit-details-marker { display: none; }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu {
      /* Full-screen, like every other variant's phone menu. It was a 200px
         dropdown whose last rows fell below the fold on a long nav. */
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      justify-content: safe center;
      overflow-y: auto;
      padding: 72px 24px;
      gap: 0;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu > * {
      width: 100%;
      max-width: 420px;
      margin-left: auto;
      margin-right: auto;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu a {
      display: block;
      padding: 11px 0;
      font-size: 13px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text);
      border-bottom: 1px solid var(--rule);
      opacity: 0.8;
      text-decoration: none;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu a:last-child { border-bottom: none; }
    /* Dropdown children are subordinate. Left-aligned block rows at 13px, so
       the indent carries it (same choice as variants h-sidebar and i). The
       rule above sets `padding: 11px 0` and beats the base nav-dd__child
       rule, which is why the indent was measuring as zero. */
    [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu .nav-dd__child {
      padding-left: 20px;
      text-transform: none;
      letter-spacing: 0.04em;
      font-weight: 400;
    }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu a:hover { opacity: 1; color: var(--accent-text); }
    [data-section="nav"][data-variant="h"] .nav-sb__drawer-menu .nav-sb__cta {
      color: var(--accent-contrast, #fff);
      opacity: 1;
      margin-top: 12px;
      justify-content: center;
      font-size: 11px;
    }
  }

  /* --- Variant I: nav-sidebar-og ---
     OG flat sidebar. Mirrors the legacy ClassicSidebarShell aesthetic:
     solid bg, bold uppercase stacked links with horizontal rules,
     no glassmorphism or glow. Flat hover (bg tint only). */
  [data-section="nav"][data-variant="i"] .nav-sbog {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100dvh;
    background: var(--section-bg, var(--bg));
    border-right: 1px solid var(--rule);
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__brand {
    display: block;
    padding: 24px 16px 20px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__logo {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__wordmark {
    font-family: var(--font-body), sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__links {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__links li { margin: 0; }
  [data-section="nav"][data-variant="i"] .nav-sbog__links li > a {
    display: block;
    padding: 15px 16px;
    font-family: var(--font-body), sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: background 0.15s;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__links li > a:hover {
    background: color-mix(in srgb, var(--text) 8%, transparent);
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__footer {
    padding: 16px;
    border-top: 1px solid var(--rule);
    flex-shrink: 0;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__cta {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: var(--accent);
    color: var(--accent-contrast, #fff);
    font-family: var(--font-body), sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: filter 0.15s;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__cta:hover { filter: brightness(1.1); }
  [data-section="nav"][data-variant="i"] .nav-sbog__phone {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    color: var(--text);
    opacity: 0.65;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.15s;
  }
  [data-section="nav"][data-variant="i"] .nav-sbog__phone:hover { opacity: 1; }
  /* Mobile hamburger drawer — hidden on desktop */
  [data-section="nav"][data-variant="i"] .nav-sbog__drawer { display: none; }
  @media (max-width: 768px) {
    [data-section="nav"][data-variant="i"] .nav-sbog {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      min-height: unset;
      height: auto;
      padding: 0 16px;
      position: sticky;
      top: 0;
      z-index: 50;
      border-right: none;
      border-bottom: 1px solid var(--rule);
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__brand { border-bottom: none; padding: 12px 0; }
    [data-section="nav"][data-variant="i"] .nav-sbog__links,
    [data-section="nav"][data-variant="i"] .nav-sbog__footer { display: none; }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer {
      display: block;
      position: relative;
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer > summary {
      list-style: none;
      cursor: pointer;
      color: var(--text);
      font-size: 22px;
      line-height: 1;
      padding: 4px 6px;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      /* The 44px target must not grow the live header: the glyph box was
         ~30px, so pull the extra back out of the flow. */
      margin: -7px 0;
      position: relative;
      /* Above the overlay: once open, the toggle IS the close control. */
      z-index: 1001;
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer[open] > summary { font-size: 0; }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer[open] > summary::before {
      content: '\00d7';
      font-size: 32px;
      font-weight: 300;
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer > summary::-webkit-details-marker { display: none; }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu {
      /* Full-screen, like every other variant's phone menu. It was a 200px
         dropdown whose last rows fell below the fold on a long nav. */
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      justify-content: safe center;
      overflow-y: auto;
      padding: 72px 24px;
      gap: 0;
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu > * {
      width: 100%;
      max-width: 420px;
      margin-left: auto;
      margin-right: auto;
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu a {
      display: block;
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--text);
      border-bottom: 1px solid var(--rule);
      text-decoration: none;
      transition: background 0.15s;
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu a:last-child { border-bottom: none; }
    /* Dropdown children are subordinate. Left-aligned block rows at 13px, so
       the indent carries it (same choice as variant h). The rule above sets
       `padding: 14px 16px` and beats the base nav-dd__child rule, which is
       why the indent was measuring as zero. */
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu .nav-dd__child {
      padding-left: 36px;
      text-transform: none;
      letter-spacing: 0.04em;
      font-weight: 400;
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu a:hover {
      background: color-mix(in srgb, var(--text) 8%, transparent);
    }
    [data-section="nav"][data-variant="i"] .nav-sbog__drawer-menu .nav-sbog__cta {
      color: var(--accent-contrast, #fff);
      display: block;
      margin: 0;
      border-radius: 0;
    }
  }

  /* ============================================================
     utility-bar variants A–E
     ============================================================ */

  /* --- Variant A: utility-bar-inline --- */
  [data-section="utility-bar"][data-variant="a"] .ub-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--section-bg);
    color: var(--text);
    padding: 10px 56px;
    font-size: 11px;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  [data-section="utility-bar"][data-variant="a"] .ub-inline__left {
    display: flex;
    gap: 12px;
    align-items: center;
    opacity: 0.78;
  }
  [data-section="utility-bar"][data-variant="a"] .ub-inline__left .sep {
    color: var(--accent-text);
  }
  /* 🚨 The phone number is the single most-tapped thing on a tattoo site's
     phone view, and it measured 12px tall. The bar's own type stays 11px —
     it is a utility strip and that is deliberate — but the LINK inside it
     gets a real target. Negative margin so the bar does not grow. */
  [data-section="utility-bar"][data-variant="a"] .ub-inline a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: -14px;
    margin-bottom: -14px;
  }
  @container (max-width: 768px) {
    [data-section="utility-bar"][data-variant="a"] .ub-inline {
      flex-direction: column;
      gap: 6px;
      padding: 10px 24px;
      text-align: center;
    }
    [data-section="utility-bar"][data-variant="a"] .ub-inline__left {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* --- Multi-shop bar (UtilityBarShops), variants A-E ---------------
     Not letter-scoped: variants A-E all delegate here for a studio with
     more than one real tenant_locations row, and the pills must look the
     same whichever letter the operator picked. Variant F keeps its own
     announcement strip and never reaches this.

     🚨 Every value a theme might want to move is a --ubshops-* knob read
     with var(x, fallback) and NEVER declared here. sections.css is inside
     @layer section and interior.css is unlayered, so a theme rule written
     against these class names loses at any specificity — the knob is the
     only door in. (Measured the hard way, 2026-09-06.) */
  [data-section="utility-bar"] .ub-shops {
    display: flex;
    justify-content: center;
    background: var(--section-bg);
    color: var(--text);
    padding: 7px 24px;
    font-size: 11px;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  /* Evenly spaced across the bar rather than huddled in the middle: three
     shops are three equal choices, and equal weight is the honest layout for
     a studio whose visitor is picking the nearest one. */
  [data-section="utility-bar"] .ub-shops__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-evenly;
    width: 100%;
    max-width: var(--max-w, 1200px);
    gap: var(--ubshops-gap, 10px);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  [data-section="utility-bar"] .ub-shops__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 14px;
    border: var(--ubshops-rule, 1px) solid var(--rule);
    border-radius: var(--ubshops-radius, 999px);
  }
  [data-section="utility-bar"] .ub-shops__place {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
  }
  /* 🚨 YOU ARE HERE. Until now all three pills looked identical on a shop
     page, so the strip read as a LIST of shops rather than a switcher between
     them — the operator's point, and the reason F-6 (remembered shop + header
     switcher) is still open in the gap register. Marking the current one is
     what turns the same markup into a control.

     🚨 Never colour alone. The accent is one of three signals here — the
     border thickens to 2px, the type goes to 700, and the accent tints the
     rule and the city. A reader who cannot separate the hue still sees a
     heavier box around a heavier word, which is the rule ADMIN-SKINS §3b-i
     states for locked surfaces and the one the 1.32:1 button failure came
     from ignoring. `currentColor` on the border so it follows the accent
     under all 17 palettes; no color-mix(), which the safari 12 kiosk pin
     bans. */
  [data-section="utility-bar"] .ub-shops__item[data-current="true"] {
    border-width: 2px;
    border-color: var(--accent);
    /* Keep the box the same SIZE as its neighbours despite the thicker rule,
       or the current pill grows 1px on each axis and nudges the row. */
    padding: 2px 13px;
  }
  [data-section="utility-bar"] .ub-shops__item[data-current="true"] .ub-shops__city {
    color: var(--accent-text);
    font-weight: 700;
  }
  [data-section="utility-bar"] .ub-shops__city {
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  [data-section="utility-bar"] .ub-shops__state {
    margin-left: 4px;
    opacity: 0.6;
    font-weight: 500;
  }
  /* The street is desktop-only. It is what answers "which one is near me",
     and there is room for it at 1280px; on a phone the same bar is a
     scrolling strip where it would double every pill's width. */
  [data-section="utility-bar"] .ub-shops__street {
    opacity: 0.62;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  [data-section="utility-bar"] .ub-shops__tel {
    opacity: 0.78;
    white-space: nowrap;
  }
  /* Same reasoning as variant A's link rule: the strip's 11px type is
     deliberate, but a thing you tap needs a real target. Negative margin
     keeps the target off the bar's height. */
  [data-section="utility-bar"] .ub-shops a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-top: -14px;
    margin-bottom: -14px;
  }
  @container (max-width: 1100px) {
    [data-section="utility-bar"] .ub-shops__street { display: none; }
  }
  @container (max-width: 768px) {
    /* 🚨 NOT a stacked column. Stacking three pills measured 136px on a
       390px phone — a sixth of the viewport given over to sticky chrome,
       permanently, on every page. The pills stay one row and the row
       scrolls instead. */
    [data-section="utility-bar"] .ub-shops {
      padding: 8px 0;
    }
    [data-section="utility-bar"] .ub-shops__list {
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 8px;
      /* Safe next to the sticky parent: the overflow is on the LIST, and it
         is `.ub-shops` itself that is position:sticky — nothing sticky lives
         inside this scroller. (The trap that cost a session on the board:
         overflow-x:auto with overflow-y:visible computes to auto on BOTH
         axes and kills sticky DESCENDANTS.) */
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      padding: 0 16px;
      scroll-padding-left: 16px;
    }
    [data-section="utility-bar"] .ub-shops__list::-webkit-scrollbar {
      display: none;
    }
    [data-section="utility-bar"] .ub-shops__item {
      flex: none;
      min-height: 40px;
      padding: 4px 12px;
      scroll-snap-align: start;
    }
    [data-section="utility-bar"] .ub-shops a {
      min-height: 32px;
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  /* --- Variant B: utility-bar-split --- */
  [data-section="utility-bar"][data-variant="b"] .ub-split-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--section-bg);
    padding: 8px 56px;
    font-size: 11px;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-top__left {
    display: flex;
    gap: 14px;
    align-items: center;
    opacity: 0.78;
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-top__left .sep {
    color: var(--accent-text);
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-top__social {
    display: flex;
    gap: 14px;
    align-items: center;
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-top__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    font-size: 10px;
    color: var(--muted);
    transition: color 0.15s, border-color 0.15s;
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-top__social-icon:hover {
    color: var(--accent-text);
    border-color: var(--accent);
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-mid);
    padding: 10px 56px;
    font-size: 11px;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-bottom__left {
    display: flex;
    gap: 12px;
    align-items: center;
    opacity: 0.78;
  }
  [data-section="utility-bar"][data-variant="b"] .ub-split-bottom__left .sep {
    color: var(--accent-text);
  }
  @container (max-width: 768px) {
    [data-section="utility-bar"][data-variant="b"] .ub-split-top {
      flex-direction: column;
      gap: 8px;
      padding: 10px 24px;
      text-align: center;
    }
    [data-section="utility-bar"][data-variant="b"] .ub-split-top__left {
      flex-wrap: wrap;
      justify-content: center;
    }
    [data-section="utility-bar"][data-variant="b"] .ub-split-top__social { justify-content: center; }
    [data-section="utility-bar"][data-variant="b"] .ub-split-bottom {
      flex-direction: column;
      gap: 8px;
      padding: 10px 24px;
      text-align: center;
    }
    [data-section="utility-bar"][data-variant="b"] .ub-split-bottom__left {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* --- Variant C: utility-bar-logo-centered --- */
  [data-section="utility-bar"][data-variant="c"] .ub-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--section-bg);
    padding: 12px 56px;
    font-size: 11px;
    border-bottom: 2px solid var(--accent);
  }
  [data-section="utility-bar"][data-variant="c"] .ub-logo__phone { opacity: 0.78; letter-spacing: 0.04em; }
  [data-section="utility-bar"][data-variant="c"] .ub-logo__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  [data-section="utility-bar"][data-variant="c"] .ub-logo__img { height: 28px; width: auto; }
  [data-section="utility-bar"][data-variant="c"] .ub-logo__wordmark {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  [data-section="utility-bar"][data-variant="c"] .ub-logo__hours {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.08em;
  }
  @container (max-width: 768px) {
    [data-section="utility-bar"][data-variant="c"] .ub-logo {
      flex-direction: column;
      gap: 8px;
      padding: 12px 24px;
      text-align: center;
    }
  }

  /* --- Variant D: utility-bar-gradient-slide --- */
  @keyframes ub-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  [data-section="utility-bar"][data-variant="d"] .ub-grad {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, var(--bg), var(--bg-mid), var(--bg));
    background-size: 200% 100%;
    animation: ub-gradient 8s ease infinite;
    color: var(--text);
    padding: 10px 56px;
    font-size: 11px;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  [data-section="utility-bar"][data-variant="d"] .ub-grad__left {
    display: flex;
    gap: 12px;
    align-items: center;
    opacity: 0.78;
  }
  [data-section="utility-bar"][data-variant="d"] .ub-grad__left .sep {
    color: var(--accent-text);
  }
  @container (max-width: 768px) {
    [data-section="utility-bar"][data-variant="d"] .ub-grad {
      flex-direction: column;
      gap: 6px;
      padding: 10px 24px;
      text-align: center;
    }
    [data-section="utility-bar"][data-variant="d"] .ub-grad__left {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* --- Variant E: utility-bar-glow-cta --- */
  @keyframes ctaGlow {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent); }
  }
  [data-section="utility-bar"][data-variant="e"] .ub-glow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--section-bg);
    color: var(--text);
    padding: 10px 56px;
    font-size: 11px;
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  [data-section="utility-bar"][data-variant="e"] .ub-glow__left {
    display: flex;
    gap: 12px;
    align-items: center;
    opacity: 0.78;
  }
  [data-section="utility-bar"][data-variant="e"] .ub-glow__left .sep {
    color: var(--accent-text);
  }
  [data-section="utility-bar"][data-variant="e"] .ub-glow__phone {
    color: var(--text);
    transition: color 0.2s, text-shadow 0.2s;
  }
  [data-section="utility-bar"][data-variant="e"] .ub-glow__phone:hover {
    color: var(--accent-text);
    text-shadow: 0 0 8px var(--accent);
  }
  @container (max-width: 768px) {
    [data-section="utility-bar"][data-variant="e"] .ub-glow {
      flex-direction: column;
      gap: 6px;
      padding: 10px 24px;
      text-align: center;
    }
    [data-section="utility-bar"][data-variant="e"] .ub-glow__left {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  /* =====================================================
     Trust — Variant A: trust-review-count-bar
     Minimal centered rating strip with hairline rules.
     ===================================================== */
  [data-section="trust"][data-variant="a"] .trust-bar {
    padding: 28px 56px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    background: var(--section-bg);
  }
  [data-section="trust"][data-variant="a"] .trust-bar__stars {
    display: flex;
    gap: 2px;
    color: var(--accent-text);
    font-size: 14px;
    line-height: 1;
  }
  [data-section="trust"][data-variant="a"] .trust-bar__sep {
    color: var(--muted);
    font-size: 14px;
  }
  [data-section="trust"][data-variant="a"] .trust-bar__rating {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.02em;
  }
  [data-section="trust"][data-variant="a"] .trust-bar__count {
    font-size: 13px;
    color: var(--text);
    opacity: 0.88;
  }
  [data-section="trust"][data-variant="a"] .trust-bar__source {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  @container (max-width: 900px) {
    [data-section="trust"][data-variant="a"] .trust-bar {
      padding: 24px;
      flex-wrap: wrap;
      gap: 8px 16px;
    }
  }

  /* =====================================================
     Trust — Variant B: trust-social-proof-band
     Rating + review snippets in a dark band.
     ===================================================== */
  [data-section="trust"][data-variant="b"] .trust-band {
    background: var(--bg-mid);
    padding: 40px 56px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 56px;
    align-items: center;
  }
  [data-section="trust"][data-variant="b"] .trust-band__rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  [data-section="trust"][data-variant="b"] .trust-band__number {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 500;
    color: var(--accent-text);
    line-height: 1;
    letter-spacing: 0.02em;
  }
  [data-section="trust"][data-variant="b"] .trust-band__stars {
    display: flex;
    gap: 3px;
    color: var(--accent-text);
    font-size: 16px;
    line-height: 1;
  }
  [data-section="trust"][data-variant="b"] .trust-band__count {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  [data-section="trust"][data-variant="b"] .trust-band__quotes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-left: 1px solid var(--rule);
    padding-left: 40px;
  }
  [data-section="trust"][data-variant="b"] .trust-band__quote {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  [data-section="trust"][data-variant="b"] .trust-band__quote-text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: var(--text);
    opacity: 0.92;
    line-height: 1.55;
    max-width: 48ch;
  }
  [data-section="trust"][data-variant="b"] .trust-band__quote-attr {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  [data-section="trust"][data-variant="b"] .trust-band__quote-attr strong {
    color: var(--text);
    font-weight: 500;
  }
  @container (max-width: 900px) {
    [data-section="trust"][data-variant="b"] .trust-band {
      grid-template-columns: 1fr;
      gap: 28px;
      padding: 32px 24px;
    }
    [data-section="trust"][data-variant="b"] .trust-band__rating {
      flex-direction: row;
      align-items: center;
      gap: 16px;
    }
    [data-section="trust"][data-variant="b"] .trust-band__quotes {
      border-left: none;
      padding-left: 0;
      border-top: 1px solid var(--rule);
      padding-top: 24px;
    }
  }

  /* =====================================================
     Trust — Variant C: trust-badges-row
     Rating + trust badges in a horizontal strip.
     ===================================================== */
  [data-section="trust"][data-variant="c"] .trust-badges {
    padding: 32px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: var(--section-bg);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  [data-section="trust"][data-variant="c"] .trust-badges__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
  }
  [data-section="trust"][data-variant="c"] .trust-badges__item:first-child { padding-left: 0; }
  [data-section="trust"][data-variant="c"] .trust-badges__item:last-child { padding-right: 0; }
  [data-section="trust"][data-variant="c"] .trust-badges__divider {
    width: 1px;
    height: 36px;
    background: var(--rule);
    flex-shrink: 0;
  }
  [data-section="trust"][data-variant="c"] .trust-badges__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--accent-text);
  }
  [data-section="trust"][data-variant="c"] .trust-badges__icon svg {
    width: 100%;
    height: 100%;
  }
  [data-section="trust"][data-variant="c"] .trust-badges__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  [data-section="trust"][data-variant="c"] .trust-badges__label-primary {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.02em;
  }
  [data-section="trust"][data-variant="c"] .trust-badges__label-secondary {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  @container (max-width: 900px) {
    [data-section="trust"][data-variant="c"] .trust-badges {
      padding: 24px;
      flex-wrap: wrap;
      gap: 16px;
    }
    [data-section="trust"][data-variant="c"] .trust-badges__divider { display: none; }
    [data-section="trust"][data-variant="c"] .trust-badges__item {
      padding: 0;
      flex: 0 0 calc(50% - 8px);
    }
    [data-section="trust"][data-variant="c"] .trust-badges__item:first-child { padding-left: 0; }
  }

  /* =====================================================
     Trust — Variant D: trust-glow-stars
     Centered bar with CSS-animated pulsing star glow.
     ===================================================== */
  @keyframes trustStarGlow {
    0%, 100% { text-shadow: none; }
    50% { text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent); }
  }
  [data-section="trust"][data-variant="d"] .trust-glow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--section-bg);
    padding: 14px 56px;
    font-size: 13px;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="trust"][data-variant="d"] .trust-glow__stars {
    display: flex;
    gap: 2px;
    color: var(--accent-text);
    font-size: 18px;
  }
  [data-section="trust"][data-variant="d"] .trust-glow__stars span {
    animation: trustStarGlow 2s ease-in-out infinite;
  }
  [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(1) { animation-delay: 0s; }
  [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(2) { animation-delay: 0.2s; }
  [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(3) { animation-delay: 0.4s; }
  [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(4) { animation-delay: 0.6s; }
  [data-section="trust"][data-variant="d"] .trust-glow__stars span:nth-child(5) { animation-delay: 0.8s; }
  [data-section="trust"][data-variant="d"] .trust-glow__sep { color: var(--muted); }
  [data-section="trust"][data-variant="d"] .trust-glow__rating { color: var(--accent-text); font-weight: 600; }
  [data-section="trust"][data-variant="d"] .trust-glow__count { color: var(--muted); }
  [data-section="trust"][data-variant="d"] .trust-glow__source { color: var(--muted); }

  /* =====================================================
     Trust — Variant E: trust-count-up
     Centered bar with tabular-nums for animated count-up.
     (Animation is a client-side enhancement; SSR renders final values.)
     ===================================================== */
  [data-section="trust"][data-variant="e"] .trust-countup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--section-bg);
    padding: 14px 56px;
    font-size: 13px;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="trust"][data-variant="e"] .trust-countup__stars {
    display: flex;
    gap: 2px;
    color: var(--accent-text);
    font-size: 18px;
  }
  [data-section="trust"][data-variant="e"] .trust-countup__sep { color: var(--muted); }
  [data-section="trust"][data-variant="e"] .trust-countup__rating {
    color: var(--accent-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  [data-section="trust"][data-variant="e"] .trust-countup__count {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  [data-section="trust"][data-variant="e"] .trust-countup__source { color: var(--muted); }

  /* =====================================================
     About variants A–E
     Scoped to [data-section="about"][data-variant="<letter>"]
     ===================================================== */

  /* --- Variant A: about-split-portrait-text --- */
  [data-section="about"][data-variant="a"] .about-split {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    padding: 160px 56px;
    gap: 64px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  /* No portrait -> one column, so the grid does not reserve a blank 42%.
     See components/themes/sections/About/AboutA.tsx. */
  [data-section="about"][data-variant="a"] .about-split--no-portrait {
    grid-template-columns: 1fr;
  }
  [data-section="about"][data-variant="a"] .about-split__portrait-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }
  [data-section="about"][data-variant="a"] .about-split__portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8) contrast(1.04);
  }
  [data-section="about"][data-variant="a"] .about-split__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  [data-section="about"][data-variant="a"] .about-split__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 22px;
  }
  [data-section="about"][data-variant="a"] .about-split__headline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 38px;
    letter-spacing: 0.01em;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 28px;
  }
  [data-section="about"][data-variant="a"] .about-split__text {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 52ch;
  }
  @media (max-width: 900px) {
    [data-section="about"][data-variant="a"] .about-split {
      grid-template-columns: 1fr;
      padding: 80px 24px;
      gap: 40px;
    }
    [data-section="about"][data-variant="a"] .about-split__portrait-wrap {
      max-width: 400px;
      margin: 0 auto;
    }
    [data-section="about"][data-variant="a"] .about-split__headline { font-size: 28px; }
  }

  /* --- Variant B: about-full-bleed-portrait-overlay --- */
  [data-section="about"][data-variant="b"] .about-bleed {
    position: relative;
    height: 560px;
    overflow: hidden;
  }
  [data-section="about"][data-variant="b"] .about-bleed__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: brightness(0.6) contrast(1.05);
  }
  [data-section="about"][data-variant="b"] .about-bleed__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(12, 12, 12, 0.92) 0%,
      rgba(12, 12, 12, 0.55) 40%,
      rgba(12, 12, 12, 0.1) 100%
    );
  }
  [data-section="about"][data-variant="b"] .about-bleed__content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 56px;
    max-width: 640px;
  }
  [data-section="about"][data-variant="b"] .about-bleed__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
  }
  [data-section="about"][data-variant="b"] .about-bleed__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 48px;
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1.05;
    margin-bottom: 18px;
  }
  [data-section="about"][data-variant="b"] .about-bleed__text {
    font-size: 15px;
    color: var(--text);
    opacity: 0.82;
    line-height: 1.75;
    margin-bottom: 24px;
  }
  [data-section="about"][data-variant="b"] .about-bleed__link {
    display: inline-block;
    color: var(--accent-text);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    transition: opacity 0.15s;
  }
  [data-section="about"][data-variant="b"] .about-bleed__link:hover { opacity: 0.75; }
  @media (max-width: 900px) {
    [data-section="about"][data-variant="b"] .about-bleed { height: 400px; }
    [data-section="about"][data-variant="b"] .about-bleed__content { padding: 32px 24px; }
    [data-section="about"][data-variant="b"] .about-bleed__name { font-size: 32px; }
    [data-section="about"][data-variant="b"] .about-bleed__text { font-size: 14px; }
  }

  /* --- Variant C: about-three-column-essay --- */
  [data-section="about"][data-variant="c"] .about-essay {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 48px;
    padding: 120px 56px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="about"][data-variant="c"] .about-essay__col:not(:last-child) {
    border-right: 1px solid var(--rule);
    padding-right: 48px;
  }
  [data-section="about"][data-variant="c"] .about-essay__col--identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 8px;
  }
  [data-section="about"][data-variant="c"] .about-essay__avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    filter: saturate(0.85) contrast(1.04);
    margin-bottom: 20px;
  }
  [data-section="about"][data-variant="c"] .about-essay__artist-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 6px;
  }
  [data-section="about"][data-variant="c"] .about-essay__credential {
    font-size: 12px;
    color: var(--accent-text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
  }
  [data-section="about"][data-variant="c"] .about-essay__col--text {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
  }
  [data-section="about"][data-variant="c"] .about-essay__col--text p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 64px;
    float: left;
    line-height: 0.8;
    margin-right: 10px;
    margin-top: 6px;
    color: var(--accent-text);
    font-weight: 600;
  }
  [data-section="about"][data-variant="c"] .about-essay__col--quote {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
  }
  [data-section="about"][data-variant="c"] .about-essay__pullquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
    color: var(--text);
    line-height: 1.35;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
  }
  @media (max-width: 900px) {
    [data-section="about"][data-variant="c"] .about-essay {
      grid-template-columns: 1fr;
      padding: 64px 24px;
      gap: 32px;
    }
    [data-section="about"][data-variant="c"] .about-essay__col:not(:last-child) {
      border-right: none;
      padding-right: 0;
      border-bottom: 1px solid var(--rule);
      padding-bottom: 32px;
    }
    [data-section="about"][data-variant="c"] .about-essay__col--identity { align-items: center; }
    [data-section="about"][data-variant="c"] .about-essay__avatar { width: 120px; height: 120px; }
    [data-section="about"][data-variant="c"] .about-essay__pullquote { font-size: 20px; }
  }

  /* --- Variant D: about-fade-stagger --- */
  [data-section="about"][data-variant="d"] .about-fade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    background: var(--section-bg);
    padding: 80px 56px;
    align-items: center;
  }
  [data-section="about"][data-variant="d"] .about-fade__portrait-wrap {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-section="about"][data-variant="d"] .about-fade.is-visible .about-fade__portrait-wrap {
    opacity: 1;
    transform: translateY(0);
  }
  [data-section="about"][data-variant="d"] .about-fade__body {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
  }
  [data-section="about"][data-variant="d"] .about-fade.is-visible .about-fade__body {
    opacity: 1;
    transform: translateY(0);
  }
  [data-section="about"][data-variant="d"] .about-fade__portrait {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 6px;
  }
  [data-section="about"][data-variant="d"] .about-fade__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 12px;
  }
  [data-section="about"][data-variant="d"] .about-fade__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  [data-section="about"][data-variant="d"] .about-fade__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
  }
  @media (max-width: 768px) {
    [data-section="about"][data-variant="d"] .about-fade {
      grid-template-columns: 1fr;
      padding: 48px 24px;
      gap: 32px;
    }
  }

  /* --- Variant E: about-image-reveal --- */
  [data-section="about"][data-variant="e"] .about-reveal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    background: var(--section-bg);
    padding: 80px 56px;
    align-items: center;
  }
  [data-section="about"][data-variant="e"] .about-reveal__portrait img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 6px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  }
  [data-section="about"][data-variant="e"] .about-reveal.is-visible .about-reveal__portrait img {
    clip-path: inset(0 0 0 0);
  }
  [data-section="about"][data-variant="e"] .about-reveal__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 12px;
  }
  [data-section="about"][data-variant="e"] .about-reveal__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 16px;
  }
  [data-section="about"][data-variant="e"] .about-reveal__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
  }
  @media (max-width: 768px) {
    [data-section="about"][data-variant="e"] .about-reveal {
      grid-template-columns: 1fr;
      padding: 48px 24px;
      gap: 32px;
    }
  }

  /* =====================================================
     Gallery — Variant A (gallery-3col-rows-by-type)
     Rows grouped by gallery_type with eyebrow labels.
     ===================================================== */
  [data-section="gallery"][data-variant="a"] .gallery-rows {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 56px;
    text-align: center;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__heading {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__years {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__type-group {
    margin-bottom: 48px;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__type-group:last-child {
    margin-bottom: 0;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__type-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-text);
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__type-count {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__item {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__item:hover img {
    transform: scale(1.04);
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__type-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-text);
    transition: opacity 0.15s;
  }
  [data-section="gallery"][data-variant="a"] .gallery-rows__type-link:hover {
    opacity: 0.78;
  }
  @media (max-width: 900px) {
    [data-section="gallery"][data-variant="a"] .gallery-rows {
      padding: 48px 24px;
    }
    [data-section="gallery"][data-variant="a"] .gallery-rows__header {
      flex-direction: column;
      gap: 8px;
      margin-bottom: 36px;
    }
    [data-section="gallery"][data-variant="a"] .gallery-rows__heading {
      font-size: 28px;
    }
    [data-section="gallery"][data-variant="a"] .gallery-rows__grid {
      gap: 8px;
    }
  }

  /* =====================================================
     Gallery — Variant B (gallery-bento-mixed)
     Bento grid with varied tile sizes (tall × 2, wide × 1).
     ===================================================== */
  [data-section="gallery"][data-variant="b"] .gallery-bento {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 40px;
    text-align: center;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__heading {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__sub {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 12px;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__tile {
    overflow: hidden;
    border-radius: 2px;
    position: relative;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease, filter 0.35s ease;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__tile:hover img {
    transform: scale(1.05);
  }
  /* Rollover reveal — the photo falls back, the piece's title comes forward
     in the display face. Matches the interior gallery grid so a visitor
     meets one behaviour on both surfaces. `hover: hover` only, so a tap on
     a phone does not strand a tile blurred. */
  @media (hover: hover) {
    [data-section="gallery"][data-variant="b"] .gallery-bento__tile--titled:hover img {
      filter: blur(6px) brightness(0.5);
    }
    [data-section="gallery"][data-variant="b"] .gallery-bento__tile--titled:hover .gallery-bento__cap {
      opacity: 1;
    }
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__tile--titled:focus-visible img {
    filter: blur(6px) brightness(0.5);
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__tile--titled:focus-visible .gallery-bento__cap {
    opacity: 1;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__cap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__cap-text {
    font-family: var(--font-display);
    font-size: clamp(15px, 1.6vw, 21px);
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: var(--text);
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-section="gallery"][data-variant="b"] .gallery-bento__tile img,
    [data-section="gallery"][data-variant="b"] .gallery-bento__cap { transition: none; }
    [data-section="gallery"][data-variant="b"] .gallery-bento__tile:hover img { transform: none; }
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__tile--tall {
    grid-row: span 2;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__tile--wide {
    grid-column: span 2;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1px solid var(--accent);
    color: var(--accent-text);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.16em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
    transition: background 0.15s, color 0.15s;
  }
  [data-section="gallery"][data-variant="b"] .gallery-bento__link:hover {
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
  }
  @media (max-width: 900px) {
    [data-section="gallery"][data-variant="b"] .gallery-bento {
      padding: 48px 24px;
    }
    [data-section="gallery"][data-variant="b"] .gallery-bento__header {
      flex-direction: column;
      gap: 8px;
      margin-bottom: 28px;
    }
    [data-section="gallery"][data-variant="b"] .gallery-bento__heading {
      font-size: 28px;
    }
    [data-section="gallery"][data-variant="b"] .gallery-bento__grid {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 180px;
      gap: 8px;
    }
  }

  /* =====================================================
     Gallery — Variant C (gallery-chip-filtered-grid)
     4-col edge-to-edge grid with gallery_type filter chips.
     ===================================================== */
  [data-section="gallery"][data-variant="c"] .gallery-chips {
    padding: 80px 0;
    background: var(--section-bg);
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 56px;
    max-width: 1200px;
    margin: 0 auto 32px;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__heading {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    text-align: center;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__count {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  .gallery-chips__filters {
    display: flex;
    gap: 8px;
    padding: 0 56px;
    margin: 0 auto 32px;
    max-width: 1200px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gallery-chips__filters::-webkit-scrollbar {
    display: none;
  }
  .gallery-chips__chip {
    flex-shrink: 0;
    /* Chips became real <button>s when filtering was wired up (2026-08-19);
       these three reset the UA button styling the old <span>s never had. */
    font: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted);
    border: 1px solid var(--rule);
    background: transparent;
    transition: all 0.15s;
    cursor: pointer;
    white-space: nowrap;
  }
  .gallery-chips__chip:hover {
    color: var(--text);
    border-color: var(--accent);
  }
  .gallery-chips__chip--active {
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    border-color: var(--accent);
    font-weight: 500;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__tile[hidden] {
    display: none;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__tile {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__tile:hover img {
    transform: scale(1.06);
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 12, 12, 0.82) 0%, rgba(12, 12, 12, 0) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__tile:hover .gallery-chips__overlay {
    opacity: 1;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__overlay-style {
    font-size: 11px;
    color: var(--accent-text);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__footer {
    display: flex;
    justify-content: center;
    padding: 0 56px;
    margin-top: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1px solid var(--accent);
    color: var(--accent-text);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.16em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
    transition: background 0.15s, color 0.15s;
  }
  [data-section="gallery"][data-variant="c"] .gallery-chips__link:hover {
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
  }
  @media (max-width: 900px) {
    [data-section="gallery"][data-variant="c"] .gallery-chips {
      padding: 48px 0;
    }
    [data-section="gallery"][data-variant="c"] .gallery-chips__header {
      padding: 0 24px;
      margin-bottom: 24px;
      flex-direction: column;
      gap: 8px;
    }
    [data-section="gallery"][data-variant="c"] .gallery-chips__heading {
      font-size: 28px;
    }
    .gallery-chips__filters {
      padding: 0 24px;
      gap: 6px;
    }
    [data-section="gallery"][data-variant="c"] .gallery-chips__grid {
      grid-template-columns: repeat(2, 1fr);
    }
    [data-section="gallery"][data-variant="c"] .gallery-chips__footer {
      padding: 0 24px;
    }
  }

  /* =====================================================
     Gallery — Variant D (gallery-hover-scale)
     3-col uniform grid; hover scales + adds gold glow.
     ===================================================== */
  [data-section="gallery"][data-variant="d"] .gallery-hover {
    background: var(--section-bg);
    padding: 64px 56px;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 32px;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__sub {
    color: var(--muted);
    font-size: 14px;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__tile {
    overflow: hidden;
    border-radius: 6px;
    position: relative;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__tile img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.3s ease;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover img,
  [data-section="gallery"][data-variant="d"] .gallery-hover__tile:focus-visible img {
    transform: scale(1.08);
  }
  /* Which shop you can see this artist at. ALWAYS visible, never hover-only:
     a touch device cannot hover, and "where" is the question a three-shop
     studio's visitor is asking before they are asking "who". */
  [data-section="gallery"][data-variant="d"] .gallery-hover__place {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: var(--gallery-pill-radius, 999px);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.6;
    pointer-events: none;
  }
  /* The artist's name, revealed on hover/focus. Sits on a gradient rather
     than a flat scrim so the bottom of the piece stays readable under it. */
  [data-section="gallery"][data-variant="d"] .gallery-hover__who {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 26px 10px 9px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover .gallery-hover__who,
  [data-section="gallery"][data-variant="d"] .gallery-hover__tile:focus-visible .gallery-hover__who {
    opacity: 1;
    transform: translateY(0);
  }
  /* A reader who has asked for less motion still gets the name — it is
     information, not decoration; only the movement goes. */
  @media (prefers-reduced-motion: reduce) {
    [data-section="gallery"][data-variant="d"] .gallery-hover__tile img,
    [data-section="gallery"][data-variant="d"] .gallery-hover__who {
      transition: none;
    }
    [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover img,
    [data-section="gallery"][data-variant="d"] .gallery-hover__tile:focus-visible img {
      transform: none;
    }
    [data-section="gallery"][data-variant="d"] .gallery-hover__who {
      transform: none;
    }
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover {
    box-shadow: 0 4px 20px rgba(220, 185, 106, 0.15);
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__footer {
    text-align: center;
    margin-top: 32px;
  }
  [data-section="gallery"][data-variant="d"] .gallery-hover__link {
    color: var(--accent-text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  @media (max-width: 768px) {
    [data-section="gallery"][data-variant="d"] .gallery-hover {
      padding: 48px 24px;
    }
    [data-section="gallery"][data-variant="d"] .gallery-hover__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 480px) {
    [data-section="gallery"][data-variant="d"] .gallery-hover__grid {
      grid-template-columns: 1fr;
    }
    [data-section="gallery"][data-variant="d"] .gallery-hover__tile:hover {
      box-shadow: 0 2px 10px rgba(220, 185, 106, 0.12);
    }
  }

  /* =====================================================
     Gallery — Variant E (gallery-stagger-entrance)
     3-col grid with IntersectionObserver stagger animation.
     is-visible toggled by GalleryStaggerClient (TODO).
     SSR renders with is-visible pre-applied (no JS fallback).
     ===================================================== */
  [data-section="gallery"][data-variant="e"] .gallery-stagger {
    background: var(--section-bg);
    padding: 64px 56px;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger__heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger__years {
    color: var(--muted);
    font-size: 14px;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger .gallery__tile {
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger .gallery__tile img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile {
    opacity: 1;
    transform: translateY(0);
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(1) { transition-delay: 0s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(2) { transition-delay: 0.1s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(3) { transition-delay: 0.2s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(4) { transition-delay: 0.3s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(5) { transition-delay: 0.4s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(6) { transition-delay: 0.5s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(7) { transition-delay: 0.6s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(8) { transition-delay: 0.7s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger.is-visible .gallery__tile:nth-child(9) { transition-delay: 0.8s; }
  [data-section="gallery"][data-variant="e"] .gallery-stagger__footer {
    text-align: center;
    margin-top: 32px;
  }
  [data-section="gallery"][data-variant="e"] .gallery-stagger__link {
    color: var(--accent-text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  @media (max-width: 768px) {
    [data-section="gallery"][data-variant="e"] .gallery-stagger {
      padding: 48px 24px;
    }
    [data-section="gallery"][data-variant="e"] .gallery-stagger__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 480px) {
    [data-section="gallery"][data-variant="e"] .gallery-stagger__grid {
      grid-template-columns: 1fr;
    }
  }

  /* =====================================================
     Roster — Variant A (roster-card-grid)
     3-column card grid: circular headshot, name, bio, link
     ===================================================== */
  [data-section="roster"][data-variant="a"] .roster-grid {
    padding: 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
    text-align: center;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 40px;
    text-align: center;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-mid);
    border: 1px solid var(--rule);
    border-radius: 4px;
    transition: border-color 0.2s;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__card:hover {
    border-color: var(--accent);
  }
  [data-section="roster"][data-variant="a"] .roster-grid__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 2px solid var(--rule);
  }
  [data-section="roster"][data-variant="a"] .roster-grid__placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--bg-mid, #1e1e1e);
    border: 2px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__artist-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 6px;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__specialty {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 18px;
    line-height: 1.5;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__link {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
    transition: opacity 0.15s;
  }
  [data-section="roster"][data-variant="a"] .roster-grid__link:hover {
    opacity: 0.78;
  }
  @media (max-width: 900px) {
    [data-section="roster"][data-variant="a"] .roster-grid {
      padding: 40px 24px;
    }
    [data-section="roster"][data-variant="a"] .roster-grid__cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }
    [data-section="roster"][data-variant="a"] .roster-grid__card {
      padding: 28px 16px;
    }
    [data-section="roster"][data-variant="a"] .roster-grid__heading {
      font-size: 28px;
      margin-bottom: 28px;
    }
  }
  @media (max-width: 480px) {
    [data-section="roster"][data-variant="a"] .roster-grid__cards {
      grid-template-columns: 1fr;
    }
  }

  /* =====================================================
     Roster — Variant B (roster-horizontal-scroll)
     Horizontal scroll strip with tall portrait cards
     ===================================================== */
  [data-section="roster"][data-variant="b"] .roster-scroll {
    position: relative;
    padding: 56px 0;
    background: var(--section-bg);
    overflow: hidden;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__header {
    padding: 0 56px 32px;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
    text-align: center;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
    text-align: center;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__strip {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 56px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__strip::-webkit-scrollbar {
    height: 4px;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__strip::-webkit-scrollbar-track {
    background: transparent;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__strip::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 2px;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__card {
    flex: 0 0 240px;
    height: 320px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    border: 1px solid var(--rule);
    transition: border-color 0.2s;
    text-decoration: none;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__card:hover {
    border-color: var(--accent);
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__card-placeholder {
    position: absolute;
    inset: 0;
    background: var(--bg-mid, #1e1e1e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 18px 18px;
    background: linear-gradient(to top, rgba(12,12,12,0.92) 0%, rgba(12,12,12,0.6) 60%, transparent 100%);
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__card-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 4px;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__card-specialty {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__fade-left,
  [data-section="roster"][data-variant="b"] .roster-scroll__fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 56px;
    pointer-events: none;
    z-index: 2;
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__fade-left {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
  }
  [data-section="roster"][data-variant="b"] .roster-scroll__fade-right {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
  }
  @media (max-width: 900px) {
    [data-section="roster"][data-variant="b"] .roster-scroll__header {
      padding: 0 24px 24px;
    }
    [data-section="roster"][data-variant="b"] .roster-scroll__strip {
      padding: 0 24px 12px;
      gap: 14px;
    }
    [data-section="roster"][data-variant="b"] .roster-scroll__heading {
      font-size: 28px;
    }
    [data-section="roster"][data-variant="b"] .roster-scroll__fade-left,
    [data-section="roster"][data-variant="b"] .roster-scroll__fade-right {
      width: 24px;
    }
  }

  /* =====================================================
     Roster — Variant C (roster-list-rows)
     Stacked full-width list rows, compact + info-dense
     ===================================================== */
  [data-section="roster"][data-variant="c"] .roster-list {
    padding: 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="roster"][data-variant="c"] .roster-list__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
    text-align: center;
  }
  [data-section="roster"][data-variant="c"] .roster-list__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 32px;
    text-align: center;
  }
  [data-section="roster"][data-variant="c"] .roster-list__rows {
    display: flex;
    flex-direction: column;
  }
  [data-section="roster"][data-variant="c"] .roster-list__row {
    display: flex;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
    gap: 20px;
    transition: background 0.15s;
  }
  [data-section="roster"][data-variant="c"] .roster-list__row:first-child {
    border-top: 1px solid var(--rule);
  }
  [data-section="roster"][data-variant="c"] .roster-list__row:hover {
    background: rgba(220, 185, 106, 0.03);
  }
  [data-section="roster"][data-variant="c"] .roster-list__row-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--rule);
  }
  [data-section="roster"][data-variant="c"] .roster-list__row-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bg-mid, #1e1e1e);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-section="roster"][data-variant="c"] .roster-list__row-info {
    flex: 1;
    min-width: 0;
  }
  [data-section="roster"][data-variant="c"] .roster-list__row-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 2px;
  }
  [data-section="roster"][data-variant="c"] .roster-list__row-specialty {
    font-size: 13px;
    color: var(--muted);
  }
  [data-section="roster"][data-variant="c"] .roster-list__row-link {
    flex-shrink: 0;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
    transition: opacity 0.15s;
    white-space: nowrap;
  }
  [data-section="roster"][data-variant="c"] .roster-list__row-link:hover {
    opacity: 0.78;
  }
  @media (max-width: 900px) {
    [data-section="roster"][data-variant="c"] .roster-list {
      padding: 40px 24px;
    }
    [data-section="roster"][data-variant="c"] .roster-list__heading {
      font-size: 28px;
      margin-bottom: 24px;
    }
    [data-section="roster"][data-variant="c"] .roster-list__row {
      gap: 14px;
    }
    [data-section="roster"][data-variant="c"] .roster-list__row-link {
      font-size: 11px;
    }
  }

  /* =====================================================
     Roster — Variant D (roster-marquee-cards)
     Circular avatar cards in a 5-column grid, lift on hover
     ===================================================== */
  [data-section="roster"][data-variant="d"] .roster-marquee {
    padding: 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
    text-align: center;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 40px;
    text-align: center;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    transition: transform 0.2s;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__card:hover {
    transform: translateY(-4px);
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 18px;
    border: 2px solid var(--rule);
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg) 80%, #888);
    border: 2px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: 0.04em;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-bottom: 4px;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__specialty {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px;
    line-height: 1.4;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__link {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--accent-text);
    transition: opacity 0.15s;
  }
  [data-section="roster"][data-variant="d"] .roster-marquee__link:hover {
    opacity: 0.78;
  }
  @media (max-width: 900px) {
    [data-section="roster"][data-variant="d"] .roster-marquee {
      padding: 40px 24px;
    }
    [data-section="roster"][data-variant="d"] .roster-marquee__heading {
      font-size: 28px;
      margin-bottom: 28px;
    }
    [data-section="roster"][data-variant="d"] .roster-marquee__cards {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
  }
  @media (max-width: 480px) {
    [data-section="roster"][data-variant="d"] .roster-marquee {
      padding: 64px 20px;
    }
    [data-section="roster"][data-variant="d"] .roster-marquee__heading {
      font-size: 24px;
    }
    [data-section="roster"][data-variant="d"] .roster-marquee__cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    [data-section="roster"][data-variant="d"] .roster-marquee__photo,
    [data-section="roster"][data-variant="d"] .roster-marquee__placeholder {
      width: 80px;
      height: 80px;
      font-size: 20px;
    }
    [data-section="roster"][data-variant="d"] .roster-marquee__name {
      font-size: 14px;
    }
  }

  /* =====================================================
     Roster — Variant E (roster-hover-glow)
     3-column cards: grayscale-to-color photo + gold glow on hover
     ===================================================== */
  [data-section="roster"][data-variant="e"] .roster-glow {
    background: var(--section-bg);
    padding: 64px 56px;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 32px;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__card {
    background: var(--bg-mid);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 28px 24px;
    text-align: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__card:hover {
    box-shadow: 0 0 24px rgba(220,185,106,0.3);
    transform: translateY(-4px);
  }
  [data-section="roster"][data-variant="e"] .roster-glow__photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    filter: grayscale(0.6);
    transition: filter 0.3s ease;
    display: block;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__card:hover .roster-glow__photo {
    filter: grayscale(0);
  }
  [data-section="roster"][data-variant="e"] .roster-glow__placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(220,185,106,0.08);
    border: 1px dashed var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-text);
    letter-spacing: 0.08em;
    filter: grayscale(0.6);
    transition: filter 0.3s ease;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__card:hover .roster-glow__placeholder {
    filter: grayscale(0);
  }
  [data-section="roster"][data-variant="e"] .roster-glow__artist-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__specialty {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
  }
  [data-section="roster"][data-variant="e"] .roster-glow__link {
    color: var(--accent-text);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  @media (max-width: 768px) {
    [data-section="roster"][data-variant="e"] .roster-glow {
      padding: 48px 24px;
    }
    [data-section="roster"][data-variant="e"] .roster-glow__cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 480px) {
    [data-section="roster"][data-variant="e"] .roster-glow__cards {
      grid-template-columns: 1fr;
    }
    [data-section="roster"][data-variant="e"] .roster-glow__card:hover {
      box-shadow: 0 0 12px rgba(220,185,106,0.2);
    }
  }

  /* ============================================================
     Services — Variant A (services-card-grid)
     3-column icon card grid; hover lifts border to accent
     ============================================================ */
  [data-section="services"][data-variant="a"] .svc-grid {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="a"] .svc-grid__header {
    text-align: center;
    margin-bottom: 56px;
  }
  [data-section="services"][data-variant="a"] .svc-grid__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
  }
  [data-section="services"][data-variant="a"] .svc-grid__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="services"][data-variant="a"] .svc-grid__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="a"] .svc-card {
    background: var(--bg-mid);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s;
  }
  [data-section="services"][data-variant="a"] .svc-card:hover {
    border-color: var(--accent);
  }
  [data-section="services"][data-variant="a"] .svc-card__icon {
    width: 36px;
    height: 36px;
    color: var(--accent-text);
  }
  [data-section="services"][data-variant="a"] .svc-card__icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  [data-section="services"][data-variant="a"] .svc-card__name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text);
  }
  [data-section="services"][data-variant="a"] .svc-card__desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    flex: 1;
  }
  [data-section="services"][data-variant="a"] .svc-card__price {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: 0.04em;
    margin-top: 4px;
  }
  @media (max-width: 900px) {
    [data-section="services"][data-variant="a"] .svc-grid {
      padding: 56px 32px;
    }
    [data-section="services"][data-variant="a"] .svc-grid__cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 480px) {
    [data-section="services"][data-variant="a"] .svc-grid {
      padding: 48px 20px;
    }
    [data-section="services"][data-variant="a"] .svc-grid__heading {
      font-size: 28px;
    }
    [data-section="services"][data-variant="a"] .svc-grid__cards {
      grid-template-columns: 1fr;
    }
  }

  /* ============================================================
     Services — Variant B (services-stacked-list)
     Alternating rows: name | description | price
     ============================================================ */
  [data-section="services"][data-variant="b"] .svc-list {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="b"] .svc-list__header {
    margin-bottom: 48px;
    text-align: center;
  }
  [data-section="services"][data-variant="b"] .svc-list__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
  }
  [data-section="services"][data-variant="b"] .svc-list__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="services"][data-variant="b"] .svc-list__rows {
    max-width: 1100px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="b"] .svc-row {
    display: grid;
    grid-template-columns: 220px 1fr 160px;
    align-items: baseline;
    padding: 22px 28px;
    border-bottom: 1px solid var(--rule);
    gap: 32px;
  }
  [data-section="services"][data-variant="b"] .svc-row:first-child {
    border-top: 1px solid var(--rule);
  }
  [data-section="services"][data-variant="b"] .svc-row:nth-child(even) {
    background: var(--bg-mid);
  }
  [data-section="services"][data-variant="b"] .svc-row__name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text);
  }
  [data-section="services"][data-variant="b"] .svc-row__desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
  }
  [data-section="services"][data-variant="b"] .svc-row__price {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: 0.04em;
    text-align: right;
  }
  [data-section="services"][data-variant="b"] .svc-row__link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2px;
  }
  [data-section="services"][data-variant="b"] .svc-row__link:hover {
    opacity: 0.8;
  }
  @media (max-width: 768px) {
    [data-section="services"][data-variant="b"] .svc-list {
      padding: 56px 24px;
    }
    [data-section="services"][data-variant="b"] .svc-row {
      grid-template-columns: 1fr;
      gap: 6px;
    }
    [data-section="services"][data-variant="b"] .svc-row__price {
      text-align: left;
    }
  }

  /* ============================================================
     Services — Variant C (services-accordion)
     Expandable <details> per service; chevron rotates on open
     ============================================================ */
  [data-section="services"][data-variant="c"] .svc-accordion {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="c"] .svc-accordion__header {
    margin-bottom: 48px;
    text-align: center;
  }
  [data-section="services"][data-variant="c"] .svc-accordion__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
  }
  [data-section="services"][data-variant="c"] .svc-accordion__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="services"][data-variant="c"] .svc-accordion__items {
    max-width: 800px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="c"] .svc-detail {
    border-bottom: 1px solid var(--rule);
  }
  [data-section="services"][data-variant="c"] .svc-detail:first-of-type {
    border-top: 1px solid var(--rule);
  }
  [data-section="services"][data-variant="c"] .svc-detail[open] {
    background: var(--bg-mid);
  }
  [data-section="services"][data-variant="c"] .svc-detail__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    gap: 24px;
    list-style: none;
    cursor: pointer;
    transition: color 0.15s;
  }
  [data-section="services"][data-variant="c"] .svc-detail__summary:hover {
    color: var(--accent-text);
  }
  [data-section="services"][data-variant="c"] .svc-detail__summary-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  [data-section="services"][data-variant="c"] .svc-detail__name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text);
  }
  [data-section="services"][data-variant="c"] .svc-detail__chevron {
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  [data-section="services"][data-variant="c"] .svc-detail[open] .svc-detail__chevron {
    transform: rotate(180deg);
    color: var(--accent-text);
  }
  [data-section="services"][data-variant="c"] .svc-detail__price-tag {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  [data-section="services"][data-variant="c"] .svc-detail__body {
    padding: 0 24px 24px;
  }
  [data-section="services"][data-variant="c"] .svc-detail__desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 60ch;
  }
  [data-section="services"][data-variant="c"] .svc-detail__link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
    transition: opacity 0.15s;
  }
  [data-section="services"][data-variant="c"] .svc-detail__link:hover {
    opacity: 0.75;
  }
  @media (max-width: 768px) {
    [data-section="services"][data-variant="c"] .svc-accordion {
      padding: 56px 24px;
    }
  }

  /* ============================================================
     Services — Variant D (services-marquee-grid)
     Text-only 3-col cards on subtle darkened bg; no icons
     ============================================================ */
  [data-section="services"][data-variant="d"] .svc-marquee {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="d"] .svc-marquee__header {
    text-align: center;
    margin-bottom: 56px;
  }
  [data-section="services"][data-variant="d"] .svc-marquee__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
  }
  [data-section="services"][data-variant="d"] .svc-marquee__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="services"][data-variant="d"] .svc-marquee__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
  }
  [data-section="services"][data-variant="d"] .svc-marquee-card {
    background: color-mix(in srgb, var(--bg) 94%, #000);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 36px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s;
  }
  [data-section="services"][data-variant="d"] .svc-marquee-card:hover {
    border-color: var(--accent);
  }
  [data-section="services"][data-variant="d"] .svc-marquee-card__name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text);
  }
  [data-section="services"][data-variant="d"] .svc-marquee-card__desc {
    font-size: 13px;
    color: color-mix(in srgb, var(--muted) 75%, var(--text));
    line-height: 1.65;
    flex: 1;
  }
  [data-section="services"][data-variant="d"] .svc-marquee-card__link {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--accent-text) 80%, var(--text));
    transition: opacity 0.15s;
  }
  [data-section="services"][data-variant="d"] .svc-marquee-card__link:hover {
    opacity: 0.78;
  }
  @media (max-width: 900px) {
    [data-section="services"][data-variant="d"] .svc-marquee {
      padding: 48px 24px;
    }
    [data-section="services"][data-variant="d"] .svc-marquee__heading {
      font-size: 28px;
    }
    [data-section="services"][data-variant="d"] .svc-marquee__cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 480px) {
    [data-section="services"][data-variant="d"] .svc-marquee {
      padding: 64px 20px;
    }
    [data-section="services"][data-variant="d"] .svc-marquee__heading {
      font-size: 24px;
    }
    [data-section="services"][data-variant="d"] .svc-marquee__cards {
      grid-template-columns: 1fr;
    }
  }

  /* ============================================================
     Services — Variant E (services-glassmorphism)
     3-col frosted-glass icon cards; backdrop-filter blur(12px)
     ============================================================ */
  [data-section="services"][data-variant="e"] .svc-glass {
    background: var(--section-bg);
    padding: 64px 56px;
  }
  [data-section="services"][data-variant="e"] .svc-glass__header {
    margin-bottom: 32px;
  }
  [data-section="services"][data-variant="e"] .svc-glass__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  [data-section="services"][data-variant="e"] .svc-glass__heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
  }
  [data-section="services"][data-variant="e"] .svc-glass__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  [data-section="services"][data-variant="e"] .svc-glass__card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 28px 24px;
    transition: background 0.3s ease, border-color 0.3s ease;
  }
  [data-section="services"][data-variant="e"] .svc-glass__card:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent);
  }
  [data-section="services"][data-variant="e"] .svc-glass__card-icon {
    width: 36px;
    height: 36px;
    color: var(--accent-text);
    stroke: var(--accent);
    fill: none;
    stroke-width: 1.5;
    margin-bottom: 14px;
  }
  [data-section="services"][data-variant="e"] .svc-glass__card-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  [data-section="services"][data-variant="e"] .svc-glass__card-desc {
    font-size: 14px;
    color: color-mix(in srgb, var(--muted) 75%, var(--text));
    line-height: 1.6;
    margin-bottom: 12px;
  }
  [data-section="services"][data-variant="e"] .svc-glass__card-price {
    font-size: 13px;
    color: var(--accent-text);
    font-weight: 500;
  }
  [data-section="services"][data-variant="e"] .svc-glass__card-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-text);
    text-decoration: none;
    letter-spacing: 0.04em;
  }
  [data-section="services"][data-variant="e"] .svc-glass__card-link:hover {
    text-decoration: underline;
  }
  @media (max-width: 768px) {
    [data-section="services"][data-variant="e"] .svc-glass {
      padding: 48px 24px;
    }
    [data-section="services"][data-variant="e"] .svc-glass__cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 480px) {
    [data-section="services"][data-variant="e"] .svc-glass__cards {
      grid-template-columns: 1fr;
    }
    [data-section="services"][data-variant="e"] .svc-glass__card {
      backdrop-filter: blur(6px);
    }
  }

  /* ==========================================================
     Section: third-party-trust
     Press logos, award badges, "as featured in" rows.
     Scoped per variant to [data-section="third-party-trust"][data-variant="<letter>"].
     ========================================================== */

  /* --- Variant A: press-strip --- */
    /* 🚨 The section paints its own background from --section-bg.
     Without this the builder's per-section Background picker wrote the
     database and rendered nothing — the control existed, the tone never
     appeared. Reported by a client as "Need to be able change bg color of
     third party trust" (Sean, Darkside, 2026-08-14); same defect class as
     the Amenities bar in docs/BUILDER-SECTION-AUDIT.md, where a section had
     no CSS at all. `--section-bg` falls back to the framework's own value,
     so a tenant who never touches the picker sees no change. */
[data-section="third-party-trust"][data-variant="a"] .trust-strip {
    background: var(--section-bg);
    padding: 48px 56px;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="third-party-trust"][data-variant="a"] .trust-strip__eyebrow {
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 20px;
  }
  [data-section="third-party-trust"][data-variant="a"] .trust-strip__names {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    color: var(--text);
    opacity: 0.82;
    line-height: 2;
  }
  /* Award/press LOGO in the strip (award.imageUrl) — capped so an uploaded
     logo can't blow up the row (2026-07-25 review: Sean's Alliance badge). */
  [data-section="third-party-trust"][data-variant="a"] .trust-strip__logo {
    /* 34px was too small to read an accreditation mark (operator,
       2026-08-03) — these are BBB / Chamber-of-Commerce style badges, not
       wordmarks, so detail matters. */
    height: 56px;
    max-width: 190px;
    width: auto;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;

    /* Accreditation logos are supplied as dark artwork on transparent
       PNGs, so on a dark theme two of Darkside's six were invisible.
       A light plate is the standard press-strip treatment and works for
       ANY artwork — unlike `invert()`, which would destroy the coloured
       seals (the red cross, the gold badges). Sized so a light-on-light
       logo still reads on a light theme. */
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    box-sizing: content-box;
  }
  /* The plate is only needed where the section background is dark. On a
     light theme it is invisible anyway, but drop the radius/padding cost
     by keeping it transparent when the page background is light. */
  [data-section="third-party-trust"][data-variant="a"] .trust-strip__link {
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  [data-section="third-party-trust"][data-variant="a"] .trust-strip__link:hover {
    opacity: 0.82;
    transform: translateY(-1px);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-section="third-party-trust"][data-variant="a"] .trust-strip__link {
      transition: none;
    }
    [data-section="third-party-trust"][data-variant="a"] .trust-strip__link:hover {
      transform: none;
    }
  }
  [data-section="third-party-trust"][data-variant="a"] .trust-strip__sep {
    display: inline-block;
    margin: 0 18px;
    color: var(--accent-text);
  }
  @media (max-width: 900px) {
    [data-section="third-party-trust"][data-variant="a"] .trust-strip {
      padding: 36px 24px;
    }
    [data-section="third-party-trust"][data-variant="a"] .trust-strip__sep {
      margin: 0 10px;
    }
  }

  /* --- Variant B: awards-grid --- */
    /* 🚨 The section paints its own background from --section-bg.
     Without this the builder's per-section Background picker wrote the
     database and rendered nothing — the control existed, the tone never
     appeared. Reported by a client as "Need to be able change bg color of
     third party trust" (Sean, Darkside, 2026-08-14); same defect class as
     the Amenities bar in docs/BUILDER-SECTION-AUDIT.md, where a section had
     no CSS at all. `--section-bg` falls back to the framework's own value,
     so a tenant who never touches the picker sees no change. */
[data-section="third-party-trust"][data-variant="b"] .trust-grid {
    background: var(--section-bg);
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    padding: 56px;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__col {
    padding: 0 48px;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__col:first-child {
    padding-left: 0;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__col:last-child {
    padding-right: 0;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__rule {
    width: 1px;
    background: var(--rule);
    align-self: stretch;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__eyebrow {
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 28px;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__item {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__item:last-child {
    border-bottom: none;
  }
  /* Award/press LOGO above the entry (award.imageUrl) — capped. */
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-logo {
    max-height: 52px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-name {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 2px;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-name--award {
    color: var(--accent-text);
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-year {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
  }
  [data-section="third-party-trust"][data-variant="b"] .trust-grid__item-event {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }
  @media (max-width: 900px) {
    [data-section="third-party-trust"][data-variant="b"] .trust-grid {
      grid-template-columns: 1fr;
      padding: 36px 24px;
      gap: 32px;
    }
    [data-section="third-party-trust"][data-variant="b"] .trust-grid__col {
      padding: 0;
    }
    [data-section="third-party-trust"][data-variant="b"] .trust-grid__rule {
      display: none;
    }
  }

  /* --- Variant C: timeline --- */
    /* 🚨 The section paints its own background from --section-bg.
     Without this the builder's per-section Background picker wrote the
     database and rendered nothing — the control existed, the tone never
     appeared. Reported by a client as "Need to be able change bg color of
     third party trust" (Sean, Darkside, 2026-08-14); same defect class as
     the Amenities bar in docs/BUILDER-SECTION-AUDIT.md, where a section had
     no CSS at all. `--section-bg` falls back to the framework's own value,
     so a tenant who never touches the picker sees no change. */
[data-section="third-party-trust"][data-variant="c"] .trust-timeline {
    background: var(--section-bg);
    position: relative;
    padding: 64px 56px;
    max-width: 800px;
    margin: 0 auto;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__lineage {
    margin-bottom: 48px;
    padding-left: 40px;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__lineage-eyebrow {
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 12px;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__lineage-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--text);
    opacity: 0.88;
    line-height: 1.55;
    max-width: 560px;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__track {
    position: relative;
    padding-left: 40px;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__track::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
    opacity: 0.35;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__entry {
    position: relative;
    padding-bottom: 36px;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__entry:last-child {
    padding-bottom: 0;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__dot {
    position: absolute;
    left: -40px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__dot--award {
    background: var(--accent);
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__year {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 4px;
    font-weight: 500;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 4px;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__title--award {
    color: var(--accent-text);
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 480px;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
    margin-top: 6px;
    font-weight: 500;
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__tag--press {
    color: var(--muted);
    border: 1px solid var(--rule);
  }
  [data-section="third-party-trust"][data-variant="c"] .trust-timeline__tag--award {
    color: var(--accent-text);
    border: 1px solid rgba(220, 185, 106, 0.3);
  }
  @media (max-width: 900px) {
    [data-section="third-party-trust"][data-variant="c"] .trust-timeline {
      padding: 48px 24px;
    }
  }

  /* --- Variant D: fade-timeline --- */
  /* Shares trust-timeline BEM structure from Variant C; adds scroll-reveal animation layer. */
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade {
    background: var(--section-bg);
    padding: 80px 56px;
    max-width: 920px;
    margin: 0 auto;
  }
  /* Lineage block animates in first */
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__lineage {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__lineage {
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
  }
  /* Vertical track line draws down */
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__track {
    position: relative;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__track::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
    opacity: 0.35;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 2s ease;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__track::before {
    transform: scaleY(1);
  }
  /* Entries slide + fade in with staggered delays */
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__entry {
    position: relative;
    padding-bottom: 36px;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade .trust-timeline__entry:last-child {
    padding-bottom: 0;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry {
    opacity: 1;
    transform: none;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(1) { transition-delay: 0.3s; }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(2) { transition-delay: 0.45s; }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(3) { transition-delay: 0.6s; }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(4) { transition-delay: 0.75s; }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(5) { transition-delay: 0.9s; }
  [data-section="third-party-trust"][data-variant="d"] .trust3p-fade.is-visible .trust-timeline__entry:nth-child(6) { transition-delay: 1.05s; }
  /* Re-use Variant C BEM elements for dot, year, title, desc, tag */
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__dot {
    position: absolute;
    left: -40px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__dot--award {
    background: var(--accent);
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__lineage-eyebrow {
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 12px;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__lineage-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--text);
    opacity: 0.88;
    line-height: 1.55;
    max-width: 560px;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__year {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 4px;
    font-weight: 500;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 4px;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__title--award {
    color: var(--accent-text);
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
    max-width: 480px;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 2px;
    margin-top: 6px;
    font-weight: 500;
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__tag--press {
    color: var(--muted);
    border: 1px solid var(--rule);
  }
  [data-section="third-party-trust"][data-variant="d"] .trust-timeline__tag--award {
    color: var(--accent-text);
    border: 1px solid rgba(220, 185, 106, 0.3);
  }
  @media (max-width: 480px) {
    [data-section="third-party-trust"][data-variant="d"] .trust3p-fade {
      padding: 48px 24px;
    }
  }

  /* --- Variant E: glow-badges --- */
  @keyframes tpt-dotPulse {
    0%, 100% { opacity: 0.4; color: var(--muted); }
    50% { opacity: 1; color: var(--accent-text); }
  }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow {
    background: var(--section-bg);
    padding: 48px 56px;
    text-align: center;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--muted);
    margin-bottom: 16px;
  }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__names {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__name {
    cursor: default;
    transition: text-shadow 0.3s ease, color 0.3s ease;
  }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__name:hover {
    text-shadow: 0 0 12px var(--accent);
    color: var(--accent-text);
  }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep {
    display: inline-block;
    margin: 0 14px;
    animation: tpt-dotPulse 3s ease infinite;
  }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(1) { animation-delay: 0s; }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(2) { animation-delay: 0.4s; }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(3) { animation-delay: 0.8s; }
  [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep:nth-of-type(4) { animation-delay: 1.2s; }
  @media (max-width: 480px) {
    [data-section="third-party-trust"][data-variant="e"] .trust3p-glow {
      padding: 36px 24px;
    }
    [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__names {
      font-size: 16px;
    }
    [data-section="third-party-trust"][data-variant="e"] .trust3p-glow__sep {
      margin: 0 8px;
    }
  }

  /* =========================================================
     Pricing — Variants A–E
     ========================================================= */

  /* --- Variant A: pricing-centered-prose --- */
  [data-section="pricing"][data-variant="a"] .pricing-prose {
    padding: 80px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="pricing"][data-variant="a"] .pricing-prose__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 24px;
  }
  [data-section="pricing"][data-variant="a"] .pricing-prose__headline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 38px;
    letter-spacing: 0.01em;
    color: var(--text);
    margin-bottom: 36px;
    line-height: 1.2;
  }
  [data-section="pricing"][data-variant="a"] .pricing-prose__rule {
    width: 48px;
    height: 1px;
    background: var(--accent);
    margin-bottom: 36px;
  }
  [data-section="pricing"][data-variant="a"] .pricing-prose__body {
    max-width: 680px;
  }
  [data-section="pricing"][data-variant="a"] .pricing-prose__body p {
    font-size: 15px;
    color: var(--text);
    opacity: 0.82;
    line-height: 1.75;
    margin-bottom: 18px;
  }
  [data-section="pricing"][data-variant="a"] .pricing-prose__body p:last-child {
    margin-bottom: 0;
  }
  [data-section="pricing"][data-variant="a"] .pricing-prose__body .accent {
    color: var(--accent-text);
    font-weight: 500;
  }
  @media (max-width: 900px) {
    [data-section="pricing"][data-variant="a"] .pricing-prose {
      padding: 56px 24px;
    }
    [data-section="pricing"][data-variant="a"] .pricing-prose__headline {
      font-size: 28px;
    }
  }

  /* --- Variant B: pricing-three-cards --- */
  [data-section="pricing"][data-variant="b"] .pricing-cards {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="pricing"][data-variant="b"] .pricing-cards__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-align: center;
    margin-bottom: 48px;
  }
  [data-section="pricing"][data-variant="b"] .pricing-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 960px;
    margin: 0 auto;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card {
    background: var(--bg-mid);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card__name {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 20px;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card__price {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.1;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card__qualifier {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card__rule {
    width: 32px;
    height: 1px;
    background: var(--rule);
    margin-bottom: 20px;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card__desc {
    font-size: 14px;
    color: var(--text);
    opacity: 0.72;
    line-height: 1.65;
    margin-bottom: 28px;
    flex: 1;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card__cta {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color 0.15s;
  }
  [data-section="pricing"][data-variant="b"] .pricing-card__cta:hover {
    border-color: var(--accent);
  }
  @media (max-width: 900px) {
    [data-section="pricing"][data-variant="b"] .pricing-cards {
      padding: 56px 24px;
    }
    [data-section="pricing"][data-variant="b"] .pricing-cards__grid {
      grid-template-columns: 1fr;
      max-width: 400px;
      margin: 0 auto;
    }
  }

  /* --- Variant C: pricing-inline-table --- */
  [data-section="pricing"][data-variant="c"] .pricing-table {
    padding: 80px 56px;
    background: var(--section-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="pricing"][data-variant="c"] .pricing-table__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 32px;
  }
  [data-section="pricing"][data-variant="c"] .pricing-table__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 960px;
    border: 1px solid var(--rule);
    background: var(--bg-mid);
  }
  [data-section="pricing"][data-variant="c"] .pricing-table__cell {
    padding: 32px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  [data-section="pricing"][data-variant="c"] .pricing-table__cell + .pricing-table__cell {
    border-left: 1px solid var(--rule);
  }
  [data-section="pricing"][data-variant="c"] .pricing-table__label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  [data-section="pricing"][data-variant="c"] .pricing-table__value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: 0.02em;
  }
  [data-section="pricing"][data-variant="c"] .pricing-table__note {
    margin-top: 24px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    text-align: center;
    max-width: 560px;
  }
  @media (max-width: 900px) {
    [data-section="pricing"][data-variant="c"] .pricing-table {
      padding: 56px 24px;
    }
    [data-section="pricing"][data-variant="c"] .pricing-table__strip {
      grid-template-columns: repeat(2, 1fr);
    }
    [data-section="pricing"][data-variant="c"] .pricing-table__cell:nth-child(3) {
      border-left: none;
      border-top: 1px solid var(--rule);
    }
    [data-section="pricing"][data-variant="c"] .pricing-table__cell:nth-child(4) {
      border-top: 1px solid var(--rule);
    }
    [data-section="pricing"][data-variant="c"] .pricing-table__value {
      font-size: 20px;
    }
  }

  /* --- Variant D: pricing-cards-hover-lift --- */
  @keyframes pricing-textShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  [data-section="pricing"][data-variant="d"] .price-lift {
    background: var(--section-bg);
    padding: 64px 56px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 24px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__card {
    background: var(--bg-mid);
    padding: 32px 24px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--accent);
  }
  [data-section="pricing"][data-variant="d"] .price-lift__name {
    font-family: var(--font-display);
    font-size: 18px;
    margin-bottom: 12px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__price {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--text), var(--accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pricing-textShimmer 4s ease infinite;
    margin-bottom: 4px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__qualifier {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__rule {
    width: 32px;
    height: 1px;
    background: var(--rule);
    margin-bottom: 16px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__desc {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 20px;
  }
  [data-section="pricing"][data-variant="d"] .price-lift__cta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-text);
  }
  @media (max-width: 768px) {
    [data-section="pricing"][data-variant="d"] .price-lift__grid {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    [data-section="pricing"][data-variant="d"] .price-lift {
      padding: 48px 24px;
    }
  }

  /* --- Variant E: pricing-reveal --- */
  [data-section="pricing"][data-variant="e"] .price-reveal {
    background: var(--section-bg);
    padding: 56px 56px;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 20px;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  [data-section="pricing"][data-variant="e"] .price-reveal__cell {
    padding: 24px 20px;
    border-right: 1px solid var(--rule);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal__cell:last-child {
    border-right: none;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell {
    opacity: 1;
    transform: none;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(1) {
    transition-delay: 0s;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(2) {
    transition-delay: 0.2s;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(3) {
    transition-delay: 0.4s;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal.is-visible .price-reveal__cell:nth-child(4) {
    transition-delay: 0.6s;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal__label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 8px;
  }
  [data-section="pricing"][data-variant="e"] .price-reveal__value {
    display: block;
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--accent-text);
  }
  [data-section="pricing"][data-variant="e"] .price-reveal__note {
    font-size: 13px;
    color: var(--muted);
    margin-top: 16px;
  }
  @media (max-width: 768px) {
    [data-section="pricing"][data-variant="e"] .price-reveal__strip {
      grid-template-columns: repeat(2, 1fr);
    }
    [data-section="pricing"][data-variant="e"] .price-reveal__cell:nth-child(2) {
      border-right: none;
    }
  }
  @media (max-width: 480px) {
    [data-section="pricing"][data-variant="e"] .price-reveal {
      padding: 40px 24px;
    }
    [data-section="pricing"][data-variant="e"] .price-reveal__strip {
      grid-template-columns: 1fr;
    }
    [data-section="pricing"][data-variant="e"] .price-reveal__cell {
      border-right: none;
      border-bottom: 1px solid var(--rule);
    }
    [data-section="pricing"][data-variant="e"] .price-reveal__cell:last-child {
      border-bottom: none;
    }
  }

  /* =====================================================
     Testimonials — shared
     ===================================================== */
  [data-section="testimonials"] .stars {
    display: inline-flex;
    gap: 3px;
    color: var(--accent-text);
    font-size: 14px;
    letter-spacing: 2px;
  }
  [data-section="testimonials"] .stars--lg {
    font-size: 22px;
    letter-spacing: 3px;
  }

  /* =====================================================
     Testimonials A — pull-quote-cards
     ===================================================== */
  [data-section="testimonials"][data-variant="a"] .testi-cards {
    padding: 64px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="testimonials"][data-variant="a"] .testi-cards__heading {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 12px;
  }
  [data-section="testimonials"][data-variant="a"] .testi-cards__sub {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 48px;
    letter-spacing: 0.02em;
  }
  [data-section="testimonials"][data-variant="a"] .testi-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  [data-section="testimonials"][data-variant="a"] .testi-card {
    background: var(--bg-mid);
    border: 1px solid var(--rule);
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
  }
  [data-section="testimonials"][data-variant="a"] .testi-card__open-quote {
    font-family: var(--font-display);
    font-size: 56px;
    color: var(--accent-text);
    line-height: 1;
    margin-bottom: 8px;
    user-select: none;
  }
  [data-section="testimonials"][data-variant="a"] .testi-card__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: var(--text);
    flex: 1;
    margin-bottom: 20px;
  }
  [data-section="testimonials"][data-variant="a"] .testi-card__rule {
    height: 1px;
    background: var(--rule);
    margin-bottom: 18px;
  }
  [data-section="testimonials"][data-variant="a"] .testi-card__attribution {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 10px;
  }
  [data-section="testimonials"][data-variant="a"] .testi-card__attribution strong {
    color: var(--text);
    font-weight: 500;
  }
  @media (max-width: 900px) {
    [data-section="testimonials"][data-variant="a"] .testi-cards {
      padding: 48px 24px;
    }
    [data-section="testimonials"][data-variant="a"] .testi-cards__grid {
      grid-template-columns: 1fr;
    }
  }

  /* =====================================================
     Testimonials B — single-large-rotating
     ===================================================== */
  [data-section="testimonials"][data-variant="b"] .testi-single {
    padding: 80px 56px;
    background: var(--section-bg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__heading {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    margin-bottom: 48px;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__open-quote {
    font-family: var(--font-display);
    font-size: 72px;
    color: var(--accent-text);
    line-height: 1;
    margin-bottom: 12px;
    user-select: none;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    line-height: 1.4;
    color: var(--text);
    max-width: 780px;
    margin-bottom: 28px;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__attribution {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__attribution strong {
    color: var(--text);
    font-weight: 500;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__stars {
    margin-bottom: 24px;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__count {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.06em;
    margin-bottom: 18px;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__link {
    font-size: 13px;
    color: var(--accent-text);
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color 0.15s;
  }
  [data-section="testimonials"][data-variant="b"] .testi-single__link:hover {
    border-color: var(--accent);
  }
  @media (max-width: 900px) {
    [data-section="testimonials"][data-variant="b"] .testi-single {
      padding: 56px 24px;
    }
    [data-section="testimonials"][data-variant="b"] .testi-single__quote {
      font-size: 24px;
    }
  }

  /* =====================================================
     Testimonials C — google-embed-style
     ===================================================== */
  [data-section="testimonials"][data-variant="c"] .testi-google {
    padding: 64px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__heading {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 48px;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__agg {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 32px;
    background: var(--bg-mid);
    border: 1px solid var(--rule);
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__score {
    font-family: var(--font-display);
    font-size: 56px;
    color: var(--accent-text);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__agg-stars {
    margin-bottom: 14px;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__agg-meta {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
    letter-spacing: 0.02em;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__write-link {
    font-size: 12px;
    color: var(--accent-text);
    letter-spacing: var(--btn-tracking, 0.08em);
    text-transform: var(--btn-transform, uppercase);
    border: 1px solid var(--accent);
    border-radius: var(--btn-radius, 0);
    font-weight: var(--btn-weight, 500);
    padding: 10px 20px;
    transition: background 0.15s, color 0.15s;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__write-link:hover {
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__reviews {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__review {
    background: var(--bg-mid);
    border: 1px solid var(--rule);
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__reviewer {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__via {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  [data-section="testimonials"][data-variant="c"] .testi-google__review-quote {
    font-size: 14px;
    color: var(--text);
    opacity: 0.88;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  @media (max-width: 900px) {
    [data-section="testimonials"][data-variant="c"] .testi-google {
      padding: 48px 24px;
    }
    [data-section="testimonials"][data-variant="c"] .testi-google__layout {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    [data-section="testimonials"][data-variant="c"] .testi-google__agg {
      max-width: 360px;
      margin: 0 auto;
      width: 100%;
    }
  }

  /* =====================================================
     Testimonials D — float-cards
     ===================================================== */
  @keyframes testiFloat1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
  @keyframes testiFloat2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }
  @keyframes testiFloat3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  @keyframes starGlow {
    0%, 100% { text-shadow: none; }
    50% { text-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent); }
  }
  [data-section="testimonials"][data-variant="d"] .testi-float {
    background: var(--section-bg);
    padding: 80px 56px;
    text-align: center;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__sub {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 40px;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__card {
    background: var(--bg-mid);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 32px 24px;
    text-align: left;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(1) {
    animation: testiFloat1 6s ease-in-out infinite;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(2) {
    animation: testiFloat2 7s ease-in-out infinite;
    animation-delay: 0.5s;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(3) {
    animation: testiFloat3 5s ease-in-out infinite;
    animation-delay: 1s;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__open-quote {
    font-family: var(--font-display);
    font-size: 48px;
    color: var(--accent-text);
    line-height: 0.5;
    margin-bottom: 12px;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__quote {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 16px;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__rule {
    width: 32px;
    height: 1px;
    background: var(--rule);
    margin-bottom: 12px;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__attribution {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 12px;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__stars span {
    color: var(--accent-text);
    font-size: 16px;
    animation: starGlow 2s ease-in-out infinite;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(1) {
    animation-delay: 0s;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(2) {
    animation-delay: 0.2s;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(3) {
    animation-delay: 0.4s;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(4) {
    animation-delay: 0.6s;
  }
  [data-section="testimonials"][data-variant="d"] .testi-float__stars span:nth-child(5) {
    animation-delay: 0.8s;
  }
  @media (max-width: 768px) {
    [data-section="testimonials"][data-variant="d"] .testi-float__grid {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    [data-section="testimonials"][data-variant="d"] .testi-float {
      padding: 56px 24px;
    }
    [data-section="testimonials"][data-variant="d"] .testi-float__card,
    [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(1),
    [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(2),
    [data-section="testimonials"][data-variant="d"] .testi-float__card:nth-child(3) {
      animation: none;
    }
  }

  /* =====================================================
     Testimonials E — typewriter
     ===================================================== */
  [data-section="testimonials"][data-variant="e"] .testi-type {
    background: var(--section-bg);
    padding: 80px 56px;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__heading {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 24px;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__open-quote {
    font-family: var(--font-display);
    font-size: 80px;
    color: var(--accent-text);
    line-height: 0.5;
    margin-bottom: 16px;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__quote {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.45;
    color: var(--text);
    max-width: 720px;
    margin: 0 auto 24px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 3s ease;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type.is-visible .testi-type__quote {
    clip-path: inset(0 0 0 0);
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__attribution {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 16px;
    opacity: 0;
    transition: opacity 0.6s ease 2.8s;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type.is-visible .testi-type__attribution {
    opacity: 1;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__stars {
    margin-bottom: 12px;
    opacity: 0;
    transition: opacity 0.6s ease 3s;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type.is-visible .testi-type__stars {
    opacity: 1;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__stars span {
    color: var(--accent-text);
    font-size: 22px;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__count {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 12px;
  }
  [data-section="testimonials"][data-variant="e"] .testi-type__link {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-text);
  }
  @media (max-width: 480px) {
    [data-section="testimonials"][data-variant="e"] .testi-type {
      padding: 56px 24px;
    }
    [data-section="testimonials"][data-variant="e"] .testi-type__quote {
      font-size: 20px;
    }
  }

  /* ============================================================
     Journal section — shared chrome
     Assembler lines 3245-3270 + responsive at 3494-3505
     ============================================================ */
  [data-section="blog"] .journal-section {
    padding: 80px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="blog"] .journal-section__footer {
    text-align: center;
    margin-top: 36px;
  }
  [data-section="blog"] .journal-section__more {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 3px;
  }
  [data-section="blog"] .journal-section__more:hover {
    opacity: 0.8;
  }
  [data-section="blog"] .journal-section__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 12px;
    text-align: center;
  }
  [data-section="blog"] .journal-section__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 0.04em;
    margin-bottom: 48px;
    text-align: center;
  }
  @media (max-width: 900px) {
    [data-section="blog"] .journal-section {
      padding: 56px 24px;
    }
  }

  /* ============================================================
     Variant A — journal-2x2-grid
     Assembler lines 3272-3321
     ============================================================ */
  [data-section="blog"][data-variant="a"] .grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__card {
    display: flex;
    flex-direction: column;
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__img-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-mid);
    margin-bottom: 18px;
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__card:hover .grid-2x2__img {
    transform: scale(1.04);
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.3;
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__date {
    letter-spacing: 0.04em;
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__link {
    color: var(--accent-text);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
    transition: opacity 0.15s;
  }
  [data-section="blog"][data-variant="a"] .grid-2x2__link:hover {
    opacity: 0.78;
  }
  @media (max-width: 900px) {
    [data-section="blog"][data-variant="a"] .grid-2x2 {
      grid-template-columns: 1fr;
    }
  }

  /* ============================================================
     Variant B — journal-featured-plus-list
     Assembler lines 3323-3399
     ============================================================ */
  [data-section="blog"][data-variant="b"] .feat-list {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 48px;
  }
  [data-section="blog"][data-variant="b"] .feat-list__img-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-mid);
    margin-bottom: 24px;
  }
  [data-section="blog"][data-variant="b"] .feat-list__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  [data-section="blog"][data-variant="b"] .feat-list__featured:hover .feat-list__img {
    transform: scale(1.03);
  }
  [data-section="blog"][data-variant="b"] .feat-list__feat-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
    line-height: 1.25;
  }
  [data-section="blog"][data-variant="b"] .feat-list__feat-excerpt {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 18px;
    max-width: 52ch;
  }
  [data-section="blog"][data-variant="b"] .feat-list__feat-link {
    font-size: 12px;
    color: var(--accent-text);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: opacity 0.15s;
  }
  [data-section="blog"][data-variant="b"] .feat-list__feat-link:hover {
    opacity: 0.78;
  }
  [data-section="blog"][data-variant="b"] .feat-list__sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 4px;
  }
  [data-section="blog"][data-variant="b"] .feat-list__item {
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }
  /* The second column is opt-in via a MODIFIER the component sets when the
     post actually has a cover -- not `:not(:has(...))`, which is Safari 15.4+
     and would leave an empty 84px column on the safari 12 floor this repo
     pins for the kiosk iPads. No cover, no column. */
  [data-section="blog"][data-variant="b"] .feat-list__item--thumb {
    grid-template-columns: 84px 1fr;
  }
  /* Square box via padding-top, not `aspect-ratio`: that is Safari 15+, and on
     the safari 12 floor this repo pins the box would collapse to zero height
     and the thumbnail would simply not draw. */
  [data-section="blog"][data-variant="b"] .feat-list__item-thumb {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-mid);
  }
  [data-section="blog"][data-variant="b"] .feat-list__item-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  [data-section="blog"][data-variant="b"] .feat-list__item:hover .feat-list__item-thumb-img {
    transform: scale(1.04);
  }
  [data-section="blog"][data-variant="b"] .feat-list__item:first-child {
    padding-top: 0;
  }
  [data-section="blog"][data-variant="b"] .feat-list__item:last-child {
    border-bottom: none;
  }
  [data-section="blog"][data-variant="b"] .feat-list__item-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    line-height: 1.3;
    transition: color 0.15s;
  }
  [data-section="blog"][data-variant="b"] .feat-list__item:hover .feat-list__item-title {
    color: var(--accent-text);
  }
  [data-section="blog"][data-variant="b"] .feat-list__item-date {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  @media (max-width: 900px) {
    [data-section="blog"][data-variant="b"] .feat-list {
      grid-template-columns: 1fr;
      gap: 32px;
    }
  }

  /* ============================================================
     Variant C — journal-horizontal-scroll
     Assembler lines 3401-3489
     ============================================================ */
  [data-section="blog"][data-variant="c"] .hscroll-wrap {
    position: relative;
  }
  [data-section="blog"][data-variant="c"] .hscroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  [data-section="blog"][data-variant="c"] .hscroll::-webkit-scrollbar {
    display: none;
  }
  [data-section="blog"][data-variant="c"] .hscroll__card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }
  [data-section="blog"][data-variant="c"] .hscroll__img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: var(--bg-mid);
    margin-bottom: 14px;
  }
  [data-section="blog"][data-variant="c"] .hscroll__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  [data-section="blog"][data-variant="c"] .hscroll__card:hover .hscroll__img {
    transform: scale(1.04);
  }
  [data-section="blog"][data-variant="c"] .hscroll__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
    line-height: 1.3;
  }
  [data-section="blog"][data-variant="c"] .hscroll__date {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  [data-section="blog"][data-variant="c"] .hscroll__view-all {
    flex: 0 0 280px;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-section="blog"][data-variant="c"] .hscroll__view-all a {
    font-size: 13px;
    color: var(--accent-text);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: 1px solid var(--accent);
    transition: background 0.15s, color 0.15s;
  }
  [data-section="blog"][data-variant="c"] .hscroll__view-all a:hover {
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
  }
  [data-section="blog"][data-variant="c"] .hscroll-wrap::before,
  [data-section="blog"][data-variant="c"] .hscroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 8px;
    width: 64px;
    z-index: 2;
    pointer-events: none;
  }
  [data-section="blog"][data-variant="c"] .hscroll-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg), transparent);
    opacity: 0;
  }
  [data-section="blog"][data-variant="c"] .hscroll-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg), transparent);
  }
  @media (max-width: 900px) {
    [data-section="blog"][data-variant="c"] .hscroll__card {
      flex: 0 0 240px;
    }
  }

  /* ============================================================
     Variant D — journal-hover-tilt
     Assembler lines 6418-6486
     ============================================================ */
  [data-section="blog"][data-variant="d"] .jrnl-tilt {
    background: var(--section-bg);
    padding: 64px 56px;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 32px;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__card {
    display: block;
    color: inherit;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__card:hover {
    transform: perspective(800px) rotateY(-3deg) rotateX(2deg) scale(1.02);
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 14px;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.4s ease, transform 0.6s ease;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__card:hover .jrnl-tilt__img {
    filter: brightness(1.12);
    transform: scale(1.04);
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--muted);
  }
  [data-section="blog"][data-variant="d"] .jrnl-tilt__link {
    color: var(--accent-text);
  }
  @media (max-width: 768px) {
    [data-section="blog"][data-variant="d"] .jrnl-tilt__grid {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    [data-section="blog"][data-variant="d"] .jrnl-tilt {
      padding: 48px 24px;
    }
    [data-section="blog"][data-variant="d"] .jrnl-tilt__card:hover {
      transform: none;
    }
  }

  /* ============================================================
     Variant E — journal-slide-in
     Assembler lines 6488-6581
     Note: .is-visible is applied statically (SSR); no JS observer needed.
     ============================================================ */
  [data-section="blog"][data-variant="e"] .jrnl-slide {
    background: var(--section-bg);
    padding: 64px 56px;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__heading {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 32px;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: start;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__featured {
    display: block;
    color: inherit;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__list {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide.is-visible .jrnl-slide__featured,
  [data-section="blog"][data-variant="e"] .jrnl-slide.is-visible .jrnl-slide__list {
    opacity: 1;
    transform: none;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__feat-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 14px;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__feat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__feat-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__feat-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin-bottom: 12px;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__feat-link {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-text);
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__item {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    color: inherit;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__item:last-child {
    border-bottom: none;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__item-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
  }
  [data-section="blog"][data-variant="e"] .jrnl-slide__item-date {
    font-size: 12px;
    color: var(--muted);
  }
  @media (max-width: 768px) {
    [data-section="blog"][data-variant="e"] .jrnl-slide__grid {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    [data-section="blog"][data-variant="e"] .jrnl-slide {
      padding: 48px 24px;
    }
  }

  /* ==========================================================
     Section 13 — FAQ
     ========================================================== */

  /* --- Rich answer content (all variants) ---
     Answers render through FaqRichAnswer (sanitized Quill / seeded HTML;
     legacy plaintext converts to <p>). [data-faq-rich] marks the answer
     wrapper; these rules style the nested block vocabulary the FAQ
     sanitizer allows (paragraphs, lists, blockquote pull-quotes,
     sub-heads, tables, rules) without disturbing per-variant type. */

  [data-section="faq"] [data-faq-rich] p { margin: 0 0 0.8em; }
  [data-section="faq"] [data-faq-rich] p:last-child { margin-bottom: 0; }
  [data-section="faq"] [data-faq-rich] ul,
  [data-section="faq"] [data-faq-rich] ol { margin: 0 0 0.8em; padding-left: 1.4em; }
  [data-section="faq"] [data-faq-rich] blockquote {
    margin: 0 0 1em;
    padding: 8px 14px;
    border-left: 3px solid var(--accent, currentColor);
    font-style: italic;
    opacity: 0.95;
  }
  [data-section="faq"] [data-faq-rich] blockquote p:last-child { margin-bottom: 0; }
  [data-section="faq"] [data-faq-rich] h3,
  [data-section="faq"] [data-faq-rich] h4 { margin: 1.1em 0 0.4em; font-size: 1.02em; }
  [data-section="faq"] [data-faq-rich] table {
    border-collapse: collapse;
    margin: 0 0 1em;
    width: 100%;
    font-size: 0.95em;
  }
  [data-section="faq"] [data-faq-rich] th,
  [data-section="faq"] [data-faq-rich] td {
    border: 1px solid rgba(128, 128, 128, 0.35);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
  }
  [data-section="faq"] [data-faq-rich] hr {
    border: 0;
    border-top: 1px solid rgba(128, 128, 128, 0.35);
    margin: 1.1em 0;
  }

  /* --- Variant A: faq-hairline-list ---
     Stacked Q&A pairs separated by hairline rules. All items visible. */

  [data-section="faq"][data-variant="a"] .faq-hairline {
    max-width: 880px;
    margin: 0 auto;
    padding: 64px 56px 72px;
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
    text-align: center;
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 48px;
    text-align: center;
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__item {
    padding: 28px 0;
    border-top: 1px solid var(--rule);
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__item:last-of-type {
    border-bottom: 1px solid var(--rule);
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__question {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.3;
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__answer {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    max-width: 720px;
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__more {
    display: inline-block;
    margin-top: 36px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--accent-text);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color 0.15s;
  }
  [data-section="faq"][data-variant="a"] .faq-hairline__more:hover {
    border-color: var(--accent);
  }
  @media (max-width: 900px) {
    [data-section="faq"][data-variant="a"] .faq-hairline {
      padding-left: 24px;
      padding-right: 24px;
    }
    [data-section="faq"][data-variant="a"] .faq-hairline__headline {
      font-size: 28px;
    }
    [data-section="faq"][data-variant="a"] .faq-hairline__question {
      font-size: 18px;
    }
  }

  /* --- Variant B: faq-accordion-disclosure ---
     Native <details>/<summary> accordion. One-to-one with the live
     darksidetattoo.com FAQ (GHL faq widget colors, extracted
     2026-07-11): closed rows #2e2e2e with #d9d9d9 text, open row
     title #787879, open body #636363, white-shadowed heading,
     #636363 white-bordered bottom button. */

  [data-section="faq"][data-variant="b"] .faq-accordion {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 56px 64px;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion__eyebrow {
    font-family: var(--font-body, inherit);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted, #d9d9d9);
    line-height: 2;
    margin-bottom: 4px;
    text-align: center;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion__headline {
    font-family: var(--font-heading, inherit);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -1px;
    line-height: 1.2;
    color: var(--text, #ffffff);
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.55);
    margin-bottom: 32px;
    text-align: center;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion details {
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-body, inherit);
    font-size: 16px;
    font-weight: 600;
    color: #d9d9d9;
    background: #2e2e2e;
    letter-spacing: 0.02em;
    transition: background 0.15s;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion summary::-webkit-details-marker {
    display: none;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion summary::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 24px;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion details[open] summary::after {
    transform: rotate(-135deg);
  }
  [data-section="faq"][data-variant="b"] .faq-accordion details[open] summary {
    background: #767677;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion summary:hover {
    background: #3a3a3a;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion details[open] summary:hover {
    background: #767677;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion__body {
    padding: 16px 18px;
    font-size: 14px;
    color: #d9d9d9;
    background: #5f5f5f;
    line-height: 1.75;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion__more {
    /* Live: #636363 fill, 1px solid white border, 18px/500 white,
       padding 16px 32px, centered. */
    display: block;
    width: fit-content;
    margin: 36px auto 0;
    padding: 16px 32px;
    font-family: var(--font-body, inherit);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    color: #ffffff;
    background: #5f5f5f;
    border: 1px solid #ffffff;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.15s;
  }
  [data-section="faq"][data-variant="b"] .faq-accordion__more:hover {
    background: #767677;
  }
  @media (max-width: 900px) {
    [data-section="faq"][data-variant="b"] .faq-accordion {
      padding-left: 24px;
      padding-right: 24px;
    }
    [data-section="faq"][data-variant="b"] .faq-accordion__headline {
      font-size: 28px;
    }
  }

  /* --- Variant C: faq-two-column ---
     Question links left col, labeled answers right col, 1px vertical rule divider.
     Collapses to single column at 900px. */

  [data-section="faq"][data-variant="c"] .faq-twocol {
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 56px 72px;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 14px;
    text-align: center;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 48px;
    text-align: center;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__grid {
    display: grid;
    grid-template-columns: 1fr 1px 1.6fr;
    gap: 0 48px;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__questions {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__q-link {
    display: block;
    padding: 16px 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    line-height: 1.45;
    border-bottom: 1px solid var(--rule);
    transition: color 0.15s;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__q-link:hover {
    color: var(--accent-text);
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__divider {
    background: var(--rule);
    width: 1px;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__answers {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__a-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__a-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--accent-text);
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__a-text {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__more {
    display: inline-block;
    margin-top: 36px;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--accent-text);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color 0.15s;
  }
  [data-section="faq"][data-variant="c"] .faq-twocol__more:hover {
    border-color: var(--accent);
  }
  @media (max-width: 900px) {
    [data-section="faq"][data-variant="c"] .faq-twocol {
      padding-left: 24px;
      padding-right: 24px;
    }
    [data-section="faq"][data-variant="c"] .faq-twocol__headline {
      font-size: 28px;
    }
    [data-section="faq"][data-variant="c"] .faq-twocol__grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    [data-section="faq"][data-variant="c"] .faq-twocol__divider {
      display: none;
    }
    [data-section="faq"][data-variant="c"] .faq-twocol__questions {
      margin-bottom: 32px;
      border-bottom: 1px solid var(--rule);
    }
  }

  /* --- Variant D: faq-glow-accordion ---
     <details> accordion; open item gets left accent border + gold glow shadow.
     Summary indicator is CSS '+' rotating 45deg to form '×' when open. */

  [data-section="faq"][data-variant="d"] .faq-glow {
    background: var(--section-bg);
    padding: 64px 56px;
    max-width: 820px;
    margin: 0 auto;
  }
  [data-section="faq"][data-variant="d"] .faq-glow__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  [data-section="faq"][data-variant="d"] .faq-glow__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 32px;
  }
  [data-section="faq"][data-variant="d"] .faq-glow details {
    border-bottom: 1px solid var(--rule);
    padding: 16px 0;
    border-left: 3px solid transparent;
    transition: padding-left 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
  }
  [data-section="faq"][data-variant="d"] .faq-glow details[open] {
    border-left: 3px solid var(--accent);
    box-shadow: -4px 0 16px rgba(220, 185, 106, 0.15);
    padding-left: 20px;
  }
  [data-section="faq"][data-variant="d"] .faq-glow summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 8px;
  }
  [data-section="faq"][data-variant="d"] .faq-glow summary::-webkit-details-marker {
    display: none;
  }
  [data-section="faq"][data-variant="d"] .faq-glow summary::after {
    content: '+';
    color: var(--accent-text);
    font-size: 22px;
    font-weight: 300;
    transition: transform 0.3s ease;
    display: inline-block;
  }
  [data-section="faq"][data-variant="d"] .faq-glow details[open] summary::after {
    transform: rotate(45deg);
  }
  [data-section="faq"][data-variant="d"] .faq-glow__body {
    padding-top: 12px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
  }
  [data-section="faq"][data-variant="d"] .faq-glow__more {
    display: inline-block;
    margin-top: 24px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-text);
  }
  @media (max-width: 480px) {
    [data-section="faq"][data-variant="d"] .faq-glow {
      padding: 48px 24px;
    }
  }

  /* --- Variant E: faq-stagger-reveal ---
     Stacked Q&A. Items animate in via opacity/translateY on .is-visible.
     SSR renders with .is-visible applied statically; stagger delays preserved
     for any future client-side IntersectionObserver enhancement. */

  [data-section="faq"][data-variant="e"] .faq-stagger {
    background: var(--section-bg);
    padding: 64px 56px;
    max-width: 820px;
    margin: 0 auto;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 32px;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger__item {
    padding: 20px 0;
    border-bottom: 1px solid var(--rule);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item {
    opacity: 1;
    transform: none;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(3) {
    transition-delay: 0s;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(4) {
    transition-delay: 0.12s;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(5) {
    transition-delay: 0.24s;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(6) {
    transition-delay: 0.36s;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger.is-visible .faq-stagger__item:nth-child(7) {
    transition-delay: 0.48s;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger__question {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 8px;
  }
  [data-section="faq"][data-variant="e"] .faq-stagger__answer {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
  }
  [data-section="faq"][data-variant="e"] .faq-stagger__more {
    display: inline-block;
    margin-top: 24px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-text);
  }
  @media (max-width: 480px) {
    [data-section="faq"][data-variant="e"] .faq-stagger {
      padding: 48px 24px;
    }
  }

  /* =====================================================
     Location variants A–E
     ===================================================== */

  /* --- Variant A: location-two-column --- */
  [data-section="location"][data-variant="a"] .loc-two-col {
    padding: 160px 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  /* Nothing for the right column -> one column, no ~500px void beside the
     address. See components/themes/sections/Location/LocationA.tsx. */
  [data-section="location"][data-variant="a"] .loc-two-col--single {
    grid-template-columns: 1fr;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 18px;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 36px;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 48px;
    line-height: 1.15;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__block {
    margin-bottom: 32px;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__block:last-child {
    margin-bottom: 0;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__block-label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 10px;
    font-weight: 500;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__block p,
  [data-section="location"][data-variant="a"] .loc-two-col__block address {
    font-style: normal;
    font-size: 15px;
    color: var(--text);
    line-height: 1.7;
    opacity: 0.88;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__block a {
    color: var(--text);
    opacity: 0.88;
    transition: color 0.15s, opacity 0.15s;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__block a:hover {
    color: var(--accent-text);
    opacity: 1;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__right-label {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 22px;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__directions {
    font-size: 15px;
    color: var(--text);
    opacity: 0.82;
    line-height: 1.75;
    margin-bottom: 24px;
  }
  [data-section="location"][data-variant="a"] .loc-two-col__walkins {
    font-size: 14px;
    font-style: italic;
    color: var(--accent-text);
    line-height: 1.65;
  }
  @media (max-width: 900px) {
    [data-section="location"][data-variant="a"] .loc-two-col {
      grid-template-columns: 1fr;
      gap: 48px;
      padding: 80px 24px;
    }
  }
  @media (max-width: 480px) {
    [data-section="location"][data-variant="a"] .loc-two-col {
      padding: 64px 20px;
      gap: 36px;
    }
    [data-section="location"][data-variant="a"] .loc-two-col__headline {
      font-size: 28px;
      margin-bottom: 32px;
    }
  }

  /* --- Variant B: location-map-dominant --- */
  [data-section="location"][data-variant="b"] .loc-map-dom__map {
    width: 100%;
    height: 320px;
    background: var(--bg-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__map-text {
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.08em;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__strip {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
    align-items: center;
    padding: 28px 56px;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__divider {
    width: 1px;
    height: 40px;
    background: var(--rule);
    justify-self: center;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__item {
    padding: 0 24px;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__item:first-child {
    padding-left: 0;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__item:last-child {
    padding-right: 0;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__item-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 6px;
    font-weight: 500;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__item-value {
    font-size: 13px;
    color: var(--text);
    opacity: 0.88;
    line-height: 1.55;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__item-value a {
    color: var(--text);
    opacity: 0.88;
    transition: color 0.15s, opacity 0.15s;
  }
  [data-section="location"][data-variant="b"] .loc-map-dom__item-value a:hover {
    color: var(--accent-text);
    opacity: 1;
  }
  @media (max-width: 900px) {
    [data-section="location"][data-variant="b"] .loc-map-dom__strip {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      padding: 24px;
    }
    [data-section="location"][data-variant="b"] .loc-map-dom__divider {
      display: none;
    }
    [data-section="location"][data-variant="b"] .loc-map-dom__item {
      padding: 0;
    }
  }
  @media (max-width: 480px) {
    [data-section="location"][data-variant="b"] .loc-map-dom__map {
      height: 240px;
    }
    [data-section="location"][data-variant="b"] .loc-map-dom__strip {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 20px;
    }
  }

  /* --- Variant C: location-card-centered --- */
  [data-section="location"][data-variant="c"] .loc-card {
    background: var(--bg-mid);
    padding: 100px 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  [data-section="location"][data-variant="c"] .loc-card__card {
    max-width: 640px;
    width: 100%;
    background: var(--section-bg);
    border-top: 2px solid var(--accent);
    padding: 56px 48px;
    text-align: center;
  }
  [data-section="location"][data-variant="c"] .loc-card__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0.06em;
    color: var(--text);
    margin-bottom: 32px;
  }
  [data-section="location"][data-variant="c"] .loc-card__row {
    margin-bottom: 24px;
  }
  [data-section="location"][data-variant="c"] .loc-card__row:last-child {
    margin-bottom: 0;
  }
  [data-section="location"][data-variant="c"] .loc-card__label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 8px;
    font-weight: 500;
  }
  [data-section="location"][data-variant="c"] .loc-card__value {
    font-size: 15px;
    color: var(--text);
    opacity: 0.88;
    line-height: 1.65;
  }
  [data-section="location"][data-variant="c"] .loc-card__value a {
    color: var(--text);
    opacity: 0.88;
    transition: color 0.15s, opacity 0.15s;
  }
  [data-section="location"][data-variant="c"] .loc-card__value a:hover {
    color: var(--accent-text);
    opacity: 1;
  }
  [data-section="location"][data-variant="c"] .loc-card__rule {
    width: 48px;
    height: 1px;
    background: var(--rule);
    margin: 28px auto;
  }
  [data-section="location"][data-variant="c"] .loc-card__directions {
    font-size: 14px;
    color: var(--text);
    opacity: 0.72;
    line-height: 1.7;
    margin-bottom: 20px;
  }
  [data-section="location"][data-variant="c"] .loc-card__walkins {
    font-size: 13px;
    font-style: italic;
    color: var(--accent-text);
    line-height: 1.6;
  }
  [data-section="location"][data-variant="c"] .loc-card__map {
    width: 100%;
    height: 240px;
    background: var(--section-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
    border-top: 1px solid var(--rule);
  }
  [data-section="location"][data-variant="c"] .loc-card__map-text {
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.08em;
  }
  @media (max-width: 900px) {
    [data-section="location"][data-variant="c"] .loc-card {
      padding: 56px 16px 0;
    }
    [data-section="location"][data-variant="c"] .loc-card__card {
      padding: 40px 24px;
    }
  }
  @media (max-width: 480px) {
    [data-section="location"][data-variant="c"] .loc-card {
      padding: 64px 12px 0;
    }
    [data-section="location"][data-variant="c"] .loc-card__card {
      padding: 32px 20px;
    }
    [data-section="location"][data-variant="c"] .loc-card__headline {
      font-size: 22px;
    }
  }

  /* --- Variant D: location-map-glow --- */
  @keyframes mapGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(220, 185, 106, 0); }
    50% { box-shadow: 0 0 20px rgba(220, 185, 106, 0.3); }
  }
  [data-section="location"][data-variant="d"] .loc-glow {
    background: var(--section-bg);
    padding: 0;
  }
  [data-section="location"][data-variant="d"] .loc-glow__map {
    width: 100%;
    height: 360px;
    background: var(--bg-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rule);
    animation: mapGlow 3s ease-in-out infinite;
  }
  [data-section="location"][data-variant="d"] .loc-glow__map-text {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }
  [data-section="location"][data-variant="d"] .loc-glow__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 24px 56px;
    gap: 24px;
    border-top: 1px solid var(--rule);
  }
  [data-section="location"][data-variant="d"] .loc-glow__item-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 6px;
  }
  [data-section="location"][data-variant="d"] .loc-glow__item-value {
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
  }
  [data-section="location"][data-variant="d"] .loc-glow__item-value a {
    color: var(--text);
  }
  @media (max-width: 768px) {
    [data-section="location"][data-variant="d"] .loc-glow__strip {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 480px) {
    [data-section="location"][data-variant="d"] .loc-glow__strip {
      grid-template-columns: 1fr;
      padding: 24px;
    }
    [data-section="location"][data-variant="d"] .loc-glow__map {
      height: 240px;
      animation: none;
    }
  }

  /* --- Variant E: location-slide-columns --- */
  [data-section="location"][data-variant="e"] .loc-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    background: var(--section-bg);
    padding: 80px 56px;
  }
  [data-section="location"][data-variant="e"] .loc-slide__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 12px;
  }
  [data-section="location"][data-variant="e"] .loc-slide__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 24px;
  }
  [data-section="location"][data-variant="e"] .loc-slide__block {
    margin-bottom: 20px;
  }
  [data-section="location"][data-variant="e"] .loc-slide__block-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 6px;
  }
  [data-section="location"][data-variant="e"] .loc-slide__block address,
  [data-section="location"][data-variant="e"] .loc-slide__block p {
    font-style: normal;
    font-size: 14px;
    line-height: 1.6;
  }
  [data-section="location"][data-variant="e"] .loc-slide__right-label {
    font-family: var(--font-display);
    font-size: 18px;
    margin-bottom: 12px;
  }
  [data-section="location"][data-variant="e"] .loc-slide__directions {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted);
    margin-bottom: 14px;
  }
  [data-section="location"][data-variant="e"] .loc-slide__walkins {
    font-size: 14px;
    color: var(--accent-text);
  }
  @media (max-width: 768px) {
    [data-section="location"][data-variant="e"] .loc-slide {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 480px) {
    [data-section="location"][data-variant="e"] .loc-slide {
      padding: 48px 24px;
      gap: 32px;
    }
  }

  /* =====================================================
     Section: consult
     Variants A–C DELIBERATELY share the .consult-section chrome — they
     differ in FORM BEHAVIOUR (A caret-collapse, B long intake, C simple
     contact without qualifying questions), not section chrome, so one
     shared block is correct. Variants D–F have their own root classes.
     A per-variant CSS presence sweep must treat A–C as covered
     (2026-08-06 audit F-4/F-6).
     ===================================================== */

  /* --- Shared base: consult-section (variants A, B, C) --- */
  [data-section="consult"] .consult-section {
    padding: 160px 56px;
    display: flex;
    justify-content: center;
    background: var(--section-bg);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="consult"] .consult-section__inner {
    width: 100%;
    max-width: 720px;
  }
  [data-section="consult"] .consult-section__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 18px;
  }
  [data-section="consult"] .consult-section__headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: 42px;
    letter-spacing: 0.02em;
    color: var(--text);
    margin-bottom: 14px;
    line-height: 1.15;
  }
  [data-section="consult"] .consult-section__intro {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 48px;
    max-width: 54ch;
  }
  [data-section="consult"] .consult-section__warning {
    font-size: 14px;
    color: var(--text);
    opacity: 0.82;
    line-height: 1.65;
    margin-bottom: 40px;
    padding: 20px 24px;
    border-left: 2px solid var(--accent);
    background: rgba(220, 185, 106, 0.04);
  }

  /* --- Shared form field styles (variants A, B, C) --- */
  [data-section="consult"] .form-field {
    margin-bottom: 32px;
  }
  [data-section="consult"] .form-field label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  [data-section="consult"] .form-field label .required {
    color: var(--accent-text);
    margin-left: 2px;
  }
  [data-section="consult"] .form-field input[type="text"],
  [data-section="consult"] .form-field input[type="email"],
  [data-section="consult"] .form-field input[type="tel"],
  [data-section="consult"] .form-field textarea,
  [data-section="consult"] .form-field select {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    padding: 10px 0;
    outline: none;
    transition: border-color 0.2s;
  }
  [data-section="consult"] .form-field input:focus,
  [data-section="consult"] .form-field textarea:focus,
  [data-section="consult"] .form-field select:focus {
    border-bottom-color: var(--accent);
  }
  [data-section="consult"] .form-field input::placeholder,
  [data-section="consult"] .form-field textarea::placeholder {
    color: var(--muted);
  }
  [data-section="consult"] .form-field textarea {
    min-height: 100px;
    resize: vertical;
  }
  [data-section="consult"] .form-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238a857a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    padding-right: 20px;
    cursor: pointer;
  }
  [data-section="consult"] .form-field select option {
    background: var(--bg-mid);
    color: var(--text);
  }

  /* --- Two-column row (variants A, B, C) --- */
  [data-section="consult"] .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* --- Submit button (variants A, B, C) --- */
  [data-section="consult"] .form-submit {
    display: inline-block;
    padding: 16px 36px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 12px;
    font-weight: var(--btn-weight, 600);
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    border: none;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    margin-top: 8px;
  }
  [data-section="consult"] .form-submit:hover {
    opacity: 0.88;
  }

  /* --- required span (all variants) --- */
  [data-section="consult"] .required {
    color: var(--accent-text);
  }

  /* --- submit shell: inline success / error (all variants) --- */
  [data-section="consult"] .consult-success {
    text-align: center;
    padding: 32px 20px;
  }
  /* Focused programmatically after submit (useSuccessReveal) so the keyboard
     and screen readers land on the confirmation. The visitor did not tab here,
     so suppress the ring for that case only — :focus-visible still shows. */
  [data-section="consult"] .consult-success:focus:not(:focus-visible) {
    outline: none;
  }
  [data-section="consult"] .consult-success__headline {
    font-family: var(--font-display);
    color: var(--accent-text);
    font-size: 1.5rem;
    margin: 0 0 8px;
  }
  [data-section="consult"] .consult-success__body {
    font-family: var(--font-body);
    color: var(--muted);
    margin: 0;
  }
  [data-section="consult"] .consult-error {
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
  }

  /* --- config-driven field extras (checkbox rows, hints, SLA, qualifying) --- */
  [data-section="consult"] .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
  }
  [data-section="consult"] .form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent);
  }
  [data-section="consult"] .form-field__hint {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--muted);
  }
  /* Operator-placed section heading (FieldType 'heading'). 🚨 font-size is
     LOAD-BEARING: Tailwind preflight ships `h1..h6 { font-size: inherit }`, so
     an <h2> that sets none renders at body size — the defect family
     docs/RICH-TEXT-CONTAINER-SWEEP.md has caught four times. Reads through the
     theme's own tokens so it inherits each tenant's type and colour rather
     than introducing a size of its own. */
  [data-section="consult"] .consult-section-heading {
    margin: 1.5rem 0 0.25rem;
    font-family: var(--font-heading, inherit);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    /* Falls back to `inherit` rather than to the --fg token: that token is
       unmapped on three custom templates' .tn-variant-slot palettes, so it
       would be UNDEFINED there and this heading would take the initial colour
       with nothing reporting it (check-variant-slot-tokens caught exactly
       that). Inheriting the form's own text colour is the better answer
       anyway — a heading is emphasis, not a new colour. */
    color: var(--heading, inherit);
  }
  [data-section="consult"] .consult-section-heading:first-child {
    margin-top: 0;
  }
  [data-section="consult"] .form-qualifying {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
  }
  [data-section="consult"] .form-sla {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--muted) 75%, var(--text));
    font-family: var(--font-body);
  }
  [data-section="consult"] .form-fineprint {
    margin: 6px 0 0;
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--muted) 75%, var(--text));
    font-family: var(--font-body);
    line-height: 1.5;
  }

  /* -------------------------------------------------------
     Variant A: caret-expand — style chips + details toggle
     ------------------------------------------------------- */
  /* Style chips use a <span> label since the chip <label>s wrap each checkbox */
  [data-section="consult"] .form-field__label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
  }
  [data-section="consult"] .style-chip-label {
    display: contents;
  }
  [data-section="consult"] .style-chip__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  [data-section="consult"] .style-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 4px;
  }
  [data-section="consult"] .style-chip {
    padding: 8px 18px;
    border: 1px solid var(--rule);
    border-radius: 100px;
    font-size: 13px;
    color: var(--text);
    opacity: 0.78;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, opacity 0.15s, background 0.15s;
    user-select: none;
  }
  [data-section="consult"] .style-chip:hover {
    border-color: var(--accent);
    color: var(--accent-text);
    opacity: 1;
  }
  [data-section="consult"] .style-chip__input:checked + .style-chip {
    border-color: var(--accent);
    background: rgba(220, 185, 106, 0.12);
    color: var(--accent-text);
    opacity: 1;
  }
  /* Keyboard focus ring — the chip input itself is visually hidden, so
     without this a keyboard user tabs through the chips blind. */
  [data-section="consult"] .style-chip__input:focus-visible + .style-chip {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    opacity: 1;
  }
  [data-section="consult"] .form-detail {
    margin-top: 16px;
    margin-bottom: 40px;
  }
  [data-section="consult"] .form-detail summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    user-select: none;
  }
  [data-section="consult"] .form-detail summary::-webkit-details-marker {
    display: none;
  }
  [data-section="consult"] .form-detail summary::marker {
    display: none;
    content: "";
  }
  [data-section="consult"] .form-detail__caret {
    font-size: 14px;
    color: var(--accent-text);
    transition: transform 0.2s;
    display: inline-block;
    width: 14px;
  }
  [data-section="consult"] .form-detail[open] .form-detail__caret {
    transform: rotate(90deg);
  }
  [data-section="consult"] .form-detail__label {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--text);
  }
  [data-section="consult"] .form-detail__hint {
    font-size: 12px;
    color: var(--muted);
    margin-left: auto;
  }
  [data-section="consult"] .form-detail__body {
    padding-top: 32px;
  }

  /* --- Reference-photo upload (all variants) --- */
  [data-section="consult"] .consult-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
  }
  [data-section="consult"] .consult-upload__thumb {
    position: relative;
    width: 84px;
    height: 84px;
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
  }
  [data-section="consult"] .consult-upload__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  [data-section="consult"] .consult-upload__remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
  }
  [data-section="consult"] .consult-upload__add {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    border: 1px dashed var(--rule);
    border-radius: 6px;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
  }
  [data-section="consult"] .consult-upload__add:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }
  [data-section="consult"] .consult-upload__add input[type="file"] {
    display: none;
  }
  [data-section="consult"] .consult-upload__error {
    margin-top: 8px;
    font-size: 12px;
    color: var(--accent-text);
  }

  /* --- Multi-step layout (Website Builder "Multi-step" option) --- */
  [data-section="consult"] .tn-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  [data-section="consult"] .tn-steps__nav {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  [data-section="consult"] .tn-steps__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
  }
  [data-section="consult"] .tn-steps__nav-item--active,
  [data-section="consult"] .tn-steps__nav-item--done {
    opacity: 1;
  }
  [data-section="consult"] .tn-steps__nav-item--active { color: var(--text); }
  [data-section="consult"] .tn-steps__nav-item--done { color: var(--accent-text); }
  [data-section="consult"] .tn-steps__nav-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--rule);
    font-size: 11px;
    font-weight: 700;
  }
  [data-section="consult"] .tn-steps__nav-item--active .tn-steps__nav-num {
    border-color: var(--accent);
    color: var(--accent-text);
  }
  [data-section="consult"] .tn-steps__nav-item--done .tn-steps__nav-num {
    border-color: var(--accent);
    background: rgba(220, 185, 106, 0.12);
    color: var(--accent-text);
  }
  [data-section="consult"] .tn-steps__panel[hidden] { display: none; }
  [data-section="consult"] .tn-steps__footer {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  [data-section="consult"] .tn-steps__next {
    padding: 14px 32px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 12px;
    font-weight: var(--btn-weight, 600);
    letter-spacing: var(--btn-tracking, 0.18em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  [data-section="consult"] .tn-steps__next:hover { opacity: 0.88; }
  [data-section="consult"] .tn-steps__back {
    padding: 14px 20px;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    border: 1px solid var(--rule);
    border-radius: var(--btn-radius, 0);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  [data-section="consult"] .tn-steps__back:hover {
    color: var(--text);
    border-color: var(--accent);
  }
  /* The VARIANT owns the Submit button (rendered after the stepper inside
     the shell form) — hide it until the visitor reaches the last panel. */
  [data-section="consult"] .tn-steps[data-on-last="false"] ~ .form-submit {
    display: none;
  }

  /* -------------------------------------------------------
     Variants A, B, C responsive
     ------------------------------------------------------- */
  @media (max-width: 900px) {
    [data-section="consult"] .consult-section {
      padding: 96px 24px;
    }
    [data-section="consult"] .consult-section__headline {
      font-size: 32px;
    }
    [data-section="consult"] .form-row {
      grid-template-columns: 1fr;
      gap: 0;
    }
    [data-section="consult"] .style-chips {
      gap: 8px;
    }
    [data-section="consult"] .style-chip {
      padding: 7px 14px;
      font-size: 12px;
    }
  }

  /* -------------------------------------------------------
     Variant D: glass-card
     ------------------------------------------------------- */
  [data-section="consult"][data-variant="d"] .consult-glass {
    background: var(--section-bg);
    padding: 80px 56px;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__inner {
    max-width: 720px;
    margin: 0 auto;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
    text-align: center;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__intro {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 28px;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 48px;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__card .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__card .form-field {
    margin-bottom: 16px;
  }
  /* :not(.form-check):not(.style-chip-label) — the blanket label rule
     used to flatten checkbox rows (.form-check is a flex row wrapping the
     box + its text) and up-case the 18+ legal copy at 11px. Same idea on
     the input rules below: a checkbox must not get width:100% text-input
     chrome, and .style-chip__input must stay collapsed (it is visually
     hidden; a full-width invisible box intercepts chip clicks). */
  [data-section="consult"][data-variant="d"] .consult-glass__card label:not(.form-check):not(.style-chip-label) {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    margin-bottom: 6px;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__card input:not([type="checkbox"]),
  [data-section="consult"][data-variant="d"] .consult-glass__card textarea,
  [data-section="consult"][data-variant="d"] .consult-glass__card select {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__card input:not([type="checkbox"]):focus,
  [data-section="consult"][data-variant="d"] .consult-glass__card textarea:focus,
  [data-section="consult"][data-variant="d"] .consult-glass__card select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(220, 185, 106, 0.1);
  }
  [data-section="consult"][data-variant="d"] .consult-glass__card textarea {
    min-height: 100px;
    resize: vertical;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__submit {
    width: 100%;
    padding: 14px 28px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
  }
  [data-section="consult"][data-variant="d"] .consult-glass__submit:hover {
    box-shadow: 0 0 24px rgba(220, 185, 106, 0.5);
    transform: translateY(-2px);
  }
  @media (max-width: 480px) {
    [data-section="consult"][data-variant="d"] .consult-glass {
      padding: 48px 16px;
    }
    [data-section="consult"][data-variant="d"] .consult-glass__card {
      padding: 28px 20px;
      border-radius: 12px;
    }
    [data-section="consult"][data-variant="d"] .consult-glass__card .form-row {
      grid-template-columns: 1fr;
    }
  }

  /* -------------------------------------------------------
     Variant E: field-focus-glow (floating label)
     ------------------------------------------------------- */
  [data-section="consult"][data-variant="e"] .consult-focus {
    background: var(--section-bg);
    padding: 80px 56px;
  }
  [data-section="consult"][data-variant="e"] .consult-focus__inner {
    max-width: 720px;
    margin: 0 auto;
  }
  [data-section="consult"][data-variant="e"] .consult-focus__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-text);
    margin-bottom: 8px;
  }
  [data-section="consult"][data-variant="e"] .consult-focus__headline {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 24px;
  }
  [data-section="consult"][data-variant="e"] .consult-focus__warning {
    background: color-mix(in srgb, var(--accent, #dcb96a) 6%, transparent);
    border-left: 3px solid var(--accent);
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 28px;
  }
  [data-section="consult"][data-variant="e"] .consult-focus .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 4px;
  }
  [data-section="consult"][data-variant="e"] .consult-focus .form-field {
    position: relative;
    margin-bottom: 24px;
    padding-top: 14px;
  }
  [data-section="consult"][data-variant="e"] .consult-focus .form-field label {
    position: absolute;
    top: 22px;
    left: 0;
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    margin-bottom: 0;
    transition: top 0.25s ease, font-size 0.25s ease, color 0.25s ease,
      letter-spacing 0.25s ease;
  }
  /* Raised state. Beyond :focus-within, the label must ALSO stay raised
     when the field shows content with no focus (operator screenshot
     2026-07-21, labels overlapping "Select…" / typed text):
       - select + label   — a <select> always displays its option text, so
         its floating label can never sit in the field;
       - :not(:placeholder-shown) — inputs/textareas render placeholder=" "
         in floating mode, so a filled control raises its label on blur. */
  [data-section="consult"][data-variant="e"] .consult-focus .form-field:focus-within label,
  [data-section="consult"][data-variant="e"] .consult-focus .form-field.is-filled label,
  [data-section="consult"][data-variant="e"] .consult-focus .form-field select + label,
  [data-section="consult"][data-variant="e"] .consult-focus .form-field input:not(:placeholder-shown) + label,
  [data-section="consult"][data-variant="e"] .consult-focus .form-field textarea:not(:placeholder-shown) + label {
    top: 0;
    font-size: 10px;
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  /* Checkboxes excluded for the same reason as variant D above. */
  [data-section="consult"][data-variant="e"] .consult-focus input:not([type="checkbox"]),
  [data-section="consult"][data-variant="e"] .consult-focus textarea,
  [data-section="consult"][data-variant="e"] .consult-focus select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 8px 0;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-bottom-color 0.3s ease, box-shadow 0.3s ease;
  }
  [data-section="consult"][data-variant="e"] .consult-focus input:not([type="checkbox"]):focus,
  [data-section="consult"][data-variant="e"] .consult-focus textarea:focus,
  [data-section="consult"][data-variant="e"] .consult-focus select:focus {
    outline: none;
    border-bottom-color: var(--accent);
    box-shadow: 0 4px 12px rgba(220, 185, 106, 0.15);
  }
  [data-section="consult"][data-variant="e"] .consult-focus textarea {
    min-height: 90px;
    resize: vertical;
  }
  [data-section="consult"][data-variant="e"] .consult-focus__submit {
    margin-top: 16px;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }
  [data-section="consult"][data-variant="e"] .consult-focus__submit:hover {
    box-shadow: 0 0 20px rgba(220, 185, 106, 0.4);
  }
  @media (max-width: 480px) {
    [data-section="consult"][data-variant="e"] .consult-focus {
      padding: 48px 24px;
    }
    [data-section="consult"][data-variant="e"] .consult-focus .form-row {
      grid-template-columns: 1fr;
      gap: 0;
    }
  }

  /* =====================================================================
     Section 16 — Footer
     ===================================================================== */

  /* --- Variant A: footer-minimal-3col --- */
  /* The site's own links in the footer (ThemeFooterLinks) — shared by every
     footer variant, so there is ONE definition rather than six.

     Every colour is a BARE token with no fallback, which is deliberate
     twice over. These render on 18 themes and nine are light — that is how
     app/gallery/image-detail.tsx came to serve near-white text on cream
     (1.10:1, fixed 2026-09-22). And a fallback here would have to restate a
     token's value, which check-css-colors rejects by design: it caught
     `var(--muted, #8a857a)` on this very block and named it as darkside's
     own --muted. Every theme in theme-tokens.generated.ts defines --muted,
     --rule and --accent-text, so there is nothing to fall back to.

     No `gap` fallback needed for the pinned `safari 12` — flex gap landed in
     Safari 14.1 — so the row uses margins, which every target supports. */
  [data-section="footer"] .footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--rule);
    width: 100%;
  }
  [data-section="footer"] .footer-links__link {
    color: var(--muted);
    text-decoration: none;
    font-family: var(--font-body, inherit);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* 44px tap target on a phone without growing the printed row: the text
       stays 12px and the BOX grows, with the vertical margin pulled back. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -10px 14px;
    transition: color 0.14s ease;
  }
  [data-section="footer"] .footer-links__link:hover,
  [data-section="footer"] .footer-links__link:focus-visible {
    color: var(--accent-text);
  }

  [data-section="footer"][data-variant="a"] .footer-minimal {
    border-top: 1px solid var(--rule);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
  }
  /* The studio's own mark. Height-capped and width:auto so a wide wordmark
     and a square badge both sit on the same baseline as the nav's links.
     🚨 A logo whose ink matches the ground it sits on is invisible, and no
     CSS here can know that — the fix is a light asset in the Brand tab, not a
     filter that would mangle a coloured mark. */
  [data-section="footer"][data-variant="a"] .footer-minimal__logo {
    display: block;
    height: var(--footer-logo-height, 40px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__domain {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__address {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.65;
    margin-bottom: 12px;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__hours {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.7;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__hours span {
    display: block;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__appt {
    font-size: 11px;
    font-style: italic;
    color: var(--muted);
    margin-top: 8px;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__attr {
    text-align: right;
  }
  [data-section="footer"][data-variant="a"] .footer-minimal__attr-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.02em;
  }
  @media (max-width: 768px) {
    [data-section="footer"][data-variant="a"] .footer-minimal {
      grid-template-columns: 1fr;
      padding: 40px 24px;
      gap: 28px;
    }
    [data-section="footer"][data-variant="a"] .footer-minimal__attr {
      text-align: left;
    }
  }

  /* --- Variant B: footer-dense-link-farm --- */
  [data-section="footer"][data-variant="b"] .footer-dense {
    background: var(--bg-mid);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
    gap: 40px;
    padding: 64px 56px 48px;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__heading {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 20px;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 14px;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__text {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__text a {
    color: var(--muted);
    transition: color 0.15s;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__text a:hover {
    color: var(--accent-text);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__link-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__link-list a {
    font-size: 13px;
    color: var(--muted);
    transition: color 0.15s;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__link-list a:hover {
    color: var(--accent-text);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__social-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    font-size: 14px;
    color: var(--muted);
    transition: color 0.15s, border-color 0.15s;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__social-link:hover {
    color: var(--accent-text);
    border-color: var(--accent);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__newsletter-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 8px;
    display: block;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__newsletter-row {
    display: flex;
    gap: 0;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__newsletter-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-right: 0;
    color: var(--text);
    font-size: 13px;
    outline: none;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__newsletter-input::placeholder {
    color: var(--muted);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__newsletter-input:focus {
    border-color: var(--accent);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__newsletter-btn {
    padding: 10px 18px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 11px;
    font-weight: var(--btn-weight, 500);
    letter-spacing: var(--btn-tracking, 0.12em);
    text-transform: var(--btn-transform, uppercase);
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: opacity 0.15s;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__newsletter-btn:hover {
    opacity: 0.88;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 56px;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--muted);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__bar-links {
    display: flex;
    gap: 24px;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__bar-links a {
    color: var(--muted);
    transition: color 0.15s;
  }
  [data-section="footer"][data-variant="b"] .footer-dense__bar-links a:hover {
    color: var(--accent-text);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__powered {
    color: var(--muted);
  }
  [data-section="footer"][data-variant="b"] .footer-dense__powered a {
    color: var(--accent-text);
    opacity: 1;
  }
  @media (max-width: 768px) {
    [data-section="footer"][data-variant="b"] .footer-dense__grid {
      grid-template-columns: 1fr 1fr;
      padding: 48px 32px 36px;
      gap: 32px;
    }
    [data-section="footer"][data-variant="b"] .footer-dense__bar {
      flex-direction: column;
      gap: 12px;
      padding: 16px 32px;
      text-align: center;
    }
    [data-section="footer"][data-variant="b"] .footer-dense__bar-links {
      justify-content: center;
    }
  }
  @media (max-width: 480px) {
    [data-section="footer"][data-variant="b"] .footer-dense__grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }

  /* --- Variant C: footer-hero-wordmark --- */
  [data-section="footer"][data-variant="c"] .footer-hero {
    border-top: 2px solid var(--accent);
    padding: 120px 56px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="footer"][data-variant="c"] .footer-hero__wordmark {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 48px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 32px;
  }
  [data-section="footer"][data-variant="c"] .footer-hero__contact {
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-bottom: 32px;
    line-height: 1.65;
  }
  [data-section="footer"][data-variant="c"] .footer-hero__contact .sep {
    display: inline-block;
    margin: 0 10px;
    color: var(--accent-text);
  }
  [data-section="footer"][data-variant="c"] .footer-hero__socials {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
  }
  [data-section="footer"][data-variant="c"] .footer-hero__social-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-text);
    letter-spacing: 0.04em;
    transition: background 0.15s, color 0.15s;
  }
  [data-section="footer"][data-variant="c"] .footer-hero__social-circle:hover {
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
  }
  [data-section="footer"][data-variant="c"] .footer-hero__copyright {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
  }
  @media (max-width: 768px) {
    [data-section="footer"][data-variant="c"] .footer-hero {
      padding: 72px 32px 40px;
    }
    [data-section="footer"][data-variant="c"] .footer-hero__wordmark {
      font-size: 32px;
      letter-spacing: 0.1em;
    }
    [data-section="footer"][data-variant="c"] .footer-hero__contact .sep {
      margin: 0 6px;
    }
  }
  @media (max-width: 480px) {
    [data-section="footer"][data-variant="c"] .footer-hero__contact .sep {
      display: block;
      margin: 4px 0;
      visibility: hidden;
      height: 0;
    }
    [data-section="footer"][data-variant="c"] .footer-hero__contact {
      line-height: 2;
    }
    [data-section="footer"][data-variant="c"] .footer-hero__wordmark {
      font-size: 26px;
    }
  }

  /* --- Variant D: footer-fx (animated effects) --- */
  [data-section="footer"][data-variant="d"] .footer-fx {
    background: var(--bg-mid);
    overflow: hidden;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
    gap: 40px;
    padding: 64px 56px 48px;
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__col {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  [data-section="footer"][data-variant="d"] .footer-fx.is-visible .footer-fx__col {
    opacity: 1;
    transform: translateY(0);
  }
  [data-section="footer"][data-variant="d"] .footer-fx.is-visible .footer-fx__col:nth-child(1) {
    transition-delay: 0s;
  }
  [data-section="footer"][data-variant="d"] .footer-fx.is-visible .footer-fx__col:nth-child(2) {
    transition-delay: 0.15s;
  }
  [data-section="footer"][data-variant="d"] .footer-fx.is-visible .footer-fx__col:nth-child(3) {
    transition-delay: 0.3s;
  }
  [data-section="footer"][data-variant="d"] .footer-fx.is-visible .footer-fx__col:nth-child(4) {
    transition-delay: 0.45s;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__heading {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 20px;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 14px;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__text {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__link {
    position: relative;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    display: inline-block;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__link:hover::after {
    transform: scaleX(1);
  }
  [data-section="footer"][data-variant="d"] .footer-fx__link-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__link-list .footer-fx__link {
    color: var(--muted);
  }
  [data-section="footer"][data-variant="d"] .footer-fx__link-list .footer-fx__link:hover {
    color: var(--accent-text);
  }
  [data-section="footer"][data-variant="d"] .footer-fx__social-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    font-size: 14px;
    color: var(--muted);
    transition: box-shadow 0.3s, transform 0.2s, color 0.15s, border-color 0.15s;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__social-icon:hover {
    box-shadow: 0 0 18px var(--accent), 0 0 6px var(--accent);
    transform: scale(1.15);
    color: var(--accent-text);
    border-color: var(--accent);
  }
  [data-section="footer"][data-variant="d"] .footer-fx__newsletter {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__newsletter-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 12px;
    display: block;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__newsletter-row {
    display: flex;
    gap: 0;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__newsletter-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--rule);
    border-right: 0;
    border-radius: 6px 0 0 6px;
    color: var(--text);
    font-size: 13px;
    outline: none;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__newsletter-input::placeholder {
    color: var(--muted);
  }
  [data-section="footer"][data-variant="d"] .footer-fx__newsletter-input:focus {
    border-color: var(--accent);
  }
  [data-section="footer"][data-variant="d"] .footer-fx__cta {
    padding: 10px 18px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 11px;
    font-weight: var(--btn-weight, 500);
    letter-spacing: var(--btn-tracking, 0.12em);
    text-transform: var(--btn-transform, uppercase);
    border: 1px solid var(--accent);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: box-shadow 0.3s, opacity 0.15s;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__cta:hover {
    box-shadow: 0 0 24px var(--accent);
    opacity: 0.92;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 56px;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--muted);
    max-width: 1200px;
    margin: 0 auto;
  }
  [data-section="footer"][data-variant="d"] .footer-fx__powered {
    color: var(--muted);
  }
  [data-section="footer"][data-variant="d"] .footer-fx__powered a {
    color: var(--accent-text);
    opacity: 1;
  }
  @media (max-width: 768px) {
    [data-section="footer"][data-variant="d"] .footer-fx__grid {
      grid-template-columns: 1fr 1fr;
      padding: 48px 32px 36px;
      gap: 32px;
    }
    [data-section="footer"][data-variant="d"] .footer-fx__bar {
      flex-direction: column;
      gap: 12px;
      padding: 16px 32px;
      text-align: center;
    }
  }
  @media (max-width: 480px) {
    [data-section="footer"][data-variant="d"] .footer-fx__grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }

  /* --- Variant E: footer-parallax-bg --- */
  @keyframes parallaxBg {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 200px 200px, 200px 200px; }
  }
  @keyframes textShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  [data-section="footer"][data-variant="e"] .footer-parallax {
    position: relative;
    background: var(--bg-mid);
    padding: 96px 56px 48px;
    text-align: center;
    overflow: hidden;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(45deg, rgba(220, 185, 106, 0.04) 0 1px, transparent 1px 24px),
      repeating-linear-gradient(-45deg, rgba(220, 185, 106, 0.03) 0 1px, transparent 1px 32px);
    background-size: 200px 200px, 200px 200px;
    animation: parallaxBg 30s linear infinite;
    pointer-events: none;
    opacity: 0.7;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax > * {
    position: relative;
    z-index: 1;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax__wordmark {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, var(--accent), var(--text), var(--accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 4s ease infinite;
    margin-bottom: 20px;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax__contact {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 28px;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax__contact .sep {
    margin: 0 12px;
    opacity: 0.5;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax__socials {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 36px;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text);
    transition: box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease,
      transform 0.3s ease;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax__social-icon:hover {
    box-shadow: 0 0 20px rgba(220, 185, 106, 0.5);
    border-color: var(--accent);
    color: var(--accent-text);
    transform: translateY(-2px);
  }
  [data-section="footer"][data-variant="e"] .footer-parallax__copyright {
    font-size: 12px;
    color: var(--muted);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
  }
  [data-section="footer"][data-variant="e"] .footer-parallax.is-visible .footer-parallax__copyright {
    opacity: 1;
    transform: none;
  }
  @media (max-width: 480px) {
    [data-section="footer"][data-variant="e"] .footer-parallax {
      padding: 64px 24px 32px;
    }
    [data-section="footer"][data-variant="e"] .footer-parallax__wordmark {
      font-size: 36px;
    }
    [data-section="footer"][data-variant="e"] .footer-parallax::before {
      animation-duration: 60s;
      opacity: 0.4;
    }
  }

  /* =====================================================================
     Hero — Variant F: split-crossfade
     2-col grid: text+CTAs left, auto-cycling crossfade slideshow right.
     Left-edge gradient bleed bleeds image into text column on desktop.
     Mobile: image stacks above text.
     Mined from: templates/artist.tsx (ArtistHero component).
     ===================================================================== */
  [data-section="hero"][data-variant="f"] .hero-crossfade {
    display: grid;
    grid-template-columns: 1fr 52%;
    min-height: 640px;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 56px 80px 56px;
    position: relative;
    z-index: 2;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent-text);
    margin-bottom: 20px;
  }
  /* See HeroF: set past 40 characters, when the eyebrow is an operator-typed
     heading rather than the short "Tattoo Artist - City, ST" label this slot
     was sized for. Matches the treatment HeroI and HeroJ already carry. */
  [data-section="hero"][data-variant="f"] .hero-crossfade__eyebrow[data-longform] {
    font-family: var(--font-display, inherit);
    font-size: clamp(16px, 1.8vw, 21px);
    font-weight: 500;
    letter-spacing: 0.005em;
    text-transform: none;
    line-height: 1.3;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
  }
  /* No forced italic: the operator's heading font should render as picked.
     An italic here made Lato read as a different face than the builder's
     Fonts & Colors panel showed (nirvanic, 2026-09-22). */
  [data-section="hero"][data-variant="f"] .hero-crossfade__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 60px);
    color: var(--text);
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__tagline {
    font-size: 14px;
    color: var(--text);
    opacity: 0.72;
    margin-bottom: 36px;
    line-height: 1.6;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__cta-primary {
    display: inline-block;
    padding: 14px 28px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.12em);
    text-transform: var(--btn-transform, uppercase);
    font-weight: var(--btn-weight, 600);
    border-radius: var(--btn-radius, 0);
    transition: opacity 0.2s;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__cta-primary:hover { opacity: 0.88; }
  [data-section="hero"][data-variant="f"] .hero-crossfade__cta-secondary {
    display: inline-block;
    padding: 14px 28px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--rule);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.12em);
    text-transform: var(--btn-transform, uppercase);
    font-weight: var(--btn-weight, 500);
    border-radius: var(--btn-radius, 0);
    transition: border-color 0.2s, color 0.2s;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__cta-secondary:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }
  /* Right: crossfade slide panel */
  [data-section="hero"][data-variant="f"] .hero-crossfade__slide-wrap {
    position: relative;
    overflow: hidden;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* center, not top — top-cropping decapitated most tattoo photos
       (operator 2026-07-21; every other hero variant centers). */
    object-position: center;
  }
  [data-section="hero"][data-variant="f"] .hero-crossfade__slide.is-active { opacity: 1; }
  /* Left-edge gradient bleed: image bleeds into text column */
  [data-section="hero"][data-variant="f"] .hero-crossfade__bleed {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      var(--bg) 0%,
      rgba(12, 12, 12, 0.55) 20%,
      transparent 52%
    );
    pointer-events: none;
    z-index: 1;
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="f"] .hero-crossfade {
      grid-template-columns: 1fr;
      grid-template-rows: 55svh auto;
      min-height: auto;
    }
    [data-section="hero"][data-variant="f"] .hero-crossfade__text {
      order: 2;
      padding: 40px 24px 56px;
    }
    [data-section="hero"][data-variant="f"] .hero-crossfade__slide-wrap {
      order: 1;
      min-height: 55svh;
    }
    [data-section="hero"][data-variant="f"] .hero-crossfade__bleed {
      background: linear-gradient(
        to top,
        var(--bg) 0%,
        transparent 40%
      );
    }
  }

  /* =====================================================================
     Hero — Variant G: show-through-bg
     Full-viewport bg image shows through a transparent reserved div.
     PNG-logotype H1 sits below the reserved area. No overlay text,
     no CTAs, no split, no slideshow.
     Mined from: templates/bodyworks-tattoo.tsx (.bw-hero block).
     ===================================================================== */
  [data-section="hero"][data-variant="g"] .hero-showbg {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--bg);
    overflow: hidden;
    padding-bottom: 40px;
    text-align: center;
  }
  /* Translucent veil — dark or light — over the background image.
     Never stretches or crops the image; just draws a tinted layer on top. */
  [data-section="hero"][data-variant="g"] .hero-showbg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  [data-section="hero"][data-variant="g"] .hero-showbg[data-bg-overlay="dark"]::before {
    background: rgba(0, 0, 0, 0.45);
  }
  [data-section="hero"][data-variant="g"] .hero-showbg[data-bg-overlay="light"]::before {
    background: rgba(255, 255, 255, 0.45);
  }
  /* Keep content above the veil */
  [data-section="hero"][data-variant="g"] .hero-showbg__viewport,
  [data-section="hero"][data-variant="g"] .hero-showbg__logotype {
    position: relative;
    z-index: 1;
  }
  /* Transparent reserved div — lets bg image show through */
  [data-section="hero"][data-variant="g"] .hero-showbg__viewport {
    height: 50vh;
    max-height: 480px;
    min-height: 320px;
    pointer-events: none;
  }
  /* PNG-logotype H1 */
  [data-section="hero"][data-variant="g"] .hero-showbg__logotype {
    display: flex;
    justify-content: center;
    margin: 8px auto 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 5vw, 48px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.1;
  }
  [data-section="hero"][data-variant="g"] .hero-showbg__logotype-img {
    max-width: 320px;
    width: 80vw;
    height: auto;
    display: block;
  }
  [data-section="hero"][data-variant="g"] .hero-showbg__logotype--text {
    color: var(--accent-text);
  }
  @container preview (max-width: 760px) {
    [data-section="hero"][data-variant="g"] .hero-showbg__viewport {
      height: 40vh;
      min-height: 260px;
    }
  }

  /* =====================================================================
     Hero — Variant H: countdown-event
     Full-viewport bg image + dark gradient overlay. Live countdown
     (days/hrs/min in accent) ABOVE H1. Event H1 (italic) + date-range
     line + venue+city line. "Get Tickets" accent CTA + ghost secondary.
     Client island (HeroHClient) handles the ticking countdown.
     Mined from: templates/convention.tsx (ConventionHero component).
     ===================================================================== */
  [data-section="hero"][data-variant="h"] .hero-countdown {
    position: relative;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: #141414;
    border-bottom: 1px solid var(--rule);
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(10, 10, 10, 0.92) 0%,
      rgba(10, 10, 10, 0.40) 50%,
      rgba(10, 10, 10, 0.10) 100%
    );
    z-index: 1;
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 0 56px 64px;
    max-width: 1200px;
    margin: 0 auto;
  }
  /* Countdown timer row (rendered by HeroHClient) */
  [data-section="hero"][data-variant="h"] .hero-countdown__timer {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__digit {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--accent-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
  }
  /* Event H1 — italic serif */
  [data-section="hero"][data-variant="h"] .hero-countdown__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.2rem, 5vw, 4rem);
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.1;
  }
  /* Date-range line */
  [data-section="hero"][data-variant="h"] .hero-countdown__date {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: rgba(236, 230, 220, 0.78);
    margin-bottom: 8px;
  }
  /* Venue + city */
  [data-section="hero"][data-variant="h"] .hero-countdown__venue {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 32px;
  }
  /* CTA row */
  [data-section="hero"][data-variant="h"] .hero-countdown__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__cta-primary {
    display: inline-block;
    padding: 14px 28px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.12em);
    text-transform: var(--btn-transform, uppercase);
    font-weight: var(--btn-weight, 600);
    border-radius: var(--btn-radius, 0);
    transition: opacity 0.2s;
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__cta-primary:hover { opacity: 0.88; }
  [data-section="hero"][data-variant="h"] .hero-countdown__cta-secondary {
    display: inline-block;
    padding: 14px 28px;
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(236, 230, 220, 0.38);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.12em);
    text-transform: var(--btn-transform, uppercase);
    font-weight: var(--btn-weight, 500);
    border-radius: var(--btn-radius, 0);
    transition: border-color 0.2s, color 0.2s;
  }
  [data-section="hero"][data-variant="h"] .hero-countdown__cta-secondary:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="h"] .hero-countdown__content {
      padding: 0 24px 48px;
    }
    [data-section="hero"][data-variant="h"] .hero-countdown__title {
      font-size: clamp(1.8rem, 7vw, 2.8rem);
    }
    [data-section="hero"][data-variant="h"] .hero-countdown__timer {
      gap: 16px;
      margin-bottom: 20px;
    }
    [data-section="hero"][data-variant="h"] .hero-countdown__ctas {
      flex-direction: column;
      max-width: 320px;
    }
    [data-section="hero"][data-variant="h"] .hero-countdown__ctas a {
      text-align: center;
    }
  }

  /* =====================================================================
     Hero — Variant I: info-col-asymmetric-stack
     1fr / 1.15fr split. LEFT = eyebrow + display H1 + italic lede +
     labeled meta strip + dual CTAs. RIGHT = 3-tile asymmetric image
     stack (grid-template-columns: 1fr 1fr; grid-template-rows: 1.4fr 1fr;
     tile 1 col1/row1, tile 2 col2/rows1-2 full height, tile 3 col1/row2).
     Hover scale 1.04 on all tiles.
     Mined from: templates/studio-marquee.tsx (.mq-hero block).
     ===================================================================== */
  [data-section="hero"][data-variant="i"] .hero-ias {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px 32px 96px;
  }
  /* LEFT col */
  [data-section="hero"][data-variant="i"] .hero-ias__col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 560px;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: 600;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(54px, 9vw, 124px);
    line-height: 0.94;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--text);
    margin: 0;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__name .accent { color: var(--accent-text); }
  /* An operator-typed heading is a sentence, not the short
     "Tattoo Artist - City, ST" label this slot was sized for. HeroI sets
     data-longform past 40 characters so the label treatment steps aside
     rather than squeezing prose into 12px all-caps at 0.22em tracking. */
  [data-section="hero"][data-variant="i"] .hero-ias__eyebrow[data-longform] {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.9vw, 23px);
    letter-spacing: 0.005em;
    text-transform: none;
    line-height: 1.3;
    max-width: 34ch;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__lede {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.3;
    color: var(--text, rgba(236, 230, 220, 0.80));
    max-width: 38ch;
  }
  /* The operator's subtitle line. Body type on purpose — it supports the
     wordmark rather than competing with the italic lede above it. */
  [data-section="hero"][data-variant="i"] .hero-ias__sub {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.55;
    color: var(--text-secondary, var(--text));
    opacity: 0.82;
    max-width: 46ch;
    margin: 0;
  }
  /* Labeled inline meta strip — border-top separator */
  [data-section="hero"][data-variant="i"] .hero-ias__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--text, rgba(236, 230, 220, 0.80));
    padding-top: 6px;
    border-top: 1px solid var(--rule);
    margin-top: 6px;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__meta a:hover { color: var(--text); }
  [data-section="hero"][data-variant="i"] .hero-ias__meta-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-right: 10px;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__phone {
    color: var(--accent-text);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    letter-spacing: 0.01em;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__phone:hover { color: var(--text); }
  /* Dual CTAs */
  [data-section="hero"][data-variant="i"] .hero-ias__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__cta-solid {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 22px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-family: var(--font-body);
    font-weight: var(--btn-weight, 600);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.10em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    border: 1px solid var(--accent);
    transition: opacity 0.15s;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__cta-solid:hover { opacity: 0.88; }
  [data-section="hero"][data-variant="i"] .hero-ias__cta-ghost {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 22px;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-weight: var(--btn-weight, 500);
    font-size: 12px;
    letter-spacing: var(--btn-tracking, 0.10em);
    text-transform: var(--btn-transform, uppercase);
    border-radius: var(--btn-radius, 0);
    border: 1px solid var(--rule);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__cta-ghost:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
  }
  /* RIGHT col: 3-tile asymmetric stack */
  [data-section="hero"][data-variant="i"] .hero-ias__stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.4fr 1fr;
    gap: 16px;
    aspect-ratio: 1 / 1.08;
    min-height: 480px;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__tile {
    overflow: hidden;
    background: var(--bg-mid);
    position: relative;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms ease;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__tile:hover img {
    transform: scale(1.04);
  }
  /* Tile placement: col1/row1, col2/rows1-2, col1/row2 */
  [data-section="hero"][data-variant="i"] .hero-ias__tile--1 {
    grid-column: 1;
    grid-row: 1;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__tile--2 {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__tile--3 {
    grid-column: 1;
    grid-row: 2;
  }
  /* Count-aware: with 1-2 images the fixed 2x2 asymmetric grid left empty
     --bg-mid boxes (2026-07-25 audit, flaw 5). Collapse to a full tile (1) or a
     clean 2-up (2); the 3-tile asymmetric layout above is untouched. */
  [data-section="hero"][data-variant="i"] .hero-ias__stack[data-tiles="1"] {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__stack[data-tiles="1"] .hero-ias__tile--1 {
    grid-column: 1; grid-row: 1;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__stack[data-tiles="2"] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__stack[data-tiles="2"] .hero-ias__tile--1 {
    grid-column: 1; grid-row: 1;
  }
  [data-section="hero"][data-variant="i"] .hero-ias__stack[data-tiles="2"] .hero-ias__tile--2 {
    grid-column: 2; grid-row: 1;
  }
  @container preview (max-width: 900px) {
    [data-section="hero"][data-variant="i"] .hero-ias {
      grid-template-columns: 1fr;
      padding: 56px 18px 64px;
      gap: 40px;
    }
    [data-section="hero"][data-variant="i"] .hero-ias__stack {
      aspect-ratio: 1 / 1;
      min-height: 0;
      max-height: 520px;
    }
    [data-section="hero"][data-variant="i"] .hero-ias__name {
      font-size: clamp(44px, 12vw, 80px);
    }
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Gallery F — editorial-series
     Per-gallery-type bento block with serif series header.
     Mined from: templates/monograph.tsx
  ──────────────────────────────────────────────────────────────────────────── */

  [data-section="gallery"][data-variant="f"] .gallery-series__block {
    padding: 72px 24px;
    max-width: 1240px;
    margin: 0 auto;
    border-top: 1px solid var(--rule);
  }

  /* 3-zone header: spaced-caps count left / serif H2 center / hairline CTA right */
  [data-section="gallery"][data-variant="f"] .gallery-series__header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 18px;
    margin-bottom: 36px;
  }

  [data-section="gallery"][data-variant="f"] .gallery-series__count {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }

  [data-section="gallery"][data-variant="f"] .gallery-series__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    text-align: center;
  }

  [data-section="gallery"][data-variant="f"] .gallery-series__viewall {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1px;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  [data-section="gallery"][data-variant="f"] .gallery-series__viewall:hover {
    color: var(--accent-text);
    border-color: var(--accent);
  }

  /* 6-col bento grid */
  [data-section="gallery"][data-variant="f"] .gallery-series__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
    gap: 14px;
  }

  [data-section="gallery"][data-variant="f"] .gallery-series__cell {
    display: block;
    overflow: hidden;
    background: var(--bg-mid);
    position: relative;
  }

  [data-section="gallery"][data-variant="f"] .gallery-series__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease, filter 0.4s ease;
    filter: saturate(0.95);
  }

  [data-section="gallery"][data-variant="f"] .gallery-series__cell:hover img {
    transform: scale(1.03);
    filter: saturate(1.08);
  }

  /* Desktop bento spans */
  @container preview (min-width: 720px) {
    [data-section="gallery"][data-variant="f"] .gallery-series__grid {
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: 200px;
      gap: 18px;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__cell:nth-child(1) {
      grid-column: span 4;
      grid-row: span 2;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__cell:nth-child(2) {
      grid-column: span 2;
      grid-row: span 1;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__cell:nth-child(3) {
      grid-column: span 2;
      grid-row: span 1;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__cell:nth-child(4) {
      grid-column: span 3;
      grid-row: span 1;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__cell:nth-child(5) {
      grid-column: span 3;
      grid-row: span 1;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__cell:nth-child(6) {
      grid-column: span 6;
      grid-row: span 1;
    }
  }

  @container preview (max-width: 640px) {
    [data-section="gallery"][data-variant="f"] .gallery-series__block {
      padding: 48px 18px;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__header {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    [data-section="gallery"][data-variant="f"] .gallery-series__title {
      text-align: left;
    }
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Gallery G — portrait-attributed-3col
     4:5 portrait tiles with per-tile artist credit.
     Mined from: templates/studio-marquee.tsx
  ──────────────────────────────────────────────────────────────────────────── */

  [data-section="gallery"][data-variant="g"] .gallery-portrait-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 64px 24px;
    max-width: 1240px;
    margin: 0 auto;
  }

  @container preview (min-width: 640px) {
    [data-section="gallery"][data-variant="g"] .gallery-portrait-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container preview (min-width: 1024px) {
    [data-section="gallery"][data-variant="g"] .gallery-portrait-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
  }

  [data-section="gallery"][data-variant="g"] .gallery-portrait-tile {
    display: block;
    color: inherit;
  }

  [data-section="gallery"][data-variant="g"] .gallery-portrait-tile__img-wrap {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bg-mid);
    margin-bottom: 12px;
  }

  [data-section="gallery"][data-variant="g"] .gallery-portrait-tile__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms ease;
  }

  [data-section="gallery"][data-variant="g"] .gallery-portrait-tile:hover .gallery-portrait-tile__img-wrap img {
    transform: scale(1.04);
  }

  [data-section="gallery"][data-variant="g"] .gallery-portrait-tile__credit {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }

  [data-section="gallery"][data-variant="g"] .gallery-portrait-tile__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 18px;
    color: var(--text);
    font-weight: 400;
    line-height: 1.2;
  }

  @container preview (max-width: 640px) {
    [data-section="gallery"][data-variant="g"] .gallery-portrait-grid {
      padding: 48px 18px;
      gap: 24px;
    }
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Gallery H — per-artist-row
     Per-artist sub-rows with 3-thumbnail strips.
     Mined from: templates/tn-classic-sidebar-multi.tsx
  ──────────────────────────────────────────────────────────────────────────── */

  [data-section="gallery"][data-variant="h"] .gallery-per-artist {
    padding: 64px 24px;
    max-width: 1240px;
    margin: 0 auto;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__heading {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 48px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 18px;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__row {
    margin-bottom: 44px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--rule);
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__row-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__artist-name {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 28px);
    letter-spacing: 0.02em;
    flex: 1;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__artist-name a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
  }
  [data-section="gallery"][data-variant="h"] .gallery-per-artist__artist-name a:hover {
    color: var(--accent-text);
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__row-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--rule);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  [data-section="gallery"][data-variant="h"] .gallery-per-artist__btn:hover {
    border-color: var(--accent);
    color: var(--accent-text);
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__thumb {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg-mid);
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
  }

  [data-section="gallery"][data-variant="h"] .gallery-per-artist__thumb:hover img {
    transform: scale(1.05);
  }

  @container preview (max-width: 640px) {
    [data-section="gallery"][data-variant="h"] .gallery-per-artist {
      padding: 48px 18px;
    }
    [data-section="gallery"][data-variant="h"] .gallery-per-artist__row-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    [data-section="gallery"][data-variant="h"] .gallery-per-artist__thumbs {
      gap: 8px;
    }
  }

  /* ── Roster F — circular-avatar-styles ───────────────────────────────── */
  [data-section="roster"][data-variant="f"] .roster-circular {
    background: var(--section-bg, #0d0d0d);
    padding: 64px 24px;
    text-align: center;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__head {
    margin-bottom: 36px;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__eyebrow {
    font-size: 11px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--accent-text, #ac8236);
    font-weight: 600;
    margin-bottom: 8px;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__heading {
    font-family: var(--font-heading, serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--text, #fff);
    margin: 0;
    line-height: 1.05;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__grid {
    /* Flex, not grid, specifically so a PARTIAL last row is centred.
       CSS Grid fills tracks left-to-right, so a roster of 8 laid out 5
       per row left the trailing 3 hard against the left edge (operator
       report 2026-08-03, darkside-tattoo). `justify-content: center` on
       a grid only centres the whole track set, not the items inside the
       final row — flex wrap is the only thing that centres the
       remainder. Cards do NOT grow (`flex-grow: 0`), so the trailing row
       keeps the same avatar size as the full rows instead of stretching
       to fill the width. */
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__grid > * {
    /* 205px keeps ~5 per row at the 1140px max-width (5x205 + 4x28 gap =
       1137), matching the previous auto-fill density. */
    flex: 0 1 205px;
    min-width: 160px;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__card {
    display: block;
    color: var(--text, #fff);
    text-decoration: none;
    transition: transform 0.25s ease, color 0.25s ease;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__card:hover {
    transform: translateY(-3px);
    color: var(--accent-text, #ac8236);
  }

  [data-section="roster"][data-variant="f"] .roster-circular__avatar {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent, #ac8236);
    margin-bottom: 14px;
    display: block;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__avatar--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-mid, #1c1c1c);
    color: var(--accent-text, #ac8236);
    font-family: var(--font-heading, serif);
    font-size: 36px;
    font-weight: 700;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__name {
    font-family: var(--font-heading, serif);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: inherit;
  }

  [data-section="roster"][data-variant="f"] .roster-circular__tagline {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
    line-height: 1.4;
  }

  /* ── Roster G — square-avatar-instagram ──────────────────────────────── */
  [data-section="roster"][data-variant="g"] .roster-square-ig {
    background: var(--section-bg, #0c0c0c);
    padding: 64px 24px;
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__head {
    max-width: 1320px;
    margin: 0 auto 40px;
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-text, #dcb96a);
    font-weight: 600;
    margin-bottom: 8px;
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__heading {
    font-family: var(--font-heading, serif);
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 400;
    color: var(--text, #ece6dc);
    margin: 0;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__grid {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  @container preview (min-width: 640px) {
    [data-section="roster"][data-variant="g"] .roster-square-ig__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @container preview (min-width: 900px) {
    [data-section="roster"][data-variant="g"] .roster-square-ig__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
    }
  }

  @container preview (min-width: 1200px) {
    [data-section="roster"][data-variant="g"] .roster-square-ig__grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__card {
    display: block;
    color: var(--text, #ece6dc);
    text-decoration: none;
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__avatar-wrap {
    aspect-ratio: 1 / 1;
    background: var(--bg-mid, #161616);
    margin-bottom: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, serif);
    font-size: 48px;
    color: var(--muted);
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms ease;
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__card:hover .roster-square-ig__avatar {
    transform: scale(1.05);
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__avatar-blank {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, serif);
    font-size: 48px;
    color: var(--muted);
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__name {
    font-family: var(--font-heading, serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 0 0 4px;
    color: inherit;
  }

  [data-section="roster"][data-variant="g"] .roster-square-ig__handle {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    letter-spacing: 0.04em;
  }

  /* ─── Trust F — quote-stats-card ─────────────────────────────────────── */

  [data-section="trust"][data-variant="f"] .trust-quote-stats {
    padding: 80px 24px;
    display: flex;
    justify-content: center;
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__card {
    max-width: 860px;
    width: 100%;
    background: var(--bg-mid, #111);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    padding: 56px 48px 48px;
    text-align: center;
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__quote {
    font-family: var(--font-heading, serif);
    font-style: italic;
    font-size: clamp(20px, 2.6vw, 28px);
    line-height: 1.5;
    color: var(--text, #ece6dc);
    margin: 0 0 48px;
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__accent {
    color: var(--accent-text, #c9a96e);
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.10));
    padding-top: 40px;
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__stat {
    padding: 0 16px;
    border-right: 1px solid var(--border, rgba(255, 255, 255, 0.10));
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__stat:last-child {
    border-right: none;
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__number {
    font-family: var(--font-heading, serif);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 400;
    line-height: 1;
    color: var(--accent-text, #c9a96e);
    margin: 0 0 6px;
  }

  [data-section="trust"][data-variant="f"] .trust-quote-stats__label {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted, rgba(236, 230, 220, 0.55));
    margin: 0;
  }

  @media (max-width: 640px) {
    [data-section="trust"][data-variant="f"] .trust-quote-stats__card {
      padding: 36px 24px 32px;
    }

    [data-section="trust"][data-variant="f"] .trust-quote-stats__stats {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px 0;
    }

    [data-section="trust"][data-variant="f"] .trust-quote-stats__stat {
      border-right: none;
      border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.10));
      padding: 0 0 24px;
    }

    [data-section="trust"][data-variant="f"] .trust-quote-stats__stat:nth-child(3),
    [data-section="trust"][data-variant="f"] .trust-quote-stats__stat:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  /* ─── Third-Party Trust F — badge-icon-grid ──────────────────────────── */

    /* 🚨 The section paints its own background from --section-bg.
     Without this the builder's per-section Background picker wrote the
     database and rendered nothing — the control existed, the tone never
     appeared. Reported by a client as "Need to be able change bg color of
     third party trust" (Sean, Darkside, 2026-08-14); same defect class as
     the Amenities bar in docs/BUILDER-SECTION-AUDIT.md, where a section had
     no CSS at all. `--section-bg` falls back to the framework's own value,
     so a tenant who never touches the picker sees no change. */
[data-section="third-party-trust"][data-variant="f"] .trust-badge-grid {
    background: var(--section-bg);
    padding: 72px 24px;
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
  }

  [data-section="third-party-trust"][data-variant="f"] .trust-badge-grid__cell {
    padding: 32px 28px;
    background: var(--bg-mid, #111);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
  }

  [data-section="third-party-trust"][data-variant="f"] .trust-badge-grid__icon {
    display: block;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 16px;
  }

  [data-section="third-party-trust"][data-variant="f"] .trust-badge-grid__heading {
    font-family: var(--font-heading, serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--text, #ece6dc);
    margin: 0 0 10px;
    line-height: 1.2;
  }

  [data-section="third-party-trust"][data-variant="f"] .trust-badge-grid__body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--muted, rgba(236, 230, 220, 0.60));
    margin: 0;
  }

  /* ─── FAQ F — two-col-expandable ────────────────────────────────────── */

  [data-section="faq"][data-variant="f"] .faq-two-col {
    padding: 80px 24px;
    max-width: 1160px;
    margin: 0 auto;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__head {
    text-align: center;
    margin-bottom: 56px;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-text, #c9a96e);
    margin-bottom: 12px;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__headline {
    font-family: var(--font-heading, serif);
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 400;
    color: var(--text, #ece6dc);
    margin: 0;
    line-height: 1.15;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 0 40px;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__item {
    border-left: 2px solid var(--border, rgba(255, 255, 255, 0.12));
    padding: 0 0 0 20px;
    margin-bottom: 24px;
    transition: border-color 0.2s ease;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__item[open] {
    border-left-color: var(--accent, #c9a96e);
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    padding: 14px 0;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__summary::-webkit-details-marker {
    display: none;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__question {
    font-family: var(--font-heading, serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--text, #ece6dc);
    line-height: 1.3;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.18));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--muted, rgba(236, 230, 220, 0.55));
    transition: transform 0.25s ease, border-color 0.2s ease, color 0.2s ease;
    font-style: normal;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__item[open] .faq-two-col__icon {
    transform: rotate(45deg);
    border-color: var(--accent, #c9a96e);
    color: var(--accent-text, #c9a96e);
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__answer {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__item[open] .faq-two-col__answer {
    max-height: 400px;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__answer p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted, rgba(236, 230, 220, 0.65));
    margin: 0;
    padding-bottom: 16px;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__more {
    display: inline-block;
    margin-top: 36px;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-text, #c9a96e);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
  }

  [data-section="faq"][data-variant="f"] .faq-two-col__more:hover {
    opacity: 0.75;
  }

  @media (max-width: 520px) {
    [data-section="faq"][data-variant="f"] .faq-two-col__grid {
      grid-template-columns: 1fr;
    }
  }

  /* ─── Location F — inquire-nap-fields ───────────────────────────────── */

  [data-section="location"][data-variant="f"] .loc-inquire {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 80px 24px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  }

  @media (min-width: 900px) {
    [data-section="location"][data-variant="f"] .loc-inquire {
      grid-template-columns: 5fr 7fr;
      gap: 80px;
    }
  }

  [data-section="location"][data-variant="f"] .loc-inquire__eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted, rgba(236, 230, 220, 0.55));
    margin-bottom: 14px;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__headline {
    font-family: var(--font-heading, serif);
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 400;
    color: var(--text, #ece6dc);
    margin: 0 0 18px;
    line-height: 1.1;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__lede {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted, rgba(236, 230, 220, 0.65));
    margin: 0 0 24px;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__cta {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text, #ece6dc);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    min-height: 44px;
    line-height: 44px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__cta:hover {
    color: var(--accent-text, #c9a96e);
    border-color: var(--accent, #c9a96e);
  }

  [data-section="location"][data-variant="f"] .loc-inquire__fields {
    font-style: normal;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__field {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    font-size: 15px;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__field-label {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--muted, rgba(236, 230, 220, 0.50));
    align-self: start;
    padding-top: 3px;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__field-value {
    color: var(--text, #ece6dc);
    line-height: 1.6;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__field-value a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.20));
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }

  [data-section="location"][data-variant="f"] .loc-inquire__field-value a:hover {
    color: var(--accent-text, #c9a96e);
    border-color: var(--accent, #c9a96e);
  }

  @media (max-width: 520px) {
    [data-section="location"][data-variant="f"] .loc-inquire__field {
      grid-template-columns: 90px 1fr;
      gap: 12px;
    }
  }

  /* ─── Consult F — info-panel-form ───────────────────────────────────── */

  [data-section="consult"][data-variant="f"] .consult-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 80px 24px;
  }

  @media (min-width: 900px) {
    [data-section="consult"][data-variant="f"] .consult-panel {
      grid-template-columns: 5fr 7fr;
      gap: 64px;
    }
  }

  [data-section="consult"][data-variant="f"] .consult-panel__headline {
    font-family: var(--font-heading, serif);
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 400;
    color: var(--text, #ece6dc);
    margin: 0 0 18px;
    line-height: 1.2;
  }

  [data-section="consult"][data-variant="f"] .consult-panel__bio {
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted, rgba(236, 230, 220, 0.65));
    margin: 0 0 28px;
  }

  [data-section="consult"][data-variant="f"] .consult-panel__links {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  [data-section="consult"][data-variant="f"] .consult-panel__link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text, #ece6dc);
    text-decoration: none;
    transition: color 0.2s ease;
    min-height: 44px;
  }

  [data-section="consult"][data-variant="f"] .consult-panel__link:hover {
    color: var(--accent-text, #c9a96e);
  }

  [data-section="consult"][data-variant="f"] .consult-panel__link-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
  }

  [data-section="consult"][data-variant="f"] .consult-panel__form {
    background: var(--bg-mid, #111);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 4px;
    padding: 36px 32px;
  }

  @media (max-width: 520px) {
    [data-section="consult"][data-variant="f"] .consult-panel__form {
      padding: 24px 18px;
    }
  }


  /* ─── Catalog A–F — store showcase ───────────────────────────────────
     Catalog was the last section rendered entirely from inline styles
     (BUILDER-VARIANT-DISPLAY-AUDIT G-1, deferred from the 2026-08-06 sweep
     as F-1). Three things followed from that and all three end here:

       - the section painted its own background inline, so --section-bg never
         reached it and the Builder's per-section Background chips silently
         did nothing on Catalog alone;
       - it carried a bronze literal palette (#B5762E / #141414 / #101010)
         that ignored the tenant's theme;
       - and its <img>s bypassed cfImage, the fleet's only unoptimized image
         path — 71 full-size originals on one dev tenant.

     Shared frame first (every variant renders through CatalogSection), then
     the per-variant layouts. */

  [data-section="catalog"] .catalog {
    max-width: 1160px;
    margin: 0 auto;
    padding: var(--section-pad, 56px 24px);
  }

  [data-section="catalog"] .catalog__head {
    text-align: center;
    margin-bottom: 28px;
  }

  [data-section="catalog"] .catalog__eyebrow {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* TEXT reads --accent-text, not --accent: nevermore splits the two, so a
       fill token in a colour position is the wrong one (CSS-SCALE R-8b). The
       inline styles this replaced used --accent and were invisible to the
       guard; moving to CSS is what surfaced it. */
    color: var(--accent-text, var(--accent));
    font-weight: 700;
  }

  [data-section="catalog"] .catalog__heading {
    font-family: var(--font-heading, serif);
    font-size: 30px;
    margin: 8px 0 0;
  }

  [data-section="catalog"] .catalog__foot {
    text-align: center;
    margin-top: 36px;
  }

  [data-section="catalog"] .catalog__shop-all {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
    font-weight: 700;
    text-decoration: none;
  }

  /* The card is one object across five of the six variants; only its media
     aspect and body padding change, so those are the variant-scoped bits. */
  [data-section="catalog"] .catalog-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--bg-mid);
  }

  [data-section="catalog"] .catalog-card__media {
    aspect-ratio: 1 / 1;
    background: var(--bg);
  }

  [data-section="catalog"] .catalog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  [data-section="catalog"] .catalog-card__body {
    padding: 12px 14px 14px;
  }

  [data-section="catalog"] .catalog-card__name {
    font-family: var(--font-heading, serif);
    font-weight: 600;
    font-size: 15px;
  }

  [data-section="catalog"] .catalog-card__price {
    margin-top: 4px;
    font-weight: 700;
    font-size: 14px;
  }

  /* ─── A — category showcase (default) ── */

  [data-section="catalog"][data-variant="a"] .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
  }

  [data-section="catalog"][data-variant="a"] .catalog-card__media {
    aspect-ratio: 4 / 3;
  }

  [data-section="catalog"][data-variant="a"] .catalog-card__body {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  [data-section="catalog"][data-variant="a"] .catalog-card__name {
    font-size: 17px;
  }

  [data-section="catalog"][data-variant="a"] .catalog-card__count {
    font-size: 13px;
    opacity: 0.6;
  }

  /* ─── B — featured row (horizontal scroll) ── */

  [data-section="catalog"][data-variant="b"] .catalog-strip {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }

  [data-section="catalog"][data-variant="b"] .catalog-card {
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
  }

  /* ─── C — signature spotlight ── */

  [data-section="catalog"][data-variant="c"] .catalog-spotlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }

  [data-section="catalog"][data-variant="c"] .catalog-spotlight__rest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card {
    display: flex;
    flex-direction: column;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card__media {
    flex: 1;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card--big .catalog-card__media {
    aspect-ratio: 4 / 5;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card--big .catalog-card__body {
    padding: 16px 18px;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card--big .catalog-card__name {
    font-size: 20px;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card--big .catalog-card__price {
    font-size: 16px;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card--small .catalog-card__body {
    padding: 10px 12px;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card--small .catalog-card__name {
    font-size: 14px;
  }

  [data-section="catalog"][data-variant="c"] .catalog-card--small .catalog-card__price {
    font-size: 13px;
  }

  /* ─── D — rustic mosaic (CSS columns) ── */

  [data-section="catalog"][data-variant="d"] .catalog-mosaic {
    column-width: 240px;
    column-gap: 16px;
  }

  [data-section="catalog"][data-variant="d"] .catalog-card {
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
    break-inside: avoid;
    border-radius: 10px;
  }

  /* Masonry keeps each image's own height — no fixed aspect, no crop. */
  [data-section="catalog"][data-variant="d"] .catalog-card__img {
    height: auto;
  }

  [data-section="catalog"][data-variant="d"] .catalog-card__body {
    padding: 10px 12px;
  }

  [data-section="catalog"][data-variant="d"] .catalog-card__name {
    font-size: 14px;
  }

  [data-section="catalog"][data-variant="d"] .catalog-card__price {
    margin-top: 3px;
    font-size: 13px;
    opacity: 0.9;
  }

  /* ─── E — collections (alternating editorial bands) ── */

  [data-section="catalog"][data-variant="e"] .catalog-bands {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band--flip {
    flex-direction: row-reverse;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band__media {
    flex: 1 1 320px;
    aspect-ratio: 3 / 2;
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band__text {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band__title {
    font-family: var(--font-heading, serif);
    font-size: 24px;
    margin: 0 0 8px;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band__meta {
    opacity: 0.75;
    margin: 0 0 16px;
  }

  [data-section="catalog"][data-variant="e"] .catalog-band__link {
    color: var(--accent-text, var(--accent));
    font-weight: 700;
    text-decoration: none;
  }

  /* ─── F — uniform grid + CTA tile ── */

  [data-section="catalog"][data-variant="f"] .catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
  }

  [data-section="catalog"][data-variant="f"] .catalog-card {
    border-radius: 10px;
  }

  [data-section="catalog"][data-variant="f"] .catalog-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    text-decoration: none;
    background: var(--accent);
    color: var(--accent-contrast, var(--bg));
  }

  [data-section="catalog"][data-variant="f"] .catalog-cta__title {
    font-family: var(--font-heading, serif);
    font-weight: 700;
    font-size: 19px;
  }

  [data-section="catalog"][data-variant="f"] .catalog-cta__sub {
    margin-top: 6px;
    font-weight: 700;
  }
}


/* =========================================================================
   Per-section wrapper animations (Builder animation picker)
   =========================================================================
   See lib/themes/animations.ts for the catalog. SectionRouter emits a
   hidden <span data-animation="{slug}"> MARKER immediately before the
   section when a tenant has set an animation for it. CSS targets the
   [data-section] element that FOLLOWS the marker (`+`), or its descendants
   depending on the effect.

   🚨 Adjacent-sibling, never a wrapper. The marker replaced a
   display:contents span around the section on 2026-09-02: a wrapped
   <section> is not a child of the framework element, so the positional
   colour recipes (`> .slot:nth-of-type(odd)`) skipped it and renumbered
   every section after it — docs/SECTION-RECIPES.md §0b, measured on a
   paying client. A hidden span is not a <section>, so it never enters that
   count.

   Reduced motion: every @keyframes block below is gated on
   `@media (prefers-reduced-motion: no-preference)` so OS-level
   accessibility wins. The 'off' slug uses the existing
   `[data-animations-off="true"]` selector (data.ts maps 'off' onto
   that wrapper attr for back-compat with the legacy section_animations_off
   render path).
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* fade-in: section fades from 0 → 1 opacity over 800ms when scrolled
     into view. Uses CSS @starting-style + scroll-driven animation where
     supported; falls back to a simple infinite-loop guard.
     Note: scroll-timeline support is partial — Safari adds it 17.6+.
     For broad compatibility we use a simpler approach: keyframe fires
     on first paint; `backwards` holds the START state through the delay.
     🚨 Never `both`/`forwards` on a transform: a held transform (even the
     identity) makes the section the containing block for position:fixed
     children, so a nav with this animation trapped its full-screen phone
     menu inside the header (check-nav-mobile, 2026-09-26). The end state is
     the base style, so nothing needs holding. */
  [data-animation="fade-in"] + [data-section] {
    animation: ta-fade-in 0.8s ease-out 0.1s both;
  }
  @keyframes ta-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* slide-up: 24px translate from below + fade-in */
  [data-animation="slide-up"] + [data-section] {
    animation: ta-slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
  }
  @keyframes ta-slide-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* slide-left / slide-right: horizontal entrance + fade (Aloha port,
     2026-08-17 — the source site's sections slide in alternately from
     the sides). 32px is deliberate: far enough to read as direction,
     small enough that content never leaves the viewport on a phone, so
     no horizontal overflow. The section wrapper keeps overflow-x
     clipped during the animation for belt-and-braces. */
  [data-animation="slide-left"] + [data-section],
  [data-animation="slide-right"] + [data-section] {
    overflow-x: clip;
  }
  [data-animation="slide-left"] + [data-section] {
    animation: ta-slide-left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
  }
  @keyframes ta-slide-left {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  [data-animation="slide-right"] + [data-section] {
    animation: ta-slide-right 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
  }
  @keyframes ta-slide-right {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  /* stagger: children of the section enter one at a time, 80ms gap.
     Caller writes child markup with `.slot__item` or a similar class;
     this catalog assumes the variant exposes direct children that can
     be animated. We use `:nth-child(n)` delays up to 12 items. */
  [data-animation="stagger"] + [data-section] > * {
    animation: ta-fade-in 0.6s ease-out both;
  }
  [data-animation="stagger"] + [data-section] > *:nth-child(1)  { animation-delay: 0.05s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(2)  { animation-delay: 0.13s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(3)  { animation-delay: 0.21s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(4)  { animation-delay: 0.29s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(5)  { animation-delay: 0.37s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(6)  { animation-delay: 0.45s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(7)  { animation-delay: 0.53s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(8)  { animation-delay: 0.61s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(9)  { animation-delay: 0.69s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(10) { animation-delay: 0.77s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(11) { animation-delay: 0.85s; }
  [data-animation="stagger"] + [data-section] > *:nth-child(12) { animation-delay: 0.93s; }

  /* zoom-in: from scale 0.95 + opacity 0 → scale 1 + opacity 1 */
  [data-animation="zoom-in"] + [data-section] {
    animation: ta-zoom-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
  }
  @keyframes ta-zoom-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ken-burns: hero-specific. Slow pan + zoom on every <img> inside.
     Variants that already include kenburns inside their markup
     (HeroD) are unaffected because the rule targets the wrapper, not
     the .hero-kenburns elements those variants use. Duration 20s
     ease-in-out, alternating direction so it pans back. */
  [data-animation="ken-burns"] + [data-section] img {
    animation: ta-ken-burns 20s ease-in-out infinite alternate;
    transform-origin: center;
  }
  @keyframes ta-ken-burns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.08) translate(-2%, -1%); }
  }

  /* parallax: shift the background or first image inside the section
     by a few pixels relative to scroll position. Simplest fallback is
     a slow infinite drift; a richer version would use scroll-timeline. */
  [data-animation="parallax"] + [data-section] {
    background-attachment: fixed;
  }
  [data-animation="parallax"] + [data-section] img:first-of-type {
    will-change: transform;
    transition: transform 0.4s ease-out;
  }

  /* glow: subtle pulsing accent ring on the section. Useful for CTAs
     and trust badges. */
  [data-animation="glow"] + [data-section] {
    animation: ta-glow 3s ease-in-out infinite;
  }
  @keyframes ta-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, #c9a96e) 0%, transparent); }
    50%      { box-shadow: 0 0 32px 4px color-mix(in srgb, var(--accent, #c9a96e) 18%, transparent); }
  }


  /* ticker: utility-bar announcements scroll as a marquee.
     UtilityBarF renders the notice row twice — the second copy is
     aria-hidden and hidden outright until this animation turns it on.
     Two identical tracks translated a full width left is what makes the
     loop seamless; with one track the row would visibly snap back.

     Duration scales with nothing — a fixed 28s reads steady whether the
     shop wrote one line or five, and the row simply repeats sooner when
     there is less of it. Paused on hover so a reader can finish a line
     they care about, which is the difference between an announcement and
     a thing that scrolls past.

     Living inside the reduced-motion guard is the whole safety story:
     without it the bar is a static centred row and every notice is still
     on the page. */
  [data-animation="ticker"] + [data-section="utility-bar"] .ub-notice__viewport {
    overflow: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  [data-animation="ticker"] + [data-section="utility-bar"] .ub-notice__track {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    animation: ta-ub-ticker 28s linear infinite;
  }
  [data-animation="ticker"] + [data-section="utility-bar"] .ub-notice__track--loop {
    display: flex;
  }
  [data-animation="ticker"] + [data-section="utility-bar"] .ub-notice:hover .ub-notice__track {
    animation-play-state: paused;
  }
  @keyframes ta-ub-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }

} /* end @media prefers-reduced-motion */

/* ============================================================
   Upcoming Events section — added 2026-06-04
   Variants A (3-col cards), B (featured + list), C (date-rail),
   D (marquee ticker). Empty data state returns null at the
   component level so the section vanishes for non-attending
   tenants — no defensive CSS needed.
   ============================================================ */
[data-section="events"] .events-section {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: 64px 24px;
}
[data-section="events"] .events-section__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 8px;
}
[data-section="events"] .events-section__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  margin: 0 0 32px;
  line-height: 1.1;
}
@media (max-width: 720px) {
  [data-section="events"] .events-section { padding: 48px 16px; }
}

/* Variant A — 3-col cards */
[data-section="events"][data-variant="a"] .events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
[data-section="events"][data-variant="a"] .events-grid__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
[data-section="events"][data-variant="a"] .events-grid__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
[data-section="events"][data-variant="a"] .events-grid__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
[data-section="events"][data-variant="a"] .events-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-section="events"][data-variant="a"] .events-grid__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-section="events"][data-variant="a"] .events-grid__name {
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
[data-section="events"][data-variant="a"] .events-grid__date {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}
[data-section="events"][data-variant="a"] .events-grid__loc {
  font-size: 13px;
  opacity: 0.65;
}
@media (max-width: 980px) {
  [data-section="events"][data-variant="a"] .events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  [data-section="events"][data-variant="a"] .events-grid { grid-template-columns: 1fr; }
}

/* Variant B — Featured + list */
[data-section="events"][data-variant="b"] .events-feat {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 24px;
}
[data-section="events"][data-variant="b"] .events-feat__img-wrap {
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.04);
}
[data-section="events"][data-variant="b"] .events-feat__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-section="events"][data-variant="b"] .events-feat__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
[data-section="events"][data-variant="b"] .events-feat__date {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}
[data-section="events"][data-variant="b"] .events-feat__name {
  font-family: var(--font-heading, inherit);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  margin: 0;
  line-height: 1.15;
}
[data-section="events"][data-variant="b"] .events-feat__loc {
  font-size: 14px;
  opacity: 0.7;
}
[data-section="events"][data-variant="b"] .events-feat__role {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
[data-section="events"][data-variant="b"] .events-feat__cta {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
}
[data-section="events"][data-variant="b"] .events-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
[data-section="events"][data-variant="b"] .events-list__row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
[data-section="events"][data-variant="b"] .events-list__row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
[data-section="events"][data-variant="b"] .events-list__link {
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}
[data-section="events"][data-variant="b"] .events-list__date {
  font-weight: 700;
  letter-spacing: 0.04em;
}
[data-section="events"][data-variant="b"] .events-list__name {
  font-family: var(--font-heading, inherit);
  font-weight: 600;
}
[data-section="events"][data-variant="b"] .events-list__loc {
  opacity: 0.65;
  text-align: right;
}
@media (max-width: 720px) {
  [data-section="events"][data-variant="b"] .events-feat { grid-template-columns: 1fr; }
  [data-section="events"][data-variant="b"] .events-feat__body { padding: 18px 16px 22px; }
  [data-section="events"][data-variant="b"] .events-list__link {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 12px 4px;
  }
  [data-section="events"][data-variant="b"] .events-list__loc { text-align: left; }
}

/* Variant C — Date-rail list */
[data-section="events"][data-variant="c"] .events-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-section="events"][data-variant="c"] .events-rail__link {
  display: grid;
  grid-template-columns: 64px 1fr 24px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  text-decoration: none;
  color: inherit;
  transition: background 160ms ease;
}
[data-section="events"][data-variant="c"] .events-rail__link:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-section="events"][data-variant="c"] .events-rail__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  line-height: 1;
}
[data-section="events"][data-variant="c"] .events-rail__month {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
[data-section="events"][data-variant="c"] .events-rail__day {
  font-family: var(--font-heading, inherit);
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}
[data-section="events"][data-variant="c"] .events-rail__name {
  font-family: var(--font-heading, inherit);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}
[data-section="events"][data-variant="c"] .events-rail__meta {
  font-size: 12px;
  opacity: 0.65;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
[data-section="events"][data-variant="c"] .events-rail__sep {
  opacity: 0.5;
}
[data-section="events"][data-variant="c"] .events-rail__cta {
  font-size: 16px;
  opacity: 0.6;
  text-align: right;
}
@media (max-width: 480px) {
  [data-section="events"][data-variant="c"] .events-rail__link {
    grid-template-columns: 54px 1fr;
  }
  [data-section="events"][data-variant="c"] .events-rail__cta { display: none; }
}

/* Variant D — Marquee ticker */
[data-section="events"][data-variant="d"] .events-marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
[data-section="events"][data-variant="d"] .events-marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: ta-events-marquee 40s linear infinite;
}
[data-section="events"][data-variant="d"] .events-marquee__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  font-size: 14px;
  transition: background 160ms ease;
}
[data-section="events"][data-variant="d"] .events-marquee__chip:hover {
  background: rgba(255, 255, 255, 0.1);
}
[data-section="events"][data-variant="d"] .events-marquee__date {
  font-weight: 700;
  letter-spacing: 0.06em;
}
[data-section="events"][data-variant="d"] .events-marquee__name {
  font-family: var(--font-heading, inherit);
  font-weight: 600;
}
[data-section="events"][data-variant="d"] .events-marquee__loc {
  opacity: 0.65;
}
[data-section="events"][data-variant="d"] .events-marquee:hover .events-marquee__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  [data-section="events"][data-variant="d"] .events-marquee__track { animation: none; }
}
@keyframes ta-events-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Hero — Variant J (tile mosaic)
   Studio-family hero modeled on Darkside Tattoo's legacy home:
   a small title block above a full-bleed 12-tile mosaic of work.
   ============================================================ */
[data-section="hero"][data-variant="j"] .hero-mosaic {
  padding: 40px 0 0;
}
[data-section="hero"][data-variant="j"] .hero-mosaic__header {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: 0 24px 28px;
  text-align: center;
}
[data-section="hero"][data-variant="j"] .hero-mosaic__eyebrow {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted, var(--text)) 75%, var(--text));
  margin: 0 0 10px;
}
/* See HeroJ: set past 40 characters, when the eyebrow is an operator-typed
   heading rather than the short "Tattoo Studio · City, ST" label. */
[data-section="hero"][data-variant="j"] .hero-mosaic__eyebrow[data-longform] {
  font-family: var(--font-display, inherit);
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-transform: none;
  line-height: 1.3;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}
[data-section="hero"][data-variant="j"] .hero-mosaic__name {
  font-family: var(--font-heading, inherit);
  font-size: clamp(54px, 8vw, 104px);
  font-weight: 600;
  line-height: 1.0;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
[data-section="hero"][data-variant="j"] .hero-mosaic__name .accent {
  color: var(--accent-text, currentColor);
}
[data-section="hero"][data-variant="j"] .hero-mosaic__lede {
  font-family: var(--font-body, inherit);
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-secondary, var(--text));
  opacity: 0.8;
  margin: 0 0 28px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
[data-section="hero"][data-variant="j"] .hero-mosaic__buttons {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
[data-section="hero"][data-variant="j"] .hero-mosaic__cta-solid,
[data-section="hero"][data-variant="j"] .hero-mosaic__cta-ghost {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
[data-section="hero"][data-variant="j"] .hero-mosaic__cta-solid {
  background: var(--accent, #dcb96a);
  color: var(--accent-contrast, var(--bg, #0c0c0c));
}
[data-section="hero"][data-variant="j"] .hero-mosaic__cta-solid:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
[data-section="hero"][data-variant="j"] .hero-mosaic__cta-ghost {
  background: transparent;
  color: var(--text, #ece6dc);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
[data-section="hero"][data-variant="j"] .hero-mosaic__cta-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--muted);
}

/* Full-bleed 12-tile grid: 4 cols × 3 rows on desktop. Each tile is
   1:1 square; the whole grid stretches edge-to-edge so the mosaic
   reads as a single visual block. */
[data-section="hero"][data-variant="j"] .hero-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  width: 100%;
}
/* Count-aware columns so a thin tenant's mosaic fills evenly instead of a
   ragged half-empty last row (2026-07-25 audit, gap 1). 12+ keeps the 4-col
   mosaic; fewer images step the column count down so every row is full. */
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="1"] { grid-template-columns: 1fr; }
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="5"],
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="7"],
[data-section="hero"][data-variant="j"] .hero-mosaic__grid[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
[data-section="hero"][data-variant="j"] .hero-mosaic__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
[data-section="hero"][data-variant="j"] .hero-mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease, filter 320ms ease;
  filter: saturate(0.95);
}
[data-section="hero"][data-variant="j"] .hero-mosaic__tile:hover img {
  transform: scale(1.04);
  filter: saturate(1.1);
}

@media (max-width: 980px) {
  [data-section="hero"][data-variant="j"] .hero-mosaic__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  [data-section="hero"][data-variant="j"] .hero-mosaic__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-section="hero"][data-variant="j"] .hero-mosaic { padding-top: 40px; }
  [data-section="hero"][data-variant="j"] .hero-mosaic__header { padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-section="hero"][data-variant="j"] .hero-mosaic__tile img { transition: none; }
  [data-section="hero"][data-variant="j"] .hero-mosaic__tile:hover img { transform: none; }
}

/* ============================================================
   About — Variant C, studio-family additions
   The studio branch drops the portrait + adds an eyebrow / CTA in
   the identity column. Classes layered onto the existing about-essay
   styles so the layout, drop-cap, and pull-quote treatments cascade.
   ============================================================ */
[data-section="about"][data-variant="c"] .about-essay__eyebrow {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text, currentColor);
  margin: 0 0 14px;
}
[data-section="about"][data-variant="c"] .about-essay__cta {
  display: inline-block;
  margin-top: 22px;
  padding: 12px 22px;
  border-radius: 4px;
  background: var(--accent, #dcb96a);
  color: var(--accent-contrast, var(--bg, #0c0c0c));
  font-family: var(--font-body, inherit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}
[data-section="about"][data-variant="c"] .about-essay__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* ============================================================
   Services — Variant A image-led card (svc-card--image)
   Layered onto the existing svc-card grid so icon-led + image-led
   cards align in the same row. Photo on top in a 16:9 frame.
   ============================================================ */
[data-section="services"][data-variant="a"] .svc-card--image {
  padding: 0;
  overflow: hidden;
}
[data-section="services"][data-variant="a"] .svc-card--image .svc-card__img-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 18px;
}
[data-section="services"][data-variant="a"] .svc-card--image .svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
[data-section="services"][data-variant="a"] .svc-card--image:hover .svc-card__img {
  transform: scale(1.04);
}
[data-section="services"][data-variant="a"] .svc-card--image .svc-card__name,
[data-section="services"][data-variant="a"] .svc-card--image .svc-card__desc,
[data-section="services"][data-variant="a"] .svc-card--image .svc-card__link {
  padding-left: 22px;
  padding-right: 22px;
}
[data-section="services"][data-variant="a"] .svc-card--image .svc-card__link {
  padding-bottom: 22px;
}
@media (prefers-reduced-motion: reduce) {
  [data-section="services"][data-variant="a"] .svc-card--image .svc-card__img { transition: none; }
  [data-section="services"][data-variant="a"] .svc-card--image:hover .svc-card__img { transform: none; }
}

/* ============================================================
   Roster — Variant F bottom CTA ("Meet the {Studio} Crew")
   ============================================================ */
[data-section="roster"][data-variant="f"] .roster-circular__footer {
  margin-top: 40px;
  text-align: center;
}
[data-section="roster"][data-variant="f"] .roster-circular__crew-cta {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 4px;
  background: var(--accent, #dcb96a);
  color: var(--accent-contrast, var(--bg, #0c0c0c));
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}
[data-section="roster"][data-variant="f"] .roster-circular__crew-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* ============================================================
   Feature spotlight — variants A (single image + intro + CTA)
   and B (3-up grid + intro + CTA). Renders only when the tenant
   sets feature_image_type AND the matching gallery has images.
   ============================================================ */
[data-section="feature"] .feature-spotlight,
[data-section="feature"] .feature-grid {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: 64px 24px;
}

/* Variant A — split image + body */
[data-section="feature"][data-variant="a"] .feature-spotlight {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
[data-section="feature"][data-variant="a"] .feature-spotlight__img-wrap {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
[data-section="feature"][data-variant="a"] .feature-spotlight__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-section="feature"][data-variant="a"] .feature-spotlight__eyebrow {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text, currentColor);
  margin-bottom: 14px;
}
[data-section="feature"][data-variant="a"] .feature-spotlight__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 18px;
}
[data-section="feature"][data-variant="a"] .feature-spotlight__intro {
  font-family: var(--font-body, inherit);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary, var(--text));
  opacity: 0.85;
  margin: 0 0 28px;
  max-width: 480px;
}
[data-section="feature"][data-variant="a"] .feature-spotlight__cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--accent, #dcb96a);
  color: var(--accent-contrast, var(--bg, #0c0c0c));
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}
[data-section="feature"][data-variant="a"] .feature-spotlight__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
@media (max-width: 720px) {
  [data-section="feature"][data-variant="a"] .feature-spotlight {
    grid-template-columns: 1fr;
  }
}

/* Variant B — 3-up grid + framed copy */
[data-section="feature"][data-variant="b"] .feature-grid__head {
  text-align: center;
  margin-bottom: 32px;
}
[data-section="feature"][data-variant="b"] .feature-grid__eyebrow {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text, currentColor);
  margin-bottom: 12px;
}
[data-section="feature"][data-variant="b"] .feature-grid__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 14px;
}
[data-section="feature"][data-variant="b"] .feature-grid__intro {
  font-family: var(--font-body, inherit);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, var(--text));
  opacity: 0.85;
  margin: 0 auto;
  max-width: 640px;
}
[data-section="feature"][data-variant="b"] .feature-grid__cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
[data-section="feature"][data-variant="b"] .feature-grid__cell {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
[data-section="feature"][data-variant="b"] .feature-grid__cell img,
[data-section="feature"][data-variant="b"] .feature-grid__cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
[data-section="feature"][data-variant="b"] .feature-grid__cell:hover img,
[data-section="feature"][data-variant="b"] .feature-grid__cell:hover video {
  transform: scale(1.04);
}
[data-section="feature"][data-variant="b"] .feature-grid__footer {
  margin-top: 28px;
  text-align: center;
}
[data-section="feature"][data-variant="b"] .feature-grid__cta {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  background: var(--accent, #dcb96a);
  color: var(--accent-contrast, var(--bg, #0c0c0c));
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease;
}
[data-section="feature"][data-variant="b"] .feature-grid__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
@media (max-width: 720px) {
  [data-section="feature"][data-variant="b"] .feature-grid__cells {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-section="feature"][data-variant="b"] .feature-grid__cell img,
  [data-section="feature"][data-variant="b"] .feature-grid__cell video { transition: none; }
  [data-section="feature"][data-variant="b"] .feature-grid__cell:hover img,
  [data-section="feature"][data-variant="b"] .feature-grid__cell:hover video { transform: none; }
}

/* ============================================================
   Newsletter — variants A (inline banner) + B (card form).
   Form posts to /api/newsletter/subscribe which redirects back
   with ?subscribed=1#newsletter — page can light up a thanks
   message off that param if it wants.
   ============================================================ */
[data-section="newsletter"] .newsletter-banner,
[data-section="newsletter"] .newsletter-card {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: 56px 24px;
}

/* Variant A — inline banner. One-to-one with the live
   darksidetattoo.com "Fresh Tattoos Emailed Weekly:" strip
   (2026-07-11): dark #2e2e2e inset band, 20px bold white title,
   white input, gray #787879 button with white bold label. */
[data-section="newsletter"][data-variant="a"] .newsletter-banner__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 32px;
  border-radius: 5px;
  background: #2e2e2e;
  border: none;
}
[data-section="newsletter"][data-variant="a"] .newsletter-banner__title {
  font-family: var(--font-heading, inherit);
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
  line-height: 1.3;
}
[data-section="newsletter"][data-variant="a"] .newsletter-banner__intro {
  font-family: var(--font-body, inherit);
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
  opacity: 0.9;
  margin: 0;
}
[data-section="newsletter"][data-variant="a"] .newsletter-banner__form {
  display: flex;
  gap: 8px;
}
[data-section="newsletter"][data-variant="a"] .newsletter-banner__input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 4px;
  border: 1px solid #9a9a9a;
  background: #ffffff;
  color: #2e2e2e;
  font-family: var(--font-body, inherit);
  font-size: 14px;
}
[data-section="newsletter"][data-variant="a"] .newsletter-banner__input:focus {
  outline: none;
  border-color: #636363;
}
[data-section="newsletter"][data-variant="a"] .newsletter-banner__button {
  padding: 12px 22px;
  border-radius: 4px;
  border: 0;
  background: #767677;
  color: #ffffff;
  font-family: var(--font-heading, inherit);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}
[data-section="newsletter"][data-variant="a"] .newsletter-banner__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
@media (max-width: 720px) {
  [data-section="newsletter"][data-variant="a"] .newsletter-banner__inner {
    grid-template-columns: 1fr;
  }
  [data-section="newsletter"][data-variant="a"] .newsletter-banner__form {
    flex-direction: column;
  }
}

/* Variant B — boxed card */
[data-section="newsletter"][data-variant="b"] .newsletter-card {
  max-width: 640px;
  text-align: center;
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__eyebrow {
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text, currentColor);
  margin-bottom: 10px;
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__title {
  font-family: var(--font-heading, inherit);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 16px;
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__intro {
  font-family: var(--font-body, inherit);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary, var(--text));
  opacity: 0.85;
  margin: 0 auto 24px;
  max-width: 480px;
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__form {
  display: inline-flex;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #ece6dc);
  font-family: var(--font-body, inherit);
  font-size: 14px;
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__input:focus {
  outline: none;
  border-color: var(--accent, #dcb96a);
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__button {
  padding: 14px 26px;
  border-radius: 4px;
  border: 0;
  background: var(--accent, #dcb96a);
  color: var(--accent-contrast, var(--bg, #0c0c0c));
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}
[data-section="newsletter"][data-variant="b"] .newsletter-card__button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
@media (max-width: 540px) {
  [data-section="newsletter"][data-variant="b"] .newsletter-card__form {
    flex-direction: column;
  }
}

/* ============================================================
   Hero — Variant K (hero-studio-interior-sigil)
   Full-bleed studio-interior bg + multi-paragraph intro + optional
   foreground sigil + rectangular CTA. Models the legacy
   darksidetattoo.com home: dim photographic backdrop, copy LEFT,
   brand graphic RIGHT, CTA centered under the copy.
   ============================================================ */
[data-section="hero"][data-variant="k"] .hero-sigil {
  position: relative;
  width: 100%;
  background-color: var(--bg, #0c0c0c);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 64px 24px;
  min-height: 600px;
  display: flex;
  align-items: center;
}
[data-section="hero"][data-variant="k"] .hero-sigil__bgvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
[data-section="hero"][data-variant="k"] .hero-sigil__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55));
  z-index: 1;
}
/* Reduced-motion / no-autoplay: hide the clip so the bg image (poster) shows. */
@media (prefers-reduced-motion: reduce) {
  [data-section="hero"][data-variant="k"] .hero-sigil__bgvideo { display: none; }
}
[data-section="hero"][data-variant="k"] .hero-sigil__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  max-width: var(--theme-content-max, 1280px);
  margin: 0 auto;
  width: 100%;
  align-items: center;
}
[data-section="hero"][data-variant="k"] .hero-sigil__copy {
  color: var(--text, #ece6dc);
}
[data-section="hero"][data-variant="k"] .hero-sigil__h1 {
  font-family: var(--font-heading, inherit);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 24px;
  color: var(--text, #fff);
}
[data-section="hero"][data-variant="k"] .hero-sigil__intro p {
  font-family: var(--font-body, inherit);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text, #ece6dc);
  margin: 0 0 18px;
  max-width: 640px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
[data-section="hero"][data-variant="k"] .hero-sigil__cta {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(220, 80, 80, 0.85);
  color: var(--text, #fff);
  font-family: var(--font-body, inherit);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: background 160ms ease, transform 160ms ease;
}
[data-section="hero"][data-variant="k"] .hero-sigil__cta:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}
[data-section="hero"][data-variant="k"] .hero-sigil__fg {
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-section="hero"][data-variant="k"] .hero-sigil__fg img,
[data-section="hero"][data-variant="k"] .hero-sigil__fg video {
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(255, 60, 60, 0.4));
}
@media (max-width: 900px) {
  [data-section="hero"][data-variant="k"] .hero-sigil__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  [data-section="hero"][data-variant="k"] .hero-sigil__intro p {
    margin-left: auto; margin-right: auto;
  }
  [data-section="hero"][data-variant="k"] .hero-sigil__fg {
    order: -1;
  }
  [data-section="hero"][data-variant="k"] .hero-sigil__fg img {
    max-height: 280px;
  }
}

/* ============================================================
   Roster — Variant H (name-above-large-square-row)
   Name on TOP, portrait work image below in a tall 3:4 aspect
   ratio, all artists in ONE compact horizontal row. One-to-one
   with the live darksidetattoo.com "Darkside's Tattoo Artists:"
   strip (GHL build, values pulled from its generated CSS
   2026-07-10): 18px Montserrat headings, images framed by 10px
   padding on a #2e2e2e block (the "gray border" is that frame,
   not a CSS border), gray #787879 CTA with 2px #C90000 border.
   ============================================================ */
[data-section="roster"][data-variant="h"] .roster-rowcards {
  padding: 48px 24px;
  max-width: var(--theme-content-max-wide, 1400px);
  margin: 0 auto;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__heading {
  /* Live: h2 > strong, font-size 18px !important, white, centered. */
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  margin: 0 0 24px;
  color: var(--text, #ffffff);
}
[data-section="roster"][data-variant="h"] .roster-rowcards__strip {
  /* One compact row of narrow columns — mirrors the live
     darksidetattoo.com "Darkside's Tattoo Artists:" strip, where all
     artists sit side-by-side (~185px per column at 7 artists) with
     name on top, portrait work image, style caption below.

     GRID, not flex-wrap (2026-08-05). Wrapping fills each line greedily,
     so Darkside's 8 artists went 7 + 1-alone-and-centered. A grid with an
     explicit column count splits them evenly instead; the count comes in
     as --roster-cols from RosterH.tsx:balancedColumns, because CSS cannot
     count its own children. The fallback keeps a sane layout if the
     custom property is ever missing. */
  display: grid;
  grid-template-columns: repeat(var(--roster-cols, 4), minmax(0, 215px));
  justify-content: center;
  gap: 32px 18px;
  margin: 0 auto;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__card {
  /* Width now comes from the grid track, not from flex-basis. min-width:0
     lets a track shrink below the image's intrinsic width on narrow
     viewports instead of overflowing the page. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__card:hover {
  transform: translateY(-2px);
}
[data-section="roster"][data-variant="h"] .roster-rowcards__name {
  /* Live: h2 link, 18px, weight 400, white, line-height 1.3em,
     padding 10px 0, centered. */
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  color: var(--text, #ffffff);
  margin: 0;
  padding: 10px 0;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__img-wrap {
  /* Live: .image-container { padding: 10px; background: #2e2e2e } —
     the visible gray frame around each work image is this padded
     block, NOT a CSS border. Square corners, no radius. */
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 10px;
  background: #2e2e2e;
  border-radius: 0;
  border: none;
  box-sizing: border-box;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__img-blank {
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.04);
}
/* Tablet — rebalance against a 4-column ceiling. A grid column count is a
   fixed number, so the balanced count for this width is computed
   separately and passed as its own custom property. */
@media (max-width: 1024px) {
  [data-section="roster"][data-variant="h"] .roster-rowcards__strip {
    grid-template-columns: repeat(var(--roster-cols-md, 3), minmax(0, 215px));
  }
}
/* Phone — always two, whatever the roster size. */
@media (max-width: 640px) {
  [data-section="roster"][data-variant="h"] .roster-rowcards__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-section="roster"][data-variant="h"] .roster-rowcards__card { transition: none; }
  [data-section="roster"][data-variant="h"] .roster-rowcards__card:hover { transform: none; }
}

/* ============================================================
   Roster — Variant H (legacy match update)
   Style caption below the image + bottom "Meet the Crew" CTA.
   Live renders the style as an 18px heading-font text block under
   each work image ("Black and Gray / Realism"), white, centered.
   ============================================================ */
[data-section="roster"][data-variant="h"] .roster-rowcards__styles {
  /* Live: h2 lines, 18px, weight 400, white, line-height 1.3em,
     padding 10px 0, centered. Each style stacks as its own centered
     line — live breaks the caption over two lines. */
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: var(--text, #ffffff);
  margin: 0;
  padding: 10px 0;
  line-height: 1.3;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__style-line {
  display: block;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__footer {
  margin-top: 32px;
  text-align: center;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__cta {
  /* Live: gray #787879 fill, 2px solid #C90000 border, radius 5px,
     padding 10px 32px, 18px bold white Montserrat with a hard
     3px 3px 2px #000 text-shadow. */
  display: inline-block;
  padding: 10px 32px;
  border-radius: 5px;
  background: #767677;
  border: 2px solid #c90000;
  color: #ffffff;
  font-family: var(--font-heading, inherit);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: 3px 3px 2px #000000;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
[data-section="roster"][data-variant="h"] .roster-rowcards__cta:hover {
  background: #8a8a8b;
  transform: translateY(-1px);
}

/* ============================================================
   Services — Variant F (name-first column row)
   Single horizontal row of 6 cards. Name on top, tall portrait
   image below, description below the image. No per-card CTA.
   Matches legacy darksidetattoo.com "Featured Tattoo Services".
   ============================================================ */
/* One-to-one with live darksidetattoo.com (GHL generated CSS,
   extracted 2026-07-11): full-width #787879 gray band, white
   text-shadowed heading, service names 20px bold white, images in
   10px-padded #2e2e2e frames, white bold descriptions. */
[data-section="services"][data-variant="f"] {
  background: #767677;
}
[data-section="services"][data-variant="f"] .svc-namecol {
  max-width: var(--theme-content-max-wide, 1400px);
  margin: 0 auto;
  padding: 40px 24px 56px;
}
[data-section="services"][data-variant="f"] .svc-namecol__header {
  text-align: center;
  margin-bottom: 24px;
}
[data-section="services"][data-variant="f"] .svc-namecol__eyebrow {
  /* Live: content font, uppercase, letter-spacing 2px, #C9D8E0. */
  font-family: var(--font-body, inherit);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 2;
  margin-bottom: 4px;
}
[data-section="services"][data-variant="f"] .svc-namecol__heading {
  /* Live: 28px bold white, text-shadow 3px 3px 2px #000, ls -1px. */
  font-family: var(--font-heading, inherit);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 0;
  color: #ffffff;
  text-shadow: 3px 3px 2px #000000;
}
[data-section="services"][data-variant="f"] .svc-namecol__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
[data-section="services"][data-variant="f"] .svc-namecol__card {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 12px;
}
[data-section="services"][data-variant="f"] .svc-namecol__name {
  /* Live: 20px bold white. */
  font-family: var(--font-heading, inherit);
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  padding: 0 4px;
  letter-spacing: -1px;
}
[data-section="services"][data-variant="f"] .svc-namecol__img-wrap {
  /* Live: .image-container { padding: 10px; background: #2e2e2e } —
     same padded-frame treatment as the artist roster. Square corners. */
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 10px;
  background: #2e2e2e;
  border-radius: 0;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}
[data-section="services"][data-variant="f"] .svc-namecol__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-section="services"][data-variant="f"] .svc-namecol__desc {
  /* Live: white bold Montserrat, ~14px, line-height 1.5. */
  font-family: var(--font-body, inherit);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
  padding: 0 4px;
}
@media (max-width: 1100px) {
  [data-section="services"][data-variant="f"] .svc-namecol__row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  [data-section="services"][data-variant="f"] .svc-namecol__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Feature — Variant C (3-image strip + overlay CTA)
   Mirrors legacy darksidetattoo.com "Body Piercing by Melinda OHara":
   centered eyebrow + heading above, 3-image row below, CTA pill
   overlaid on the bottom of the leftmost image.
   ============================================================ */
/* One-to-one with live darksidetattoo.com (GHL generated CSS,
   extracted 2026-07-11): full-width #d9d9d9 light-gray band, white
   text-shadowed heading, images in 10px-padded #636363 frames
   (left 4:3, middle 16:9 unframed + vertically centered, right 3:4
   tall), CTA BELOW the left image — gray fill, 2px red border. */
[data-section="feature"][data-variant="c"] {
  background: #d9d9d9;
}
[data-section="feature"][data-variant="c"] .feature-strip {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: 40px 24px 56px;
}
[data-section="feature"][data-variant="c"] .feature-strip__head {
  text-align: center;
  margin-bottom: 28px;
}
[data-section="feature"][data-variant="c"] .feature-strip__eyebrow {
  font-family: var(--font-body, inherit);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #636363;
  line-height: 2;
  margin-bottom: 4px;
}
[data-section="feature"][data-variant="c"] .feature-strip__heading {
  font-family: var(--font-heading, inherit);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 0;
  color: #ffffff;
  text-shadow: 3px 3px 2px #000000;
}
[data-section="feature"][data-variant="c"] .feature-strip__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
[data-section="feature"][data-variant="c"] .feature-strip__col {
  display: flex;
  flex-direction: column;
}
[data-section="feature"][data-variant="c"] .feature-strip__col:nth-child(2) {
  align-self: center;
}
[data-section="feature"][data-variant="c"] .feature-strip__tile {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  padding: 10px;
  background: #5f5f5f;
  border-radius: 0;
  border: none;
  box-sizing: border-box;
}
[data-section="feature"][data-variant="c"] .feature-strip__col:nth-child(2) .feature-strip__tile {
  /* middle slot is the live site's video — wide and unframed */
  aspect-ratio: 16 / 9;
  padding: 0;
  background: transparent;
}
[data-section="feature"][data-variant="c"] .feature-strip__col:nth-child(3) .feature-strip__tile {
  aspect-ratio: 3 / 4;
}
[data-section="feature"][data-variant="c"] .feature-strip__tile img,
[data-section="feature"][data-variant="c"] .feature-strip__tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Live: gray #787879 fill, 2px solid red border, radius 5px, 22px/600
   white with 2px 2px 2px #000 text-shadow, sits below the left image. */
[data-section="feature"][data-variant="c"] .feature-strip__cta {
  align-self: flex-start;
  margin-top: 28px;
  padding: 8px 16px;
  background: #767677;
  border: 2px solid #e93d3d;
  color: #ffffff;
  font-family: var(--font-heading, inherit);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 2px 2px 2px #000000;
  text-decoration: none;
  border-radius: 5px;
  text-align: center;
  transition: background 160ms ease, transform 160ms ease;
}
[data-section="feature"][data-variant="c"] .feature-strip__cta:hover {
  background: #8a8a8b;
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  [data-section="feature"][data-variant="c"] .feature-strip__row {
    grid-template-columns: 1fr;
  }
  [data-section="feature"][data-variant="c"] .feature-strip__cta {
    font-size: 18px;
  }
}

/* ============================================================
   Footer — Variant F (Legacy 4-col directory)
   Mirrors darksidetattoo.com's footer: 4 directory columns
   (COMPANY / CUSTOMER CARE / INFO / LEGAL), brand block below,
   bottom copyright bar.
   ============================================================ */
[data-section="footer"][data-variant="f"] .footer-directory {
  /* One-to-one with live darksidetattoo.com footer (2026-07-11):
     #D9D9D9 light-gray band, near-black #000321 headings/links. */
  background: #d9d9d9;
  border-top: none;
  padding: 40px 32px 20px;
  color: #1a1a1a;
}
[data-section="footer"][data-variant="f"] .footer-directory__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto 48px;
}
[data-section="footer"][data-variant="f"] .footer-directory__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
[data-section="footer"][data-variant="f"] .footer-directory__heading {
  /* Live: 17px/600 headline font, #000321. */
  font-family: var(--font-heading, inherit);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000321;
  margin: 0;
}
[data-section="footer"][data-variant="f"] .footer-directory__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-section="footer"][data-variant="f"] .footer-directory__list a {
  font-family: var(--font-body, inherit);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000321;
  text-decoration: none;
  transition: color 160ms ease;
}
[data-section="footer"][data-variant="f"] .footer-directory__list a:hover {
  color: #c90000;
}

/* Brand block — centered logo / wordmark + NAP + socials */
[data-section="footer"][data-variant="f"] .footer-directory__brand {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
[data-section="footer"][data-variant="f"] .footer-directory__logo {
  max-height: 80px;
  width: auto;
}
[data-section="footer"][data-variant="f"] .footer-directory__wordmark {
  font-family: var(--font-heading, inherit);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #000321;
}
[data-section="footer"][data-variant="f"] .footer-directory__nap {
  font-style: normal;
  font-family: var(--font-body, inherit);
  font-size: 13px;
  line-height: 1.7;
  color: #1a1a1a;
}
[data-section="footer"][data-variant="f"] .footer-directory__nap a {
  color: inherit;
  text-decoration: none;
}
[data-section="footer"][data-variant="f"] .footer-directory__nap a:hover {
  color: #c90000;
}
[data-section="footer"][data-variant="f"] .footer-directory__hours {
  margin-top: 6px;
  font-size: 12px;
  color: #1a1a1a;
}
[data-section="footer"][data-variant="f"] .footer-directory__hours-label {
  font-weight: 600;
}

/* Socials row — small circular pills */
[data-section="footer"][data-variant="f"] .footer-directory__socials {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
[data-section="footer"][data-variant="f"] .footer-directory__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #2e2e2e;
  color: #ffffff;
  font-family: var(--font-body, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 160ms ease;
}
[data-section="footer"][data-variant="f"] .footer-directory__social:hover {
  background: #c90000;
  color: #ffffff;
}

/* Bottom bar — copyright + powered by */
[data-section="footer"][data-variant="f"] .footer-directory__bar {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-body, inherit);
  font-size: 12px;
  color: #1a1a1a;
}
[data-section="footer"][data-variant="f"] .footer-directory__powered {
  opacity: 0.75;
}
[data-section="footer"][data-variant="f"] .footer-directory__powered a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
[data-section="footer"][data-variant="f"] .footer-directory__powered a:hover {
  text-decoration: underline;
}
[data-section="footer"][data-variant="f"] .footer-directory__bar a {
  color: inherit;
  text-decoration: none;
}
[data-section="footer"][data-variant="f"] .footer-directory__bar a:hover {
  color: #c90000;
}

@media (max-width: 900px) {
  [data-section="footer"][data-variant="f"] .footer-directory__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}
@media (max-width: 540px) {
  [data-section="footer"][data-variant="f"] .footer-directory__grid {
    grid-template-columns: 1fr;
  }
  [data-section="footer"][data-variant="f"] .footer-directory__bar {
    flex-direction: column;
    text-align: center;
  }
}

/* GBP testimonials Phase 2 — author avatar + via-Google source marker (display-only) */
.testi-card__avatar,.testi-single__avatar,.testi-google__avatar,.testi-float__avatar,.testi-type__avatar{border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:8px}
.testi-card__src,.testi-single__src,.testi-google__src,.testi-float__src,.testi-type__src{color:var(--muted);font-size:.85em}

/* Testimonials F/G/H — DELIBERATE bare-class blocks, not variant-scoped.
   These three ship one root class each (.testi-bar / .testi-strip / the
   ReviewPopup classes) with no [data-section][data-variant] prefix. The
   classes are unique to their variant so there is no collision risk; a
   per-variant CSS *presence* sweep must treat these as covered (2026-08-06
   audit F-6 — the sweep false-alarmed on them once already). */
/* Variant F — static featured-quote bar */
.testi-bar{max-width:880px;margin:0 auto;padding:32px 24px;text-align:center}
.testi-bar__item{margin:0}
.testi-bar__quote{font-size:1.25rem;line-height:1.5;font-style:italic;margin:0 0 12px}
.testi-bar__attr{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.testi-bar__avatar{border-radius:50%;object-fit:cover}
.testi-bar__stars{color:#f5b301}
.testi-bar__src{opacity:.65;font-size:.85em}

/* Variant G — horizontal scrolling strip */
.testi-strip{padding:24px 0}
.testi-strip__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px;-webkit-overflow-scrolling:touch}
.testi-strip__item{scroll-snap-align:start;flex:0 0 300px;background:rgba(127,127,127,.06);border:1px solid rgba(127,127,127,.18);border-radius:10px;padding:16px;margin:0}
.testi-strip__stars{color:#f5b301;font-size:.9em}
.testi-strip__quote{font-size:.95rem;line-height:1.45;margin:8px 0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.testi-strip__attr{display:flex;gap:6px;align-items:center;font-size:.85em}
.testi-strip__avatar{border-radius:50%;object-fit:cover}
.testi-strip__src{color:color-mix(in srgb, var(--muted) 75%, var(--text))}
.ti-pop{position:fixed;bottom:20px;left:20px;z-index:60}
.ti-pop__badge{display:flex;gap:6px;align-items:center;background:#fff;color:#222;border:1px solid rgba(0,0,0,.15);border-radius:24px;padding:8px 14px;box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;font:inherit}
.ti-pop__stars{color:#f5b301}
.ti-pop__num{font-weight:700}
.ti-pop__count{opacity:.7;font-size:.85em}
.ti-pop__panel{position:absolute;bottom:52px;left:0;width:340px;max-height:60vh;overflow-y:auto;background:#fff;color:#222;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.3);padding:16px}
.ti-pop__close{position:absolute;top:8px;right:10px;border:none;background:none;font-size:20px;cursor:pointer;color:#666}
.ti-pop__item{padding:12px 0;border-bottom:1px solid rgba(0,0,0,.08)}
.ti-pop__head{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.ti-pop__avatar{border-radius:50%;object-fit:cover}
.ti-pop__meta{display:flex;gap:8px;font-size:.8em}
.ti-pop__istars{color:#f5b301}
.ti-pop__date{opacity:.6}
.ti-pop__text{font-size:.9rem;line-height:1.45;margin:0}
@media(max-width:480px){.ti-pop__panel{width:calc(100vw - 40px)}}
.about-src{opacity:.55;font-size:.8em;font-style:normal}
.amen-bar{padding:20px 24px;text-align:center}
.amen-bar__list{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;list-style:none;margin:0;padding:0}
.amen-bar__item{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;opacity:.85}
.amen-bar__dot{color:var(--accent-text,#3aa757);font-weight:700}

/* =====================================================================
   UNLAYERED ON PURPOSE — do not move this inside `@layer section`.

   Everything above lives in `@layer section`, and the app's global
   stylesheet (Tailwind preflight, emitted by app/layout.tsx) is UNLAYERED
   and contains:

       img, video { max-width: 100%; height: auto }

   In the CSS cascade an unlayered declaration beats a layered one no matter
   how specific the layered selector is. So preflight's `height: auto` was
   silently winning over every image height in this file — 24 rules across
   nav logos, hero slides, gallery tiles, roster cards and feature strips.
   Visible symptom: a tenant with a logo got it rendered at full intrinsic
   size in the nav (jleifeste-art, operator screenshot 2026-07-26 — a 320x320
   logo filling the header on iPad Safari).

   `revert-layer` in an unlayered rule rolls the property back to the value
   the layered cascade would have produced, which restores all of them with
   one line. Images with no layered height rule fall back to `auto`, exactly
   as before, so this is not a behaviour change for anything else.
   ===================================================================== */
[data-section] img { height: revert-layer; }

/* ---------------------------------------------------------------------
   Belt and braces for nav logos, because `revert-layer` above is NEWER
   than `@layer` itself: Safari shipped @layer in 15.4 but revert-layer
   only in 16.4. On an iPad in that window the layered rules apply, the
   revert-layer fix is dropped as invalid, and a logo goes back to full
   intrinsic size — which is what the operator kept seeing after the first
   fix shipped.

   `max-height` is universally supported and preflight sets no max-height,
   so nothing can override these. They mirror the `height` values in the
   layer above — CHANGE BOTH IF YOU CHANGE EITHER.

   The bare [data-section="nav"] img ceiling catches any variant added
   later that forgets a cap; the per-variant rules are more specific and
   win where they exist.
   --------------------------------------------------------------------- */
[data-section="nav"] img { max-height: 80px; width: auto; }
[data-section="nav"][data-variant="b"] .nav-lc__logo { max-height: 40px; }
[data-section="nav"][data-variant="c"] .nav-hb__logo { max-height: 36px; }
[data-section="nav"][data-variant="f"] .nav-tze__brand img { max-height: 30px; }
[data-section="nav"][data-variant="g"] .nav-bzc__brand img { max-height: 30px; }
[data-section="nav"][data-variant="h"] .nav-sb__logo { max-height: 64px; }
[data-section="nav"][data-variant="i"] .nav-sbog__logo { max-height: 80px; }
[data-section="nav"][data-variant="j"] .nav-dd__brand img { max-height: 40px; }


/* ============================================================
   Footer location map — shared across every footer variant
   (operator 2026-08-03: "all footers should include maps!").
   Rendered by components/themes/sections/Footer/FooterMap.tsx,
   which returns null when the tenant has no usable address, so
   this never styles an empty box.
   ============================================================ */
[data-section="footer"] .footer-map {
  width: 100%;
  margin: 0 0 28px;
  border-radius: 6px;
  overflow: hidden;
  /* The embed is a third-party white iframe. On the dark footers that
     lands as a bright slab, so knock it back slightly and let it come
     up to full on hover/focus-within for anyone actually using it. */
  filter: saturate(0.9) contrast(0.95);
  transition: filter 0.2s ease;
}
[data-section="footer"] .footer-map:hover,
[data-section="footer"] .footer-map:focus-within {
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-section="footer"] .footer-map { transition: none; }
}

/* ---------------------------------------------------------------------------
   MediaBadge overlays (video ▶ / carousel slide-count) — the badge positions
   itself absolutely inside the tile, so every gallery-variant tile box must
   be a positioning context. A/B/C/D/F already carry position: relative in
   their own blocks; these are the ones that didn't (2026-08-06).
--------------------------------------------------------------------------- */
[data-section="gallery"][data-variant="e"] .gallery-stagger .gallery__tile,
[data-section="gallery"][data-variant="g"] .gallery-portrait-tile__img-wrap,
[data-section="gallery"][data-variant="h"] .gallery-per-artist__thumb {
  position: relative;
}

/* ============================================================
   Amenities — Variant A (amen-bar)
   Slim single-row badge strip: GBP accessibility + payment
   attributes as checkmarked pills. Sat completely unstyled from
   its landing until the 2026-08-06 section audit (F-3) — the
   classes existed in the component and nowhere else, so it
   rendered as a browser-default bulleted list. Theme tokens
   only; sits on --section-bg like every other slot.
   ============================================================ */
[data-section="amenities"] .amen-bar {
  padding: 20px 24px;
}
[data-section="amenities"] .amen-bar__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}
[data-section="amenities"] .amen-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-mid) 60%, transparent);
  white-space: nowrap;
}
[data-section="amenities"] .amen-bar__dot {
  color: var(--accent-text);
  font-size: 11px;
  line-height: 1;
}
@media (max-width: 540px) {
  [data-section="amenities"] .amen-bar { padding: 14px 16px; }
  [data-section="amenities"] .amen-bar__item { font-size: 12px; padding: 6px 11px; }
}

/* ============================================================
   Services — Variant G (services-style-index)
   Dense numbered INDEX for style taxonomies: 3-col rows of
   name + one clamped description line, thin rules between rows.
   Built for 15-28 entries, where the card variants fall apart
   (modeled on the alohatattoos.net style index, 2026-08-17).
   Fully token-driven — no hardcoded colors.
   ============================================================ */
[data-section="services"][data-variant="g"] .svc-index {
  padding: 80px 56px;
  background: var(--section-bg);
}
[data-section="services"][data-variant="g"] .svc-index__header {
  text-align: center;
  margin-bottom: 48px;
}
[data-section="services"][data-variant="g"] .svc-index__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* --accent-text, not --accent (CSS-SCALE-REVIEW R-8b). */
  color: var(--accent-text);
  margin-bottom: 14px;
}
[data-section="services"][data-variant="g"] .svc-index__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0;
}
[data-section="services"][data-variant="g"] .svc-index__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
}
[data-section="services"][data-variant="g"] .svc-index__item {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
[data-section="services"][data-variant="g"] .svc-index__num {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  /* --accent-text, not --accent (CSS-SCALE-REVIEW R-8b). */
  color: var(--accent-text);
  flex-shrink: 0;
  min-width: 22px;
}
[data-section="services"][data-variant="g"] .svc-index__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text);
  margin: 0 0 4px;
}
[data-section="services"][data-variant="g"] .svc-index__desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1024px) {
  [data-section="services"][data-variant="g"] .svc-index { padding: 64px 32px; }
  [data-section="services"][data-variant="g"] .svc-index__grid { grid-template-columns: repeat(2, 1fr); column-gap: 36px; }
}
@media (max-width: 640px) {
  [data-section="services"][data-variant="g"] .svc-index { padding: 48px 20px; }
  [data-section="services"][data-variant="g"] .svc-index__heading { font-size: 28px; }
  [data-section="services"][data-variant="g"] .svc-index__grid { grid-template-columns: 1fr; }
  [data-section="services"][data-variant="g"] .svc-index__item { padding: 14px 0; }
}

/* ============================================================
   Services — Variant H (scrolling ticker)
   A full-bleed marquee band of service NAMES in display type, a
   diamond between each. Ported from the Nevermore source ribbon
   (20s linear, translateX 0 -> -50%, list duplicated); the track
   holds two identical halves so the -50% seam is invisible.
   Non-interactive on purpose — a moving link is an unhittable
   target — and paused on hover so a name can be read.
   ============================================================ */
[data-section="services"][data-variant="h"] .svc-ticker {
  background: var(--section-bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  overflow: hidden;
}
[data-section="services"][data-variant="h"] .svc-ticker__track {
  display: flex;
  width: max-content;
  animation: svc-ticker-slide 28s linear infinite;
}
[data-section="services"][data-variant="h"] .svc-ticker:hover .svc-ticker__track {
  animation-play-state: paused;
}
[data-section="services"][data-variant="h"] .svc-ticker__row {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
[data-section="services"][data-variant="h"] .svc-ticker__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 34px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.5vw, 30px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
[data-section="services"][data-variant="h"] .svc-ticker__mark {
  font-size: 0.66em;
  color: var(--accent-text);
}
@keyframes svc-ticker-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* No motion: the band becomes a plain horizontally-scrollable strip and
     the duplicate half — which exists only for the loop — is dropped. */
  [data-section="services"][data-variant="h"] .svc-ticker { overflow-x: auto; }
  [data-section="services"][data-variant="h"] .svc-ticker__track { animation: none; }
  [data-section="services"][data-variant="h"] .svc-ticker__row + .svc-ticker__row { display: none; }
}


/* ============================================================
   Hero — Variant N (collage wave)
   Full-bleed photo; CENTRED uppercase type stack in source order —
   kicker, rule, giant accent name, accent rule, right-hung
   underlined location, then the two-tone tagline beneath — and an
   accent wave divider cut into the bottom edge. Squarespace
   fluid-engine port (Aloha, 2026-08-17). Token-driven throughout.

   The block is centred and the location alone is right-aligned:
   that contrast is the source design's, not an accident, and it
   only reads as deliberate while everything around it is centred.
   ============================================================ */
[data-section="hero"][data-variant="n"] .hero-collage {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
[data-section="hero"][data-variant="n"] .hero-collage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-section="hero"][data-variant="n"] .hero-collage__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 55%, transparent) 0%,
    color-mix(in srgb, var(--bg) 30%, transparent) 55%,
    color-mix(in srgb, var(--bg) 65%, transparent) 100%
  );
}
[data-section="hero"][data-variant="n"] .hero-collage__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: 140px 32px 160px;
  text-align: center;
}
[data-section="hero"][data-variant="n"] .hero-collage__tagline {
  font-family: var(--font-body);
  font-size: clamp(15px, 2.4vw, 22px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin: 28px 0 0;
}
[data-section="hero"][data-variant="n"] .hero-collage__tw--accent {
  /* --accent-text, not --accent: nevermore splits them (fills keep the
     deep #8e0b0b, text gets #f15050). See CSS-SCALE-REVIEW R-8b. */
  color: var(--accent-text);
}
[data-section="hero"][data-variant="n"] .hero-collage__rule {
  height: 2px;
  background: var(--text);
  opacity: 0.85;
  margin: 22px 0;
}
[data-section="hero"][data-variant="n"] .hero-collage__rule--accent {
  background: var(--accent);
  opacity: 1;
}
[data-section="hero"][data-variant="n"] .hero-collage__kicker {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.8vw, 18px);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
[data-section="hero"][data-variant="n"] .hero-collage__name {
  font-family: var(--font-display);
  font-size: clamp(44px, 9vw, 112px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* --accent-text, not --accent: this is the artist NAME, the largest
     text in the variant. See CSS-SCALE-REVIEW R-8b. */
  color: var(--accent-text);
  margin: 0;
  overflow-wrap: break-word;
}
[data-section="hero"][data-variant="n"] .hero-collage__loc {
  font-family: var(--font-body);
  font-size: clamp(18px, 3vw, 30px);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-align: right;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  /* Right-hung against the centred stack — the one deliberate break in
     the alignment, straight from the source design. */
  margin: 0;
}
[data-section="hero"][data-variant="n"] .hero-collage__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* overlap the section seam so no hairline shows */
  width: 100%;
  height: clamp(48px, 8vw, 100px);
  z-index: 3;
  display: block;
}
@media (max-width: 640px) {
  [data-section="hero"][data-variant="n"] .hero-collage { min-height: 92vh; }
  [data-section="hero"][data-variant="n"] .hero-collage__content { padding: 110px 20px 130px; }
  [data-section="hero"][data-variant="n"] .hero-collage__rule { margin: 16px 0; }
}

/* ============================================================
   Utility bar — Variant F (announcements / ticker)
   Added 2026-08-17 for the Aloha Squarespace port. The only
   utility-bar variant that carries copy rather than NAP: the lines
   come from tenants.utility_bar_notices.

   Static by default — a centred row that wraps on narrow screens, so
   every notice is readable with no motion at all. The marquee is
   opt-in through the section's animation setting ("Ticker") and its
   rules live in the prefers-reduced-motion block above; the
   duplicate track it needs is display:none here so it costs nothing
   and is never read twice.
   ============================================================ */
[data-section="utility-bar"][data-variant="f"] .ub-notice {
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-body);
}
[data-section="utility-bar"][data-variant="f"] .ub-notice__viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: 8px 20px;
}
[data-section="utility-bar"][data-variant="f"] .ub-notice__track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
[data-section="utility-bar"][data-variant="f"] .ub-notice__track--loop {
  display: none;
}
[data-section="utility-bar"][data-variant="f"] .ub-notice__item {
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  white-space: nowrap;
  padding: 2px 22px;
}
/* Separator between notices, drawn rather than typed so the markup
   stays a plain list of strings and the last item never trails one. */
[data-section="utility-bar"][data-variant="f"] .ub-notice__item + .ub-notice__item {
  border-left: 1px solid color-mix(in srgb, var(--bg) 45%, transparent);
}
@media (max-width: 640px) {
  /* Wrapping beats a 12px line: on a phone the static bar stacks and
     each notice keeps its own row. The nowrap needed by the ticker is
     re-applied by the animation rules, which only run when the operator
     asked for motion. */
  [data-section="utility-bar"][data-variant="f"] .ub-notice__item {
    white-space: normal;
    text-align: center;
    padding: 3px 14px;
  }
  [data-section="utility-bar"][data-variant="f"] .ub-notice__item + .ub-notice__item {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--bg) 30%, transparent);
  }
}

/* ============================================================
   Feature — Variant D (statement wave band)
   Full-bleed photo under a heavy accent wash, wave-cut on both
   edges, one centred sentence across it. Squarespace port
   (Aloha, 2026-08-17). Token-driven throughout.

   The waves are filled with var(--section-bg, var(--bg)) in the
   component, so the band reads as cut OUT of the page rather than
   drawn on top of it — and it still lines up on a tenant whose
   framework recipe gives this section a non-default background.
   ============================================================ */
[data-section="feature"][data-variant="d"] .feature-wave {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  isolation: isolate;
}
[data-section="feature"][data-variant="d"] .feature-wave__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The wash is what makes the text legible over an unknown photo. Heavy
   on purpose — this band is a statement, not a gallery tile, and the
   image underneath is texture. */
[data-section="feature"][data-variant="d"] .feature-wave__wash {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--accent) 86%, transparent);
}
[data-section="feature"][data-variant="d"] .feature-wave__edge {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(40px, 6vw, 90px);
  z-index: 3;
  display: block;
}
[data-section="feature"][data-variant="d"] .feature-wave__edge--top { top: -1px; }
[data-section="feature"][data-variant="d"] .feature-wave__edge--bottom { bottom: -1px; }
[data-section="feature"][data-variant="d"] .feature-wave__body {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(96px, 13vw, 190px) 28px;
  text-align: center;
}
[data-section="feature"][data-variant="d"] .feature-wave__statement {
  font-family: var(--font-display, var(--font-heading, inherit));
  font-size: clamp(22px, 3.4vw, 44px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Dark type on the accent wash. --bg rather than a literal, so a
     light-accent theme and a dark-accent theme each get the contrast
     their own palette intends. */
  color: var(--bg);
  margin: 0;
}
[data-section="feature"][data-variant="d"] .feature-wave__cta {
  display: inline-block;
  margin-top: clamp(20px, 3vw, 34px);
  font-family: var(--font-body);
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
[data-section="feature"][data-variant="d"] .feature-wave__cta:hover {
  text-decoration-thickness: 3px;
}

/* ============================================================
   Trust — Variant G (value band + address)
   Gallery — Variant I (scrolling marquee)
   About — Variant F (two-tone story)
   Consult — Variant G (closing band)

   Ported from the Aloha Tattoos custom template (2026-08-20) so the
   treatments that design proved out are available to every tenant.

   🚨 TOKEN-DRIVEN, NOT A PALETTE COPY. The source template carries its
   own --al-* variables; not one of them appears here. These read the
   theme's --accent / --bg / --text / --muted / --rule / --font-display
   / --font-body, which is the whole point of porting a bespoke design
   into the section engine: on a bronze theme the band comes out bronze.
   A variant that hardcoded #FFC700 would be Aloha's band wearing
   somebody else's site.
   ============================================================ */

/* --- shared: alternating accent words in a display heading ---------- */
[data-section] .tw-alt > span:nth-child(odd) { color: var(--accent-text); }

/* --- trust G -------------------------------------------------------- */
[data-section="trust"][data-variant="g"] .trust-value {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) 24px;
  text-align: center;
}
[data-section="trust"][data-variant="g"] .trust-value__head {
  font-family: var(--font-display);
  font-size: clamp(28px, 5.2vw, 64px);
  line-height: 1.08;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
[data-section="trust"][data-variant="g"] .trust-value__w--accent { color: var(--accent-text); }
[data-section="trust"][data-variant="g"] .trust-value__copy {
  max-width: 62ch;
  margin: 22px auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--muted);
}
[data-section="trust"][data-variant="g"] .trust-value__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 30px;
}
[data-section="trust"][data-variant="g"] .trust-value__btn,
[data-section="consult"][data-variant="g"] .consult-close__btn {
  display: inline-block;
  padding: 13px 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--btn-weight, 700);
  letter-spacing: var(--btn-tracking, 0.1em);
  text-transform: var(--btn-transform, uppercase);
  border-radius: var(--btn-radius, 0);
  text-decoration: none;
  background: var(--accent);
  color: var(--accent-text, var(--bg));
  border: 2px solid var(--accent);
}
/* The ghost is a real button, not a hint. Both options stay visibly
   actionable to the same standard — a recommendation may be louder, it
   may not make the alternative stop reading as a control. */
[data-section="trust"][data-variant="g"] .trust-value__btn--ghost,
[data-section="consult"][data-variant="g"] .consult-close__btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--text);
}
[data-section="trust"][data-variant="g"] .trust-value__btn:hover,
[data-section="consult"][data-variant="g"] .consult-close__btn:hover {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
[data-section="trust"][data-variant="g"] .trust-value__btn--ghost:hover,
[data-section="consult"][data-variant="g"] .consult-close__btn--ghost:hover {
  background: var(--accent); color: var(--accent-text, var(--bg)); border-color: var(--accent);
}

[data-section="trust"][data-variant="g"] .trust-value__nap {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; gap: 10px;
}
[data-section="trust"][data-variant="g"] .trust-value__place {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.2vw, 38px);
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--accent-text); margin: 0;
  text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px;
}
[data-section="trust"][data-variant="g"] .trust-value__addr {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.8vw, 20px);
  color: var(--text); margin: 0;
  text-decoration: underline; text-underline-offset: 6px;
}
[data-section="trust"][data-variant="g"] .trust-value__tel {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 30px);
  color: var(--text); margin: 0;
}
[data-section="trust"][data-variant="g"] .trust-value__tel a {
  color: inherit; text-decoration: underline; text-underline-offset: 6px;
}
[data-section="trust"][data-variant="g"] .trust-value__tel a:hover { color: var(--accent-text); }
[data-section="trust"][data-variant="g"] .trust-value__hint {
  color: var(--accent-text); text-transform: uppercase; letter-spacing: 0.04em;
}

/* --- gallery I (marquee) -------------------------------------------- */
[data-section="gallery"][data-variant="i"] .gal-marquee { overflow: hidden; }
[data-section="gallery"][data-variant="i"] .gal-marquee__viewport {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
[data-section="gallery"][data-variant="i"] .gal-marquee__viewport::-webkit-scrollbar { display: none; }
[data-section="gallery"][data-variant="i"] .gal-marquee__track {
  display: flex; gap: 8px; flex: 0 0 auto;
}
[data-section="gallery"][data-variant="i"] .gal-marquee__track img {
  height: clamp(150px, 20vw, 260px); width: auto; object-fit: cover; display: block;
}
/* The loop copy costs nothing until the animation turns it on. */
[data-section="gallery"][data-variant="i"] .gal-marquee__track--loop { display: none; }

/* --- about F -------------------------------------------------------- */
[data-section="about"][data-variant="f"] .about-twotone {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) 24px;
}
[data-section="about"][data-variant="f"] .about-twotone__head {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.08; text-transform: uppercase;
  margin: 0; text-align: center; text-wrap: balance;
}
[data-section="about"][data-variant="f"] .about-twotone__w--accent { color: var(--accent-text); }
[data-section="about"][data-variant="f"] .about-twotone__prose {
  max-width: 68ch; margin: 28px auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.7; color: var(--text);
}
[data-section="about"][data-variant="f"] .about-twotone__prose p { margin: 0; }
[data-section="about"][data-variant="f"] .about-twotone__prose p + p { margin-top: 18px; }

/* --- consult G ------------------------------------------------------ */
[data-section="consult"][data-variant="g"] .consult-close {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) 24px;
  text-align: center;
}
[data-section="consult"][data-variant="g"] .consult-close__head {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.08; text-transform: uppercase; margin: 0; text-wrap: balance;
}
[data-section="consult"][data-variant="g"] .consult-close__w--accent { color: var(--accent-text); }
[data-section="consult"][data-variant="g"] .consult-close__copy {
  max-width: 60ch; margin: 20px auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 19px); line-height: 1.6; color: var(--muted);
}
[data-section="consult"][data-variant="g"] .consult-close__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  /* The marquee. Everything above renders a scrollable strip; this makes
     it move. Paused on hover so a reader can finish looking at a piece —
     the difference between a gallery and a thing that slides past. */
  [data-section="gallery"][data-variant="i"] .gal-marquee__viewport { overflow: hidden; }
  [data-section="gallery"][data-variant="i"] .gal-marquee__track {
    animation: ta-gal-marquee 60s linear infinite;
  }
  [data-section="gallery"][data-variant="i"] .gal-marquee__track--loop { display: flex; }
  [data-section="gallery"][data-variant="i"] .gal-marquee:hover .gal-marquee__track {
    animation-play-state: paused;
  }
  @keyframes ta-gal-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }
}

@media (max-width: 700px) {
  [data-section="trust"][data-variant="g"] .trust-value,
  [data-section="about"][data-variant="f"] .about-twotone,
  [data-section="consult"][data-variant="g"] .consult-close {
    padding-inline: 20px;
  }
}

/* ============================================================
   Section transitions — the shaped seam between two sections
   (lib/themes/section-transitions.ts, 8 shapes)

   Drawn AFTER the section and pulled back over its bottom edge, so
   the shape reads as CUT OUT of the section rather than stuck under
   it. That is why the negative margin equals the height.

   z-index sits above the section's own background but below anything
   positioned inside it, so a seam can never cover a headline or
   intercept a click on a CTA that overlaps the section's foot.
   ============================================================ */
.section-transition {
  display: block;
  width: 100%;
  height: clamp(44px, 6vw, 104px);
  margin-top: clamp(-104px, -6vw, -44px);
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* The angular shapes read heavier at the same height, so they get a
   shorter band — matched by eye against the curves rather than shared,
   because an identical height makes a chevron look twice as loud. */
.section-transition[data-transition="slant"],
.section-transition[data-transition="chevron"],
.section-transition[data-transition="zigzag"] {
  height: clamp(32px, 4.5vw, 76px);
  margin-top: clamp(-76px, -4.5vw, -32px);
}


/* --- roster I -------------------------------------------------------- */
/* Extracted from the Aloha port. Intro paragraph + photo-led cards, so the
   roster says what the faces are FOR before showing them. */
[data-section="roster"][data-variant="i"] .roster-family {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) 24px;
}
[data-section="roster"][data-variant="i"] .roster-family__head {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.08; text-transform: uppercase;
  margin: 0; text-align: center; text-wrap: balance;
}
[data-section="roster"][data-variant="i"] .roster-family__w--accent { color: var(--accent-text); }
[data-section="roster"][data-variant="i"] .roster-family__lede {
  max-width: 64ch; margin: 20px auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.7;
  color: var(--muted, var(--text)); text-align: center;
}
/* auto-fit rather than a fixed column count: a six-artist shop and a
   two-artist shop both want full rows, and neither wants a stranded card. */
[data-section="roster"][data-variant="i"] .roster-family__cards {
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: clamp(32px, 5vw, 56px);
}
[data-section="roster"][data-variant="i"] .roster-family__card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-mid, transparent);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform 180ms ease, border-color 180ms ease;
}
[data-section="roster"][data-variant="i"] .roster-family__card:hover {
  transform: translateY(-4px); border-color: var(--accent);
}
[data-section="roster"][data-variant="i"] .roster-family__img {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover;
}
[data-section="roster"][data-variant="i"] .roster-family__body { padding: 20px; }
[data-section="roster"][data-variant="i"] .roster-family__name {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px); text-transform: uppercase;
  margin: 0; line-height: 1.15;
}
[data-section="roster"][data-variant="i"] .roster-family__styles {
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em;
  color: var(--accent-text); margin: 8px 0 0;
}
[data-section="roster"][data-variant="i"] .roster-family__bio {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--muted, var(--text)); margin: 10px 0 0;
}
[data-section="roster"][data-variant="i"] .roster-family__ctas {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: clamp(28px, 4vw, 44px);
}
[data-section="roster"][data-variant="i"] .roster-family__btn {
  display: inline-block; padding: 14px 26px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  background: var(--accent); color: var(--accent-text);
  border: 1px solid var(--accent);
}
[data-section="roster"][data-variant="i"] .roster-family__btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--rule);
}

/* --- hero O (statement + work strip) ---------------------------------- */
/* A sentence set large beside a tight 3-across strip of the newest work.
   The h1 breaks per sentence (the component emits one span per sentence), so
   a three-sentence claim sets as three lines with no markup typed.
   Ratios use padding-top, not aspect-ratio — safari 12 kiosk iPads. */
[data-section="hero"][data-variant="o"] .hero-statement {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 24px clamp(32px, 5vw, 64px);
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) {
  [data-section="hero"][data-variant="o"] .hero-statement[data-strip="yes"] {
    grid-template-columns: 1.1fr 1fr;
  }
}
[data-section="hero"][data-variant="o"] .hero-statement__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.6vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
}
[data-section="hero"][data-variant="o"] .hero-statement__line { display: block; }
[data-section="hero"][data-variant="o"] .hero-statement__sub {
  margin: 1.2rem 0 0;
  max-width: 34ch;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--muted, var(--text));
}
/* The badge. Rotated and outlined so it reads as something stamped on the
   window rather than another button. Its colour is the READABLE gold —
   --accent is a surface and must never carry text (check-css-vocab R-8b). */
[data-section="hero"][data-variant="o"] .hero-statement__stamp {
  display: inline-block;
  margin: 0.9rem 0 0;
  padding: 0.3rem 0.55rem;
  border: 3px solid var(--accent-text);
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  /* The sign renders as an <a> on a multi-shop studio (HeroO) and a <span>
     otherwise. Both declarations are inert on the span, so one rule covers
     the pair rather than a second selector that can drift from it. */
  text-decoration: none;
  cursor: pointer;
}
[data-section="hero"][data-variant="o"] a.hero-statement__stamp:focus-visible {
  outline: 2px solid var(--accent-text, currentColor);
  outline-offset: 3px;
}
/* "Open now" — the words that arrive with the light.
   🚨 THE PHRASE IS THE POINT, not the glow. A theme that paints nothing for
   data-open still has to say the shop is open, or the whole state is carried
   by colour and reaches nobody using a screen reader, a high-contrast mode or
   a monochrome display. So the base sheet gives it weight and a separator and
   the theme adds the light on top; see lib/open-now.ts `openSignLabel` for
   why the phrase names the shops when the shops disagree. */
[data-section="hero"][data-variant="o"] .hero-statement__stamp-open {
  font-weight: 700;
}
/* Stamp + buttons as one block. inline-grid so the wrapper is only as wide as
   its widest row (the button pair) rather than the whole column, and
   justify-items:stretch so the stamp fills exactly that width. */
[data-section="hero"][data-variant="o"] .hero-statement__act {
  display: grid;
  justify-items: stretch;
  /* 🚨 width:max-content, NOT inline-grid. inline-grid plus the CTA row's
     auto-fit + percentage minmax resolved to a SINGLE column, so the two
     buttons stacked vertically and the stamp sat narrow above them — the
     opposite of the ask (operator, 2026-09-07: the sign should be the width
     of both buttons, in a two-column row). max-content sizes the wrapper to
     the button PAIR laid out side by side, and the stamp then stretches to
     exactly that. */
  width: max-content;
  max-width: 100%;
  margin-top: clamp(20px, 2.6vw, 32px);
}
[data-section="hero"][data-variant="o"] .hero-statement__act .hero-statement__stamp {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  margin: 0 0 12px;
}
[data-section="hero"][data-variant="o"] .hero-statement__ctas {
  display: grid;
  /* Two explicit columns. auto-fit cannot be used inside a max-content
     wrapper: it has no definite width to fit against, so it collapses to one
     track and stacks the buttons. */
  grid-template-columns: auto auto;
  gap: 0.8rem;
  margin-top: 0;
}
@container (max-width: 560px) {
  /* One per row on a small screen, with the sign still spanning whatever
     the row is. */
  [data-section="hero"][data-variant="o"] .hero-statement__act { width: 100%; }
  [data-section="hero"][data-variant="o"] .hero-statement__ctas {
    grid-template-columns: 1fr;
  }
}
[data-section="hero"][data-variant="o"] .hero-statement__cta {
  text-align: center;
}
[data-section="hero"][data-variant="o"] .hero-statement__cta {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: var(--btn-tracking, 0.04em);
  text-transform: uppercase;
  padding: 1rem 1.3rem;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--btn-radius, 4px);
  transition: transform 0.15s ease-out;
}
[data-section="hero"][data-variant="o"] .hero-statement__cta:active { transform: scale(0.98); }
[data-section="hero"][data-variant="o"] .hero-statement__cta--walk {
  background: var(--accent);
  color: var(--accent-contrast, var(--text));
}
[data-section="hero"][data-variant="o"] .hero-statement__cta--book {
  background: var(--text);
  color: var(--bg);
}
[data-section="hero"][data-variant="o"] .hero-statement__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
[data-section="hero"][data-variant="o"] .hero-statement__tile {
  position: relative;
  margin: 0;
  padding-top: 133.33%;
  overflow: hidden;
  background: var(--bg-mid);
}
[data-section="hero"][data-variant="o"] .hero-statement__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  [data-section="hero"][data-variant="o"] .hero-statement__cta { transition: none; }
}

/* --- roster J (walk-in board) ---------------------------------------- */
/* The artist x shop matrix for a MULTI-SHOP studio. A real <table>, because
   this is tabular data: rows are people, columns are places, and a screen
   reader announcing "Row 4, Portland, works here" is the whole point.

   Column hover uses the classic tall-pseudo-element trick rather than :has()
   — package.json pins `safari 12` for the lobby kiosk iPads, so :has() and
   color-mix() are both off the table (CLAUDE.md build rules). The overflow
   clip lives on the scroll wrapper, which needs it anyway.

   🚨 The --board-* knobs below are how a THEME moves this block, and they are
   the only way that works. This file sits in `@layer section`, the LAST layer,
   so it outranks every `@layer theme` bundle no matter how specific the theme's
   selector is — a theme rule restating `border-bottom` here is silently inert
   (measured 2026-09-06: art-immortal declared a 4px head rule and a 16px mark
   and got this file's 2px and 13px). These are read through var() with a
   fallback and NEVER declared here, so a theme's declaration on its own
   [data-theme] wrapper is the only one in play and simply inherits down:

     --board-head-rule    thickness under the shop-name row   (2px)
     --board-row-rule     thickness under each artist row     (1px)
     --board-mark-size    the square that means "works here"  (13px)
     --board-mark-rule    that square's border                (1px)
     --board-sticky-top   where the shop row parks on scroll   (0px)
     --board-row-hover    background of the hovered row       (transparent) */
[data-section="roster"][data-variant="j"] .roster-board {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) 24px;
}
[data-section="roster"][data-variant="j"] .roster-board__eyebrow {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 10px;
}
[data-section="roster"][data-variant="j"] .roster-board__heading {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.05; text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
[data-section="roster"][data-variant="j"] .roster-board__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
[data-section="roster"][data-variant="j"] .roster-board__chip {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: var(--bg-mid);
  color: var(--text);
}
[data-section="roster"][data-variant="j"] .roster-board__sub {
  max-width: 60ch; margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.65;
  color: var(--muted, var(--text));
}
/* Horizontal escape hatch on a narrow phone, and the clip the column
   highlight is drawn inside. */
/* 🚨 NO overflow by default, and that is what makes the sticky header work.
   `overflow-x: auto` with `overflow-y: visible` does NOT give you one scrolling
   axis: the spec computes the visible axis to `auto` as soon as the other is
   not visible, so the wrapper becomes a scroll container on BOTH axes and a
   sticky child inside it positions against a box that never scrolls — i.e.
   never sticks. Measured on the real board: header at -527px mid-scroll.

   So the horizontal safety net is switched on only when it is actually needed.
   The component stamps the shop count; up to three shops the table fits a
   390px phone (measured: 342px), so those tenants get a sticky header and no
   scrollbar. Four or more genuinely need to scroll sideways, and there the
   scroll wins and the header does not stick — stated here rather than left to
   be discovered. */
/* --- Board + phone split --------------------------------------------------
   The design puts a 9:16 phone beside the board. It is sticky, so it plays
   next to whichever row you have scrolled to — the board is 17 rows on Art
   Immortal and the phone would otherwise scroll away in the first screen.

   The board column is `minmax(0, 1fr)`: without the 0 minimum a grid track
   takes the table's min-content width, which for a 4-column board is wider
   than the track and pushes the phone off the row. */
[data-section="roster"][data-variant="j"] .roster-board__split {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 900px) {
  [data-section="roster"][data-variant="j"] .roster-board__split {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  }
}
[data-section="roster"][data-variant="j"] .roster-board__phone {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--board-sticky-top, 0px) + 16px);
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--board-phone-radius, 28px);
  overflow: hidden;
  /* The bezel. A device frame is one of the few places a literal is right:
     it is a picture of a phone, not a themed surface. */
  border: 6px solid #2a2a2a;
  box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.6);
  background: #000000;
}
/* The teaser and the reel both fill the frame; the teaser's own stage is
   16:9 by default, so it is re-shaped to the phone here. */
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser {
  border-radius: 0;
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__stage {
  padding-top: 177.78%;
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-video__frame {
  border-radius: 0;
  padding-top: 177.78%;
  height: auto;
  max-width: none;
}
/* 🚨 The image is pinned, not sized at 100%.
   `height: 100%` on it loses to the unlayered `img, video { height: auto }`
   near the top of this file — the rule that exists so a tenant logo cannot
   render at its intrinsic size — and the picture then took its natural
   aspect: measured 348x478 inside a 348x619 phone, leaving a black band
   under every portrait cut. Pinning to the slide box cannot be undone by a
   type selector, and it is what `object-fit: cover` wants anyway. */
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Type inside the phone is sized to the PHONE, not the viewport.
   The teaser's own scale is built for a full-width stage — `clamp(34px, 8vw,
   104px)` on the name — which in a 348px panel resolved to 102px and set a
   535px line in a 348px box. These are the same beats at phone scale. */
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__line {
  font-size: clamp(18px, 6.2vw, 30px);
  /* Break between words, never inside one — a narrow panel was splitting
     the studio's own name as "IMMORTA / L TATTOO". */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__beat {
  max-width: 88%;
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__beat[data-kind="name"] .ti-teaser__line {
  font-size: clamp(22px, 7.4vw, 36px);
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__beat[data-kind="count"] .ti-teaser__line {
  font-size: clamp(30px, 10vw, 48px);
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__beat[data-kind="tagline"] .ti-teaser__line,
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__beat[data-kind="bio"] .ti-teaser__line {
  font-size: clamp(13px, 4vw, 17px);
  max-width: 26ch;
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__beat[data-kind="handle"] .ti-teaser__line {
  font-size: clamp(15px, 5vw, 22px);
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__kicker {
  font-size: 10px;
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__caption {
  font-size: 10px;
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__card-name {
  font-size: clamp(22px, 7.4vw, 36px);
}
[data-section="roster"][data-variant="j"] .roster-board__phone .ti-teaser__card-meta {
  font-size: 11px;
}

/* The faces in the row headers. */
[data-section="roster"][data-variant="j"] .roster-board__name-link {
  display: flex;
  align-items: center;
  gap: 10px;
  /* The row link measured 21px tall. The row itself is taller than that, so
     filling it costs no layout and doubles the target. */
  min-height: 40px;
}
[data-section="roster"][data-variant="j"] .roster-board__shop-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
}
[data-section="roster"][data-variant="j"] .roster-board__face {
  width: var(--board-face-size, 34px);
  height: var(--board-face-size, 34px);
  flex: none;
  object-fit: cover;
  border-radius: var(--board-face-radius, 999px);
  background: var(--bg-mid);
  border: 1px solid var(--rule);
}
@media (max-width: 560px) {
  /* The name is the row's job on a phone; the face is the first thing to go. */
  [data-section="roster"][data-variant="j"] .roster-board__face { display: none; }
}

[data-section="roster"][data-variant="j"] .roster-board__scroll {
  margin-top: clamp(28px, 4vw, 48px);
}
[data-section="roster"][data-variant="j"] .roster-board__scroll[data-shops="many"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
[data-section="roster"][data-variant="j"] .roster-board__table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  font-family: var(--font-body);
}
[data-section="roster"][data-variant="j"] .roster-board__caption {
  /* The visible heading already says this; the caption is for the
     accessibility tree, which names a table from its caption. */
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[data-section="roster"][data-variant="j"] .roster-board__sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* --- Sticky chrome ------------------------------------------------------
   The shop row stays put while you read down the artists, so a mark halfway
   down the board still has a city over it — on a 17-artist board the header
   is otherwise long gone by the time you reach the name you came for.

   The artist column sticks the other way for the same reason: a studio with
   enough shops to scroll sideways would otherwise leave you looking at a row
   of squares with no name attached.

   Three things each sticky cell needs, and all three are easy to miss:
   an opaque BACKGROUND (rows slide underneath, not behind), a Z-INDEX above
   its neighbours, and `-webkit-sticky` first in the position list for the
   older Safari on the kiosk iPads (browserslist pins safari 12).

   `top` is a knob because this page usually has sticky chrome of its own —
   see the --board-sticky-top rules at the end of this block. */
[data-section="roster"][data-variant="j"] .roster-board__shop,
[data-section="roster"][data-variant="j"] .roster-board__corner {
  position: -webkit-sticky;
  position: sticky;
  top: var(--board-sticky-top, 0px);
  z-index: 3;
  background: var(--bg);
  /* 🚨 The rule under the header is drawn as an inset shadow, not the cell's
     own border. With `border-collapse: collapse` a collapsed border belongs to
     the TABLE's border grid, not to the cell, so it stays behind when the cell
     sticks — the header pins correctly and arrives with no line under it.

     🚨 And the cell must then carry NO border-bottom of its own. The first
     version kept one "for the unstuck state", which is exactly wrong: the
     shadow draws in BOTH states, so the two together rendered a DOUBLE rule
     down the whole board — visible on the live site, reported 2026-09-07.
     One line, drawn one way, in both states. */
  box-shadow: inset 0 calc(-1 * var(--board-head-rule, 2px)) 0 var(--rule);
}
[data-section="roster"][data-variant="j"] .roster-board__name {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg);
  /* Same reason as the header: the row rule is a collapsed border and does
     not travel with the stuck cell. */
  box-shadow: inset 0 calc(-1 * var(--board-row-rule, 1px)) 0 var(--rule);
}
/* The corner is sticky on BOTH axes, so it outranks either neighbour. */
[data-section="roster"][data-variant="j"] .roster-board__corner {
  left: 0;
  z-index: 4;
}
[data-section="roster"][data-variant="j"] .roster-board__corner {
  text-align: left; font-weight: 600;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted, var(--text));
  padding: 0 12px 12px 0;
}
[data-section="roster"][data-variant="j"] .roster-board__shop {
  padding: 0 4px 12px;
  width: 22%;
}
[data-section="roster"][data-variant="j"] .roster-board__shop-link {
  display: block; text-decoration: none; color: inherit; text-align: center;
}
[data-section="roster"][data-variant="j"] .roster-board__shop-city {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.7vw, 18px);
  line-height: 1.1; text-transform: uppercase;
}
[data-section="roster"][data-variant="j"] .roster-board__shop-state {
  display: block; margin-top: 3px;
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--accent-text);
}
[data-section="roster"][data-variant="j"] .roster-board__shop-link:hover .roster-board__shop-city,
[data-section="roster"][data-variant="j"] .roster-board__shop-link:focus-visible .roster-board__shop-city {
  color: var(--accent-text);
}
[data-section="roster"][data-variant="j"] .roster-board__name {
  text-align: left; font-weight: 400;
  padding: 10px 12px 10px 0;
}
[data-section="roster"][data-variant="j"] .roster-board__name-link {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.8vw, 19px);
  text-transform: uppercase; letter-spacing: 0.01em;
  text-decoration: none; color: inherit;
}
[data-section="roster"][data-variant="j"] .roster-board__name-link:hover,
[data-section="roster"][data-variant="j"] .roster-board__name-link:focus-visible {
  color: var(--accent-text);
}
[data-section="roster"][data-variant="j"] .roster-board__cell {
  position: relative;
  text-align: center;
  padding: 10px 4px;
  border-bottom: var(--board-row-rule, 1px) solid var(--rule);
}
/* The mark. A square, not a tick glyph: a glyph inherits the font stack and
   a display face that lacks it renders tofu on someone's site. */
[data-section="roster"][data-variant="j"] .roster-board__mark {
  display: inline-block;
  width: var(--board-mark-size, 13px);
  height: var(--board-mark-size, 13px);
  border: var(--board-mark-rule, 1px) solid var(--rule);
}
[data-section="roster"][data-variant="j"] .roster-board__cell[data-here="yes"] .roster-board__mark {
  background: var(--accent);
  border-color: var(--accent);
}
/* The empty square is a spacer, not a datum. At full ink strength a
   16-artist board draws 40-odd boxes to say nothing and 15 to say something,
   and the eye cannot tell them apart at a glance — which defeats the one job
   a board has. Faded, the gold squares are the only thing that reads. */
[data-section="roster"][data-variant="j"] .roster-board__cell[data-here="no"] .roster-board__mark {
  opacity: 0.18;
}
/* Pointer feedback on the cell itself.
   This used to be a full-column band — a 6000px-tall pseudo-element clipped
   by the scroll wrapper's `overflow-y: hidden`. That clip is exactly what
   stops a sticky header working, so the band went and the header came in.
   The header answers the question the band was answering ("which shop is
   this column?") and answers it while you scroll, which the band never did. */
[data-section="roster"][data-variant="j"] .roster-board__cell:hover {
  background: var(--bg-mid);
}
[data-section="roster"][data-variant="j"] .roster-board__row:hover .roster-board__name-link {
  color: var(--accent-text);
}
[data-section="roster"][data-variant="j"] .roster-board__row:hover {
  background: var(--board-row-hover, transparent);
}
/* How far down the shop row parks, derived from what is sticky ABOVE it.
   Utility-bar A/D/E and nav G all pin themselves to the top of the viewport,
   so a board header at top:0 would slide underneath them and be invisible for
   the whole scroll. Sibling combinators rather than :has() — safari 12 again
   — and these read the SECTION wrappers, which are siblings inside the theme
   wrapper. A tenant with no sticky chrome keeps the 0px default. */
[data-section="utility-bar"][data-variant="a"] ~ [data-section="roster"][data-variant="j"],
[data-section="utility-bar"][data-variant="d"] ~ [data-section="roster"][data-variant="j"],
[data-section="utility-bar"][data-variant="e"] ~ [data-section="roster"][data-variant="j"] {
  --board-sticky-top: 38px;
}
[data-section="nav"][data-variant="g"] ~ [data-section="roster"][data-variant="j"] {
  --board-sticky-top: 64px;
}
/* Both: more compound selectors, so it wins on specificity as well as order. */
[data-section="utility-bar"][data-variant="a"] ~ [data-section="nav"][data-variant="g"] ~ [data-section="roster"][data-variant="j"],
[data-section="utility-bar"][data-variant="d"] ~ [data-section="nav"][data-variant="g"] ~ [data-section="roster"][data-variant="j"],
[data-section="utility-bar"][data-variant="e"] ~ [data-section="nav"][data-variant="g"] ~ [data-section="roster"][data-variant="j"] {
  --board-sticky-top: 102px;
}
/* The MULTI-SHOP bar (UtilityBarShops) is a different height from the
   single-NAP strip above — measured 35px desktop, and it renders under
   letters b and c too, which were never sticky before. So the offset keys on
   the bar's own [data-shops] hook rather than on its letter.

   🚨 These MUST stay after the letter rules. Both selectors are four
   attribute selectors, so they tie on specificity and source order decides —
   move this block up and an a/d/e multi-shop tenant silently reverts to the
   38px single-NAP number and the board header parks 3px low. */
[data-section="utility-bar"][data-shops] ~ [data-section="roster"][data-variant="j"] {
  --board-sticky-top: 35px;
}
[data-section="utility-bar"][data-shops] ~ [data-section="nav"][data-variant="g"] ~ [data-section="roster"][data-variant="j"] {
  --board-sticky-top: 99px;
}

/* Trade headings inside the board. A row that spans the table, so the
   matrix keeps one grid and the group reads as part of it rather than as a
   second table. */
[data-section="roster"][data-variant="j"] .roster-board__grouphead th {
  text-align: left;
  padding: 22px 0 8px;
  border-bottom: var(--board-row-rule, 1px) solid var(--rule);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
}
[data-section="roster"][data-variant="j"] .roster-board__group:first-of-type .roster-board__grouphead th {
  padding-top: 10px;
}
[data-section="roster"][data-variant="j"] .roster-board__groupcount {
  margin-left: 8px;
  color: var(--muted, var(--text));
  font-weight: 500;
  letter-spacing: 0.08em;
}

[data-section="roster"][data-variant="j"] .roster-board__floaters {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.7;
  color: var(--muted, var(--text));
}
[data-section="roster"][data-variant="j"] .roster-board__floaters-label {
  font-weight: 600; color: var(--text);
}
[data-section="roster"][data-variant="j"] .roster-board__floaters a {
  color: var(--accent-text);
}
@media (max-width: 560px) {
  [data-section="roster"][data-variant="j"] .roster-board__corner { font-size: 11px; }
  [data-section="roster"][data-variant="j"] .roster-board__shop { width: 20%; padding: 0 2px 10px; }
  [data-section="roster"][data-variant="j"] .roster-board__cell { padding: 9px 2px; }
}

/* --- blog F ---------------------------------------------------------- */
/* Three across with an excerpt on every card. Three, not four: the fourth
   card is where a studio blog starts showing something from two years ago. */
[data-section="blog"][data-variant="f"] .journal-threeup {
  max-width: var(--theme-content-max, 1200px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 128px) 24px;
}
[data-section="blog"][data-variant="f"] .journal-threeup__head {
  font-family: var(--font-display);
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.08; text-transform: uppercase;
  margin: 0; text-align: center; text-wrap: balance;
}
[data-section="blog"][data-variant="f"] .journal-threeup__lede {
  max-width: 64ch; margin: 20px auto 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.7;
  color: var(--muted, var(--text)); text-align: center;
}
[data-section="blog"][data-variant="f"] .journal-threeup__cards {
  display: grid; gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: clamp(32px, 5vw, 56px);
}
[data-section="blog"][data-variant="f"] .journal-threeup__card {
  display: block; text-decoration: none; color: inherit;
}
[data-section="blog"][data-variant="f"] .journal-threeup__img {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover;
}
[data-section="blog"][data-variant="f"] .journal-threeup__date {
  display: block; margin-top: 14px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-text);
}
[data-section="blog"][data-variant="f"] .journal-threeup__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px); line-height: 1.2;
  text-transform: uppercase; margin: 8px 0 0;
}
[data-section="blog"][data-variant="f"] .journal-threeup__card:hover .journal-threeup__title {
  color: var(--accent-text);
}
[data-section="blog"][data-variant="f"] .journal-threeup__excerpt {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--muted, var(--text)); margin: 10px 0 0;
}

/* ---------------------------------------------------------------------------
   .hero-op-sub — the operator's own hero subtitle line (tenants.hero_subtitle).

   🚨 ONE rule, not six. Hero variants A-F each render a single caption line
   fed from the brand TAGLINE, so a subtitle typed in the builder had nowhere
   to go: measured on prod 2026-08-23, 4 of the 7 tenants carrying one sat on
   a variant with no slot for it (Bob Tyrrell, Darkside, James Wisdom, Sean
   O'Hara). Rather than six near-identical BEM blocks that would drift, every
   variant renders this class and it inherits its context: `color: inherit`
   and `em` sizing mean it takes each caption's own colour and scale, so it
   reads as part of that variant's stack instead of a bolt-on.

   Absent when the column is empty, so a caption is unchanged for anyone who
   has not typed a subtitle.
   --------------------------------------------------------------------------- */
[data-section="hero"] .hero-op-sub {
  font-family: var(--font-body);
  font-size: 0.9em;
  line-height: 1.5;
  color: inherit;
  opacity: 0.78;
  max-width: 46ch;
  margin: -0.4em 0 1.4em;
}

/* ── Location: multi-shop studios (all variants A-F return LocationShops) ── */
[data-section="location"] .loc-shops {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 24px;
}
[data-section="location"] .loc-shops__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
[data-section="location"] .loc-shops__headline {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 28px;
}
[data-section="location"] .loc-shops__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}
[data-section="location"] .loc-shops__card {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  font-family: var(--font-body);
  color: var(--text);
}
[data-section="location"] .loc-shops__name {
  font-family: var(--font-heading, var(--font-display));
  font-size: 20px;
  margin: 0 0 8px;
}
[data-section="location"] .loc-shops__name a { color: var(--text); text-decoration: none; }
[data-section="location"] .loc-shops__name a:hover { color: var(--accent-text); }
[data-section="location"] .loc-shops__addr { font-style: normal; font-size: 15px; line-height: 1.5; margin: 0 0 6px; }
[data-section="location"] .loc-shops__phone,
[data-section="location"] .loc-shops__hours,
[data-section="location"] .loc-shops__artists { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 6px; }
[data-section="location"] .loc-shops__phone a,
[data-section="location"] .loc-shops__artists a { color: var(--text); text-decoration: none; }
[data-section="location"] .loc-shops__link {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-decoration: none;
}

/* ── Footer: "Also in … · All locations" for multi-shop studios ── */
[data-section="footer"] .footer-shops {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
/* Every shop's map, not the primary's three times (operator, 2026-09-07).
   Auto-fit rather than a fixed count so two shops are not stretched and five
   do not squeeze — the studio's shop count is not ours to assume. */
[data-section="footer"] .footer-maps {
  display: grid;
  gap: 16px 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  margin: 16px 0 0;
  /* 🚨 Span the footer, do not sit in one of its columns. Every footer
     variant is itself a grid, and this block was landing in the FIRST cell —
     so `minmax(min(100%, 240px), 1fr)` resolved against a ~240px column and
     stacked three maps vertically down one side (operator screenshot,
     2026-09-07). One shop per column is the whole point of the block. */
  grid-column: 1 / -1;
  width: 100%;
}
/* Focused (a /locations/{slug} page): one shop, not stretched across the
   full width — a lone map spanning 1200px is a different kind of wrong. */
[data-section="footer"] .footer-maps[data-focused] {
  grid-template-columns: minmax(0, 380px);
}
[data-section="footer"] .footer-maps__hours {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, var(--text));
}
[data-section="footer"] .footer-maps__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
[data-section="footer"] .footer-maps__hours dt { font-weight: 600; }
[data-section="footer"] .footer-maps__hours dd { margin: 0; }
[data-section="footer"] .footer-maps__others {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  margin: 4px 0 0;
  font-size: 13px;
}
[data-section="footer"] .footer-maps__others-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
[data-section="footer"] .footer-maps__others a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: -10px;
  margin-bottom: -10px;
}
[data-section="footer"] .footer-maps__others a:hover { color: var(--accent-text); }
[data-section="footer"] .footer-maps__item { display: grid; gap: 8px; }
[data-section="footer"] .footer-maps__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
[data-section="footer"] .footer-maps__label:hover { color: var(--accent-text); }
/* Both measured ~20px tall on a phone. */
[data-section="footer"] .footer-maps__label,
[data-section="footer"] .footer-maps__tel {
  min-height: 40px;
  align-items: center;
}
[data-section="footer"] .footer-maps__tel { display: inline-flex; }
[data-section="footer"] .footer-maps__nap {
  font-style: normal;
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, var(--text));
}
[data-section="footer"] .footer-maps__tel {
  color: var(--text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  justify-self: start;
}
[data-section="footer"] .footer-maps__tel:hover { color: var(--accent-text); }
[data-section="footer"] .footer-maps__state { font-weight: 400; color: var(--muted, var(--text)); }

[data-section="footer"] .footer-shops a { color: var(--text); text-decoration: none; }
[data-section="footer"] .footer-shops a:hover { color: var(--accent-text); }

/* --- Mobile tap targets (2026-09-07 audit) --------------------------------
   Measured on a real 390x844 viewport across twelve pages. Overflow was clean
   everywhere; the failures were all TARGET SIZE. WCAG 2.5.8 asks 24x24 CSS
   px, Apple 44pt, Google 48dp — these sat at 16-30px.

   Scoped to the phone deliberately: on a pointer device these are correctly
   sized for their type, and growing them everywhere would loosen layouts that
   are not broken. The TYPE never changes, only the box. */
@media (max-width: 768px) {
  [data-section="footer"] .footer-shops a,
  [data-section="footer"] .footer-shops__all {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  /* The homepage shop cards: phone number and the artist name list, both
     measured at 16px tall. */
  [data-section="location"] .loc-shops__phone a,
  [data-section="location"] .loc-shops__artists a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  [data-section="location"] .loc-shops__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* 🚨 The board's phone lives on the HOME page, which does not load
     interior.css — so the teaser's own controls need their sizing here as
     well. The CTA measured 19px and the play/pause 24px: the video's primary
     action, under the WCAG floor, on the page most visitors land on. */
  [data-section="roster"] .ti-teaser__cta,
  [data-section="roster"] .ti-teaser__toggle,
  [data-section="roster"] .ti-teaser__book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }
  /* Phone numbers and links inside a NAP block — measured 19-24px on the
     contact page's three shop addresses. `address` is semantic and rare, so
     this reaches exactly the blocks it should. */
  address a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}
[data-section="footer"] .footer-shops .sep { margin: 0 6px; opacity: 0.6; }