/*
Theme Name:        Black Label Wheels FSE
Theme URI:         https://blacklabelwheels.com
Author:            Prestige Marketing
Author URI:        https://blacklabelwheels.com
Description:       Native Block Theme (Full Site Editing) edition of Black Label Wheels. Zero plugins required: the hero, WebGL laboratory menu, collections grid, and manifesto are all editable visually with core blocks, locked with contentOnly so clients can edit text and swap images without breaking layouts.
Version:           1.1.0
Requires at least: 6.5
Tested up to:      6.8
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       blw-fse
Tags:              full-site-editing, block-patterns, dark, one-column, custom-colors, editor-style
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Kept as CSS custom properties so section styles read like the original
   classic theme. theme.json mirrors the palette for the editor UI pickers.
   ========================================================================== */
:root {
    --color-bg:          #0a0908;
    --color-bg-elev:     #111110;
    --color-fg:          #f5f3ef;
    --color-fg-muted:    #8c887e;
    --color-fg-faint:    #5a5750;
    --color-accent:      #c4a572;
    --color-accent-dim:  #8a7450;
    --color-line:        rgba(245, 243, 239, 0.08);
    --color-line-strong: rgba(245, 243, 239, 0.18);

    --font-display: "Fraunces", "Times New Roman", serif;
    --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    --gutter:     clamp(20px, 4vw, 56px);
    --max-width:  1680px;
    --header-h:   80px;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 0.35s;
    --dur-med:  0.7s;
}

/* ==========================================================================
   2. BASE
   theme.json owns body colors/typography; this layer adds texture + polish.
   ========================================================================== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background-image:
        radial-gradient(ellipse at 50% -20%, rgba(196, 165, 114, 0.06), transparent 60%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-attachment: fixed;
}

::selection { background: var(--color-accent); color: var(--color-bg); }

/* Shared inner container used by every section (deterministic gutters,
   independent of the layout engine's global-padding heuristics). */
.blw-inner {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Utility typography */
.eyebrow {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--color-accent);
}

/* ==========================================================================
   3. HEADER (parts/header.html)
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    min-height: var(--header-h);
    padding: 0 var(--gutter);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur-fast) var(--ease-out-expo),
                border-color var(--dur-fast) var(--ease-out-expo);
}
.site-header.is-scrolled {
    background-color: rgba(10, 9, 8, 0.75);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom-color: var(--color-line);
}

.site-header .brand,
.site-footer .brand {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.02em;
}
.site-header .brand a { text-decoration: none; }

/* Core Navigation block, styled to the brand */
.nav-main a {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-fg-muted) !important;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out-expo);
}
.nav-main a:hover { color: var(--color-fg) !important; }
.wp-block-navigation__responsive-container.is-menu-open {
    background: var(--color-bg) !important;
    padding-top: var(--header-h);
}
.wp-block-navigation__responsive-container.is-menu-open a { font-size: 22px; }

/* ==========================================================================
   4. BUTTONS
   theme.json styles the base; these add the accent variant + arrow motion.
   ========================================================================== */
.wp-block-button__link {
    transition: background-color var(--dur-fast) var(--ease-out-expo),
                color var(--dur-fast) var(--ease-out-expo),
                border-color var(--dur-fast) var(--ease-out-expo);
}
.btn-accent .wp-block-button__link {
    background: var(--color-accent) !important;
    color: var(--color-bg) !important;
    border-color: var(--color-accent) !important;
}
.btn-accent .wp-block-button__link:hover {
    background: var(--color-fg) !important;
}

/* Layout-engine gap compensation.
   Global blockGap is 0px (so full-bleed sections abut seamlessly); these
   restore intended gaps where core flex layouts rely on blockGap. */
.wp-block-buttons { gap: 12px !important; }
.wp-block-columns { gap: 24px !important; }
.wp-block-navigation { gap: 40px !important; }
.site-footer .wp-block-columns { gap: 40px !important; }
.footer-links p { margin: 0 0 8px !important; }

/* ==========================================================================
   5. HERO (core Cover block, class .hero)
   ========================================================================== */
.hero {
    min-height: 100vh;
}
/* Grade the media to the brand look */
.hero .wp-block-cover__image-background,
.hero .wp-block-cover__video-background {
    filter: brightness(0.8) contrast(1.05) saturate(0.85);
}
/* Cinematic gradient above media (z 0), below content (inner container z 1) */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(10, 9, 8, 0.55) 0%,
            rgba(10, 9, 8, 0.05) 25%,
            rgba(10, 9, 8, 0.15) 60%,
            rgba(10, 9, 8, 0.95) 100%);
}

.hero .wp-block-cover__inner-container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--gutter) 64px;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 40px;
}
.hero__inner > * { margin: 0 !important; }

.hero__copy > * { margin: 0 !important; }
.hero__copy .eyebrow { margin-bottom: 24px !important; }

/* Headline lines — h1 + styled paragraphs, visually identical */
.hero-line {
    font-family: var(--font-display) !important;
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
    font-weight: 400 !important;
    font-size: clamp(56px, 11vw, 196px) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.02em !important;
    color: var(--color-fg);
}
.accent-italic {
    font-style: italic;
    color: var(--color-accent) !important;
    font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
}
/* hero.js wraps each line for the staggered rise */
.hero-line.is-split { overflow: hidden; padding-bottom: 0.06em; }
.hero-line__inner { display: block; will-change: transform; }

.hero__cta { margin-top: 40px !important; }

.hero__meta {
    text-align: right;
    gap: 16px !important;
}
.hero__meta p {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin: 0 !important;
}
.hero__meta p strong {
    display: block;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 28px;
    color: var(--color-fg);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-bottom: 4px;
}

.hero__scroll {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}
.hero__scroll::after {
    content: "";
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, var(--color-accent), transparent);
    animation: scrollPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ==========================================================================
   6. THE LABORATORY (WebGL menu)
   Each row (.lab__item) is a plain Image block (.lab__thumb) plus text —
   the image is ALWAYS visible, auto-cropped via object-fit: cover to fill
   the row's rectangle. No hover or JavaScript is required to see it.
   webgl-menu.js progressively enhances each row by injecting its own small
   canvas (.lab__item-canvas) that applies a liquid noise/ripple distortion
   to that row's own image on hover — a flourish layered on top, not a
   requirement. If Three.js fails to load, every row still looks complete.
   ========================================================================== */
.lab {
    position: relative;
    padding: 96px 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    overflow: hidden;
    margin: 0 !important;
}

.lab__inner {
    position: relative;
    z-index: 1;
}

.lab__head {
    margin-bottom: 64px !important;
    flex-wrap: wrap;
}
.lab__head > * { margin: 0 !important; }
.lab__title {
    font-family: var(--font-display) !important;
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 32px) !important;
    font-weight: 400 !important;
    font-variation-settings: "SOFT" 50, "opsz" 24;
    letter-spacing: 0 !important;
}
.lab__title em { color: var(--color-accent); font-style: normal; }
.lab__index {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}

.lab__list > * { margin: 0 !important; }

.lab__item {
    border-top: 1px solid var(--color-line);
    position: relative;
    overflow: hidden;                 /* crops the background image to this row */
    display: grid !important;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 24px;
    padding: clamp(20px, 3.5vw, 44px) 24px;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out-expo);
}
.lab__item:last-child { border-bottom: 1px solid var(--color-line); }
.lab__item > * { margin: 0 !important; }

/* The row's own image — automatically cropped to fill the row's rectangle,
   always visible (this is the fix: no hover or JavaScript required to see
   it). Darkened so the cream headline stays readable over any photo. */
.lab__thumb {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0 !important;
}
.lab__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;               /* the "auto-crop" behavior */
    object-position: center;
    filter: brightness(0.32) saturate(0.85);
    transition: filter var(--dur-med) var(--ease-out-expo),
                transform 1.4s var(--ease-out-expo);
    will-change: transform;
}
.lab__item:hover .lab__thumb img {
    filter: brightness(0.5) saturate(1);
    transform: scale(1.045);
}

/* Left-to-right scrim so text reads over any image without per-photo tuning */
.lab__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(10, 9, 8, 0.82) 0%,
        rgba(10, 9, 8, 0.5) 55%,
        rgba(10, 9, 8, 0.7) 100%
    );
}

/* Slot for the per-row liquid-shimmer canvas, created by webgl-menu.js at
   runtime and inserted here. Purely a hover flourish layered above the
   always-visible image — if it fails to load, the row still looks complete. */
.lab__item-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-expo);
}
.lab__item.is-active .lab__item-canvas { opacity: 1; }

.lab__num {
    position: relative;
    z-index: 3;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    color: var(--color-fg-faint);
    transition: color var(--dur-fast) var(--ease-out-expo);
}

.lab__label {
    position: relative;
    z-index: 3;
    font-family: var(--font-display) !important;
    font-size: clamp(48px, 9vw, 144px) !important;
    font-weight: 400 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.025em !important;
    color: var(--color-fg);
    font-variation-settings: "opsz" 144;
    display: flex;
    flex-wrap: wrap;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

/* Per-character split-swap layers (built by main.js at runtime) */
.lab__char {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: 1;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}
.lab__char-inner { display: block; will-change: transform; }
.lab__char-inner > span { display: block; line-height: 1; }
.lab__char-inner .alt {
    font-style: italic;
    color: var(--color-accent);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

.lab__meta {
    position: relative;
    z-index: 3;
    text-align: right;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-fg-faint);
    transition: color var(--dur-fast) var(--ease-out-expo);
    max-width: 240px;
}

.lab__item:hover .lab__num,
.lab__item:hover .lab__meta { color: var(--color-accent); }

/* ==========================================================================
   7. COLLECTIONS
   ========================================================================== */
.collections {
    padding: 96px 0;
    margin: 0 !important;
}

.collections__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 64px !important;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 24px;
    flex-wrap: wrap;
}
.collections__head > * { margin: 0 !important; }
.collections__title {
    font-size: clamp(40px, 6vw, 88px) !important;
    font-variation-settings: "opsz" 144;
    line-height: 0.95 !important;
}
.collections__title em {
    font-style: italic;
    color: var(--color-accent);
    font-variation-settings: "SOFT" 100, "opsz" 144;
}

.collections__grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.collections__grid > * { margin: 0 !important; }

/* Cards are core Cover blocks */
.collection-card {
    grid-column: span 6;
    aspect-ratio: 4 / 5;
    min-height: 0 !important;
    border: 1px solid var(--color-line);
    overflow: hidden;
    background: var(--color-bg-elev);
}
.collections__grid > .collection-card:nth-child(3) {
    grid-column: span 12;
    aspect-ratio: 21 / 9;
}

.collection-card .wp-block-cover__image-background {
    filter: brightness(0.85) saturate(0.9);
    transition: transform 1.2s var(--ease-out-expo), filter var(--dur-med) var(--ease-out-expo);
    will-change: transform;
}
.collection-card:hover .wp-block-cover__image-background {
    transform: scale(1.06);
    filter: brightness(0.95) saturate(1);
}

.collection-card .wp-block-cover__inner-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(24px, 3vw, 44px);
}
.collection-card .wp-block-cover__inner-container > * { margin: 0 !important; }

.collection-card__num {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    color: var(--color-fg-muted);
}
.collection-card__tag {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--color-line-strong);
    color: var(--color-fg-muted);
}

.collection-card__title {
    font-size: clamp(32px, 4vw, 56px) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
    font-variation-settings: "opsz" 48;
}
.collection-card__title em {
    font-style: italic;
    color: var(--color-accent);
    font-variation-settings: "SOFT" 100, "opsz" 48;
}
.collection-card__cta,
.collection-card__cta a {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg) !important;
    text-decoration: none !important;
}
.collection-card__cta a {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-accent);
}

/* ==========================================================================
   8. MANIFESTO + SPECS
   ========================================================================== */
.manifesto {
    padding: 144px 0 96px;
    border-top: 1px solid var(--color-line);
    margin: 0 !important;
}
.manifesto__inner .blw-cols {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 64px;
}
.manifesto__label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin: 0 !important;
}
.manifesto__copy {
    font-family: var(--font-display) !important;
    font-size: clamp(28px, 3.4vw, 52px) !important;
    line-height: 1.15 !important;
    font-weight: 400;
    letter-spacing: -0.015em;
    font-variation-settings: "opsz" 48;
    margin: 0 !important;
}
.manifesto__copy em {
    font-style: italic;
    color: var(--color-accent);
    font-variation-settings: "SOFT" 100, "opsz" 48;
}

.specs {
    margin-top: 64px !important;
    padding-top: 40px;
    border-top: 1px solid var(--color-line);
    gap: 24px !important;
}
.spec__value {
    font-family: var(--font-display) !important;
    font-size: clamp(40px, 4vw, 64px) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em;
    color: var(--color-fg);
    font-variation-settings: "opsz" 48;
    margin: 0 !important;
}
.spec__value sup { font-size: 0.4em; color: var(--color-accent); font-style: italic; }
.spec__label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    margin: 8px 0 0 !important;
}

/* ==========================================================================
   9. FOOTER (parts/footer.html)
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--color-line);
    padding: 64px 0 24px;
    margin: 0 !important;
}
.site-footer .footer__tag { color: var(--color-fg-muted); max-width: 320px; }
.site-footer h4 {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
    font-weight: 500 !important;
    margin: 0 0 16px !important;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--color-fg); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }

.footer__mark-text {
    font-family: var(--font-display) !important;
    font-size: clamp(56px, 13vw, 200px) !important;
    line-height: 0.85 !important;
    letter-spacing: -0.04em !important;
    font-weight: 400 !important;
    font-variation-settings: "opsz" 144;
    color: transparent !important;
    -webkit-text-stroke: 1px var(--color-line-strong);
    margin: 96px 0 0 !important;
}

.footer__bottom {
    margin-top: 40px !important;
    padding-top: 16px;
    border-top: 1px solid var(--color-line);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-fg-faint);
}
.footer__bottom p { margin: 0 !important; font-size: 11px !important; font-family: var(--font-mono) !important; }

/* ==========================================================================
   10. INTERIOR PAGES
   ========================================================================== */
.page-main {
    padding-top: calc(var(--header-h) + 64px);
    padding-bottom: 96px;
    min-height: 60vh;
}

/* ==========================================================================
   11. REVEAL-ON-SCROLL (front end only; editor.css neutralises it)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__meta { text-align: left; }
    .lab__item { grid-template-columns: 40px 1fr; }
    .lab__meta { display: none; }
    .manifesto__inner .blw-cols { grid-template-columns: 1fr; gap: 24px; }
    .collections__grid > .collection-card,
    .collections__grid > .collection-card:nth-child(3) {
        grid-column: span 12;
        aspect-ratio: 4 / 5;
    }
}

@media (max-width: 640px) {
    :root { --header-h: 64px; }
    .collections__head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .hero__scroll::after { display: none; }
}

/* ==========================================================================
   13. RESPONSIVE & TOUCH HARDENING (v1.1)
   ========================================================================== */

/* Media safety net: nothing may overflow the viewport horizontally, and
   giant display type must wrap rather than force horizontal scroll if a
   client types an unusually long word. */
img, video { max-width: 100%; height: auto; }
.hero-line, .collections__title, .manifesto__copy, .footer__mark-text {
    overflow-wrap: break-word;
}

/* Modern mobile viewports: 100svh ignores the collapsing browser address
   bar, so the hero never "jumps" mid-scroll on iOS/Android. !important is
   required to beat the Cover block's inline min-height. */
@supports (min-height: 100svh) {
    .hero { min-height: 100svh !important; }
}

/* Fixed header: never wrap into two rows */
.site-header { flex-wrap: nowrap !important; gap: 16px; }

/* Touch devices have no hover, so the row images rest slightly brighter —
   otherwise phone users would only ever see the darkest grading. */
@media (hover: none) {
    .lab__thumb img { filter: brightness(0.42) saturate(0.9); }
}

/* Core Columns stack to a single column at 781px; the specs strip reads
   far better as a 2x2 grid on phones. */
@media (max-width: 781px) {
    .specs {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        row-gap: 32px !important;
    }
    .specs .wp-block-column { flex-basis: auto !important; }
}

@media (max-width: 640px) {
    .lab { padding: 64px 0; }
    .lab__item { padding: 24px 16px; }
    .collections { padding: 64px 0; }
    .manifesto { padding: 96px 0 64px; }
    /* Keep the CTAs clear of the scroll cue at the bottom of the hero */
    .hero .wp-block-cover__inner-container { padding-bottom: 96px; }
    .footer__bottom { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 480px) {
    /* Brand + hamburger only; the Commission CTA lives in the hero anyway */
    .site-header .wp-block-buttons { display: none; }
    .site-header .brand { font-size: 18px; }
    .hero__cta { flex-direction: column; align-items: flex-start; }
}