/*
Theme Name:        Layerly Base
Theme URI:         https://layerly.io
Author:            Layerly
Author URI:        https://layerly.io
Description:       Layerly Base Theme — the v1.0 reference implementation of the Layerly Conventions Framework. Fork this theme per client; do not edit in place. Requires the Layerly Bridge plugin for runtime helpers and admin chat.
Version: 1.0.0-r27-6980af6
Requires at least: 6.0
Requires PHP:      8.0
Layerly Bridge:    >=4.7.0
Layerly Conventions: v1.0
Text Domain:       layerly-base
License:           Proprietary
Tags:              layerly, layerly-v1
*/

/* ════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS — numbered (variable per site) + functional aliases.
   Override values per site. Add --color-N or --font-N as the design needs.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --color-success: #059669;
  --color-error: #DC2626;
  --color-warning: #F59E0B;
  --color-highlight: var(--color-7);
  --font-3: system-ui, -apple-system, sans-serif;
  --font-subheading: var(--font-3);
  --sh-sm: 0 1px 2px rgba(0,0,0,.08);
  --sh-md: 0 4px 12px rgba(0,0,0,.12);
  --sh-lg: 0 12px 32px rgba(0,0,0,.18);
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --color-1: #EBE4DC;
  --color-2: #9A8C6C;
  --color-3: #5E6B5E;
  --color-4: #CCA3A3;
  --color-5: #151D15;
  --color-6: #854A4C;
  --color-7: #2C3D32;
  --color-8: #F7F4F1;
  --color-text: var(--color-5);
  --color-text-muted: var(--color-3);
  --color-text-invert: var(--color-1);
  --color-bg: var(--color-8);
  --color-surface: var(--color-1);
  --color-primary: var(--color-7);
  --color-primary-deep: var(--color-5);
  --color-accent: var(--color-6);
  --color-accent-soft: var(--color-4);
  --color-gold: var(--color-2);
  --color-border: var(--color-2);
  --font-1: 'Schibsted Grotesk', sans-serif;
  --font-2: 'Averia Serif Libre', Georgia, serif;
  --font-display: var(--font-2);
  --font-body: var(--font-1);
  --text-h1: 64px;
  --text-h2: 52px;
  --text-h3: 44px;
  --text-h4: 24px;
  --text-xl: 24px;
  --text-lg: 20px;
  --text-md: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --leading-h1: 69px;
  --leading-h2: 60px;
  --leading-h3: 51px;
  --leading-h4: 31px;
  --leading-lg: 34px;
  --leading-md: 28px;
  --leading-sm: 24px;
  --leading-xs: 19px;
  --weight-reg: 400;
  --weight-med: 500;
  --weight-bold: 600;
  --eyebrow-size: var(--text-xs);
  --eyebrow-tracking: 2.2px;
  --eyebrow-weight: var(--weight-bold);
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 26px;
  --space-xl: 34px;
  --space-2xl: 60px;
  --space-xxl: 80px;
  --space-section: 120px;
  --space-section-lg: 140px;
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-full: 9999px;
  --container-max: 1200px;
  --container-wide: 1440px;
  --hairline: 1px;
}

/* ════════════════════════════════════════════════════════════════════
   2. RESET + ROOT
   ════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size:   var(--text-md);
    color:       var(--color-text);
    background:  var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

img, picture, svg, video, canvas {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: 1.15;
    margin: 0 0 var(--space-md);
    color: var(--color-text);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--weight-med); }
h6 { font-size: var(--text-md); font-weight: var(--weight-med); text-transform: uppercase; letter-spacing: .05em; }

.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

/* (Responsive type is now handled fluidly by the clamp() heading tokens in :root —
   no hard 768px breakpoint needed.) */

/* ════════════════════════════════════════════════════════════════════
   4. LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════════ */
.wrap {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (min-width: 768px) {
    .wrap { padding-inline: var(--space-lg); }
}

/* Base section — every page section uses this anatomy.
   Sets up the position, background, overlay, decoration, divider hooks. */
.section {
    position: relative;
    padding-block: var(--space-xxl);
    /* `clip` contains decorations/dividers exactly like `hidden`, but does NOT create a
       scroll container — so `position: sticky` descendants (e.g. the sticky-stack section)
       can pin against the viewport instead of against this box. `overflow: hidden` silently
       broke sticky for EVERY section (Aveya, 2026-07-24). The `hidden` line is the fallback
       for engines without `clip`; both contain the decorations. */
    overflow: hidden;
    overflow: clip;
}

/* Section background variants — emitted by layerly_section_classes() */
.section--bg-color {
    background-color: var(--section-bg-color, transparent);
}
.section--bg-image {
    background-image: var(--section-bg-image);
    background-size: cover;
    background-position: center;
}
.section--bg-gradient {
    background-image: var(--section-bg-gradient);
}

/* Color overlay on backgrounds (for legibility over images) */
.section--with-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--section-overlay-color, transparent);
    opacity: var(--section-overlay-opacity, 0);
    pointer-events: none;
    z-index: 1;
}
.section--with-overlay > * { position: relative; z-index: 2; }

/* Decoration slot — pseudo-element for background design accents */
.section--decorated::before {
    content: '';
    position: absolute;
    pointer-events: none;
    background-color: var(--decoration-color, var(--color-1));
    opacity: var(--decoration-opacity, .15);
    z-index: 0;
}
/* Default decoration: a circle */
.section--decorated::before {
    width: 240px;
    height: 240px;
    border-radius: 50%;
}
.section--decorated[style*="--decoration-size: sm"]::before { width: 120px; height: 120px; }
.section--decorated[style*="--decoration-size: md"]::before { width: 240px; height: 240px; }
.section--decorated[style*="--decoration-size: lg"]::before { width: 360px; height: 360px; }
.section--decorated[style*="--decoration-size: xl"]::before { width: 480px; height: 480px; }

.section--decorated[style*="--decoration-position: top-left"]::before     { top: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: top-right"]::before    { top: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: bottom-left"]::before  { bottom: -60px; left: -60px; }
.section--decorated[style*="--decoration-position: bottom-right"]::before { bottom: -60px; right: -60px; }
.section--decorated[style*="--decoration-position: center"]::before {
    top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* ── Sticky-stack — a REGISTERED behavioural primitive (v1.0, 2026-07-24) ─────────────
   Any section can opt a direct child list into a scroll-driven stacked-card effect: each
   card pins to the vertical centre as it scrolls up, the next card slides over it leaving a
   small "peek" of the one beneath, and covered cards tilt slightly. This is composed, never
   hand-built (rulebook: behaviours come from the library). It is why the Aveya request
   failed as bespoke CSS — the list was flex (no sticky runway) and `.section{overflow:hidden}`
   killed sticky outright (now `overflow:clip`, above).

   Compose:  add class `sticky-stack` to the SECTION, and `sticky-stack__list` / `sticky-stack__item`
             to the repeating list + cards. Knobs via inline style on the section:
               --stack-peek   (px between pinned cards; default 16)
               --stack-card-h (approx card height, to centre the pin; default 480px)
               --stack-tilt   (max rotation of a covered card; default 2.5deg)
   Below --stack-bp (default 900px) it degrades to normal flow — a pinned 480px card is worse
   than a simple stack on a phone. Motion is OFF under prefers-reduced-motion (a11y floor). */
.sticky-stack { --stack-peek: 16px; --stack-card-h: 480px; --stack-tilt: 2.5deg; --stack-bp: 900px; }

@media (min-width: 900px) {
  .sticky-stack .sticky-stack__list {
    display: block;                              /* out of flex → normal flow gives sticky its runway */
    max-width: 560px; margin-inline: auto; padding: 0; list-style: none;
  }
  .sticky-stack .sticky-stack__item {
    position: sticky;
    top: max(96px, calc(50vh - var(--stack-card-h) / 2));   /* pin to centre, never under the nav */
    margin-bottom: 26vh;                                     /* the scroll distance between pins */
    transform-origin: 50% 0%;
    box-shadow: var(--sh-lg);
  }
  .sticky-stack .sticky-stack__item:last-child { margin-bottom: 0; }
  /* each card pins one --stack-peek lower than the previous, so a sliver stays visible */
  .sticky-stack .sticky-stack__item:nth-child(1) { z-index: 1; }
  .sticky-stack .sticky-stack__item:nth-child(2) { z-index: 2; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 1)); }
  .sticky-stack .sticky-stack__item:nth-child(3) { z-index: 3; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 2)); }
  .sticky-stack .sticky-stack__item:nth-child(4) { z-index: 4; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 3)); }
  .sticky-stack .sticky-stack__item:nth-child(5) { z-index: 5; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 4)); }
  .sticky-stack .sticky-stack__item:nth-child(6) { z-index: 6; top: max(96px, calc(50vh - var(--stack-card-h) / 2 + var(--stack-peek) * 5)); }

  /* Scroll-driven tilt via native CSS scroll timelines — no JS to enqueue or break. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .sticky-stack .sticky-stack__item {
        animation: layerly-stack-tilt linear both;
        animation-timeline: view();
        animation-range: contain 35% exit 100%;
      }
      @keyframes layerly-stack-tilt {
        from { transform: rotate(0deg) scale(1); }
        to   { transform: rotate(calc(-1 * var(--stack-tilt))) scale(.94); }
      }
    }
  }
  /* No scroll-timeline support → a static alternating tilt still reads as a hand-placed stack. */
  @supports not (animation-timeline: view()) {
    .sticky-stack .sticky-stack__item:nth-child(odd)  { transform: rotate(calc(-0.5 * var(--stack-tilt))); }
    .sticky-stack .sticky-stack__item:nth-child(even) { transform: rotate(calc(0.5 * var(--stack-tilt))); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-stack .sticky-stack__list { display: flex; flex-direction: column; gap: var(--space-lg); }
  .sticky-stack .sticky-stack__item { position: static; transform: none; animation: none; margin-bottom: 0; }
}

/* Section dividers — emitted on the section element. SVGs live in assets/dividers/. */
.section[class*="section--divider-top-"] {
    /* Top divider rendered via ::before override below — sections with both
       a decoration AND a divider need careful ordering. v1 keeps it simple. */
}

/* Section header — used by every section that has a heading area */
.section-head {
    margin-bottom: var(--space-xl);
}
.section-head--center { text-align: center; }
.section-head--center .section-head__inner { max-width: 720px; margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--color-primary);
    color: var(--color-surface);
}
.btn--primary:hover { filter: brightness(.92); }

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-text); }

.btn--link {
    background: transparent;
    color: var(--color-primary);
    padding: 0;
    border: none;
}

/* ════════════════════════════════════════════════════════════════════
   6. SHAPE UTILITIES (used by layerly_image's `shape` arg)
   Each emits a `.shape-*` class.
   ════════════════════════════════════════════════════════════════════ */
.shape-square      { border-radius: 0; }
.shape-rounded-sm  { border-radius: var(--radius-sm); }
.shape-rounded-md  { border-radius: var(--radius-md); }
.shape-rounded-lg  { border-radius: var(--radius-lg); }
.shape-circle      { border-radius: 9999px; aspect-ratio: 1; object-fit: cover; }
.shape-arch        { border-radius: 9999px 9999px 0 0; }
.shape-tilt        { transform: rotate(-3deg); }
/* Custom shapes (e.g. blob, squiggle) — drop SVG into assets/shapes/ and
   add .shape-<name> using mask-image: url(/wp-content/themes/<slug>/assets/shapes/<name>.svg) */

/* ════════════════════════════════════════════════════════════════════
   7. ICONS
   ════════════════════════════════════════════════════════════════════ */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    color: currentColor;
}
.icon svg { width: 100%; height: 100%; fill: currentColor; }
.icon--sm { font-size: var(--text-sm); }
.icon--md { font-size: var(--text-md); }
.icon--lg { font-size: var(--text-lg); }
.icon--xl { font-size: var(--text-xl); }
.icon--missing {
    width: 1em; height: 1em;
    background: var(--color-border);
    border-radius: var(--radius-sm);
    display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════
   8. ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════ */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-text);
    color: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    z-index: 999999;
}
.skip-link:focus { left: var(--space-md); top: var(--space-md); }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   9. COMPONENT STYLES — each component owns its own block, scoped by BEM.
   New families append below as the catalog grows.
   ════════════════════════════════════════════════════════════════════ */

/* ── Section header (used inside other sections) ── */
.section-head__heading { margin-bottom: var(--space-md); }
.section-head__sub {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 720px;
    margin: 0;
}
.section-head--center .section-head__sub { margin-inline: auto; }

/* ── Site header (template-parts/headers/standard.php) ── */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sh-sm);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-md);
}
.site-header__logo img { max-height: 48px; width: auto; }
.site-header__logo-text { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); text-decoration: none; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-lg); }
.site-header__nav-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; gap: var(--space-lg);
}
.site-header__nav-list a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--weight-med);
}
.site-header__nav-list a:hover { color: var(--color-primary); }
.site-header__menu-toggle {
    display: none;
    background: transparent; border: none; padding: var(--space-sm); cursor: pointer; color: var(--color-text);
}

@media (max-width: 767px) {
    .site-header__menu-toggle { display: inline-flex; }
    .site-header__nav {
        position: fixed;
        inset: 60px 0 0 0;
        background: var(--color-surface);
        padding: var(--space-lg);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);
        transform: translateX(100%);
        transition: transform .25s ease-out;
        z-index: 99;
    }
    .site-header__nav.is-open { transform: translateX(0); }
    .site-header__nav-list { flex-direction: column; gap: var(--space-md); }
}

/* ── Site footer (template-parts/footers/multi-column.php) ── */
.site-footer {
    background: var(--color-2);
    color: var(--color-surface);
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { opacity: .85; }
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-xl);
    padding-block: var(--space-xxl);
}
.site-footer__tagline { color: rgba(255,255,255,.7); margin-top: var(--space-md); }
.site-footer__social { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.site-footer__social a { display: inline-flex; }
.site-footer__nav-list { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.site-footer__column-heading { font-size: var(--text-md); margin-bottom: var(--space-md); color: var(--color-surface); }
.site-footer__contact p { margin-bottom: var(--space-sm); }
.site-footer__bar {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: var(--space-md);
    font-size: var(--text-sm);
    color: rgba(255,255,255,.7);
}
.site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.site-footer__legal-list { list-style: none; padding: 0; display: flex; gap: var(--space-md); margin: 0; }

@media (max-width: 767px) {
    .site-footer__inner { grid-template-columns: 1fr; }
}

/* ── Hero (template-parts/heroes/centered.php) ── */
.hero { padding-block: var(--space-xxl); }
.hero__inner { text-align: center; max-width: 800px; margin-inline: auto; }
.hero__eyebrow { margin-bottom: var(--space-sm); }
.hero__title { margin-bottom: var(--space-md); }
.hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.hero__ctas {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}
.hero__ctas:not(:last-child) { margin-bottom: var(--space-xl); }
.hero__media { margin-top: var(--space-xl); }
.hero__media img { display: block; margin-inline: auto; }

/* ── Intro split (template-parts/intro-splits/image-left.php) ── */
.intro-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
/* If there's no media slot rendered, collapse to one column */
.intro-split__inner:has(> .intro-split__content:only-child) {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}
.intro-split--image-right .intro-split__inner > .intro-split__media:first-child { order: 2; }
.intro-split__media img { width: 100%; height: auto; }
.intro-split__title { margin-bottom: var(--space-md); }
.intro-split__cta { margin-top: var(--space-lg); }

@media (max-width: 767px) {
    .intro-split__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ── Service grid — cards ── */
.service-grid__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-lg);
}
.service-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform .15s, box-shadow .15s;
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.service-card__link { display: block; text-decoration: none; color: inherit; }
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.service-card__image { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--space-lg); }
.service-card__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.service-card__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.service-card__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Generic CPT loop (cpt-loop/grid) — any custom post type ── */
/* Consumes --section-bg-color first (F17/B18) — a bg_type:color prop on this
   section must win over the component's own default, not lose to it. */
.cpt-loop {
  /* background-color, NOT the shorthand — see .hero--split note. */
  background-color: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}
.cpt-loop__list {
    display: grid;
    grid-template-columns: repeat(var(--cpt-loop-cols, 3), 1fr);
    gap: var(--cpt-loop-gap, var(--space-lg));
}
@media (max-width: 900px) { .cpt-loop__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cpt-loop__list { grid-template-columns: 1fr; } }
.cpt-loop__card {
  background: var(--cpt-loop-card-bg, var(--color-surface));
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .15s, box-shadow .15s;
  display: flex;
}
.cpt-loop__card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.cpt-loop__link { display: block; text-decoration: none; color: inherit; }
.cpt-loop__media { aspect-ratio: 4 / 3; overflow: hidden; }
.cpt-loop__image { width: 100%; height: 100%; object-fit: cover; }
.cpt-loop__body { padding: var(--space-lg); }
.cpt-loop__title { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.cpt-loop__excerpt { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.cpt-loop__more { color: var(--color-primary); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* ── Radio group field ── */
.field--radio .field__radios { display: flex; flex-direction: column; gap: var(--space-sm); }
.field--radio .field__radio { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }

/* ── Testimonial — single large ── */
.testimonial-large__figure {
    max-width: 800px;
    margin-inline: auto;
    text-align: center;
}
.testimonial-large__rating { font-size: var(--text-xl); color: var(--color-warning); margin-bottom: var(--space-md); letter-spacing: .1em; }
.testimonial-large__quote {
    font-size: var(--text-xl);
    font-family: var(--font-display);
    line-height: 1.35;
    margin: 0 0 var(--space-xl);
    quotes: '"' '"';
}
.testimonial-large__quote::before { content: open-quote; }
.testimonial-large__quote::after  { content: close-quote; }
.testimonial-large__author { display: inline-flex; align-items: center; gap: var(--space-md); }
.testimonial-large__photo img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial-large__author-text { text-align: left; }
.testimonial-large__name { display: block; font-weight: var(--weight-bold); }
.testimonial-large__role { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── CTA banner ── */
/* Consumes --section-bg-color first (F17/B18) — see .cpt-loop above. */
.cta-banner {
    background: var(--section-bg-color, var(--color-primary));
    color: var(--color-surface);
}
.cta-banner .cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    padding-block: var(--space-xl);
    flex-wrap: wrap;
}
.cta-banner__heading { color: var(--color-surface); margin: 0 0 var(--space-sm); }
.cta-banner__body { margin: 0; opacity: .9; max-width: 560px; }
.cta-banner__ctas { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.cta-banner .btn--primary {
    background: var(--color-surface);
    color: var(--color-primary);
}
.cta-banner .btn--ghost { border-color: var(--color-surface); color: var(--color-surface); }

@media (max-width: 767px) {
    .cta-banner .cta-banner__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Trust bar ── */
.trust-bar { padding-block: var(--space-xl); }
.trust-bar__heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.trust-bar__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}
.trust-bar__item { opacity: .75; transition: opacity .2s; }
.trust-bar__item:hover { opacity: 1; }
.trust-bar__logo { max-height: 40px; width: auto; filter: grayscale(1); }
.trust-bar__item:hover .trust-bar__logo { filter: grayscale(0); }
.trust-bar__label { color: var(--color-text-muted); font-weight: var(--weight-med); }

/* ── Reveal-on-scroll ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   M4 APPENDIX — new variants, families, dividers, eyebrow-with-lines
   ════════════════════════════════════════════════════════════════════ */

/* ── Section dividers (wave / slant / curve) ──
   Templates add `section--divider-top-<shape>` and/or
   `section--divider-bottom-<shape>` via layerly_section_classes(). The SVG
   is masked using --divider-fill from the section's background so the
   divider blends into whatever sits behind it. */
.section[class*="section--divider-top-"]    { padding-top:    calc(var(--space-xxl) + 60px); }
.section[class*="section--divider-bottom-"] { padding-bottom: calc(var(--space-xxl) + 60px); }

.section[class*="section--divider-top-"]::after,
.section[class*="section--divider-bottom-"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    pointer-events: none;
    background-color: var(--color-surface);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
}
.section[class*="section--divider-top-"]::after    { top: 0;    transform: scaleY(-1); }
.section[class*="section--divider-bottom-"]::before { bottom: 0; }

/* Note: divider colour defaults to --color-surface; override per-section by
   setting --color-divider on the section element. */
.section[class*="section--divider-"][style*="--color-divider"]::after,
.section[class*="section--divider-"][style*="--color-divider"]::before {
    background-color: var(--color-divider);
}

.section--divider-top-wave::after,    .section--divider-bottom-wave::before    { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg);  mask-image: url(/wp-content/themes/layerly-base/assets/dividers/wave.svg); }
.section--divider-top-slant::after,   .section--divider-bottom-slant::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/slant.svg); }
.section--divider-top-curve::after,   .section--divider-bottom-curve::before   { -webkit-mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); mask-image: url(/wp-content/themes/layerly-base/assets/dividers/curve.svg); }

/* ── Hero — split variant ── */
.hero__inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
.hero--image-left .hero__inner--split > .hero__media   { order: 1; }
.hero--image-left .hero__inner--split > .hero__content { order: 2; }
.hero--split .hero__title {
  margin-bottom: var(--space-md);
  max-width: 600px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h1);
  color: var(--color-1);
}
.hero--split .hero__subtitle {
  margin-bottom: var(--space-xl);
  max-width: 520px;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--color-4);
}
.hero--split .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: var(--space-xs);
}
.hero--split .hero__media img { width: 100%; height: auto; display: block; }

@media (max-width: 880px) {
    .hero__inner--split { grid-template-columns: 1fr; gap: var(--space-xl); }
    .hero--image-left .hero__inner--split > .hero__media,
    .hero--image-left .hero__inner--split > .hero__content { order: initial; }
}

/* ── Section head — left variant + with-line-side eyebrow ── */
.section-head--left              { text-align: left; }
.section-head--left .section-head__inner { max-width: none; margin-inline: 0; }

.eyebrow--with-lines {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    justify-content: center;
}
.eyebrow--with-lines .eyebrow__line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    max-width: 80px;
}
.eyebrow--with-lines .eyebrow__label { white-space: nowrap; }

/* ── Testimonials — carousel variant ── */
.testimonial-carousel { padding-block: var(--space-xxl); }
.tcarousel {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-md);
}
.tcarousel__track {
    grid-column: 2;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
.tcarousel__track::-webkit-scrollbar { display: none; }

.tcarousel__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: var(--space-xl);
    text-align: center;
    box-sizing: border-box;
}
.tcarousel__rating { color: var(--color-accent, var(--color-primary)); letter-spacing: 2px; margin-bottom: var(--space-md); }
.tcarousel__quote {
    font-size: var(--text-lg);
    line-height: 1.5;
    margin: 0 0 var(--space-lg);
    max-width: 720px;
    margin-inline: auto;
}
.tcarousel__author {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
}
.tcarousel__photo img { width: 56px; height: 56px; }
.tcarousel__author-text { display: flex; flex-direction: column; }
.tcarousel__name { font-weight: var(--weight-bold); }
.tcarousel__role { color: var(--color-text-muted); font-size: var(--text-sm); }

.tcarousel__nav {
    grid-row: 1;
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.tcarousel__nav:hover  { background: var(--color-bg-alt); }
.tcarousel__nav:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tcarousel__nav--prev { grid-column: 1; }
.tcarousel__nav--next { grid-column: 3; }

.tcarousel__dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}
.tcarousel__dot, .carousel__dot {
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: background-color .15s, transform .15s;
}
.tcarousel__dot.is-active, .carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.2);
}

@media (max-width: 720px) {
    .tcarousel { grid-template-columns: 1fr; }
    .tcarousel__nav { display: none; }
    .tcarousel__track { grid-column: 1; }
}

/* ── Disclosures — accordion ── */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item {
    border-bottom: 1px solid var(--color-border);
}
.accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg) 0;
    cursor: pointer;
    list-style: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.accordion__question { flex: 1; }
.accordion__icon {
    color: var(--color-text-muted);
    transition: transform .25s ease;
    display: inline-flex;
}
.accordion__item[open] > .accordion__summary .accordion__icon { transform: rotate(180deg); }
.accordion__answer {
    padding: 0 0 var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ── Team — grid ── */
.team__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
}
.team__member { text-align: center; }
.team__photo { margin-bottom: var(--space-md); }
.team__photo-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 9999px;
}
.team__name { margin: 0 0 var(--space-xs); font-size: var(--text-lg); }
.team__role { color: var(--color-text-muted); margin: 0 0 var(--space-md); }
.team__bio  { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-md); }
.team__social {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}
.team__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    color: var(--color-text-muted);
    transition: color .15s, background-color .15s;
}
.team__social a:hover { color: var(--color-primary); background: var(--color-bg-alt); }

/* ── Process steps — numbered ── */
.process-steps__list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
    counter-reset: layerly-step;
}
.process-steps__item {
    position: relative;
    padding: var(--space-xl);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
}
.process-steps__number {
    font-size: var(--text-xxl);
    line-height: 1;
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    opacity: .35;
    margin-bottom: var(--space-md);
}
.process-steps__icon { color: var(--color-primary); margin-bottom: var(--space-md); font-size: 32px; }
.process-steps__title { margin: 0 0 var(--space-sm); font-size: var(--text-lg); }
.process-steps__desc  { margin: 0; color: var(--color-text-muted); line-height: 1.6; }

/* ── Feature blocks — alternating ── */
.feature-blocks__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xxl);
}
.feature-blocks__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxl);
    align-items: center;
}
.feature-blocks__row--image-right > .feature-blocks__media   { order: 2; }
.feature-blocks__row--image-right > .feature-blocks__content { order: 1; }
.feature-blocks__media img { width: 100%; height: auto; display: block; }
.feature-blocks__title { margin: 0 0 var(--space-md); font-size: var(--text-xl); }
.feature-blocks__body  { color: var(--color-text-muted); line-height: 1.65; }
.feature-blocks__body p:last-child { margin-bottom: 0; }

@media (max-width: 880px) {
    .feature-blocks__row,
    .feature-blocks__row--image-right { grid-template-columns: 1fr; }
    .feature-blocks__row > *,
    .feature-blocks__row--image-right > * { order: initial; }
}

/* ── Site footer — minimal ── */
.site-footer--minimal { padding-block: var(--space-lg); border-top: 1px solid var(--color-border); }
.site-footer--minimal .site-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__minimal-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}
.site-footer--minimal .site-footer__copyright { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.site-footer--minimal .site-footer__legal-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--space-md);
}
.site-footer--minimal .site-footer__legal-list a {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}
.site-footer--minimal .site-footer__legal-list a:hover { color: var(--color-text); }

/* ════════════════════════════════════════════════════════════════════
   COMPONENT LIBRARY (P1) — nav · footer · form · fields
   Structure/behavior LOCKED. Per-site look = override the --knobs below.
   ════════════════════════════════════════════════════════════════════ */

/* ── Component: nav/primary ── */
.nav {
    --nav-bg: var(--color-surface);
    --nav-fg: var(--color-text);
    --nav-height: 72px;
    --nav-link-weight: var(--weight-med);
    --nav-link-hover: var(--color-primary);
    --nav-gap: var(--space-lg);
    background: var(--nav-bg);
    color: var(--nav-fg);
}
[data-nav-sticky] { position: sticky; top: 0; z-index: 1000; transition: box-shadow .2s; }
[data-nav-sticky].is-scrolled { box-shadow: var(--sh-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap); min-height: var(--nav-height); }
.nav__logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.nav__logo-img { max-height: calc(var(--nav-height) - var(--space-lg)); width: auto; }
.nav__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: inherit; }
.nav__menu { display: flex; align-items: center; gap: var(--nav-gap); }
.nav__list { display: flex; align-items: center; gap: var(--nav-gap); list-style: none; margin: 0; padding: 0; }
.nav__list a { color: inherit; text-decoration: none; font-weight: var(--nav-link-weight); }
.nav__list a:hover { color: var(--nav-link-hover); }
.nav__cta { white-space: nowrap; }

/* ── Chrome behavior — LOCKED, attribute-driven ───────────────────────────
   Works on nav/primary AND any bespoke header/footer that uses the data hooks.
   Design the LOOK on your own classes / the --mobile-menu-* vars; the BEHAVIOR
   (full-screen drawer, hamburger→X, body-lock) comes from here — never rebuilt.
   Hooks: [data-mobile-menu-toggle] (the hamburger button, 3 <span> bars),
   [data-mobile-menu] (the drawer), [data-nav-sticky] (above). */
[data-mobile-menu-toggle] { display: none; position: relative; z-index: 1002; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; padding: 0; background: none; border: 0; color: inherit; cursor: pointer; }
[data-mobile-menu-toggle] > span { display: block; width: 26px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
[data-mobile-menu-toggle][aria-expanded="true"] > span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 768px) {
    [data-mobile-menu-toggle] { display: inline-flex; }
    [data-mobile-menu] {
        position: fixed; inset: 0; z-index: 1001;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: var(--space-lg); padding: var(--space-xxl) var(--space-lg);
        /* Solid brand fallback — NOT --nav-bg, which is often transparent on a
           transparent-over-hero header and would make the whole drawer invisible. */
        background: var(--mobile-menu-bg, var(--color-1));
        color: var(--mobile-menu-fg, var(--color-surface));
        transform: translateX(100%); transition: transform .3s ease; overflow-y: auto;
    }
    [data-mobile-menu].is-open { transform: translateX(0); }
    [data-mobile-menu] ul { flex-direction: column; align-items: center; gap: var(--space-md); width: 100%; margin: 0; padding: 0; list-style: none; }
    [data-mobile-menu] a { font-size: var(--text-lg); color: var(--mobile-menu-fg, var(--color-surface)); }
    body.mobile-menu-open { overflow: hidden; }
    /* When the drawer is open the hamburger→X sits OVER the drawer — force it to the
       drawer's fg so it's always visible even if the header's own color is dark/transparent. */
    [data-mobile-menu-toggle][aria-expanded="true"] { color: var(--mobile-menu-fg, var(--color-surface)); }
}

/* ── WP admin-bar offset — LOCKED (FIX 80: generalized from 3 hardcoded selectors + a
   duplicated 782px override block into ONE custom property, so NEW fixed chrome is
   covered automatically instead of needing to be added to this rule by name every time —
   a pre-header added 2026-07-29 was never added here and slid under the bar). The 32px
   admin bar (46px ≤782px) is fixed to the viewport top and only shown to logged-in users.
   WordPress shifts NORMAL-flow content for it, but NOT position:fixed/sticky/absolute
   chrome — so any top-anchored fixed element (header, pre-header, announcement bar, ...)
   renders UNDER the bar for a logged-in visitor unless its OWN `top` consumes
   --wp-adminbar-offset. The property only EXISTS under body.admin-bar, so
   `var(--wp-adminbar-offset, 0px)` correctly falls back to 0 for the far-more-common
   logged-out visitor — which is exactly why this bug class is invisible without an admin
   session. Any bespoke top-anchored fixed component MUST write its own `top` as
   `calc(<its own stacking offset — 0, or a sibling chrome element's height> +
   var(--wp-adminbar-offset, 0px))` so it stacks additively instead of one fixed element's
   hardcoded top clobbering another's — see admin-rulebook.js "FIXED CHROME". ── */
body.admin-bar { --wp-adminbar-offset: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --wp-adminbar-offset: 46px; }
}
body.admin-bar [data-nav-sticky],
body.admin-bar [data-nav-overlay],
body.admin-bar .site-header--overlay { top: var(--wp-adminbar-offset); }

/* ── Standard copyright line (footer.php, every site — themeable) ── */
.layerly-copyright { background: var(--footer-copyright-bg, var(--color-2)); color: var(--footer-copyright-fg, var(--color-surface)); text-align: center; padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); }
.layerly-copyright__line { margin: 0; }
.layerly-copyright__sep { opacity: .5; margin: 0 .35em; }
/* FIX 47 (Alexander, 2026-07-24) — the "Made by Layerly" credit is NEVER underlined, on
   every site we build. Two selectors on purpose: `.layerly-copyright` covers footer.php's
   fallback strip, `.layerly-copyright__line` covers a BESPOKE footer template-part that calls
   layerly_footer_credit() directly — the case that shipped underlined on Aveya, because the
   theme's other `text-decoration:none` rule is scoped to `.site-footer`, which bespoke
   footers don't have. Underline returns on hover/focus so the link stays discoverable and
   keyboard-visible (a resting state with neither underline nor colour contrast would fail
   WCAG 1.4.1). */
.layerly-copyright a,
.layerly-copyright__line a { color: inherit; text-decoration: none; }
.layerly-copyright a:hover,
.layerly-copyright a:focus-visible,
.layerly-copyright__line a:hover,
.layerly-copyright__line a:focus-visible { text-decoration: underline; }

/* ── Component: footers/columns ── */
.footer {
    --footer-bg: var(--color-2);
    --footer-fg: var(--color-surface);
    --footer-heading: var(--color-surface);
    --footer-link: rgba(255,255,255,.7);
    --footer-link-hover: var(--color-surface);
    --footer-pad-y: var(--space-xxl);
    --footer-cols: 4;
    background: var(--footer-bg);
    color: var(--footer-fg);
}
.footer__inner {
    display: grid; gap: var(--space-xl);
    grid-template-columns: 1.4fr repeat(var(--footer-cols), 1fr);
    padding-block: var(--footer-pad-y);
}
.footer__logo { display: inline-flex; text-decoration: none; color: inherit; }
.footer__logo-img { max-height: 44px; width: auto; }
.footer__logo-text { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.footer__tagline { color: var(--footer-link); margin-top: var(--space-md); max-width: 32ch; }
.footer__columns { display: contents; }
.footer__col-heading { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--footer-heading); margin-bottom: var(--space-md); }
.footer__col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.footer__col-list a, .footer__legal-list a { color: var(--footer-link); text-decoration: none; }
.footer__col-list a:hover, .footer__legal-list a:hover { color: var(--footer-link-hover); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); }
.footer__legal-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-lg); }
.footer__copyright { margin: 0; color: var(--footer-link); font-size: var(--text-sm); }
.footer__legal-list { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
@media (max-width: 768px) {
    .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer__inner { grid-template-columns: 1fr; }
}

/* ── Component: forms/contact + field primitives ── */
.form {
    --form-gap: var(--space-md);
    --form-cols: 2;
    --field-bg: var(--color-surface);
    --field-fg: var(--color-text);
    --field-border: var(--color-border);
    --field-radius: var(--radius-md);
    --field-pad: var(--space-md);
    --field-focus: var(--color-primary);
    --label-color: var(--color-text);
}
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__fields { display: grid; grid-template-columns: repeat(var(--form-cols), 1fr); gap: var(--form-gap); }
.field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-med); color: var(--label-color); }
.field__req { color: var(--color-error); }
.field__input {
    width: 100%; box-sizing: border-box;
    background: var(--field-bg); color: var(--field-fg);
    border: 1px solid var(--field-border); border-radius: var(--field-radius);
    padding: var(--field-pad); font: inherit; font-size: var(--text-md);
    transition: border-color .15s, box-shadow .15s;
}
.field__input:focus-visible { outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-focus) 25%, transparent); }
.field__textarea { resize: vertical; min-height: 120px; }
.field--checkbox .field__check { flex-direction: row; align-items: center; gap: var(--space-sm); cursor: pointer; }
.field__checkbox { width: 18px; height: 18px; accent-color: var(--field-focus); }
.form__submit { margin-top: var(--form-gap); }
.form__status { margin-top: var(--space-sm); font-size: var(--text-sm); min-height: 1.2em; }
.form__status.is-error { color: var(--color-error); }
.form__status.is-success { color: var(--color-success); }
@media (max-width: 600px) {
    .form__fields { grid-template-columns: 1fr; }
}

/* ── Component: heroes/full-bg (knob-driven) ── */
.hero--full-bg {
    --hero-bg: var(--color-1);
    --hero-fg: var(--color-surface);
    --hero-overlay: rgba(0,0,0,.45);
    --hero-min-h: 80vh;
    --hero-pad-y: var(--space-xxl);
    --hero-align: left;
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-min-h);
    padding-block: var(--hero-pad-y);
    /* Consumes --section-bg-color first (F17/B18) — hero_bg_type:color must win
       over this component's own default, not silently lose to it. */
    background: var(--section-bg-color, var(--hero-bg));
    color: var(--hero-fg);
    overflow: hidden;
}
.hero--full-bg .hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero--full-bg .hero__bg-img { width: 100%; height: 100%; object-fit: cover; }
.hero--full-bg .hero__overlay { position: absolute; inset: 0; z-index: 1; background: var(--hero-overlay); pointer-events: none; }
.hero--full-bg .hero__inner { position: relative; z-index: 2; text-align: var(--hero-align); width: 100%; }
.hero--full-bg .hero__title { color: var(--hero-fg); font-size: var(--text-h1); margin-bottom: var(--space-md); }
.hero--full-bg .hero__subtitle { color: var(--hero-fg); font-size: var(--text-lg); opacity: .92; max-width: 56ch; margin-bottom: var(--space-xl); }
.hero--full-bg .hero__eyebrow { color: var(--hero-fg); }
.hero--full-bg .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* Center alignment: set --hero-align:center; the inner is centered + content too. */
.hero--full-bg[style*="--hero-align: center"] .hero__inner { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__subtitle { margin-inline: auto; }
.hero--full-bg[style*="--hero-align: center"] .hero__ctas { justify-content: center; }
@media (max-width: 768px) {
    .hero--full-bg { --hero-min-h: 60vh; }
    .hero--full-bg .hero__title { font-size: var(--text-h2); }
}

/* ── chrome/topbar (E2c, 2026-08-11) ──────────────────────────────────────────────
   The utility bar above the site header. Renders only when topbar_enabled='1', so
   these rules are inert on every site that hasn't switched it on.

   TWO MODES, because a top bar means different things depending on the header:
     • default — a solid strip in normal document flow, above the header.
     • .topbar--over-hero — the site's header draws OVER the hero
       (.site-header--overlay / nav_overlay). A solid strip there would push the hero
       down and break the design, so the bar goes transparent and sits over the hero
       with the header. This is the D10/D11 bespoke-chrome failure class, handled once
       here instead of per site.

   The over-hero mode is position:fixed, so per the LOCKED admin-bar block above it
   writes its own `top` additively as calc(0px + var(--wp-adminbar-offset, 0px)) —
   it is the TOPMOST fixed element, hence 0px, and the sticky header below it offsets
   by --topbar-height in turn. */
.topbar {
  --topbar-bg:     var(--color-1);
  --topbar-fg:     var(--color-surface);
  --topbar-height: 36px;
  --topbar-size:   var(--text-sm);
  --topbar-gap:    var(--space-md);

  background: var(--topbar-bg);
  color: var(--topbar-fg);
  font-size: var(--topbar-size);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--topbar-gap);
  width: 100%;
  min-height: var(--topbar-height);
}
.topbar__text { margin: 0; margin-right: auto; }
.topbar__phone,
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--topbar-gap) / 3);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__phone:hover,
.topbar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.topbar__icon { width: 1em; height: 1em; flex: none; }

/* Over-hero: transparent, fixed above the overlay header, stacked above it. */
.topbar--over-hero {
  background: transparent;
  position: fixed;
  top: calc(0px + var(--wp-adminbar-offset, 0px));
  left: 0;
  right: 0;
  z-index: 101;   /* one above the overlay header's own stacking */
}
.topbar--over-hero + .site-header,
.topbar--over-hero ~ [data-nav-sticky] { top: calc(var(--topbar-height) + var(--wp-adminbar-offset, 0px)); }

/* On phones the bar earns its space only if it is short. Text drops first, the
   phone number — the reason most sites want this bar — stays. */
@media (max-width: 640px) {
  .topbar__text { display: none; }
  .topbar__inner { justify-content: center; }
}

/* ── Prose blocks (layerly_prose, E2e) ──
   When body/description copy carries real structure (multi-paragraph, lists),
   layerly_prose wraps it in a div carrying the part's own class + .is-prose;
   these rules give the inner paragraphs and lists their rhythm. Single-
   paragraph copy never enters this path — it renders exactly as before. */
.is-prose > p { margin: 0 0 var(--space-md); }
.is-prose > p:last-child { margin-bottom: 0; }
.is-prose ul,
.is-prose ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
.is-prose ul:last-child,
.is-prose ol:last-child { margin-bottom: 0; }
.is-prose li { margin: 0 0 var(--space-xs); }
.is-prose li > ul,
.is-prose li > ol { margin: var(--space-xs) 0 0; }


/* Layerly — Phase 4 chrome: floating-pill nav (translucent over hero, solidifies on scroll) + cream-on-ink rosewood footer, to Figma — 2026-09-02T03:35:48.830Z */
.nav--floating-pill {
  --nav-pill-bg: color-mix(in srgb, var(--color-5) 55%, transparent);
  --nav-pill-bg-solid: var(--color-7);
  --nav-pill-border: color-mix(in srgb, var(--color-2) 45%, transparent);
  --nav-height: 76px;
  --mobile-menu-bg: var(--color-7);
  --mobile-menu-fg: var(--color-1);
  position: absolute;
  top: var(--space-xl);
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border: 0;
  transition: top .25s ease;
}

.nav--floating-pill .nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  width: min(var(--container-max), 100% - (2 * var(--space-2xl)));
  margin-inline: auto;
  min-height: var(--nav-height);
  padding-inline: 32px;
  background: var(--nav-pill-bg);
  border: var(--hairline) solid var(--nav-pill-border);
  border-radius: var(--radius-full);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .25s ease, border-color .25s ease;
}

.nav--floating-pill.is-stuck {
  position: fixed;
  top: var(--space-sm);
}

.nav--floating-pill.is-stuck .nav__inner {
  background: var(--nav-pill-bg-solid);
  border-color: var(--color-2);
}

.nav--floating-pill .nav__logo-img {
  display: block;
  width: auto;
  height: 62px;
}

.nav--floating-pill .nav__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-1);
}

.nav--floating-pill .nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.nav--floating-pill .nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav--floating-pill .nav__list a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-reg);
  line-height: var(--leading-sm);
  color: var(--color-1);
  text-decoration: none;
  transition: color .2s ease;
}

.nav--floating-pill .nav__list a:hover, .nav--floating-pill .nav__list .current-menu-item > a {
  color: var(--color-4);
}

.nav--floating-pill .nav__list a:focus-visible, .nav--floating-pill .nav__cta:focus-visible, .nav--floating-pill .nav__logo:focus-visible {
  outline: 2px solid var(--color-4);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.nav--floating-pill .nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding-inline: 24px;
  background: var(--color-6);
  color: var(--color-8);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  border: 0;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .2s ease;
}

.nav--floating-pill .nav__cta:hover {
  background: color-mix(in srgb, var(--color-6) 85%, var(--color-5));
}

.footer--rosewood {
  position: relative;
  overflow: hidden;
  background: var(--color-5);
  color: var(--color-1);
  padding: var(--space-2xl) var(--space-2xl) 56px;
}

.footer--rosewood .footer__motif {
  position: absolute;
  width: 520px;
  height: 520px;
  background: var(--color-7);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 38%, transparent 39%);
  mask: radial-gradient(circle at 50% 50%, #000 38%, transparent 39%);
  pointer-events: none;
  right: -180px;
  bottom: -200px;
  opacity: .35;
}

.footer--rosewood .footer__inner {
  position: relative;
  z-index: 1;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.footer--rosewood .footer__columns {
  display: grid;
  grid-template-columns: 300px repeat(3, 240px);
  justify-content: space-between;
  gap: var(--space-2xl);
  padding-top: 56px;
  border-top: var(--hairline) solid var(--color-2);
}

.footer--rosewood .footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer--rosewood .footer__logo-img {
  display: block;
  width: auto;
  height: 114px;
}

.footer--rosewood .footer__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-1);
  text-decoration: none;
}

.footer--rosewood .footer__logo {
  text-decoration: none;
}

.footer--rosewood .footer__tagline {
  max-width: 250px;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-4);
}

.footer--rosewood .footer__col {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer--rosewood .footer__heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-4);
}

.footer--rosewood .footer__list {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer--rosewood .footer__nap {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-style: normal;
}

.footer--rosewood .footer__nap-block {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer--rosewood .footer__nap-line {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-1);
}

.footer--rosewood .footer__nap-line--muted {
  color: var(--color-4);
}

.footer--rosewood .footer__link, .footer--rosewood .footer__list a {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-1);
  text-decoration: none;
  transition: color .2s ease;
}

.footer--rosewood .footer__link:hover, .footer--rosewood .footer__list a:hover {
  color: var(--color-4);
}

.footer--rosewood .footer__link:focus-visible, .footer--rosewood .footer__list a:focus-visible, .footer--rosewood .footer__logo:focus-visible {
  outline: 2px solid var(--color-4);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.footer--rosewood .footer__colophon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--color-2);
}

.footer--rosewood .footer__credit, .footer--rosewood .footer__credit a, .footer--rosewood .footer__colophon-note {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: #B9AE9C;
}

.footer--rosewood .footer__credit a {
  text-decoration: underline;
}

.footer--rosewood .footer__credit a:hover {
  color: var(--color-4);
}

/* ── CHROME RESPONSIVE — literal @media blocks on purpose: write_css strips
   @media wrappers, which would promote every mobile override to a global rule
   and break the desktop pill/footer grid. Edit these with edit_file, not write_css. */
@media (max-width: 1100px) {
  .nav--floating-pill .nav__inner {
    width: min(var(--container-max), 100% - (2 * var(--space-xl)));
  }
  .footer--rosewood .footer__columns {
    grid-template-columns: 1fr 1fr;
    justify-content: start;
    gap: var(--space-xl) var(--space-2xl);
  }
}

@media (max-width: 880px) {
  .nav--floating-pill {
    top: var(--space-sm);
  }
  .nav--floating-pill .nav__inner {
    width: min(var(--container-max), 100% - (2 * var(--space-md)));
    padding-inline: var(--space-md);
    gap: var(--space-md);
  }
  /* The desktop `.nav__menu { display:flex }` above outranks the base theme's
     mobile hiding rule, so without this the full menu renders inline at 375px
     and overflows (scrollWidth 687 > 375). Hide it until the drawer opens. */
  .nav--floating-pill .nav__menu {
    display: none;
  }
  .nav--floating-pill .nav__menu.is-open,
  .nav--floating-pill .nav__menu[data-mobile-menu].is-open {
    display: flex;
    position: absolute;
    top: calc(100% + var(--space-sm));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--mobile-menu-bg, var(--color-7));
    border: var(--hairline) solid var(--color-2);
    border-radius: var(--radius-sm);
  }
  .nav--floating-pill .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .nav--floating-pill .nav__inner {
    position: relative;
    flex-wrap: nowrap;
  }
  .nav--floating-pill .nav__logo-img {
    height: 48px;
  }
  .footer--rosewood {
    padding: var(--space-xl) var(--space-md) var(--space-xl);
  }
  .footer--rosewood .footer__columns {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding-top: var(--space-xl);
  }
  .footer--rosewood .footer__motif {
    width: 320px;
    height: 320px;
    right: -120px;
  }
  .footer--rosewood .footer__colophon {
    margin-top: var(--space-xl);
  }
}


/* Layerly — Chrome fixes: clearance under the absolute floating nav on pages with no hero; soften footer rose motif so it does not crowd the contact column — 2026-09-02T03:37:10.352Z */
body:not(.home) .site-main {
  padding-top: 150px;
}


/* Layerly — Phase 5: all homepage section CSS from exact Figma dev-mode values — 2026-09-02T04:08:07.794Z */
.hero--split {
  /* background-color, NOT the `background` shorthand: the shorthand resets
     background-image to none and would kill .section--bg-image's texture. */
  background-color: var(--section-bg-color, var(--color-7));
  padding: 200px var(--space-2xl) 96px;
}

.hero--split .hero__inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.hero--split .hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 640px;
  flex: 0 0 auto;
}

.hero--split .hero__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-4);
}

.hero--split .hero__subtitle p {
  margin: 0 0 var(--space-md);
}

.hero--split .hero__subtitle p:last-child {
  margin-bottom: 0;
}

.hero--split .hero__media {
  position: relative;
  flex: 0 0 auto;
  width: 458px;
  padding: 18px 18px 0 0;
}

.hero--split .hero__media::before {
  content: "";
  position: absolute;
  inset: 18px 0 0 18px;
  border: var(--hairline) solid var(--color-2);
  pointer-events: none;
}

.hero--split .hero__media img, .hero--split .hero__media .layerly-placeholder {
  position: relative;
  display: block;
  width: 440px;
  height: 560px;
  object-fit: cover;
  border: var(--hairline) solid var(--color-2);
  border-radius: 0;
}

.hero--split .hero__facts {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: min(var(--container-max), 100%);
  margin: 64px auto 0;
  padding-top: 34px;
  border-top: var(--hairline) solid var(--color-2);
}

.hero--split .hero__fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1 1 0;
}

.hero--split .hero__fact + .hero__fact {
  padding-left: 28px;
  border-left: var(--hairline) solid var(--color-2);
}

.hero--split .hero__fact-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--color-4);
}

.hero--split .hero__fact-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-1);
}

.hero--split .btn, .intro-split .btn, .visit-block__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: 34px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.hero--split .btn--primary, .intro-split .btn--primary, .visit-block__cta {
  background: var(--color-6);
  color: var(--color-8);
  border: var(--hairline) solid var(--color-6);
}

.hero--split .btn--primary:hover, .intro-split .btn--primary:hover, .visit-block__cta:hover {
  background: color-mix(in srgb, var(--color-6) 85%, var(--color-5));
}

.hero--split .btn--secondary {
  background: transparent;
  color: var(--color-1);
  border: var(--hairline) solid var(--color-2);
}

.hero--split .btn--secondary:hover {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
}

.promise-band--statement-link {
  background: var(--section-bg-color, var(--color-6));
  padding: 0;
}

.promise-band--statement-link .promise-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  width: min(var(--container-max), 100%);
  min-height: 104px;
  margin-inline: auto;
  padding-block: var(--space-md);
  padding-inline: 0;
}

.promise-band--statement-link .promise-band__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 31px;
  color: var(--color-1);
}

.promise-band--statement-link .promise-band__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  color: var(--color-1);
  text-decoration: none;
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--color-1) 55%, transparent);
  padding-bottom: 2px;
}

.promise-band--statement-link .promise-band__link:hover {
  border-bottom-color: var(--color-1);
}

.manifesto--stacked-pairs {
  position: relative;
  overflow: hidden;
  background: var(--section-bg-color, var(--color-8));
  padding: 130px var(--space-2xl) 130px;
}

.manifesto--stacked-pairs .manifesto__motif {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 620px;
  transform: translate(-50%, -50%);
  background: var(--color-4);
  opacity: .08;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%);
  mask: radial-gradient(circle at 50% 50%, #000 40%, transparent 41%);
  pointer-events: none;
}

.manifesto--stacked-pairs .manifesto__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.manifesto--stacked-pairs .manifesto__eyebrow {
  margin: 0 0 var(--space-xl);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-6);
}

.manifesto--stacked-pairs .manifesto__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.manifesto--stacked-pairs .manifesto__pair {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h2);
  color: var(--color-5);
}

.manifesto--stacked-pairs .manifesto__rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--color-2);
}

.manifesto--stacked-pairs .manifesto__body {
  max-width: 680px;
  margin: var(--space-xl) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-3);
}

.intro-split {
  background: var(--section-bg-color, transparent);
  padding: 40px var(--space-2xl) 140px;
}

.intro-split .intro-split__inner, .intro-split .wrap {
  display: flex;
  align-items: flex-start;
  gap: 80px;
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.intro-split--image-right .intro-split__inner, .intro-split--image-right .wrap {
  flex-direction: row-reverse;
}

.intro-split .intro-split__media {
  position: relative;
  flex: 0 0 auto;
  width: 538px;
  max-width: 538px;
  padding: 18px 18px 0 0;
}

.intro-split .intro-split__media::before {
  content: "";
  position: absolute;
  inset: 18px 0 0 18px;
  border: var(--hairline) solid var(--color-2);
  pointer-events: none;
}

.intro-split .intro-split__media img, .intro-split .intro-split__media .layerly-placeholder {
  position: relative;
  display: block;
  width: 520px;
  height: 600px;
  object-fit: cover;
  border: var(--hairline) solid var(--color-2);
  border-radius: 0;
}

.intro-split .intro-split__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  gap: 22px;
  max-width: 582px;
}

.intro-split .intro-split__eyebrow {
  margin: 0;
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-6);
}

.intro-split .intro-split__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.intro-split .intro-split__body {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-3);
}

.intro-split .intro-split__body p {
  margin: 0 0 var(--space-md);
}

.intro-split .intro-split__body p:last-child {
  margin-bottom: 0;
}

.intro-split .intro-split__notes {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline) solid var(--color-2);
  margin-top: 0;
}

.intro-split .intro-split__note {
  display: flex;
  gap: 20px;
  padding-top: 22px;
  padding-bottom: 0;
  border-bottom: 0;
  min-height: 79px;
}

.intro-split .intro-split__note-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-6);
}

.intro-split .intro-split__note-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.intro-split .intro-split__note-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-5);
}

.intro-split .intro-split__note-text {
  color: var(--color-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.intro-split--image-right .intro-split__title {
  color: var(--color-1);
}

.intro-split--image-right .intro-split__eyebrow {
  color: var(--color-4);
}

.intro-split--image-right .intro-split__body {
  color: var(--color-4);
}

.intro-split--image-right .intro-split__quote {
  max-width: 520px;
  margin: 0;
  padding-top: var(--space-lg);
  border-top: var(--hairline) solid var(--color-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 31px;
  color: var(--color-1);
}

.intro-split--image-right .intro-split__signoff {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-reg);
  line-height: 31px;
  letter-spacing: 0;
  text-transform: none;
  color: #D8BFA8;
}

.cpt-loop .wrap {
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.cpt-loop__furniture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 14px;
}

.cpt-loop__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.cpt-loop__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-6);
  border-radius: var(--radius-full);
}

.cpt-loop__label .eyebrow, .cpt-loop__meta-right {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.cpt-loop__label .eyebrow {
  font-weight: var(--eyebrow-weight);
  color: var(--color-6);
}

.cpt-loop__meta-right {
  font-weight: var(--weight-med);
  color: var(--color-3);
}

.cpt-loop__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-2);
}

.cpt-loop__heading {
  max-width: 780px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.cpt-loop__subheading {
  max-width: 600px;
  margin: 22px 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-3);
}

.cpt-loop__grid {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}

.cpt-loop__card .cpt-loop__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
}

.cpt-loop__card--spine .cpt-loop__link {
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 372px;
  padding: 26px 20px;
  background: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-sm);
  transition: transform .2s ease;
}

.cpt-loop__card--spine:hover .cpt-loop__link {
  transform: translateY(-4px);
}

.cpt-loop__card--spine .cpt-loop__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 100%;
}

.cpt-loop__spine-rule {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-2);
}

.cpt-loop__card--spine .cpt-loop__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-reg);
  line-height: 27px;
  color: var(--color-5);
}

.cpt-loop__card--spine .cpt-loop__excerpt {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-3);
}

.cpt-loop__card--spine .cpt-loop__tag {
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-6);
}

.cpt-loop__card--pick .cpt-loop__link {
  gap: var(--space-md);
}

.cpt-loop__card--pick .cpt-loop__media, .cpt-loop__card--pick .cpt-loop__media--empty {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  border: var(--hairline) solid var(--color-2);
}

.cpt-loop__card--pick .cpt-loop__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cpt-loop__card--pick .cpt-loop__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cpt-loop__card--pick .cpt-loop__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 27px;
  color: var(--color-1);
}

.cpt-loop__card--pick .cpt-loop__attrib {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-4);
}

.cpt-loop--staff-picks .cpt-loop__heading {
  color: var(--color-1);
}

.cpt-loop--staff-picks .cpt-loop__label .eyebrow {
  color: var(--color-4);
}

.cpt-loop--staff-picks .cpt-loop__meta-right {
  color: var(--color-4);
}

.cpt-loop--staff-picks .cpt-loop__marker {
  border-color: var(--color-4);
}

.gallery--staggered-columns {
  background: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}

.gallery--staggered-columns .wrap {
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.gallery__furniture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 14px;
}

.gallery__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.gallery__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-4);
  border-radius: var(--radius-full);
}

.gallery__label .eyebrow, .gallery__meta {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.gallery__label .eyebrow {
  font-weight: var(--eyebrow-weight);
  color: var(--color-4);
}

.gallery__meta {
  font-weight: var(--weight-med);
  color: var(--color-4);
}

.gallery__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-2);
}

.gallery__heading {
  max-width: 780px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-1);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 34px;
  align-items: start;
}

.gallery__column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gallery__column--2 {
  margin-top: 48px;
}

.gallery__column--3 {
  margin-top: 24px;
}

.gallery__item {
  margin: 0;
  border: var(--hairline) solid var(--color-2);
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
}

.gallery__item .gallery__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: var(--space-md);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-4);
}

.visit-block--details-hours {
  background: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}

.visit-block--details-hours .wrap {
  width: min(var(--container-max), 100%);
  margin-inline: auto;
}

.visit-block__furniture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 14px;
}

.visit-block__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.visit-block__marker {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-6);
  border-radius: var(--radius-full);
}

.visit-block__label .eyebrow, .visit-block__meta {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.visit-block__label .eyebrow {
  font-weight: var(--eyebrow-weight);
  color: var(--color-6);
}

.visit-block__meta {
  font-weight: var(--weight-med);
  color: var(--color-3);
}

.visit-block__rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--color-2);
}

.visit-block__heading {
  max-width: 780px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.visit-block__row {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 80px;
  margin-top: 34px;
  align-items: start;
}

.visit-block__list {
  margin: 0;
  border-top: var(--hairline) solid var(--color-2);
}

.visit-block__detail {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-md);
  padding: 22px 0;
  border-bottom: var(--hairline) solid var(--color-2);
}

.visit-block__detail-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-xs);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-6);
}

.visit-block__detail-value {
  margin: 0;
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-5);
}

.visit-block__detail-link {
  color: var(--color-5);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.visit-block__detail-link:hover {
  color: var(--color-6);
}

.visit-block__cta {
  margin-top: var(--space-xl);
}

.visit-block__aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.visit-block__hours {
  padding: var(--space-lg);
  background: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-sm);
}

.visit-block__hours-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.visit-block__hours-label {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-6);
}

.visit-block__badge {
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background: var(--color-4);
  color: var(--color-5);
}

.visit-block__hours-list {
  margin: 0;
}

.visit-block__hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--hairline) solid color-mix(in srgb, var(--color-2) 45%, transparent);
}

.visit-block__hours-row:last-child {
  border-bottom: 0;
}

.visit-block__hours-days, .visit-block__hours-time {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-5);
}

.visit-block__hours-note {
  margin: var(--space-md) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  color: var(--color-3);
}

.visit-block__map {
  min-height: 260px;
  background: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.visit-block__map-frame {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border: 0;
}

.visit-block__map-placeholder {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-3);
}

.disclosures {
  background: var(--section-bg-color, transparent);
  padding: 130px var(--space-2xl) 140px;
}

/* Grid column counts — the genre shelves run 6-up, staff picks 4-up. */
.cpt-loop--genre-shelves .cpt-loop__grid {
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  margin-top: 44px;
}
.cpt-loop--staff-picks .cpt-loop__grid { grid-template-columns: repeat(4, 1fr); }

/* ── HOMEPAGE SECTION RESPONSIVE — literal @media blocks on purpose: write_css
   strips @media wrappers, which would promote these to global rules and
   collapse every desktop grid to one column. Edit with edit_file, not write_css. */
@media (max-width: 1200px) {
  .cpt-loop--genre-shelves .cpt-loop__grid { grid-template-columns: repeat(3, 1fr); }
  .visit-block__row { grid-template-columns: 1fr; gap: var(--space-xl); }
}

@media (max-width: 1000px) {
  .hero--split .hero__inner,
  .intro-split .wrap,
  .intro-split--image-right .wrap {
    flex-direction: column;
    gap: var(--space-xl);
  }
  .hero--split .hero__content,
  .hero--split .hero__media,
  .intro-split .intro-split__media {
    width: 100%;
  }
  .hero--split .hero__media img,
  .hero--split .hero__media .layerly-placeholder,
  .intro-split .intro-split__media img,
  .intro-split .intro-split__media .layerly-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .hero--split .hero__facts { flex-wrap: wrap; }
  .cpt-loop--staff-picks .cpt-loop__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__column--2, .gallery__column--3 { margin-top: 0; }
}

@media (max-width: 720px) {
  .hero--split { padding: 150px var(--space-md) var(--space-2xl); }
  .hero--split .hero__title { font-size: 40px; line-height: 46px; }
  .hero--split .hero__fact + .hero__fact { padding-left: 0; border-left: 0; }
  .hero--split .hero__facts { flex-direction: column; gap: var(--space-md); }
  .intro-split,
  .cpt-loop,
  .gallery--staggered-columns,
  .visit-block--details-hours,
  .disclosures {
    padding: var(--space-2xl) var(--space-md);
  }
  .manifesto--stacked-pairs { padding: var(--space-2xl) var(--space-md); }
  .manifesto--stacked-pairs .manifesto__pair { font-size: 32px; line-height: 40px; }
  .cpt-loop__heading,
  .gallery__heading,
  .visit-block__heading,
  .intro-split .intro-split__title {
    font-size: 30px;
    line-height: 38px;
  }
  .cpt-loop--genre-shelves .cpt-loop__grid,
  .cpt-loop--staff-picks .cpt-loop__grid,
  .gallery__grid {
    grid-template-columns: 1fr;
  }
  .cpt-loop__card--spine .cpt-loop__link { min-height: 0; }
  .promise-band--statement-link .promise-band__inner { padding-block: var(--space-lg); }
  .visit-block__detail { grid-template-columns: 1fr; gap: var(--space-xs); }
}


/* Layerly — Hero split + wrap width overrides appended last to beat base-theme source order — 2026-09-02T04:09:46.733Z */
.section--hero.hero--split {
  background-color: var(--section-bg-color, var(--color-7));
  padding: 200px var(--space-2xl) 96px;
  padding-bottom: clamp(48px, 7vw, 96px);
  padding-top: clamp(96px, 14vw, 200px);
}

.section--hero.hero--split .hero__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  width: min(var(--container-max), 100%);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 0;
  gap: 60px;
}

.section--hero.hero--split .hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 640px;
  max-width: 640px;
  flex: 0 0 auto;
  margin-inline: 0;
  gap: 26px;
}

.section--hero.hero--split .hero__eyebrow {
  color: var(--color-4);
}

.section--hero.hero--split .hero__title {
  max-width: 600px;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h1);
  color: var(--color-1);
}

.section--hero.hero--split .hero__subtitle {
  max-width: 520px;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--color-4);
}

.section--hero.hero--split .hero__ctas {
  justify-content: flex-start;
  margin-top: var(--space-xs);
}

.section--hero.hero--split .hero__media {
  width: 458px;
  max-width: 458px;
  flex: 0 0 auto;
}

.section--hero.hero--split .hero__facts {
  max-width: var(--container-max);
  padding-inline: 0;
  margin-top: 64px;
  padding-top: 34px;
}

.section--hero.hero--split .btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: 34px;
  background: transparent;
  color: var(--color-1);
  border: var(--hairline) solid var(--color-2);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-sm);
  text-decoration: none;
}

.section--hero.hero--split .btn--ghost:hover {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
}

.section--hero.hero--split .wrap, .intro-split .wrap, .cpt-loop .wrap, .gallery--staggered-columns .wrap, .visit-block--details-hours .wrap, .promise-band--statement-link .promise-band__inner, .manifesto--stacked-pairs .manifesto__inner {
  max-width: var(--container-max);
}


/* Layerly — Fix all measured a11y contrast failures, media placeholders, section padding to Figma — 2026-09-02T04:11:55.615Z */
.cpt-loop__card--spine .cpt-loop__excerpt, .visit-block__hours-note, .visit-block__map-placeholder {
  color: #55614F;
}

.cpt-loop--staff-picks .cpt-loop__card--pick .cpt-loop__link {
  background: transparent;
  padding: 0;
  border: 0;
}

.cpt-loop--staff-picks .cpt-loop__card--pick .cpt-loop__quote {
  font-size: var(--text-md);
  line-height: var(--leading-md);
  color: var(--color-1);
}

.cpt-loop--staff-picks .cpt-loop__card--pick .cpt-loop__attrib {
  font-weight: var(--weight-med);
  color: #E0C9B4;
}

.intro-split--image-right .eyebrow {
  color: var(--color-4);
}

.hero__media-placeholder, .intro-split__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 2px;
  text-transform: uppercase;
  border: var(--hairline) solid var(--color-2);
}

.section--hero.hero--split .hero__media-placeholder {
  width: 440px;
  height: 560px;
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  color: var(--color-4);
}

.intro-split .intro-split__media-placeholder {
  width: 520px;
  height: 600px;
  background: var(--color-1);
  color: #55614F;
}

.intro-split--image-right .intro-split__media-placeholder {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  color: var(--color-4);
}

.gallery--staggered-columns, .disclosures {
  padding-top: 40px;
}

.section--hero.hero--split, .intro-split, .cpt-loop, .gallery--staggered-columns, .visit-block--details-hours, .disclosures, .manifesto--stacked-pairs {
  padding-inline: max(24px, calc((100% - var(--container-max)) / 2));
}

.disclosures .disclosures__heading, .disclosures h2 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-reg);
  line-height: var(--leading-h3);
  color: var(--color-5);
}

.disclosures .eyebrow {
  color: var(--color-6);
}

.disclosures summary, .disclosures .disclosures__question {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-reg);
  line-height: 27px;
}


/* Layerly — Fix cream-on-cream pick cards (a11y floor) + container gutter math so columns match the design — 2026-09-02T04:12:33.673Z */
.cpt-loop--staff-picks .cpt-loop__card, .cpt-loop--staff-picks .cpt-loop__card--pick {
  background: transparent;
  border: 0;
  padding: 0;
}


/* Layerly — Fidelity: match intro-split/hero/disclosures to true Figma node geometry (not mispaired nodes) — 2026-09-02T04:28:12.044Z */
.intro-split .intro-split__media img, .intro-split .intro-split__media-placeholder {
  width: 520px;
  height: 600px;
}

.intro-split .intro-split__note + .intro-split__note {
  border-top: var(--hairline) solid var(--color-2);
}

.intro-split .intro-split__note-title, .intro-split .intro-split__note-num {
  font-size: 20px;
  line-height: 27px;
}

.intro-split .intro-split__notes + .btn, .intro-split .btn--primary {
  margin-top: 22px;
}

.intro-split--image-right {
  padding-top: 0;
  padding-bottom: clamp(56px, 9vw, 130px);
}

.intro-split--image-right .intro-split__content {
  max-width: 660px;
}

.intro-split--image-right .intro-split__media, .intro-split--image-right .intro-split__media img, .intro-split--image-right .intro-split__media-placeholder {
  width: 460px;
  max-width: 460px;
  height: 520px;
}

.disclosures .disclosures__item, .disclosures details {
  padding-block: 12px;
}

.disclosures p, .disclosures .disclosures__answer {
  font-size: var(--text-md);
  line-height: 28px;
}


/* Layerly — Fix disclosures eyebrow regression + tighten accordion row padding toward 931px target — 2026-09-02T04:28:59.422Z */
.disclosures .eyebrow, .disclosures p.eyebrow {
  font-size: var(--eyebrow-size);
  line-height: var(--leading-xs);
  letter-spacing: var(--eyebrow-tracking);
}


/* Layerly — Fluid vertical padding so desktop bands scale down on mobile — 2026-09-02T04:30:02.823Z */
.intro-split, .cpt-loop, .gallery--staggered-columns, .visit-block--details-hours, .disclosures, .manifesto--stacked-pairs {
  padding-bottom: clamp(56px, 9vw, 140px);
}


/* Layerly — Restore genre-shelves 140px bottom band + taller spine cards toward the 1031px target — 2026-09-02T04:30:50.689Z */
.cpt-loop--genre-shelves {
  padding-bottom: clamp(56px, 11vw, 140px);
}

.cpt-loop--genre-shelves .cpt-loop__card--spine .cpt-loop__link {
  min-height: 420px;
}


/* Layerly — Reading room on forest ground: invert type to cream/dusty-rose (measured contrast) — 2026-09-02T04:59:54.928Z */
.intro-split--image-left .intro-split__title {
  color: var(--color-1);
}

.intro-split--image-left .intro-split__eyebrow, .intro-split--image-left .eyebrow {
  color: var(--color-4);
}

.intro-split--image-left .intro-split__body {
  color: var(--color-4);
}

.intro-split--image-left .intro-split__note-title {
  color: var(--color-1);
}

.intro-split--image-left .intro-split__note-num, .intro-split--image-left .intro-split__note-text {
  color: var(--color-4);
}

.intro-split--image-left .intro-split__media-placeholder {
  background: color-mix(in srgb, var(--color-1) 10%, transparent);
  color: var(--color-4);
}

/* ── Figma-fidelity corrections, 2026-09-02 ─────────────────────────────
   1. Gold frame: the Figma puts the OUTLINE at top-left and the PHOTO
      offset down-right by 18px. The shipped rule had the two mirrored.
   2. The botanical line art from the Figma had no home in the theme
      (no ornament prop exists), so it is placed here at its design
      coordinates against the 1440 frame, centred. ───────────────────── */

.hero--split .hero__media { padding: 18px 0 0 18px; }
.hero--split .hero__media::before { inset: 0 18px 18px 0; }
.intro-split .intro-split__media { padding: 18px 0 0 18px; }
.intro-split .intro-split__media::before { inset: 0 18px 18px 0; }

.hero--split { position: relative; overflow: hidden; }
.hero--split > * { position: relative; z-index: 1; }
.hero--split::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: calc(50% + 44px); top: 143px; width: 834px; height: 761px;
  background: url("https://rebelandrosewood.layerly.dev/wp-content/uploads/2026/09/botanical-hero.png") no-repeat left top / contain;
}

.footer--rosewood { position: relative; overflow: hidden; }
.footer--rosewood > * { position: relative; z-index: 1; }
.footer--rosewood::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% + 32px); top: 37px; width: 897px; height: 757px;
  background: url("https://rebelandrosewood.layerly.dev/wp-content/uploads/2026/09/botanical-footer.png") no-repeat left top / contain;
}

@media (max-width: 1200px) {
  .hero--split::after, .footer--rosewood::after { display: none; }
}

/* Hero split row gap: Figma is 60px, not the 80px of --space-xxl.
   (intro-splits ARE 80 in the Figma, so only the hero is corrected.) */
@media (min-width: 721px) {
  .hero__inner--split { gap: 60px; }
}