/* ==========================================================================
   ZeroPoint Matrix — main.css
   Single frontend stylesheet. Sectioned per playbook §3.2.
   Brand tokens (--deep, --aubergine, --bright, --bright-2, --lavender-light,
   --font-display, --font-body) come from Customizer at runtime via inline
   <style> at wp_head priority 5 (see inc/customizer.php). They are NOT
   redeclared here.
   ========================================================================== */

/* ==========================================================================
   1. CUSTOM PROPERTIES (DESIGN SYSTEM — STABLE ACROSS BRAND PIVOTS)
   ========================================================================== */
:root {
    /* Derived from the brand palette but design-system roles */
    --lavender-soft: #ece4f3;
    --lavender:      #BFB1C9;
    --mid-blue:      #6c83bf;

    /* Line / shadow tokens */
    --line:          rgba(236, 228, 243, 0.14);
    --line-dark:     rgba(25, 5, 43, 0.15);

    /* Spacing scale — used by .pt-*, .pb-*, .mt-*, .mb-* */
    --space-none: 0;
    --space-xs:   0.5rem;
    --space-sm:   1.5rem;
    --space-md:   3rem;
    --space-lg:   5rem;
    --space-xl:   7rem;
    --space-2xl:  9rem;

    /* Layout */
    --inner-max: 1500px;
    --section-x: clamp(1.4rem, 4vw, 4rem);
    --radius-pill: 999px;

    /* Fixed-header height — single source of truth.
       Hero uses negative margin to slide behind, then reserves this
       amount of inset padding so content sits below the header.       */
    --header-h: 90px;

    /* Easings */
    --ease:     cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Default + scheme tokens. Schemes are CLASSES that set --scheme-* vars;
   blocks reference those vars. Result: changing a brand colour in Customizer
   ripples through every block that uses that scheme. */
:root,
.scheme-default,
.scheme-deep {
    --scheme-bg:       var(--deep);
    --scheme-fg:       var(--lavender-soft);
    --scheme-fg-muted: var(--lavender);
    --scheme-accent:   var(--bright-2);
    --scheme-line:     var(--line);
}
.scheme-aubergine {
    --scheme-bg:       var(--aubergine);
    --scheme-fg:       var(--lavender-soft);
    --scheme-fg-muted: var(--lavender);
    --scheme-accent:   var(--bright-2);
    --scheme-line:     var(--line);
}
.scheme-lavender-light {
    --scheme-bg:       var(--lavender-light);
    --scheme-fg:       var(--deep);
    --scheme-fg-muted: rgba(25, 5, 43, 0.78);
    --scheme-accent:   var(--bright);
    --scheme-line:     var(--line-dark);
}
.scheme-bright {
    --scheme-bg:       var(--bright);
    --scheme-fg:       var(--lavender-soft);
    --scheme-fg-muted: rgba(236, 228, 243, 0.78);
    --scheme-accent:   var(--lavender-soft);
    --scheme-line:     rgba(236, 228, 243, 0.18);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }

/* ==========================================================================
   3. ACCESSIBILITY (lesson #9)
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.skip-link:focus {
    position: fixed; top: 1rem; left: 1rem;
    width: auto; height: auto; clip: auto; clip-path: none;
    background: var(--bright); color: var(--lavender-soft);
    padding: 0.6rem 1rem; z-index: 100000;
}

/* ==========================================================================
   4. TYPOGRAPHY (lesson #2 / #13 — color: inherit on headings)
   ========================================================================== */
body {
    background: var(--deep);
    color: var(--lavender-soft);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
::selection { background: var(--bright-2); color: var(--deep); }

h1, h2, h3, h4, h5, h6 {
    color: inherit;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
}
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    font-style: italic;
    color: var(--scheme-accent);
}

p { margin: 0 0 1rem; line-height: 1.55; }
p em { font-family: var(--font-display); font-style: italic; }

a { color: inherit; text-decoration: none; }

/* Subtle grain overlay across all sections (matches prototype) */
body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none; z-index: 100;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   5. BUTTONS (CTA pills — light + dark variants)
   ========================================================================== */
.btn, .cta, .cta-dark {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.9rem 1.6rem 0.9rem 1.3rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.98rem; font-weight: 500;
    text-decoration: none;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn .dot, .cta .dot, .cta-dark .dot {
    width: 8px; height: 8px; border-radius: 50%;
}

/* Light pill — on dark schemes */
.cta {
    border: 1px solid rgba(236, 228, 243, 0.4);
    color: var(--lavender-soft);
}
.cta .dot {
    background: var(--mid-blue);
    box-shadow: 0 0 10px var(--mid-blue);
}
.cta:hover { background: var(--bright-2); color: var(--deep); border-color: var(--bright-2); }
.cta:hover .dot { background: var(--deep); box-shadow: none; }
.cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(152, 84, 186, 0.5); }

/* Secondary pill — lighter weight, sits beside the primary .cta */
.cta.cta--secondary {
    border-color: rgba(236, 228, 243, 0.22);
    background: transparent;
    color: var(--lavender);
}
.cta.cta--secondary:hover {
    border-color: var(--lavender-soft);
    color: var(--lavender-soft);
    background: transparent;
}

/* Dark pill — on light schemes */
.cta-dark {
    background: var(--deep); color: var(--lavender-soft);
    border: 1px solid var(--deep);
}
.cta-dark .dot {
    background: var(--bright-2);
    box-shadow: 0 0 10px rgba(152, 84, 186, 0.6);
}
.cta-dark:hover { background: var(--bright); border-color: var(--bright); }
.cta-dark:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(152, 84, 186, 0.4); }

/* ==========================================================================
   6. FORMS — base styling. Gravity Forms specifics in §29.
   ========================================================================== */
input, textarea, select { font: inherit; color: inherit; }

/* ==========================================================================
   7. UTILITY CLASSES — Spacing utilities live at the END of the file (§30b)
   so they override block-level `padding:` shorthands by source order. The
   class chain (e.g. `.pt-sm.pt-sm`) also boosts specificity above any
   block padding rule.
   ========================================================================== */

/* ==========================================================================
   8. LAYOUT UTILITIES
   ========================================================================== */
.wrap {
    max-width: var(--inner-max);
    margin: 0 auto;
    padding-left: var(--section-x);
    padding-right: var(--section-x);
}

/* ==========================================================================
   9. SITE HEADER
   ========================================================================== */
.site-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    /* Padding-top adds env(safe-area-inset-top) so the translucent
       background extends up into the iOS Dynamic Island / notch zone.
       Without this, iPhone 16 in Safari shows page content scrolling in
       the gap between the status bar and the header on a fixed-top bar.
       env() is 0 on non-iOS browsers — safe everywhere. Requires
       viewport-fit=cover on the <meta name="viewport"> tag (set in header.php). */
    padding: calc(1.4rem + env(safe-area-inset-top)) var(--section-x) 1.4rem;
    display: flex; align-items: center; justify-content: space-between;
    color: var(--lavender-soft);
    background: color-mix(in srgb, var(--deep) 60%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    transition: background 0.4s var(--ease);
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--deep) 88%, transparent); }

.site-header .brand,
.site-header .custom-logo-link {
    display: inline-flex; align-items: center; gap: 0.8rem;
    color: var(--lavender-soft);
    text-decoration: none;
}
.brand-mark {
    width: 42px; height: 42px;
    display: inline-grid; place-items: center;
    color: var(--bright-2);
}
.brand-mark svg {
    width: 100%; height: 100%;
    display: block;
    transition: transform 0.8s var(--ease);
}
.brand:hover .brand-mark svg { transform: rotate(-8deg) scale(1.05); }
.site-header .brand:focus-visible,
.site-header .custom-logo-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(152, 84, 186, 0.5);
    border-radius: 4px;
}
.brand-wordmark {
    font-family: var(--font-display);
    font-size: 1.45rem; line-height: 1;
    letter-spacing: -0.018em;
}
.custom-logo-link .custom-logo {
    max-height: 60px; width: auto;
}

/* ==========================================================================
   10. HAMBURGER & SLIDE-OUT PANEL (mobile menu — kept on all sizes for now)
   ========================================================================== */
.menu-btn {
    width: 50px; height: 50px;
    background: transparent; border: 0;
    position: relative; padding: 0; border-radius: 50%;
    color: var(--lavender-soft);
    transition: background 0.35s var(--ease);
}
.menu-btn:hover { background: rgba(236, 228, 243, 0.10); }
.menu-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bright-2); }
.menu-btn .lines {
    position: absolute; left: 50%; top: 50%;
    width: 26px; height: 16px;
    transform: translate(-50%, -50%);
}
.menu-btn .line {
    position: absolute; left: 0;
    height: 1.5px; background: currentColor; border-radius: 1px;
    transform-origin: center;
    transition: width 0.55s var(--ease), transform 0.6s var(--ease),
                opacity 0.4s var(--ease), top 0.6s var(--ease);
}
.menu-btn .l1 { top: 2px; width: 100%; }
.menu-btn .l2 { top: 50%; transform: translateY(-50%); width: 70%; }
.menu-btn .l3 { top: calc(100% - 3.5px); width: 42%; }
.menu-btn:hover .l2, .menu-btn:hover .l3 { width: 100%; }
.menu-btn[aria-expanded="true"] .l1 { top: 50%; width: 100%; transform: translateY(-50%) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; transform: translateY(-50%) scaleX(0); }
.menu-btn[aria-expanded="true"] .l3 { top: 50%; width: 100%; transform: translateY(-50%) rotate(-45deg); }

.menu-backdrop {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(8, 2, 16, 0.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.55s var(--ease);
}
.menu-backdrop.is-visible { opacity: 1; pointer-events: auto; }

.menu-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 45;
    width: min(520px, 100vw);
    background: var(--aubergine);
    color: var(--lavender-soft);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.8s var(--ease);
    display: flex; flex-direction: column;
    padding: 6rem 3.5rem 3rem;
    overflow-y: auto;
}
.menu-panel.is-open { transform: translateX(0); }
.menu-panel nav { position: relative; z-index: 2; }
.menu-panel .nav-links { list-style: none; padding: 0; margin: 0; }
.menu-panel .nav-item {
    border-bottom: 1px solid var(--line);
    opacity: 0; transform: translateX(20px);
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
.menu-panel.is-open .nav-item { opacity: 1; transform: none; }
.menu-panel.is-open .nav-item:nth-child(1) { transition-delay: 0.22s; }
.menu-panel.is-open .nav-item:nth-child(2) { transition-delay: 0.30s; }
.menu-panel.is-open .nav-item:nth-child(3) { transition-delay: 0.38s; }
.menu-panel.is-open .nav-item:nth-child(4) { transition-delay: 0.46s; }
.menu-panel.is-open .nav-item:nth-child(5) { transition-delay: 0.54s; }
.menu-panel.is-open .nav-item:nth-child(6) { transition-delay: 0.62s; }
.menu-panel .nav-item a {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
    padding: 1.4rem 0;
    color: var(--lavender-soft);
    font-family: var(--font-display);
    font-size: 1.75rem; line-height: 1;
    letter-spacing: -0.02em;
    transition: padding 0.4s var(--ease), color 0.3s;
}
.menu-panel .nav-item a::after {
    content: "→";
    font-family: var(--font-body); font-weight: 500;
    color: var(--bright-2);
    font-size: 1rem;
}
.menu-panel .nav-item a:hover,
.menu-panel .nav-item.current-menu-item a {
    padding-left: 0.7rem;
    color: var(--bright-2);
}
.menu-panel .nav-item a:focus-visible {
    outline: none;
    color: var(--bright-2);
    padding-left: 0.7rem;
    box-shadow: inset 3px 0 0 var(--bright-2);
}

.menu-panel-closing {
    margin-top: auto; padding-top: 2.5rem;
    border-top: 1px solid var(--line);
    opacity: 0;
    transition: opacity 0.7s var(--ease) 0.82s;
}
.menu-panel.is-open .menu-panel-closing { opacity: 1; }
.menu-panel-closing .strap {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.2rem; line-height: 1.4;
    margin: 0;
}
.menu-panel-closing .strap em { color: var(--bright-2); }
.menu-panel-closing .rights {
    margin: 0.8rem 0 0;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--lavender);
}

body.is-menu-open { overflow: hidden; }

/* ==========================================================================
   11. BLOCK — HERO BANNER (zpm-hero-banner)
   ========================================================================== */
.block-hero-banner {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--scheme-bg);
    /* Header is position:fixed with a translucent backdrop and floats above the
       hero — no negative margin needed. Earlier "pull behind header" rule
       (lesson #4) was wrong for this design: it ate ~90px of hero height. */
}
.block-hero-banner__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    z-index: 0;
}
.block-hero-banner__overlay {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top,
        rgba(25,5,43,0.70) 0%,
        rgba(25,5,43,0.20) 40%,
        rgba(25,5,43,0) 75%);
}
.block-hero-banner__stage {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
}
.block-hero-banner__pair {
    position: absolute;
    bottom: 0;
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    padding-bottom: 6rem;
}
.block-hero-banner__pair--left  { left: 0;  width: 50%; transform: translateX(18%); }
.block-hero-banner__pair--right { right: 0; width: 50%; transform: translateX(-18%); }
.block-hero-banner__speaker {
    width: auto;
    max-width: 100%;
    /* Cap height so the speaker top clears the fixed header. Hero is at y=0,
       pair anchors at bottom with padding-bottom 6rem + label ~5rem, header is
       ~90px tall. Speaker max = 100vh - header - pb - label - breathing
       ≈ 100vh - 20rem leaves a comfortable ~54px gap below the header on a
       1016px viewport, with the speaker still close to 70vh tall.
       Mobile breakpoints below override this with a vh-based cap.            */
    max-height: calc(100vh - 20rem);
    height: auto;
    object-fit: contain; object-position: center bottom;
    flex: 0 1 auto;
}
.block-hero-banner__label {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.2rem, 5.5vw, 4.8rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--lavender-soft);
    text-shadow: 0 2px 24px rgba(25, 5, 43, 0.55);
    margin: 1rem 0 0;
    text-align: center;
}
.block-hero-banner__label em { font-style: italic; color: var(--bright-2); }

.block-hero-banner__scroll-cue {
    position: absolute;
    bottom: 1.2rem; left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: var(--lavender-soft);
    background: rgba(236, 228, 243, 0.06);
    border: 1px solid rgba(236, 228, 243, 0.3);
    border-radius: 50%;
    opacity: 0.85;
    text-decoration: none;
    animation: scroll-bounce 2.4s ease-in-out infinite;
    transition: opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.block-hero-banner__scroll-cue:hover {
    opacity: 1;
    background: rgba(236, 228, 243, 0.14);
    border-color: rgba(236, 228, 243, 0.5);
}
.block-hero-banner__scroll-cue:focus-visible {
    outline: none; opacity: 1;
    box-shadow: 0 0 0 3px rgba(152, 84, 186, 0.5);
}
.block-hero-banner__scroll-cue svg { width: 18px; height: 18px; }

/* Hero reveal animations */
.block-hero-banner__bg {
    transform: scale(1.05);
    animation: hero-settle 2.6s var(--ease-out) forwards;
}
.block-hero-banner__overlay {
    opacity: 0;
    animation: hero-fade 1.3s var(--ease-out) 0.6s forwards;
}
.block-hero-banner__speaker {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 1.2s var(--ease-out) forwards;
}
.block-hero-banner__pair--left  .block-hero-banner__speaker { animation-delay: 0.9s; }
.block-hero-banner__pair--right .block-hero-banner__speaker { animation-delay: 1.15s; }
.block-hero-banner__label .w {
    display: inline-block;
    opacity: 0; transform: translateY(22px); filter: blur(8px);
    animation: word-in 1.1s var(--ease-out) forwards;
}
.block-hero-banner__pair--left  .block-hero-banner__label .w:nth-of-type(1) { animation-delay: 1.55s; }
.block-hero-banner__pair--left  .block-hero-banner__label .w:nth-of-type(2) { animation-delay: 1.80s; }
.block-hero-banner__pair--right .block-hero-banner__label .w:nth-of-type(1) { animation-delay: 2.05s; }
.block-hero-banner__pair--right .block-hero-banner__label .w:nth-of-type(2) { animation-delay: 2.30s; }

/* ==========================================================================
   11b. BLOCK — PAGE HERO (zpm-page-hero)
   Editorial sub-page hero: big H1, sub paragraph, italic lede, optional CTA.
   Used by Matrix 1 and Dealer pages.
   ========================================================================== */
.block-page-hero {
    position: relative;
    background: var(--scheme-bg); color: var(--scheme-fg);
    overflow: hidden;
    display: flex; align-items: center;
    padding: 8rem var(--section-x) 6rem;
}
.block-page-hero--height-full { min-height: 100vh; }
.block-page-hero--height-tall { min-height: 80vh; }
.block-page-hero::before {
    content: ""; position: absolute;
    left: 50%; top: 55%;
    width: 90vw; height: 90vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(152,84,186,0.18) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}
.block-page-hero__inner {
    position: relative; z-index: 2;
    width: 100%;
    max-width: var(--inner-max); margin: 0 auto;
}
.block-page-hero__heading {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.8rem, 8vw, 8rem);
    line-height: 0.96; letter-spacing: -0.025em;
    color: var(--scheme-fg);
    margin: 0 0 1.6rem;
    max-width: 16ch;
}
.block-page-hero__heading em { font-style: italic; color: var(--scheme-accent); }
.block-page-hero__sub {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    max-width: 56ch;
    color: var(--scheme-fg-muted);
    margin: 0 0 1.5rem;
}
.block-page-hero__sub em { font-family: var(--font-display); font-style: italic; color: var(--scheme-fg); }
.block-page-hero__lede {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    line-height: 1.4;
    color: var(--scheme-fg);
    max-width: 38ch;
    margin: 0 0 2.4rem;
}
.block-page-hero__lede em { font-style: italic; color: var(--scheme-accent); }
.block-page-hero .cta { margin-top: 0; }

/* ==========================================================================
   12. BLOCK — INTRO PARAGRAPH (zpm-intro-paragraph)
   Centred V2 opening text. Aubergine bg with violet glow by default.
   ========================================================================== */
.block-intro {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-xl) var(--section-x);
    text-align: center;
    position: relative; overflow: hidden;
}
.block-intro::before {
    content: ""; position: absolute;
    left: 50%; top: 50%;
    width: 70vw; height: 80vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(152,84,186,0.14) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
}
.block-intro__inner {
    position: relative; z-index: 1;
    max-width: 760px; margin: 0 auto;
}
.block-intro__paragraph {
    font-size: clamp(1.1rem, 1.55vw, 1.4rem);
    line-height: 1.55;
    color: var(--scheme-fg-muted);
    margin: 0 0 1.5rem;
}
.block-intro__paragraph em {
    font-family: var(--font-display); font-style: italic;
    color: var(--scheme-fg);
}
.block-intro__lede {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    line-height: 1.4;
    color: var(--scheme-fg);
    margin: 0 0 2.5rem;
}
.block-intro__lede em { color: var(--scheme-accent); }

/* ==========================================================================
   13. BLOCK — SPLIT SECTION (zpm-split-section) — copy + photo
   ========================================================================== */
.block-split {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
    position: relative; overflow: hidden;
}
.block-split__inner {
    max-width: var(--inner-max); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: center;
}
.block-split--image-right .block-split__copy  { order: 1; }
.block-split--image-right .block-split__photo { order: 2; }
.block-split--image-left  .block-split__photo { order: 1; }
.block-split--image-left  .block-split__copy  { order: 2; }

/* No image picked yet — collapse to a single full-width column so the copy
   doesn't sit awkwardly in the left half with an empty gap on the right. */
.block-split--no-image .block-split__inner { grid-template-columns: 1fr; }
.block-split--no-image .block-split__copy {
    max-width: var(--inner-max);
    margin: 0 auto;
}
.block-split--no-image .block-split__copy h2,
.block-split--no-image .block-split__copy p { max-width: 60ch; }
.block-split--no-image .block-split__copy ul.block-split__partners-list { max-width: 70ch; }

.block-split__copy h2 {
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    margin: 0 0 1.8rem; max-width: 18ch;
}
.block-split__copy h2 em { color: var(--scheme-accent); }
.block-split__copy p {
    font-size: 1.05rem; line-height: 1.7;
    max-width: 52ch;
    color: var(--scheme-fg-muted);
    margin: 0 0 1.1rem;
}
.block-split__copy p em {
    font-family: var(--font-display); font-style: italic;
    color: var(--scheme-fg);
}

/* Partners list (split-section's partners_label + partners_list fields).
   Small-caps lead-in above an em-dash bullet list, 2-col on desktop. */
.block-split__copy .block-split__partners-label {
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--mid-blue);
    margin: 2rem 0 1rem;
}
.block-split__copy ul.block-split__partners-list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.7rem 2rem;
}
.block-split__copy ul.block-split__partners-list li {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.15rem; line-height: 1.3;
    color: var(--scheme-fg);
    padding-left: 1rem; position: relative;
}
.block-split__copy ul.block-split__partners-list li::before {
    content: ""; position: absolute;
    left: 0; top: 0.65em;
    width: 0.4rem; height: 1px;
    background: var(--scheme-accent);
}

.block-split__photo {
    position: relative;
    justify-self: center;
    width: 100%; max-width: 460px;
    aspect-ratio: 3/4;
}
/* Landscape variant — wider container, 4:3 ratio */
.block-split--image-landscape .block-split__photo {
    max-width: 640px;
    aspect-ratio: 4/3;
}
.block-split__photo--tilted { transform: rotate(-1.2deg); }
.block-split__photo__block {
    position: absolute;
    inset: 18px -18px -18px 18px;
    background: var(--bright);
    z-index: 0;
}
.block-split__photo img {
    position: relative; z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* ==========================================================================
   14. BLOCK — PULL QUOTE (zpm-pull-quote)
   ========================================================================== */
.block-pull-quote {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-xl) var(--section-x);
    position: relative; overflow: hidden;
}
.block-pull-quote__inner {
    position: relative; z-index: 1;
    max-width: 1400px; margin: 0 auto;
}
.block-pull-quote__cue {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--mid-blue);
    margin: 0 0 2.5rem;
}
.block-pull-quote__quote {
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: clamp(2.2rem, 6.4vw, 6rem);
    line-height: 1.04; letter-spacing: -0.015em;
    max-width: 22ch;
    margin: 0 0 3rem;
    color: var(--scheme-fg);
}
.block-pull-quote__quote em { color: var(--scheme-accent); }

/* Quote size variants — modifier on the section element. Larger specificity
   than the base rule via the parent class. */
.block-pull-quote--size-medium .block-pull-quote__quote {
    font-size: clamp(1.6rem, 3.2vw, 3rem);
    line-height: 1.18;
}
.block-pull-quote--size-small .block-pull-quote__quote {
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    line-height: 1.3;
    margin-bottom: 2rem;
}
.block-pull-quote--size-xs .block-pull-quote__quote {
    font-size: clamp(1.05rem, 1.6vw, 1.5rem);
    line-height: 1.45;
    margin-bottom: 1.5rem;
}

/* Width variants — full lets the quote breathe to the section's inner max
   instead of the poster-style 22ch character cap. */
.block-pull-quote--width-full .block-pull-quote__quote {
    max-width: none;
}

/* Attribution size variants — when the quote is small and the attribution
   needs more presence. Specificity via the parent class wins over the base. */
.block-pull-quote--att-size-medium .block-pull-quote__att {
    font-size: clamp(1.05rem, 1.4vw, 1.4rem);
    opacity: 0.85;
}
.block-pull-quote--att-size-large .block-pull-quote__att {
    font-size: clamp(1.2rem, 1.7vw, 1.8rem);
    opacity: 0.9;
}
.block-pull-quote--att-size-prominent .block-pull-quote__att {
    font-size: clamp(1.5rem, 2.6vw, 2.4rem);
    line-height: 1.2;
    opacity: 1;
    color: var(--scheme-fg);
}
.block-pull-quote__footer {
    display: grid; grid-template-columns: 1.3fr 1fr;
    gap: 3rem; align-items: end;
    border-top: 1px solid var(--scheme-line);
    padding-top: 2.5rem;
}
.block-pull-quote__follow {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    line-height: 1.45;
    max-width: 38ch; margin: 0;
    color: var(--scheme-fg-muted);
}
.block-pull-quote__follow em { font-style: italic; color: var(--scheme-accent); }
.block-pull-quote__att {
    text-align: right;
    font-family: var(--font-display); font-style: italic;
    font-size: 1.05rem;
    color: var(--scheme-fg-muted);
    opacity: 0.7;
    margin: 0;
}

/* ==========================================================================
   15. BLOCK — STATS BAR (zpm-stats-bar)
   ========================================================================== */
.block-stats {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
}
.block-stats__inner { max-width: var(--inner-max); margin: 0 auto; }
.block-stats__heading {
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    margin: 0 0 4rem; max-width: 16ch;
}
.block-stats__heading em { color: var(--scheme-accent); }
.block-stats__grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--scheme-line);
}
.block-stats__item .n {
    display: block;
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(3.2rem, 7vw, 6.4rem);
    line-height: 0.95; letter-spacing: -0.03em;
    color: var(--scheme-accent);
    margin-bottom: 0.6rem;
}
.block-stats__item .label {
    font-size: 0.85rem; font-weight: 500; line-height: 1.4;
    color: var(--scheme-fg-muted);
    max-width: 22ch;
}

/* ==========================================================================
   16. BLOCK — NOISE LIST (zpm-noise-list)
   ========================================================================== */
.block-noise-list {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
}
.block-noise-list__inner { max-width: var(--inner-max); margin: 0 auto; }
.block-noise-list__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.block-noise-list__item {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.6rem, 3.6vw, 2.8rem);
    line-height: 1.2;
    color: var(--scheme-fg);
}
.block-noise-list__item em { font-style: italic; color: var(--scheme-accent); }

/* ==========================================================================
   17. BLOCK — ASTONISH (zpm-astonish)
   ========================================================================== */
.block-astonish {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
    border-top: 1px solid var(--scheme-line);
}
.block-astonish__inner {
    max-width: var(--inner-max); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: start;
}
.block-astonish__lead {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1; letter-spacing: -0.02em;
    margin: 0; max-width: 18ch;
}
.block-astonish__lead em { color: var(--scheme-accent); }
.block-astonish__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 1.1rem;
}
.block-astonish__list li {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    line-height: 1.35;
    color: var(--scheme-fg);
    max-width: 42ch;
}
.block-astonish__list li em { color: var(--scheme-accent); }

/* ==========================================================================
   18. BLOCK — TEXT SECTION (zpm-text-section)
   H2 + body + optional pull-quote + optional footnote.
   ========================================================================== */
.block-text-section {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
}
.block-text-section__inner { max-width: var(--inner-max); margin: 0 auto; }
.block-text-section__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: start;
}
.block-text-section h2 {
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    margin: 0 0 2rem; max-width: 16ch;
    grid-column: 1 / -1;
}
.block-text-section h2 em { color: var(--scheme-accent); }
.block-text-section p {
    font-size: 1.1rem; line-height: 1.7;
    color: var(--scheme-fg-muted);
    margin: 0 0 1.3rem;
    max-width: 52ch;
}
.block-text-section p em {
    font-family: var(--font-display); font-style: italic;
    color: var(--scheme-fg);
}
.block-text-section .small { font-size: 0.95rem; opacity: 0.75; }
.block-text-section .footnote {
    font-size: 0.85rem; opacity: 0.6;
    border-top: 1px solid var(--scheme-line);
    padding-top: 1.5rem; margin-top: 1.5rem;
    max-width: 60ch;
}
.block-text-section__pull {
    padding: 2.5rem 0;
    border-top: 1px solid var(--scheme-line);
    border-bottom: 1px solid var(--scheme-line);
}
.block-text-section__pull-cue {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--mid-blue);
    margin: 0 0 1.4rem;
}
.block-text-section__pull blockquote {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.18; letter-spacing: -0.01em;
    color: var(--scheme-fg);
    margin: 0 0 1.4rem;
    max-width: 22ch;
}
.block-text-section__pull blockquote em { color: var(--scheme-accent); }
.block-text-section__pull-follow {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.45;
    max-width: 38ch;
    margin: 0;
    color: var(--scheme-fg-muted);
}
.block-text-section__pull-follow em {
    font-style: italic; color: var(--scheme-accent);
}

/* --- "Heading aside" 2-col layout: heading left, body right (install / more-pairs) */
.block-text-section--layout-heading-aside .block-text-section__inner {
    position: relative; z-index: 1;
}
.block-text-section__grid--heading-aside {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 5rem;
}
/* Override the generic .block-text-section h2 { grid-column: 1 / -1 } rule
   that's intended for the default layout (heading above 2-col body grid).
   Without this, the heading would span both columns and the body would sit
   below it instead of beside it. */
.block-text-section__grid--heading-aside h2 {
    grid-column: 1;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.0; letter-spacing: -0.02em;
    margin: 0; max-width: 16ch;
    color: var(--scheme-fg);
}
.block-text-section__grid--heading-aside h2 em { font-style: italic; color: var(--scheme-accent); }
.block-text-section__body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   18b. BLOCK — POINTS SECTION (zpm-points-section)
   Heading + intro on top (2-col), labelled points (2-col) in the middle,
   italic closing line full-width below. Used for "Can I use more than one
   pair?" on the Matrix 1 page.
   ========================================================================== */
.block-points {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
    position: relative; overflow: hidden;
}
.block-points__inner { max-width: var(--inner-max); margin: 0 auto; }

.block-points__top {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: start;
    margin-bottom: 4rem;
}
.block-points__heading {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.0; letter-spacing: -0.02em;
    color: var(--scheme-fg);
    margin: 0; max-width: 16ch;
}
.block-points__heading em { font-style: italic; color: var(--scheme-accent); }
.block-points__intro p {
    font-size: 1.05rem; line-height: 1.7;
    color: var(--scheme-fg-muted);
    margin: 0 0 1rem; max-width: 56ch;
}
.block-points__intro p:last-child { margin-bottom: 0; }
.block-points__intro p em {
    font-family: var(--font-display); font-style: italic;
    color: var(--scheme-fg);
}

.block-points__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--scheme-line);
}
.block-points__point-label {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--mid-blue);
    margin: 0 0 1rem;
}
.block-points__point-body p {
    font-size: 1.05rem; line-height: 1.65;
    color: var(--scheme-fg-muted);
    margin: 0 0 1rem; max-width: 52ch;
}
.block-points__point-body p:last-child { margin-bottom: 0; }
.block-points__point-body p em {
    font-family: var(--font-display); font-style: italic;
    color: var(--scheme-fg);
}

.block-points__closing {
    margin-top: 4rem; padding-top: 3rem;
    border-top: 1px solid var(--scheme-line);
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.4;
    color: var(--scheme-fg);
    max-width: 48ch;
}
.block-points__closing em { color: var(--scheme-accent); }

/* --- Faint background spiral watermark (used on "why" section, dealer page) */
.block-text-section--watermark { position: relative; overflow: hidden; }
.block-text-section--watermark > .block-text-section__inner { position: relative; z-index: 1; }
.block-text-section--watermark .zpm-spiral--watermark {
    /* Reset the default --watermark bottom-right anchor and place at top-right */
    top: 8%; right: -10%;
    bottom: auto; left: auto;
    width: 50%; max-width: 700px;
    color: var(--bright-2);
    opacity: 0.07;
    animation: none;  /* override the default spin on .zpm-spiral */
}

/* ==========================================================================
   19. BLOCK — REVIEWS CAROUSEL (zpm-reviews-carousel)
   ========================================================================== */
.block-reviews {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-xl) var(--section-x);
    position: relative; overflow: hidden;
}
.block-reviews__inner {
    position: relative; z-index: 1;
    max-width: 1100px; margin: 0 auto;
    text-align: center;
}
.block-reviews__title {
    font-family: var(--font-body);
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--mid-blue);
    margin: 0 0 3rem;
}
.block-reviews__stage {
    position: relative;
    min-height: 380px;
}
.block-reviews__item {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.9s var(--ease);
}
.block-reviews__item.is-active { opacity: 1; pointer-events: auto; }
.block-reviews__quote {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.55rem, 3.3vw, 2.6rem);
    line-height: 1.22;
    max-width: 28ch; margin: 0 0 2.2rem;
    color: var(--scheme-fg);
}
.block-reviews__att {
    display: flex; flex-direction: column; gap: 0.45rem; align-items: center;
}
.block-reviews__name {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.1rem;
    color: var(--scheme-fg);
}
.block-reviews__system {
    font-family: var(--font-body);
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--mid-blue);
}
.block-reviews__nav {
    display: flex; justify-content: center; gap: 0.85rem;
    margin-top: 2.5rem;
}
.block-reviews__dot {
    width: 8px; height: 8px; border-radius: 50%;
    border: 0; padding: 0;
    background: rgba(25, 5, 43, 0.22);
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.block-reviews__dot:hover { background: rgba(25, 5, 43, 0.5); }
.block-reviews__dot.is-active {
    background: var(--scheme-accent);
    transform: scale(1.3);
}
.block-reviews__dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(101, 20, 145, 0.3);
}
.block-reviews.scheme-deep .block-reviews__dot,
.block-reviews.scheme-aubergine .block-reviews__dot { background: rgba(236, 228, 243, 0.22); }
.block-reviews.scheme-deep .block-reviews__dot:hover,
.block-reviews.scheme-aubergine .block-reviews__dot:hover { background: rgba(236, 228, 243, 0.5); }

/* ==========================================================================
   20. BLOCK — CTA BAND (zpm-cta-band)
   ========================================================================== */
.block-cta-band {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
    text-align: center;
    position: relative; overflow: hidden;
    border-top: 1px solid var(--scheme-line);
}
.block-cta-band__inner {
    position: relative; z-index: 2;
    max-width: 800px; margin: 0 auto;
}
/* When the closer's "show spiral" toggle is on: add a soft radial glow
   behind the inner content. The spiral itself comes from .zpm-spiral--hero
   placed by the template (z-index 1). Inner content sits at z-index 2. */
.block-cta-band--spiral::before {
    content: "";
    position: absolute;
    left: 50%; top: 55%;
    width: 80vw; height: 80vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(152, 84, 186, 0.16) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.block-cta-band h2 {
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    line-height: 1; letter-spacing: -0.03em;
    margin: 0 0 1.5rem;
}
.block-cta-band h2 em { color: var(--scheme-accent); }
.block-cta-band p {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    line-height: 1.5;
    color: var(--scheme-fg-muted);
    margin: 0 auto 2.6rem;
    max-width: 32ch;
}
/* Action row — flex row holding the primary and (optional) secondary CTAs.
   Explicit max-width: none so the generic `.block-cta-band p { max-width: 32ch }`
   rule never applies (the wrapper used to be a <p> and got bitten by it). */
.block-cta-band__action {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 0.9rem 1rem;
    margin: 0 auto;
    max-width: none;
}
.block-cta-band__action .cta { margin: 0; }

/* ==========================================================================
   21. BLOCK — CONTAINER (zpm-container)
   Generic themed wrapper around InnerBlocks. §6.5.
   ========================================================================== */
.block-container {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-lg) var(--section-x);
    position: relative; overflow: hidden;
}
.block-container > .acf-innerblocks-container,
.block-container > div { max-width: var(--inner-max); margin: 0 auto; }
.block-container--width-full > .acf-innerblocks-container,
.block-container--width-full > div { max-width: none; }
.block-container--width-narrow > .acf-innerblocks-container,
.block-container--width-narrow > div { max-width: 800px; }
.block-container__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; opacity: 0.18;
    pointer-events: none; z-index: 0;
}
.block-container > * { position: relative; z-index: 1; }

/* ==========================================================================
   22. BLOCK — DEALER FORM (zpm-dealer-form)
   ========================================================================== */
.block-dealer-form {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
}
.block-dealer-form__inner {
    max-width: var(--inner-max); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: start;
}
.block-dealer-form__intro h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    margin: 0 0 1.5rem; max-width: 18ch;
}
.block-dealer-form__intro h2 em { color: var(--scheme-accent); }
.block-dealer-form__intro p {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.5;
    color: var(--scheme-fg-muted);
    margin: 0; max-width: 36ch;
}

/* Spiral graphic — large rotating background asset (hero / cta-band / closer) */
.zpm-spiral {
    position: absolute;
    color: var(--bright-2);
    opacity: 0.55;
    pointer-events: none;
    animation: spin 90s linear infinite;
    transform-origin: 50% 50%;
    z-index: 1;
}
.zpm-spiral--hero {
    right: -22%; top: 5%;
    width: 90%; max-width: 1100px;
}
.zpm-spiral--watermark {
    right: -8%; bottom: -22%;
    width: 50%; max-width: 720px;
    color: var(--bright);
    opacity: 0.08;
    animation-duration: 70s;
}

/* ==========================================================================
   23. FOOTER
   ========================================================================== */
.site-footer {
    background: var(--deep); color: var(--lavender-soft);
    border-top: 1px solid var(--line);
    padding: 4rem var(--section-x) 2.5rem;
}
.site-footer__inner {
    max-width: var(--inner-max); margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto;
    gap: 2rem; align-items: end;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}
.site-footer__strap {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    max-width: 18ch;
    margin: 0;
    color: var(--lavender-soft);
}
.site-footer__strap em { font-style: italic; color: var(--bright-2); }

.site-footer__nav-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    gap: 0.5rem;
    text-align: right;
    font-size: 0.95rem;
}
.site-footer a {
    color: var(--lavender);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
}
.site-footer a:hover { color: var(--bright-2); }
.site-footer a:focus-visible {
    outline: none;
    color: var(--bright-2);
    border-bottom-color: var(--bright-2);
}

.site-footer__rights,
.site-footer__rights-extra {
    max-width: var(--inner-max); margin: 1.5rem auto 0;
    font-family: var(--font-body);
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--lavender);
}
.site-footer__rights-extra { margin-top: 0.4rem; opacity: 0.75; }

/* ==========================================================================
   24. WIDGETS
   ========================================================================== */
.zonkey-powered-by-widget { margin-left: auto; }
.zonkey-powered-by-widget p {
    margin: 0;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem;
}
.zonkey-powered-by-widget a {
    display: inline-flex; align-items: center; gap: 0.34rem;
    transition: color 0.3s var(--ease);
}
.zonkey-powered-by-widget svg { display: block; vertical-align: middle; }
.zonkey-powered-by-widget strong { font-weight: 700; color: inherit; }
.zonkey-powered-by-widget--light p { color: rgba(236, 228, 243, 0.5); }
.zonkey-powered-by-widget--light a { color: rgba(236, 228, 243, 0.78); }
.zonkey-powered-by-widget--light a:hover { color: var(--lavender-soft); }
.zonkey-powered-by-widget--dark p { color: rgba(25, 5, 43, 0.55); }
.zonkey-powered-by-widget--dark a { color: var(--deep); }
.zonkey-powered-by-widget--dark a:hover { color: var(--bright); }

.widget { margin: 0 0 2rem; }

/* ==========================================================================
   25. BLOG / ARCHIVE — Phase 8 baseline
   ========================================================================== */
.archive-header {
    padding: var(--space-xl) var(--section-x);
    text-align: center;
}
.archive-title { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
.post-grid {
    max-width: var(--inner-max); margin: 0 auto;
    padding: 0 var(--section-x) var(--space-xl);
    display: grid; gap: 3rem;
    grid-template-columns: repeat(3, 1fr);
}
.post-card { display: flex; flex-direction: column; gap: 1rem; }
.post-card__thumb img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.post-card__title { font-size: 1.4rem; margin: 0; }
.post-card__title a {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
}
.post-card__title a:hover { color: var(--bright-2); }
.post-card__title a:focus-visible {
    outline: none;
    color: var(--bright-2);
    border-bottom-color: var(--bright-2);
}
.post-card__excerpt { font-size: 0.95rem; line-height: 1.55; color: var(--lavender); margin: 0; }

/* ==========================================================================
   26. SINGLE POST — Phase 8 baseline
   ========================================================================== */
.single-post .entry-content {
    max-width: 740px; margin: 0 auto;
    padding: var(--space-xl) var(--section-x);
    font-size: 1.05rem; line-height: 1.7;
}

/* ==========================================================================
   27. SEARCH — Phase 9 baseline
   ========================================================================== */
.search-form { display: flex; gap: 0.5rem; }
.search-form input[type="search"] { flex: 1; }

/* ==========================================================================
   28. 404
   ========================================================================== */
.error-404 {
    min-height: 70vh;
    display: grid; place-items: center;
    text-align: center;
    padding: var(--space-2xl) var(--section-x);
}

/* ==========================================================================
   29. GRAVITY FORMS — dealer inquiry styling
   ========================================================================== */
.gform_wrapper .gform_fields {
    display: grid; gap: 1.5rem; padding: 0; list-style: none;
}
.gform_wrapper .gfield_label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--scheme-fg-muted);
    margin-bottom: 0.5rem;
}
.gform_wrapper .gfield_required { color: var(--bright); margin-left: 0.2em; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--scheme-line);
    padding: 0.55rem 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--scheme-fg);
    border-radius: 0;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus {
    outline: none;
    border-bottom-color: var(--bright);
}
.gform_wrapper .gform_footer .gform_button {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.95rem 1.7rem 0.95rem 1.4rem;
    background: var(--deep); color: var(--lavender-soft);
    border: 1px solid var(--deep); border-radius: var(--radius-pill);
    font-family: var(--font-body); font-size: 1rem; font-weight: 500;
    cursor: pointer;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.gform_wrapper .gform_footer .gform_button:hover {
    background: var(--bright); border-color: var(--bright);
}

/* ==========================================================================
   29a. BLOCK — DEALERS GRID (zpm-dealers) + dealer card partial
   Mirrors mockups/09-enquiries.html. Scheme-aware via --scheme-* tokens.
   ========================================================================== */
.block-dealers {
    background: var(--scheme-bg); color: var(--scheme-fg);
    padding: var(--space-2xl) var(--section-x);
    position: relative; overflow: hidden;
}
.block-dealers__inner {
    position: relative; z-index: 1;
    max-width: var(--inner-max); margin: 0 auto;
}
.block-dealers__head {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: end;
    margin-bottom: 4.5rem;
}
.block-dealers__head h2 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(2.4rem, 5.4vw, 4.6rem);
    line-height: 1; letter-spacing: -0.025em;
    color: var(--scheme-fg);
    margin: 0; max-width: 16ch;
}
.block-dealers__head h2 em { color: var(--scheme-accent); }
.block-dealers__lead {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    color: var(--scheme-fg-muted);
    margin: 0; max-width: 36ch;
}

/* Regional grouping label */
.dealers-region {
    font-family: var(--font-body); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--mid-blue);
    margin: 0 0 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--scheme-line);
}
.dealers-region + .dealers-grid { margin-bottom: 3.5rem; }
.dealers-region + .dealers-grid:last-child { margin-bottom: 0; }

/* The grid — auto-fit, 360px floor. With a single card, :has() centres it. */
.dealers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
    gap: 2rem;
    align-items: stretch;
}
.dealers-grid:has(> .dealer-card:only-child) {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}

/* Empty-region note ("Coming soon — dealers in this region…") */
.block-dealers__empty {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.1rem; color: var(--scheme-fg-muted);
    margin: 0 0 3.5rem;
    padding: 1.6rem 1.8rem;
    border: 1px dashed var(--scheme-line);
    border-radius: 6px;
    text-align: center;
}

/* Faint spiral watermark (top-right) when show_spiral is on */
.block-dealers__spiral {
    left: -12%; top: 8%;
    right: auto; bottom: auto;
    width: 50%; max-width: 700px;
    color: var(--bright-2);
    opacity: 0.06;
    animation: none;
}

/* ---- DEALER CARD ---------------------------------------------------- */
.dealer-card {
    background: var(--aubergine);
    border: 1px solid var(--scheme-line);
    border-radius: 6px;
    padding: 2.2rem 2.2rem 2.5rem;
    display: flex; flex-direction: column;
    gap: 2rem;
}
.dealer-card__head {
    display: block;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--scheme-line);
}
.dealer-card__locality {
    display: block;
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--mid-blue);
    margin: 0 0 0.5rem;
}
.dealer-card__name {
    display: block;
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    line-height: 1.1; letter-spacing: -0.015em;
    color: var(--lavender-soft);
    margin: 0;
}
.dealer-card__name em { font-style: italic; color: var(--bright-2); }

.dealer-card__contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.dealer-card__address {
    font-family: var(--font-display); font-style: italic;
    font-size: 1.05rem; line-height: 1.5;
    color: var(--lavender);
    margin: 0;
    white-space: pre-line;
}
.dealer-card__contact {
    display: flex; flex-direction: column; gap: 0.6rem;
    font-size: 0.95rem;
}
.dealer-card__contact a {
    display: inline-flex; align-items: center; gap: 0.55rem;
    color: var(--lavender-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
    word-break: break-word;
}
.dealer-card__contact a:hover {
    color: var(--bright-2);
    border-bottom-color: var(--bright-2);
}
.dealer-card__contact a:focus-visible {
    outline: none;
    color: var(--bright-2);
    border-bottom-color: var(--bright-2);
}
.dealer-card__contact .ico {
    width: 14px; height: 14px;
    color: var(--mid-blue);
    flex: 0 0 14px;
}
.dealer-card__details {
    font-size: 0.97rem; line-height: 1.6;
    color: var(--lavender);
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid var(--scheme-line);
}
.dealer-card__details em {
    font-family: var(--font-display); font-style: italic;
    color: var(--lavender-soft);
}

/* ==========================================================================
   29b. UTILITY CLASSES — Spacing
   Placed AFTER block styles so they win on source order. Class is chained
   with itself (e.g. `.pt-sm.pt-sm`) to bump specificity above per-block
   `padding:` shorthand declarations.
   ========================================================================== */
.pt-none.pt-none { padding-top: var(--space-none); }
.pt-xs.pt-xs    { padding-top: var(--space-xs); }
.pt-sm.pt-sm    { padding-top: var(--space-sm); }
.pt-md.pt-md    { padding-top: var(--space-md); }
.pt-lg.pt-lg    { padding-top: var(--space-lg); }
.pt-xl.pt-xl    { padding-top: var(--space-xl); }
.pt-2xl.pt-2xl  { padding-top: var(--space-2xl); }

.pb-none.pb-none { padding-bottom: var(--space-none); }
.pb-xs.pb-xs    { padding-bottom: var(--space-xs); }
.pb-sm.pb-sm    { padding-bottom: var(--space-sm); }
.pb-md.pb-md    { padding-bottom: var(--space-md); }
.pb-lg.pb-lg    { padding-bottom: var(--space-lg); }
.pb-xl.pb-xl    { padding-bottom: var(--space-xl); }
.pb-2xl.pb-2xl  { padding-bottom: var(--space-2xl); }

.mt-none.mt-none { margin-top: var(--space-none); }
.mt-xs.mt-xs    { margin-top: var(--space-xs); }
.mt-sm.mt-sm    { margin-top: var(--space-sm); }
.mt-md.mt-md    { margin-top: var(--space-md); }
.mt-lg.mt-lg    { margin-top: var(--space-lg); }
.mt-xl.mt-xl    { margin-top: var(--space-xl); }
.mt-2xl.mt-2xl  { margin-top: var(--space-2xl); }

.mb-none.mb-none { margin-bottom: var(--space-none); }
.mb-xs.mb-xs    { margin-bottom: var(--space-xs); }
.mb-sm.mb-sm    { margin-bottom: var(--space-sm); }
.mb-md.mb-md    { margin-bottom: var(--space-md); }
.mb-lg.mb-lg    { margin-bottom: var(--space-lg); }
.mb-xl.mb-xl    { margin-bottom: var(--space-xl); }
.mb-2xl.mb-2xl  { margin-bottom: var(--space-2xl); }

/* ==========================================================================
   30. RESPONSIVE — cross-cutting only (per-component responsive lives with
   its component section above. One breakpoint per component — lesson #10).
   ========================================================================== */
@media (max-width: 900px) {
    .site-header { padding: calc(1.1rem + env(safe-area-inset-top)) 1.4rem 1.1rem; }
    .brand-mark { width: 36px; height: 36px; }
    .brand-wordmark { font-size: 1.2rem; }
    .menu-btn { width: 44px; height: 44px; }
    .menu-panel { padding: 5.5rem 1.8rem 2.5rem; }
    .menu-panel .nav-item a { font-size: 1.6rem; padding: 1.4rem 0; }

    .block-hero-banner__pair--left  { transform: translateX(8%); }
    .block-hero-banner__pair--right { transform: translateX(-8%); }
    .block-hero-banner__speaker { max-height: 60vh; }
    .block-hero-banner__label { font-size: clamp(1.8rem, 6vw, 3.4rem); }

    .block-split__inner,
    .block-text-section__grid,
    .block-text-section__grid--heading-aside,
    .block-points__top,
    .block-points__grid,
    .block-astonish__inner,
    .block-dealer-form__inner,
    .block-dealers__head { grid-template-columns: 1fr; gap: 3rem; }

    .block-dealers__head { align-items: start; margin-bottom: 3rem; }
    .dealer-card { padding: 2rem 1.6rem; }
    .dealer-card__contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .block-points__top { margin-bottom: 3rem; }
    .block-points__closing { margin-top: 3rem; padding-top: 2rem; }

    .block-split__copy ul.block-split__partners-list { grid-template-columns: 1fr; }

    .block-page-hero { padding: 9.5rem 1.4rem 4rem; }
    .block-page-hero--height-tall { min-height: 70vh; }
    .zpm-spiral--hero { right: -45%; top: 0; width: 140%; max-width: none; opacity: 0.35; }

    .block-stats__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .block-pull-quote__footer { grid-template-columns: 1fr; gap: 1.5rem; }
    .block-pull-quote__att { text-align: left; }
    .block-reviews__stage { min-height: 460px; }
    .site-footer__inner {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 1.5rem;
    }
    .site-footer__nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.3rem;
        text-align: left;
    }
    .post-grid { grid-template-columns: 1fr; }
}

/* Phone — hero pair crossfade */
@media (max-width: 700px) {
    .block-hero-banner__pair {
        left: 50%; right: auto;
        width: 90%;
        opacity: 0; /* start hidden so the right pair (delayed) doesn't flash visible before its animation starts */
        transform: translateX(-50%) translateY(0);
        justify-content: flex-start;
        padding-top: 5.5rem;
        padding-bottom: 1rem;
        animation: pair-cycle 9s ease-in-out infinite both;
    }
    .block-hero-banner__pair--left  { animation-delay: 0s; }
    .block-hero-banner__pair--right { animation-delay: 4.5s; }
    .block-hero-banner__speaker,
    .block-hero-banner__label .w {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .block-hero-banner__speaker { max-height: 60vh; }
    .block-hero-banner__label { font-size: clamp(2.4rem, 12vw, 3.6rem); margin-top: 1.2rem; }
    .block-hero-banner__scroll-cue { bottom: 1rem; }
}

/* ==========================================================================
   31. ANIMATIONS — keyframes
   ========================================================================== */
@keyframes hero-settle { to { transform: scale(1); } }
@keyframes hero-fade   { to { opacity: 1; } }
@keyframes word-in     { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes rise        { to { opacity: 1; transform: none; } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes scroll-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}
@keyframes pair-cycle {
    0%, 4%    { opacity: 0; transform: translateX(-50%) translateY(10px); }
    10%, 46%  { opacity: 1; transform: translateX(-50%) translateY(0); }
    52%, 100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .brand:hover .brand-mark svg { transition: none; }
    .block-hero-banner__bg,
    .block-hero-banner__overlay,
    .block-hero-banner__speaker,
    .block-hero-banner__label .w,
    .block-hero-banner__pair,
    .block-hero-banner__scroll-cue,
    .zpm-spiral {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}