/* =============================================================
   PinUltimate 2026 Homepage Refresh
   Component styles for the redesigned homepage sections.
   All classes prefixed `.pu-` to avoid collisions with Bricks/theme.
   ============================================================= */

:root {
    /* Dark palette (hex, matching mockup homepage-2026-final.html :root) */
    --pu-void: #0B0B0D;
    --pu-surface: #16181B;
    --pu-surface-2: #1F2327;
    --pu-surface-3: #2A2E33;
    --pu-silver: #D6D7DA;
    --pu-silver-dim: #8F949B;
    --pu-silver-faint: #5A5F66;
    --pu-power-red: #DA291C;
    --pu-power-red-glow: #FF3E2F;
    --pu-power-red-deep: #8A1508;
    --pu-rust: #723624;

    /* Paper palette (for light/cream sections) */
    --pu-paper: #F2EDE1;
    --pu-paper-deep: #E4DBC7;
    --pu-paper-line: #C4BCA5;
    --pu-paper-ink: #1B1917;

    /* Typography — 2026 additions */
    --pu-font-poster: 'Archivo Black', 'Arial Black', sans-serif;
    --pu-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --pu-font-utility: 'IBM Plex Sans', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
    --pu-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
    --pu-font-script: 'Rock Salt', cursive;
}

/* ─── Shared kicker (editorial eyebrow) ─── */
.pu-kicker {
    font-family: var(--pu-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-power-red);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.pu-kicker::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--pu-power-red);
}
.pu-kicker--center { justify-content: center; }
.pu-kicker--center::before { display: none; }

/* ─── Buttons ─── */
.pu-btn-solid,
.pu-btn-ghost,
.pu-btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--pu-font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 18px 30px;
    transition: background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.pu-btn-solid {
    background: var(--pu-power-red);
    color: var(--pu-void);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.pu-btn-solid:hover { background: var(--pu-power-red-glow); transform: translateX(4px); }
.pu-btn-ghost {
    background: transparent;
    border: 2px solid var(--pu-silver);
    color: var(--pu-silver);
    padding: 16px 28px;
}
.pu-btn-ghost:hover { border-color: var(--pu-power-red); color: var(--pu-power-red); }
.pu-btn-dark {
    background: var(--pu-void);
    color: var(--pu-silver);
    clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.pu-btn-dark:hover { background: var(--pu-power-red); transform: translateX(4px); }
.pu-btn-solid svg,
.pu-btn-ghost svg,
.pu-btn-dark svg { width: 14px; height: 14px; }

/* ─── Italic display accent (Barlow Condensed italic, Power Red) ─── */
.pu-script {
    font-family: var(--pu-font-display);
    font-style: italic;
    font-weight: 700;
    color: var(--pu-power-red);
    letter-spacing: -0.01em;
}

/* ─── Skewed red accent span (display headlines) ─── */
.pu-skew-red {
    color: var(--pu-power-red);
    display: inline-block;
    transform: skewX(-5deg);
}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════ */
.pu-hero {
    position: relative;
    height: 100vh;
    max-height: 900px;
    min-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pu-void);
}
.pu-hero__bg,
.pu-hero > img.pu-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: center;
    filter: saturate(0.75) contrast(1.05);
    animation: pu-kenburns 22s ease-out infinite alternate;
}
@keyframes pu-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}
.pu-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 11, 13, 0.5) 0%, rgba(11, 11, 13, 0.1) 40%, rgba(11, 11, 13, 0.6) 100%),
        linear-gradient(90deg, rgba(11, 11, 13, 0.75) 0%, rgba(11, 11, 13, 0) 60%);
}
.pu-hero__content {
    position: relative;
    z-index: 2;
    text-align: left;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px clamp(20px, 4vw, 56px);
    color: var(--pu-silver);
}
.pu-hero__kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--pu-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pu-silver);
    margin-bottom: 20px;
}
.pu-hero__kicker__bar {
    width: 48px;
    height: 2px;
    background: var(--pu-power-red);
    flex-shrink: 0;
    display: inline-block;
}
.pu-hero__kicker strong {
    color: var(--pu-power-red);
    font-weight: 700;
}
.pu-hero__headline {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(48px, 8vw, 128px);
    line-height: 0.86;
    color: var(--pu-silver);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
    text-wrap: balance;
}
.pu-hero__sub {
    margin: 32px 0 0;
    max-width: 52ch;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.6;
    color: var(--pu-silver);
    font-weight: 400;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    font-family: var(--pu-font-utility);
}
.pu-hero__actions {
    margin-top: 40px;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.pu-hero__scroll {
    position: absolute;
    right: clamp(20px, 3vw, 36px);
    bottom: 48px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--pu-font-mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pu-silver);
    opacity: 0.7;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 16px;
}
.pu-hero__scroll::after {
    content: "";
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--pu-power-red));
}

/* ══════════════════════════════════════════════════════════
   HERO META SPEC STRIP (below hero)
   ══════════════════════════════════════════════════════════ */
.pu-hero-meta {
    background: var(--pu-surface);
    border-top: 1px solid rgba(214, 215, 218, 0.18);
    border-bottom: 1px solid rgba(214, 215, 218, 0.1);
}
.pu-hero-meta__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
}
.pu-hero-meta__item {
    padding: 20px clamp(20px, 3vw, 36px);
    border-right: 1px solid rgba(214, 215, 218, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.pu-hero-meta__item:last-child { border-right: none; }
.pu-hero-meta__item .v {
    font-family: var(--pu-font-display);
    font-size: clamp(20px, 1.8vw, 28px);
    color: var(--pu-silver);
    line-height: 1;
}
.pu-hero-meta__item .v .unit { color: var(--pu-power-red); font-size: 0.62em; margin-left: 4px; }
.pu-hero-meta__item .l {
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-silver-dim);
}
@media (max-width: 900px) {
    .pu-hero-meta__inner { grid-template-columns: repeat(2, 1fr); }
    .pu-hero-meta__item { border-bottom: 1px solid rgba(214, 215, 218, 0.12); }
    .pu-hero-meta__item:nth-child(2n) { border-right: none; }
    .pu-hero-meta__item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════
   USE CASES — standalone "Built For Pulling" band
   ══════════════════════════════════════════════════════════ */
.pu-usecases {
    background: var(--pu-void);
    padding: clamp(48px, 6vw, 72px) 0;
    border-bottom: 1px solid rgba(214, 215, 218, 0.08);
}
.pu-usecases__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}
.pu-usecases__grid {
    display: grid;
    grid-template-columns: minmax(200px, auto) repeat(5, 1fr);
    border: 1px solid rgba(214, 215, 218, 0.15);
}
.pu-usecases__label {
    background: var(--pu-power-red);
    color: var(--pu-void);
    padding: 24px 28px;
    font-family: var(--pu-font-display);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.05;
    display: flex;
    align-items: center;
}
.pu-usecase {
    padding: 18px clamp(16px, 2vw, 24px);
    border-right: 1px solid rgba(214, 215, 218, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    transition: background .2s;
}
.pu-usecase:last-child { border-right: none; }
.pu-usecase__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pu-usecase__head svg,
.pu-usecase__head i {
    color: var(--pu-power-red);
    width: 22px;
    height: 22px;
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.pu-usecase__name {
    font-family: var(--pu-font-display);
    font-size: clamp(15px, 1.25vw, 17px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pu-silver);
    line-height: 1;
}
.pu-usecase__sub {
    font-family: var(--pu-font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pu-silver-dim);
    padding-left: 0;
}
@media (max-width: 900px) {
    .pu-usecases__grid { grid-template-columns: 1fr 1fr; }
    .pu-usecases__label { grid-column: 1 / -1; justify-content: center; padding: 18px; }
    .pu-usecase {
        border-right: 1px solid rgba(214, 215, 218, 0.12);
        border-bottom: 1px solid rgba(214, 215, 218, 0.12);
    }
    .pu-usecase:nth-child(odd):not(:first-child) { border-right: none; }
    .pu-usecase:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════
   THE LINE SECTION
   ══════════════════════════════════════════════════════════ */
.pu-line {
    background: var(--pu-void);
    padding: clamp(96px, 12vw, 160px) 0 0;
    text-align: center;
    color: var(--pu-silver);
}
.pu-line__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}
.pu-line__kicker { margin-bottom: 24px; }
.pu-line h2 {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(60px, 9vw, 144px);
    line-height: 0.9;
    letter-spacing: -0.015em;
    max-width: 14ch;
    margin: 0 auto;
    color: var(--pu-silver);
    text-transform: uppercase;
    text-wrap: balance;
}
.pu-line__sub {
    margin: 28px auto 0;
    max-width: 56ch;
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.65;
    color: var(--pu-silver);
    opacity: 0.82;
    font-family: var(--pu-font-utility);
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARDS — 3-col dark grid
   ══════════════════════════════════════════════════════════ */
.pu-products {
    background: var(--pu-void);
    padding: clamp(60px, 8vw, 96px) 0 clamp(96px, 12vw, 160px);
}
/* Tighten spacing when Use Cases ("Built For Pulling") immediately follows. */
.pu-products:has(+ .pu-usecases) {
    padding-bottom: clamp(24px, 3vw, 40px);
}
.pu-products + .pu-usecases {
    padding-top: 0;
}
.pu-products__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}
.pu-products__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2vw, 32px);
    align-items: stretch;
}
.pu-products__cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(32px, 4vw, 56px);
}
/* Standalone CTA band — used when CTA sits below the Use Cases grid as its own section. */
.pu-cta-band {
    background: var(--pu-void);
    padding: clamp(48px, 6vw, 72px) 0 clamp(80px, 10vw, 120px);
    margin-top: 0;
}
/* Hero-scale CTA: bigger hit area, animated red glow, subtle hover lift. */
.pu-cta-band .pu-btn-solid {
    font-size: clamp(15px, 1.15vw, 17px);
    padding: 24px 44px;
    letter-spacing: 0.26em;
    box-shadow:
        0 0 0 0 rgba(218, 41, 28, 0.55),
        0 14px 36px -10px rgba(218, 41, 28, 0.45);
    animation: pu-cta-pulse 2.4s ease-in-out infinite;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.pu-cta-band .pu-btn-solid:hover {
    transform: translateY(-2px) translateX(4px);
    box-shadow:
        0 0 0 6px rgba(218, 41, 28, 0.18),
        0 22px 50px -12px rgba(218, 41, 28, 0.65);
    animation: none;
}
.pu-cta-band .pu-btn-solid svg { width: 16px; height: 16px; }

@keyframes pu-cta-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(218, 41, 28, 0.55),
            0 14px 36px -10px rgba(218, 41, 28, 0.45);
    }
    50% {
        box-shadow:
            0 0 0 12px rgba(218, 41, 28, 0),
            0 14px 36px -10px rgba(218, 41, 28, 0.45);
    }
}
@media (prefers-reduced-motion: reduce) {
    .pu-cta-band .pu-btn-solid { animation: none; }
}
.pu-p-card {
    background: var(--pu-surface);
    border: 1px solid rgba(214, 215, 218, 0.08);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all .25s ease;
    text-decoration: none;
    height: 100%;
}
.pu-p-card:hover {
    border-color: var(--pu-power-red);
    transform: translateY(-4px);
}
.pu-p-card__tag {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--pu-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-void);
    background: var(--pu-power-red);
    padding: 8px 18px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    z-index: 1;
}
.pu-p-card__image {
    aspect-ratio: 1;
    background:
        radial-gradient(circle at center, rgba(218, 41, 28, 0.06) 0%, transparent 65%),
        var(--pu-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(214, 215, 218, 0.08);
}
.pu-p-card__image img {
    max-width: 72%;
    max-height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
    transition: transform .4s ease;
}
.pu-p-card:hover .pu-p-card__image img { transform: scale(1.04); }
.pu-p-card__body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.pu-p-card__brand {
    font-family: var(--pu-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--pu-power-red);
    margin-bottom: -6px;
}
.pu-p-card__model {
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-silver);
    opacity: 0.78;
}
.pu-p-card__name {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(26px, 2.4vw, 32px);
    line-height: 0.95;
    color: var(--pu-silver);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.pu-p-card__tagline {
    font-family: var(--pu-font-utility);
    font-size: 15px;
    line-height: 1.5;
    color: var(--pu-silver);
    opacity: 0.78;
}
.pu-p-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.pu-p-card__specs span {
    font-family: var(--pu-font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pu-silver);
    padding: 6px 10px;
    border: 1px solid rgba(214, 215, 218, 0.15);
}
.pu-p-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(214, 215, 218, 0.08);
}
.pu-p-card__price {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1;
    color: var(--pu-silver);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.pu-p-card__price .currency { color: var(--pu-power-red); margin-right: 2px; }

/* Sale-price treatment (Woo renders <del> + <ins> for active sales) */
.pu-p-card__price del {
    font-weight: 400;
    font-size: 0.72em;
    color: var(--pu-silver);
    opacity: 0.45;
    text-decoration: line-through;
}
.pu-p-card__price ins {
    text-decoration: none;
    font-weight: 800;
}
.pu-p-card__price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.pu-p-card__cta {
    font-family: var(--pu-font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-power-red);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap .25s ease, color .25s ease;
}
.pu-p-card:hover .pu-p-card__cta { gap: 14px; color: var(--pu-power-red-glow); }

/* Whole-card clickable: CTA anchor's ::after expands over the card.
   Since .pu-p-card is position:relative, the overlay fills it, making
   every pixel a click target without wrapping the <article> in an <a>. */
.pu-p-card__cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}
.pu-p-card { cursor: pointer; }
@media (max-width: 900px) {
    .pu-products__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   FEATURED VOICE — single centered testimonial on dark background
   ══════════════════════════════════════════════════════════ */
.pu-featured-voice {
    background: var(--pu-surface);
    padding: clamp(56px, 7vw, 96px) 0;
    text-align: center;
    border-top: 1px solid rgba(214, 215, 218, 0.08);
}
/* Tighten when Featured Voice sits directly above Video — they share bg
   and should read as one continuous dark panel with a subtle inner gap. */
.pu-featured-voice:has(+ .pu-video) {
    padding-bottom: clamp(24px, 3vw, 40px);
}
.pu-featured-voice + .pu-video {
    padding-top: clamp(24px, 3vw, 40px);
}
.pu-featured-voice__inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}
.pu-featured-voice__stars {
    color: var(--pu-power-red);
    font-size: clamp(22px, 2vw, 30px);
    letter-spacing: 0.12em;
    line-height: 1;
    margin-bottom: 28px;
}
.pu-featured-voice__quote {
    font-family: var(--pu-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(24px, 2.8vw, 40px);
    line-height: 1.3;
    color: var(--pu-silver);
    letter-spacing: -0.005em;
    margin: 0;
}
.pu-featured-voice__quote::before {
    content: "\201C";
    color: var(--pu-power-red);
    font-family: var(--pu-font-display);
    font-style: normal;
    font-size: 1.2em;
    line-height: 0;
    margin-right: 6px;
    display: inline-block;
    vertical-align: -0.3em;
}
.pu-featured-voice__attr {
    margin-top: 28px;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--pu-silver-dim);
}
.pu-featured-voice__attr .on {
    color: var(--pu-power-red);
    margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════
   WATCH THIS — small pointer artwork right-aligned under the
   Vimeo player, inside the Video section's container. Sits on
   the paper (light) half of the video section's split gradient,
   so native dark-ink color reads without invert.
   ══════════════════════════════════════════════════════════ */
.pu-watch-this {
    display: block;
    width: auto;
    height: clamp(60px, 6vw, 90px);
    margin: 12px 0 0 auto; /* top spacing + right-align via auto left */
    max-width: 100%;
}

/* ══════════════════════════════════════════════════════════
   VIDEO — creative dark-to-light split. Top half void (continues
   the featured-voice section's dark floor), bottom half paper
   (bleeds into the Watch-This section below). Hard-stop gradient
   at 50% creates the dividing line; the opaque Vimeo player
   naturally straddles it without seeing the transition behind.
   ══════════════════════════════════════════════════════════ */
.pu-video {
    /* Angled hard-stop split: 170deg = ~10° tilt (line slopes bottom-left
       up to top-right). The slight drift keeps the split from feeling
       mechanical — it echoes the -5° skew on the red accent words. */
    background: linear-gradient(
        170deg,
        var(--pu-surface) 0%,
        var(--pu-surface) 50%,
        var(--pu-paper) 50%,
        var(--pu-paper) 100%
    );
    padding: clamp(96px, 12vw, 140px) 0;
}
.pu-video__poster {
    position: relative;
    aspect-ratio: 16/9;
    background:
        linear-gradient(180deg, rgba(11, 11, 13, 0.35) 0%, rgba(11, 11, 13, 0.85) 100%),
        url("https://pinultimate.com/wp-content/uploads/PinUltimate-video-bg.jpg") center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}
.pu-video__play {
    width: clamp(88px, 9vw, 140px);
    height: clamp(88px, 9vw, 140px);
    border: 2px solid var(--pu-silver);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 11, 13, 0.3);
    transition: all .35s cubic-bezier(.2,.7,.1,1);
}
.pu-video__play svg {
    width: 34%;
    height: 34%;
    fill: var(--pu-silver);
    margin-left: 8%;
    transition: fill .35s;
}
.pu-video__poster:hover .pu-video__play {
    background: var(--pu-power-red);
    border-color: var(--pu-power-red);
    transform: scale(1.1);
}
.pu-video__poster:hover .pu-video__play svg { fill: var(--pu-silver); }
.pu-video__label {
    position: absolute;
    top: 32px;
    left: 32px;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--pu-silver);
    display: flex;
    gap: 12px;
    align-items: center;
}
.pu-video__label__dot {
    width: 8px;
    height: 8px;
    background: var(--pu-power-red);
    border-radius: 50%;
    animation: pu-pulse 2s ease-in-out infinite;
}
@keyframes pu-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}
.pu-video__caption {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pu-paper-ink);
    opacity: 0.65;
}

/* ══════════════════════════════════════════════════════════
   ANATOMY — 6 feature blocks, alternating rows
   ══════════════════════════════════════════════════════════ */
.pu-anatomy {
    background: var(--pu-surface);
    padding: clamp(96px, 12vw, 160px) 0;
    position: relative;
    overflow: hidden;
}
/* When Anatomy Pt1 is immediately followed by Salt Bath, drop its bottom
   padding so Row 04 (NeverRust) flows directly into the salt-bath proof. */
.pu-anatomy:has(+ .pu-saltbath) {
    padding-bottom: clamp(24px, 3vw, 40px);
}
.pu-anatomy::before {
    content: "";
    position: absolute;
    top: -10%;
    left: -5%;
    width: 50%;
    height: 80%;
    background: radial-gradient(circle, rgba(218, 41, 28, 0.06) 0%, transparent 60%);
    filter: blur(100px);
    pointer-events: none;
}

/* Continuation section (after Salt Bath interrupts): same bg but lighter
   top padding, no head, no repeat radial gradient. Reads as one narrative. */
.pu-anatomy--continued {
    padding-top: clamp(24px, 3vw, 40px);
}
.pu-anatomy--continued::before {
    display: none;
}
.pu-anatomy--continued .pu-anatomy__row:last-child {
    border-bottom: none;
}

.pu-anatomy__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 80px;
}
.pu-anatomy__head .pu-kicker { justify-content: center; margin-bottom: 24px; }
.pu-anatomy__head h2 {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(44px, 6vw, 80px);
    line-height: 0.95;
    letter-spacing: -0.015em;
    color: var(--pu-silver);
}
.pu-anatomy__head p {
    margin-top: 24px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--pu-silver);
    opacity: 0.82;
}
.pu-anatomy__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
    padding: clamp(48px, 6vw, 88px) 0;
    border-bottom: 1px solid rgba(214, 215, 218, 0.12);
}
.pu-anatomy__row:last-child { border-bottom: none; }
.pu-anatomy__row--flip .pu-anatomy__image { order: 2; }
.pu-anatomy__image {
    aspect-ratio: 4/3;
    background: var(--pu-surface-2);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(214, 215, 218, 0.1);
}
.pu-anatomy__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pu-anatomy__image--contain img {
    object-fit: contain;
    background: var(--pu-surface-3);
    padding: 20%;
}
/* When an anatomy image cell holds a Vimeo/YouTube embed instead of a photo,
   release the 4:3 aspect and let the video's native 16:9 drive height. */
.pu-anatomy__image--video {
    aspect-ratio: auto;
    background: transparent;
    border: none;
}
.pu-anatomy__image--video .brxe-video,
.pu-anatomy__image--video iframe {
    width: 100%;
    display: block;
}
.pu-anatomy__image__plate {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--pu-font-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-silver);
    background: rgba(11, 11, 13, 0.75);
    padding: 6px 12px;
    backdrop-filter: blur(8px);
}
.pu-anatomy__content { padding: 8px 0; }
.pu-anatomy__num {
    font-family: var(--pu-font-display);
    font-size: 72px;
    line-height: 0.85;
    color: var(--pu-power-red);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}
.pu-anatomy__kicker {
    font-family: var(--pu-font-mono);
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pu-power-red);
    margin-bottom: 18px;
}
.pu-anatomy__title {
    font-family: var(--pu-font-display);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1;
    color: var(--pu-silver);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
}
.pu-anatomy__body {
    font-size: 16px;
    line-height: 1.75;
    color: var(--pu-silver);
    opacity: 0.82;
    max-width: 58ch;
}
.pu-anatomy__body strong { color: var(--pu-silver); opacity: 1; font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   SALT BATH — hybrid mockup layout: mega-number left,
   heading + copy + competitor badges right.
   ══════════════════════════════════════════════════════════ */
.pu-saltbath {
    background: var(--pu-void);
    padding: clamp(48px, 6vw, 88px) 0;
    position: relative;
    overflow: hidden;
}
.pu-saltbath::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle, rgba(218, 41, 28, 0.08) 0%, transparent 60%);
    filter: blur(100px);
    pointer-events: none;
}
.pu-saltbath__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
    position: relative;
}
.pu-saltbath__left {
    position: relative;
}
.pu-saltbath__label {
    margin-bottom: 12px;
}
.pu-saltbath__mega {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(120px, 18vw, 300px);
    line-height: 0.78;
    color: var(--pu-silver);
    letter-spacing: -0.04em;
    position: relative;
    display: inline-block;
}
/* HR unit overlaps the bottom-right of "1,000" in red, skewed — reads
   like a graphic stamp rather than a baseline-super exponent. */
.pu-saltbath__mega .unit {
    position: absolute;
    right: -12%;
    bottom: -4%;
    font-size: 0.42em;
    font-weight: 900;
    color: var(--pu-power-red);
    transform: skewX(-6deg);
    letter-spacing: -0.01em;
    line-height: 1;
    vertical-align: unset;
    margin: 0;
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
    z-index: 2;
}
.pu-saltbath__caption {
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-silver-dim);
    margin-top: 20px;
    text-align: right;
}
.pu-saltbath__right h3 {
    font-family: var(--pu-font-display);
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: 700;
    color: var(--pu-silver);
    line-height: 1.05;
    margin-bottom: 28px;
}
.pu-saltbath__right p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--pu-silver);
    opacity: 0.82;
    margin-bottom: 20px;
    max-width: 48ch;
}
.pu-saltbath__right p strong { color: var(--pu-silver); opacity: 1; font-weight: 600; }
/* ── Comparison bars — full container width, sits below the 2-col grid ── */
.pu-saltbath__bars {
    margin-top: clamp(48px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.pu-saltbath__bar {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 90px;
    gap: 24px;
    align-items: center;
    width: 100%;
}
.pu-saltbath__bar__label {
    font-family: var(--pu-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pu-silver);
}
.pu-saltbath__bar__track {
    position: relative;
    height: 14px;
    background: rgba(214, 215, 218, 0.14);
    overflow: hidden;
    border: 1px solid rgba(214, 215, 218, 0.08);
}
.pu-saltbath__bar__fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--pu-rust);
}
.pu-saltbath__bar__hours {
    font-family: var(--pu-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pu-silver-dim);
    text-align: right;
}
.pu-saltbath__bar--pass .pu-saltbath__bar__label { color: var(--pu-silver); }
.pu-saltbath__bar--pass .pu-saltbath__bar__fill  { background: var(--pu-power-red); }
.pu-saltbath__bar--pass .pu-saltbath__bar__hours { color: var(--pu-power-red); }

/* Width modifiers for static competitor percentages */
.pu-saltbath__bar--w100 .pu-saltbath__bar__fill { width: 100%; }
.pu-saltbath__bar--w31  .pu-saltbath__bar__fill { width: 31.2%; }
.pu-saltbath__bar--w24  .pu-saltbath__bar__fill { width: 24%; }
.pu-saltbath__bar--w19  .pu-saltbath__bar__fill { width: 18.6%; }

@media (max-width: 700px) {
    .pu-saltbath__bar {
        grid-template-columns: 120px 1fr 70px;
        gap: 12px;
    }
}
@media (max-width: 900px) {
    .pu-saltbath__inner { grid-template-columns: 1fr; gap: 56px; }
}

/* ══════════════════════════════════════════════════════════
   VOICES — big-star pull-quote testimonials
   ══════════════════════════════════════════════════════════ */
.pu-voices {
    background: var(--pu-void);
    padding: clamp(96px, 12vw, 160px) 0;
}
.pu-voices__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 80px;
}
.pu-voices__head .pu-kicker { justify-content: center; margin-bottom: 24px; }
.pu-voices__head h2 {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(44px, 6vw, 80px);
    line-height: 0.95;
    color: var(--pu-silver);
}
.pu-voices__list {
    display: flex;
    flex-direction: row;
    gap: clamp(32px, 4vw, 64px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px; /* breathing room for any focus ring */
}
.pu-voices__list::-webkit-scrollbar { display: none; }

/* Slider controls — injected by JS, styled here */
.pu-voices__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: clamp(40px, 5vw, 64px);
}
.pu-voices__nav {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(214, 215, 218, 0.25);
    background: transparent;
    color: var(--pu-silver);
    font-size: 18px;
    font-family: var(--pu-font-display);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, color .2s, background .2s;
    padding: 0;
}
.pu-voices__nav:hover {
    border-color: var(--pu-power-red);
    color: var(--pu-power-red);
}
.pu-voices__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.pu-voices__nav:disabled:hover {
    border-color: rgba(214, 215, 218, 0.25);
    color: var(--pu-silver);
}
.pu-voices__dots {
    display: flex;
    gap: 10px;
    align-items: center;
}
.pu-voices__dot {
    width: 10px;
    height: 10px;
    background: rgba(214, 215, 218, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .25s, width .25s;
}
.pu-voices__dot.is-active {
    background: var(--pu-power-red);
    width: 32px;
}
.pu-voice {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 64px;
    align-items: start;
    /* No dividers between slides — one quote per slide */
    border-bottom: none;
    padding-bottom: 0;
}
.pu-voice__tag {
    font-family: var(--pu-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--pu-power-red);
    margin-bottom: 28px;
    display: block;
}
.pu-voice__stars {
    color: var(--pu-power-red);
    font-size: clamp(26px, 2.5vw, 38px);
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 20px;
}
.pu-voice__source {
    font-family: var(--pu-font-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pu-silver);
    margin-bottom: 12px;
}
.pu-voice__source .on {
    color: var(--pu-silver-dim);
    font-weight: 400;
    font-size: 0.85em;
}
.pu-voice__attribution {
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pu-silver-faint);
    padding-top: 16px;
    border-top: 1px solid rgba(214, 215, 218, 0.12);
}
.pu-voice__quote {
    font-family: var(--pu-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(26px, 3.3vw, 48px);
    line-height: 1.25;
    color: var(--pu-silver);
    letter-spacing: -0.005em;
}
.pu-voice__quote::before {
    content: "\201C";
    color: var(--pu-power-red);
    font-family: var(--pu-font-display);
    font-style: normal;
    font-size: 1.3em;
    line-height: 0;
    margin-right: 4px;
    display: inline-block;
    vertical-align: -0.3em;
}

/* ══════════════════════════════════════════════════════════
   MONTANA — photo seal with coords + stamp + badges
   ══════════════════════════════════════════════════════════ */
.pu-montana {
    background: var(--pu-void);
    padding: clamp(96px, 12vw, 160px) 0;
    border-top: 1px solid rgba(214, 215, 218, 0.1);
    border-bottom: 1px solid rgba(214, 215, 218, 0.1);
}
.pu-montana__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
}
.pu-montana__image {
    aspect-ratio: 1;
    background:
        linear-gradient(180deg, rgba(11, 11, 13, 0.15), rgba(11, 11, 13, 0.5)),
        url("/wp-content/uploads/pinultimate-speed-pin-bw-triball-montana-plate.jpg") center/cover;
    position: relative;
}
.pu-montana__image__stamp {
    position: absolute;
    bottom: 28px;
    left: 28px;
    font-family: var(--pu-font-display);
    font-size: 32px;
    color: var(--pu-silver);
    line-height: 0.9;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}
.pu-montana__image__coords {
    position: absolute;
    top: 28px;
    right: 28px;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pu-silver);
    text-align: right;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.pu-montana__text .pu-kicker { margin-bottom: 24px; }
.pu-montana__text h2 {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(44px, 5.5vw, 80px);
    line-height: 0.95;
    margin-bottom: 32px;
    letter-spacing: -0.015em;
    color: var(--pu-silver);
}
.pu-montana__text p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--pu-silver);
    margin-bottom: 20px;
    opacity: 0.88;
    max-width: 48ch;
}
.pu-montana__text p strong { color: var(--pu-silver); opacity: 1; font-weight: 600; }
.pu-montana__badges {
    margin-top: 36px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pu-montana__badge {
    font-family: var(--pu-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 18px;
    border: 1px solid var(--pu-silver);
    color: var(--pu-silver);
}
.pu-montana__badge--flag {
    background: var(--pu-power-red);
    border-color: var(--pu-power-red);
    color: var(--pu-void);
}

/* ══════════════════════════════════════════════════════════
   GUARANTEE — die-struck warranty plate, 90-day promise
   ══════════════════════════════════════════════════════════ */
.pu-guarantee {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255, 62, 47, 0.14), transparent 60%),
        linear-gradient(180deg, var(--pu-power-red) 0%, var(--pu-power-red-deep) 100%);
    color: var(--pu-void);
    padding: clamp(88px, 11vw, 144px) 0;
    position: relative;
    overflow: hidden;
}
.pu-guarantee::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.1;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.pu-guarantee__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(48px, 7vw, 96px);
    align-items: center;
    position: relative;
}
.pu-guarantee__numeral {
    position: relative;
    font-family: var(--pu-font-poster);
    font-size: clamp(180px, 22vw, 320px);
    line-height: 0.82;
    color: var(--pu-power-red-deep);
    letter-spacing: -0.04em;
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.08),
        0 -1px 0 rgba(0, 0, 0, 0.35),
        -1px 0 0 rgba(0, 0, 0, 0.2);
    -webkit-text-stroke: 1px rgba(11, 11, 13, 0.22);
    user-select: none;
}
.pu-guarantee__numeral .unit {
    display: block;
    font-family: var(--pu-font-mono);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pu-void);
    text-shadow: none;
    -webkit-text-stroke: 0;
    border-left: 2px solid var(--pu-void);
    padding: 6px 0 6px 14px;
    margin-top: 12px;
    width: max-content;
    opacity: 0.9;
}
.pu-guarantee__body { position: relative; }
.pu-guarantee__kicker {
    display: inline-block;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pu-void);
    opacity: 0.95;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(11, 11, 13, 0.4);
}
.pu-guarantee__headline {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--pu-void);
    letter-spacing: -0.01em;
    margin-bottom: 28px;
}
.pu-guarantee__headline em {
    font-family: var(--pu-font-display);
    font-style: italic;
    font-weight: 700;
    color: var(--pu-silver);
}
.pu-guarantee__promise {
    font-family: var(--pu-font-body);
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.55;
    color: var(--pu-void);
    max-width: 42ch;
    font-weight: 500;
}
.pu-guarantee__promise strong { font-weight: 700; }
.pu-guarantee__stamp {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid rgba(11, 11, 13, 0.4);
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pu-void);
    opacity: 0.85;
}
.pu-guarantee__stamp::before {
    content: "✦";
    color: var(--pu-void);
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════
   MARQUEE — top red announcement bar (global Header 21)
   ══════════════════════════════════════════════════════════ */
.pu-marquee {
    background: var(--pu-power-red);
    color: var(--pu-void);
    padding: 9px 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    position: relative;
    z-index: 60;
}
.pu-marquee__track {
    display: inline-block;
    animation: pu-marquee-slide 45s linear infinite;
}
.pu-marquee__track span { display: inline-block; padding: 0 28px; }
.pu-marquee__track span::before { content: "◆"; margin-right: 28px; opacity: 0.55; }
@keyframes pu-marquee-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════
   NAV — sticky dark bar with centered logo (global Header 21)
   Bricks wraps header template children in <header id="brx-header">.
   Per CSS spec, a sticky element's containing block is the nearest
   block-level ancestor — which is #brx-header. Its short height kills
   sticky "travel". display:contents removes it from the box tree so
   .pu-marquee/.pu-nav become direct children of <body>, giving the
   sticky nav the full document as its containing block.
   ══════════════════════════════════════════════════════════ */
#brx-header {
    display: contents !important;
}
.pu-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 11, 13, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(214, 215, 218, 0.1);
}
.pu-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 0;
    gap: 48px;
}
.pu-nav__logo {
    font-family: var(--pu-font-display);
    font-size: 22px;
    letter-spacing: 0.015em;
    color: var(--pu-silver);
    text-align: center;
    text-decoration: none;
}
.pu-nav__logo .slash {
    color: var(--pu-power-red);
    display: inline-block;
    transform: skewX(-16deg);
    margin: 0 1px;
}
.pu-nav__logo img {
    display: block;
    width: auto;
    height: 52px;
    max-width: 100%;
}
/* Logo height now sized via the three-tier responsive block below
   (52px desktop default; 38px on mobile <1024px). */
.pu-nav__left,
.pu-nav__right {
    display: flex;
    align-items: center;
    gap: 32px;
}
.pu-nav__right { justify-content: flex-end; }
.pu-nav__link {
    font-family: var(--pu-font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pu-silver);
    text-decoration: none;
    transition: color .2s;
}
.pu-nav__link:hover { color: var(--pu-power-red-glow); }
.pu-nav__cta {
    font-family: var(--pu-font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 12px 24px;
    background: var(--pu-power-red);
    color: var(--pu-void);
    text-decoration: none;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    transition: background .2s;
}
.pu-nav__cta:hover { background: var(--pu-power-red-glow); }

/* ══════════════════════════════════════════════════════════
   FIELD TEST — 2-col band: vertical YouTube Short + Walt-voice copy
   Slots between Voices and Montana on the homepage.
   ══════════════════════════════════════════════════════════ */
.pu-fieldtest {
    background: var(--pu-void);
    color: var(--pu-silver);
    padding-block: clamp(4rem, 6vw + 2rem, 8rem);
    border-block: 1px solid rgba(214, 215, 218, 0.08);
}
.pu-fieldtest__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}
.pu-fieldtest__video {
    position: relative;
    width: clamp(300px, 30vw, 420px);
    aspect-ratio: 9 / 16;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(214, 215, 218, 0.08);
}
/* Bricks wraps shortcode output in .brxe-shortcode (auto-height), so
   the iframe needs to absolutely fill the aspect-ratio container — not
   `height: 100%` against the wrapper, which collapses to default 150px. */
.pu-fieldtest__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.pu-fieldtest__copy {
    max-width: 56ch;
}
.pu-fieldtest__h2 {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 1rem 0 1.25rem;
    text-transform: uppercase;
}
.pu-fieldtest__body {
    font-family: var(--pu-font-body, 'IBM Plex Sans', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--pu-silver);
    max-width: 50ch;
    margin: 0;
}
@media (max-width: 900px) {
    .pu-fieldtest__inner {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 2.5rem;
    }
    .pu-fieldtest__copy { text-align: center; }
    .pu-fieldtest__body { margin-inline: auto; }
}

/* ══════════════════════════════════════════════════════════
   FOOTER — 2026 refresh (global Footer template 38)
   ══════════════════════════════════════════════════════════ */
.pu-footer {
    background: var(--pu-void);
    padding: 100px 0 32px;
    border-top: 1px solid rgba(214, 215, 218, 0.08);
    position: relative;
}
.pu-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 64px;
    padding-bottom: 64px;
}
.pu-footer__signature {
    font-family: var(--pu-font-display);
    font-size: clamp(34px, 4vw, 56px);
    color: var(--pu-silver);
    line-height: 0.95;
    max-width: 16ch;
    text-transform: uppercase;
}
.pu-footer__signature .pu-script {
    font-family: var(--pu-font-display);
    font-style: italic;
    font-weight: 700;
    color: var(--pu-power-red);
    letter-spacing: -0.01em;
    /* Barlow italic renders slightly shorter at the same font-size —
       bump ~8% to visually match the surrounding upright cap-height. */
    font-size: 1.08em;
    line-height: inherit;
    display: inline;
    transform: none;
    margin: 0;
}
.pu-footer__tag {
    font-family: var(--pu-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-silver);
    opacity: 0.85;
    line-height: 2;
    margin-top: 24px;
}
.pu-footer__tag .row { display: block; }
.pu-footer__tag .row::before {
    content: "→ ";
    color: var(--pu-power-red);
    margin-right: 6px;
}
.pu-footer__tag strong {
    color: var(--pu-silver);
    font-weight: 500;
}
.pu-footer__col h4 {
    font-family: var(--pu-font-mono);
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pu-power-red);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(214, 215, 218, 0.1);
    font-weight: 500;
}
.pu-footer__col ul { list-style: none; padding: 0; margin: 0; }
.pu-footer__col li {
    font-family: var(--pu-font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pu-footer__col a {
    color: var(--pu-silver);
    text-decoration: none;
    transition: color .2s;
}
.pu-footer__col a:hover { color: var(--pu-power-red); }
.pu-footer__bottom {
    padding-top: 32px;
    border-top: 1px solid rgba(214, 215, 218, 0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
    font-family: var(--pu-font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pu-silver);
    opacity: 0.78;
}
.pu-footer__bottom > :last-child {
    margin-left: auto;
    text-align: right;
}
.pu-footer__bottom a {
    color: var(--pu-silver);
    text-decoration: none;
    transition: color .2s;
}
.pu-footer__bottom a:hover { color: var(--pu-power-red); }

/* ══════════════════════════════════════════════════════════
   PHASE 6 RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .pu-anatomy__row,
    .pu-anatomy__row--flip {
        grid-template-columns: 1fr;
    }
    .pu-anatomy__row--flip .pu-anatomy__image { order: 0; }
    .pu-voice { grid-template-columns: 1fr; gap: 32px; }
    .pu-montana__inner { grid-template-columns: 1fr; }
    .pu-guarantee__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
    }
    .pu-footer__top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .pu-footer__bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}
@media (max-width: 600px) {
    .pu-footer__top { grid-template-columns: 1fr; }
}
/* ──────────────────────────────────────────────────────────
   NAV — three-tier responsive layout
   ≥1280  : 3-col grid (left links | logo | right links + CTA)
   1024-1279: flex row (logo left, all links + CTA inline right)
   <1024  : hamburger menu (logo center, ☰ left, cart icon right)
   ────────────────────────────────────────────────────────── */

/* Mobile-only controls hidden by default (desktop) */
.pu-nav__mobile-controls,
.pu-nav__hamburger,
.pu-nav__cart-mobile,
.pu-nav__mobile-panel { display: none; }

/* TABLET — 1024–1279px: logo left, all links + CTA right inline.
   flex-direction:row + align-items:center are explicit because Bricks'
   .brxe-container default is column / flex-start. */
@media (max-width: 1279px) and (min-width: 1024px) {
    .pu-nav__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }
    .pu-nav__logo { order: 0; }
    .pu-nav__left { order: 1; margin-left: auto; gap: 20px; }
    .pu-nav__right { order: 2; gap: 20px; }
    .pu-nav__link { font-size: 12px; letter-spacing: 0.18em; }
    .pu-nav__cta { padding: 10px 18px; font-size: 12px; letter-spacing: 0.2em; }
}

/* MOBILE — <1024px: hamburger left, logo center, cart icon right */
@media (max-width: 1023px) {
    .pu-nav__inner {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
    }
    .pu-nav__left,
    .pu-nav__right { display: none; }

    .pu-nav__mobile-controls {
        display: contents;       /* the button + cart anchor become flex children of .pu-nav__inner */
    }
    .pu-nav__hamburger {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 0 8px;
        background: transparent;
        border: 0;
        cursor: pointer;
        order: 0;
    }
    .pu-nav__hamburger__bar {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--pu-silver);
        transition: transform .25s ease, opacity .2s ease;
        transform-origin: center;
    }
    /* Hamburger → X when expanded */
    .pu-nav__hamburger[aria-expanded="true"] .pu-nav__hamburger__bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .pu-nav__hamburger[aria-expanded="true"] .pu-nav__hamburger__bar:nth-child(2) {
        opacity: 0;
    }
    .pu-nav__hamburger[aria-expanded="true"] .pu-nav__hamburger__bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .pu-nav__hamburger:hover .pu-nav__hamburger__bar { background: var(--pu-power-red-glow); }

    .pu-nav__logo { order: 1; }
    .pu-nav__logo img { height: 38px; }

    .pu-nav__cart-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        color: var(--pu-silver);
        text-decoration: none;
        order: 2;
        transition: color .2s;
    }
    .pu-nav__cart-mobile:hover { color: var(--pu-power-red-glow); }

    /* Slide-down panel — absolutely positioned beneath the sticky nav */
    .pu-nav__mobile-panel {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(11, 11, 13, 0.98);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid rgba(214, 215, 218, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }
    .pu-nav__mobile-panel[data-open="true"] {
        max-height: calc(100vh - 60px);
    }
    .pu-nav__mobile-list {
        list-style: none;
        margin: 0;
        padding: 12px 24px 28px;
    }
    .pu-nav__mobile-link {
        display: block;
        padding: 16px 4px;
        font-family: var(--pu-font-display);
        font-weight: 600;
        font-size: 18px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--pu-silver);
        text-decoration: none;
        border-bottom: 1px solid rgba(214, 215, 218, 0.08);
        transition: color .2s;
    }
    .pu-nav__mobile-link:hover { color: var(--pu-power-red-glow); }
    .pu-nav__mobile-cta-row {
        margin-top: 18px;
    }
    .pu-nav__mobile-cta {
        display: block;
        text-align: center;
        font-family: var(--pu-font-display);
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        padding: 14px 24px;
        background: var(--pu-power-red);
        color: var(--pu-void);
        text-decoration: none;
        clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
        transition: background .2s;
    }
    .pu-nav__mobile-cta:hover { background: var(--pu-power-red-glow); }

    /* Lock body scroll while menu open */
    body.pu-nav-open { overflow: hidden; }
}

/* ══════════════════════════════════════════════════════════
   POSTER-TYPE OVERRIDES — revert streamline for display numerals
   and headline callouts where Barlow Condensed 800 reads too narrow.
   Archivo Black gives the blocky width the design wants.
   ══════════════════════════════════════════════════════════ */
.pu-hero-meta__item .v,
.pu-featured-voice__quote::before,
.pu-anatomy__num,
.pu-anatomy__title,
.pu-voice__quote::before,
.pu-montana__image__stamp,
.pu-guarantee__num,
.pu-footer__signature {
    font-family: var(--pu-font-poster);
}

/* ════════════════════════════════════════════════════════════
   2026 Category Landing Pages — modifiers + comparison block
   ════════════════════════════════════════════════════════════ */

/* Hero modifier — slightly tighter than homepage hero */
.pu-hero--category {
    min-height: clamp(380px, 52vh, 560px);
}
.pu-hero--category .pu-hero__headline {
    font-size: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
}

/* Comparison block — side-by-side feature matrix for 2–3 products */
.pu-comparison {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .pu-comparison--2col { grid-template-columns: repeat(2, 1fr); }
    .pu-comparison--3col { grid-template-columns: repeat(3, 1fr); }
}
.pu-comparison__card {
    background: var(--pu-charcoal, #2D2D2D);
    color: #fff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.pu-comparison__card h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    margin: 0;
}
.pu-comparison__card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pu-comparison__card li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}
.pu-comparison__card li::before {
    content: "✓";
    color: var(--pu-power-red, #DA291C);
    font-weight: 700;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   2026 Category Landing Pages — full design system
   "Spec-sheet grandeur" — amplifies homepage's industrial voice
   ════════════════════════════════════════════════════════════════════ */

/* ── Section system ─────────────────────────────────────────────── */
.pu-section {
    padding-block: clamp(4rem, 6vw + 2rem, 8rem);
    position: relative;
}
/* Section kicker — silver/white text by default (works on dark sections),
   overridden to charcoal on light/cream sections. The red bar is always
   Power Red, so the brand accent reads regardless of background. */
.pu-section__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);   /* light text — readable on dark sections */
    margin-bottom: 1.5rem;
}
.pu-section__kicker::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--pu-power-red, #DA291C);   /* always red bar */
    flex-shrink: 0;
}
/* Override for light-bg sections (comparison block sits on cream) */
.pu-comparison-section .pu-section__kicker {
    color: rgba(45, 45, 45, 0.7);  /* charcoal-ish for cream bg */
}
/* Override for intro section (cream bg) — n/a, intro doesn't have a kicker */
.pu-section__h2 {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
    text-wrap: balance;
}

/* ── Hero (category) — overrides homepage hero defaults ─────────── */
.pu-hero.pu-hero--category {
    min-height: clamp(440px, 58vh, 640px);
    height: auto;
    max-height: none;
    background: var(--pu-void, #0b0b0d);
    /* Bricks .brxe-section is flex-direction: column, so:
       align-items = horizontal axis, justify-content = vertical axis */
    align-items: center;          /* content container horizontally centered */
    justify-content: flex-end;    /* content sits at the BOTTOM of the hero */
}
.pu-hero.pu-hero--category .pu-hero__content {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}
.pu-hero.pu-hero--category::before {
    /* Subtle diagonal grid texture */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(45deg,  rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px;
    pointer-events: none;
    z-index: 1;
}
.pu-hero.pu-hero--category::after {
    /* Diagonal red accent (echoes homepage hero shape divider) */
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(280px, 30vw, 480px);
    height: 6px;
    background: var(--pu-power-red, #DA291C);
    z-index: 2;
}
.pu-hero.pu-hero--category .pu-hero__poster {
    /* Watermark category numeral — fills the empty void */
    position: absolute;
    right: clamp(-2rem, -1vw, 1rem);
    bottom: clamp(-2rem, -1vw, 0);
    font-family: 'Archivo Black', 'Barlow Condensed', sans-serif;
    font-size: clamp(14rem, 30vw, 32rem);
    line-height: 0.78;
    color: rgba(255, 255, 255, 0.045);
    letter-spacing: -0.05em;
    user-select: none;
    pointer-events: none;
    z-index: 1;
}
.pu-hero.pu-hero--category .pu-hero__content {
    position: relative;
    z-index: 3;
    text-align: left;
    max-width: 1400px;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem);
}
.pu-hero.pu-hero--category .pu-hero__headline {
    font-size: clamp(3rem, 2rem + 5.5vw, 7rem);
    line-height: 0.92;
    margin: 0 0 1rem;
}
.pu-hero.pu-hero--category .pu-hero__sub {
    margin: 1rem 0 0;
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
    line-height: 1.5;
    color: rgba(214, 215, 218, 0.92);
    max-width: 48ch;
    text-shadow: none;
    font-family: var(--pu-font-utility, 'IBM Plex Sans', sans-serif);
}

/* ── Intro — pulled-quote, red top rule ─────────────────────────── */
.pu-intro {
    background: #fafafa;
    color: var(--pu-charcoal, #2D2D2D);
    padding-block: clamp(3rem, 4vw + 1rem, 5rem);
    border-top: 4px solid var(--pu-power-red, #DA291C);
    text-align: center;
}
.pu-intro__text {
    font-family: var(--pu-font-utility, 'IBM Plex Sans', sans-serif);
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--pu-charcoal, #2D2D2D);
    max-width: 56ch;
    margin: 0 auto;
    text-wrap: pretty;
}

/* ── Product cards section override ─────────────────────────────── */
/* (auto-loop products section — page-3 layout) */
.pu-products + .pu-section,
.pu-products + .pu-comparison-section {
    border-top: 0;
}

/* ── Comparison section ─────────────────────────────────────────── */
.pu-comparison-section {
    background: #f4f1ec;
    color: var(--pu-charcoal, #2D2D2D);
    padding-block: clamp(4rem, 6vw + 2rem, 8rem);
}
.pu-comparison-section .pu-section__h2 {
    text-align: center;
    margin: 0 auto clamp(2rem, 3vw, 3rem);
    max-width: 18ch;
}
.pu-comparison {
    gap: clamp(1rem, 2vw, 1.75rem);
    max-width: 1200px;
    margin: 0 auto;
}
.pu-comparison__card {
    padding: clamp(1.75rem, 1rem + 1.5vw, 2.5rem);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}
.pu-comparison__card::before {
    /* Tiny red top border, machined edge */
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 48px;
    height: 3px;
    background: var(--pu-power-red, #DA291C);
}
.pu-comparison__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.pu-comparison__card h3 {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    margin: 0 0 0.75rem;
    padding-top: 0.5rem;
    /* Bricks heading defaults override card's color: #fff inheritance — set explicit */
    color: #fff;
}

/* ── Why section — dark, editorial, with Montana coords colophon ─ */
.pu-why {
    background: var(--pu-charcoal, #2D2D2D);
    color: #fff;
    padding-block: clamp(5rem, 7vw + 2rem, 9rem);
    position: relative;
    border-top: 4px solid var(--pu-power-red, #DA291C);
}
.pu-why::before {
    content: "MFG. MANHATTAN, MT  /  45.99° N · 111.20° W";
    position: absolute;
    top: 1.5rem;
    right: clamp(1.25rem, 4vw, 3.5rem);
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 10px;
    color: rgba(255,255,255,0.32);
    letter-spacing: 0.1em;
    pointer-events: none;
}
.pu-why .pu-section__h2 {
    color: #fff;
    margin-bottom: 2rem;
    max-width: 18ch;
}
.pu-why__p {
    font-family: var(--pu-font-utility, 'IBM Plex Sans', sans-serif);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.7;
    margin: 0 0 1.25rem;
    color: rgba(255,255,255,0.78);
    max-width: 60ch;
}
.pu-why__p:first-of-type {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
    line-height: 1.15;
    color: #fff;
    margin-bottom: 2rem;
    letter-spacing: -0.005em;
    text-wrap: balance;
}
.pu-why__p strong {
    /* Brightened red for legibility on charcoal — same as BEST FOR tags */
    color: #FF4233;
    font-weight: 600;
}

/* ── CTA Strip — bold, full-width, real button styling ──────────── */
.pu-cta-strip {
    /* Slightly lifted bg + soft red spotlight so the CTA section reads
       as a distinct "premium moment" between the Why section above and
       the footer below — they were merging into one big dark band. */
    background:
        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(218, 41, 28, 0.10) 0%, transparent 100%),
        #1a1a1d;
    color: #fff;
    padding-block: clamp(4rem, 6vw + 2rem, 7rem);
    text-align: center;
    border-top: 4px solid var(--pu-power-red, #DA291C);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}
.pu-cta-strip::before {
    /* Diagonal grid texture, same as hero */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}
.pu-cta-strip > * { position: relative; z-index: 2; }
.pu-cta-strip__headline {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    color: #fff;
    text-wrap: balance;
}
.pu-cta-strip__sub {
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2.5rem;
}
.pu-cta-strip__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.pu-cta-strip__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 2rem;
    background: var(--pu-power-red, #DA291C);
    color: #fff !important;
    text-decoration: none !important;
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid var(--pu-power-red, #DA291C);
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pu-cta-strip__btn:hover {
    transform: translateY(-2px);
    background: #b91d12;
    border-color: #b91d12;
}
.pu-cta-strip__btn--secondary {
    background: transparent;
    border-color: rgba(255,255,255,0.85);
    color: #fff !important;
}
.pu-cta-strip__btn--secondary:hover {
    background: #fff;
    color: var(--pu-charcoal, #2D2D2D) !important;
    border-color: #fff;
}

/* ── Legal page hero modifier — smaller, no watermark ───────────── */
.pu-hero.pu-hero--legal {
    min-height: clamp(280px, 38vh, 420px);
}
.pu-hero.pu-hero--legal .pu-hero__headline {
    font-size: clamp(2.5rem, 1.75rem + 4vw, 5rem);
}
.pu-hero.pu-hero--legal::after {
    /* Smaller red bottom accent for the more modest legal hero */
    width: clamp(180px, 22vw, 320px);
}

/* ── Five-chapter spec sheet additions ──────────────────────────── */

/* Hero load animation — staggered fade-up (one orchestrated moment) */
@keyframes pu-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pu-hero.pu-hero--category .pu-hero__kicker   { animation: pu-fade-up 0.7s 0.10s both ease-out; }
.pu-hero.pu-hero--category .pu-hero__headline { animation: pu-fade-up 0.8s 0.25s both ease-out; }
.pu-hero.pu-hero--category .pu-hero__sub      { animation: pu-fade-up 0.8s 0.45s both ease-out; }
@media (prefers-reduced-motion: reduce) {
    .pu-hero.pu-hero--category .pu-hero__kicker,
    .pu-hero.pu-hero--category .pu-hero__headline,
    .pu-hero.pu-hero--category .pu-hero__sub { animation: none; }
}

/* Products section: add kicker + heading region above auto-loop grid */
.pu-products__intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 4vw, 3.5rem) clamp(1.5rem, 2vw, 2rem);
    text-align: center;
}
.pu-products__intro .pu-section__kicker {
    justify-content: center;
}
.pu-products__intro .pu-section__kicker::before {
    /* Center kicker bar with text instead of always-left */
}
.pu-products__h2 {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: clamp(2rem, 1.5rem + 2.25vw, 3.25rem);
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 auto;
    max-width: 22ch;
    text-wrap: balance;
    /* Bricks's heading defaults override parent inheritance, so set explicitly.
       Products section sits on the dark page background. */
    color: #fff;
}

/* Comparison section: kicker (centered) + BEST FOR tag on cards */
.pu-comparison-section .pu-section__kicker {
    justify-content: center;
    margin-bottom: 1.25rem;
}
.pu-comparison__best-for {
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    /* Brightened red — Power Red #DA291C is too dark on charcoal cards (~2.9:1 contrast).
       #FF4233 hits ~4.6:1 → WCAG AA for normal text. */
    color: #FF4233;
    margin: 0 0 0.5rem;
    padding-top: 0.25rem;
    display: block;
}

/* Why section: kicker (inherits default light-on-dark color) + 3-pillar block */
.pu-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-block: clamp(2rem, 3vw, 2.75rem);
    margin-block: clamp(2rem, 3vw, 3rem);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 768px) {
    .pu-pillars {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}
.pu-pillar {
    position: relative;
    padding-top: 0.25rem;
}
.pu-pillar__num {
    font-family: 'Archivo Black', var(--pu-font-display, 'Barlow Condensed'), sans-serif;
    font-size: clamp(2.75rem, 2rem + 1.5vw, 3.75rem);
    line-height: 0.85;
    /* Brightened red on charcoal — Power Red is too dark for these big poster glyphs
       to read with proper presence. #FF4233 hits ~4.6:1 contrast on charcoal. */
    color: #FF4233;
    letter-spacing: -0.04em;
    margin-bottom: 0.65rem;
    display: block;
}
.pu-pillar__title {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    margin: 0 0 0.5rem;
    color: #fff;
}
.pu-pillar__desc {
    font-family: var(--pu-font-utility, 'IBM Plex Sans', sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* CTA strip: kicker (centered, inherits default light-on-dark color) */
.pu-cta-strip .pu-section__kicker {
    justify-content: center;
    margin-bottom: 1rem;
}

/* When a brand hero is the first child of <main>, the hero provides
   its own visual breathing room (min-height + scrim) — Bricks' default
   #brx-content padding-top creates an awkward white gap between the
   sticky nav and the dark hero. Kill it. */
main#brx-content:has(> .pu-hero:first-child) {
    padding-top: 0 !important;
}
/* Same for the bottom: when the last section is a dark CTA / charcoal
   trust strip, the parent #brx-content padding-bottom (5em) leaks
   white body-bg between the dark section and the dark footer. */
main#brx-content:has(> .pu-cta-strip:last-child),
main#brx-content:has(> .bg-charcoal:last-child),
main#brx-content:has(> section:last-child[id="cta"]) {
    padding-bottom: 0 !important;
}

/* ── WooCommerce page overrides ─────────────────────────────────────
   On WC pages (shop, cart, checkout, my-account), woocommerce/_base.css
   sets blanket `.woocommerce h1..h6 { color: charcoal }` and
   `.woocommerce p/span/li { color: gray-700 }`. Those win on specificity
   over our brand component classes (.pu-hero__headline etc.) and turn
   our dark-section text invisible.

   The reset block below MUST live in homepage-2026.css (this file)
   rather than WindPress's _base.css — homepage-2026.css ships in the
   theme stylesheet which loads synchronously in <head>, so the reset
   wins on first paint. WindPress CSS loads slightly later and caused
   a brief FOUC where brand text flashed charcoal-on-charcoal before
   re-rendering as silver.

   This single block kills FOUC and replaces the dozens of one-off
   .woocommerce .pu-* color overrides that used to live below. */
/* Header/footer are excluded — Bricks template chrome owns its own colors
   (e.g. .pu-footer__col h4 should stay Power Red). The WC base rule in
   _base.css is also scoped away from header/footer, so this reset only
   needs to fire inside #brx-content where the WC base rule actually bites. */
.woocommerce [class*="pu-"] h1:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] h2:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] h3:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] h4:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] h5:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] h6:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] p:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] span:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] li:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] td:not(:where(#brx-header *, #brx-footer *)),
.woocommerce [class*="pu-"] address:not(:where(#brx-header *, #brx-footer *)) {
    color: inherit;
}

.woocommerce .pu-hero__headline { color: var(--pu-silver); }
.woocommerce .pu-hero__sub { color: var(--pu-silver); }
.woocommerce .pu-section__h2 { color: #fff; }
.woocommerce .pu-products__h2 { color: #fff; }
.woocommerce .pu-cta-strip__headline { color: #fff; }
.woocommerce .pu-cta-strip__sub { color: rgba(255, 255, 255, 0.85); }
.woocommerce .pu-cat-card__name { color: #fff; }
.woocommerce .pu-cat-card__code { color: rgba(255, 255, 255, 0.65); }
.woocommerce .pu-cat-card__sub { color: rgba(255, 255, 255, 0.78); }
.woocommerce .pu-cat-card__cta { color: var(--pu-power-red); }

/* Spec-sheet product cards (Shop) — WC's .woocommerce h3/p/span color
   rules clobber .pu-p-card text into charcoal on a charcoal card.
   Match the brand silver/silver-dim values used on category pages. */
.woocommerce .pu-p-card__name { color: var(--pu-silver, #d6d7da) !important; }
.woocommerce .pu-p-card__model { color: var(--pu-silver, #d6d7da) !important; opacity: 0.78; }
.woocommerce .pu-p-card__tagline { color: var(--pu-silver, #d6d7da) !important; opacity: 0.85; }
.woocommerce .pu-p-card__price { color: var(--pu-silver, #d6d7da) !important; }
.woocommerce .pu-p-card__price del { color: var(--pu-silver, #d6d7da) !important; opacity: 0.5; }
.woocommerce .pu-p-card__price ins { color: var(--pu-silver, #d6d7da) !important; }
.woocommerce .pu-p-card__cta { color: var(--pu-power-red, #DA291C) !important; }
.woocommerce .pu-p-card__specs span { color: var(--pu-silver, #d6d7da) !important; }
.woocommerce .pu-p-card__tag { color: var(--pu-void, #0b0b0d) !important; }

/* Trust strip — Tailwind utilities for white/red text get clobbered
   by .woocommerce p/span color rules. Re-assert. */
.woocommerce section.bg-charcoal p { color: rgba(255, 255, 255, 0.85); }
.woocommerce section.bg-charcoal p .text-primary { color: var(--pu-power-red, #DA291C); }

/* GeoIP "Customer matched zone …" notice is suppressed via PHP
   filter in includes/woocommerce.php (woocommerce_add_notice). */

/* ── Compact hero variant — for cart/checkout/account utility pages */
.pu-hero.pu-hero--category.pu-hero--compact {
    min-height: clamp(280px, 32vh, 360px);
}
.pu-hero.pu-hero--category.pu-hero--compact .pu-hero__headline {
    font-size: clamp(48px, 8vw, 96px);
}
.pu-hero.pu-hero--category.pu-hero--compact .pu-hero__sub {
    margin-top: 16px;
}

/* ── Shop page · category nav cards ─────────────────────────────── */
.pu-shop-cats {
    background: var(--pu-void, #0b0b0d);
    color: rgba(255, 255, 255, 0.92);
    /* Tighten the gap between Pick-a-Family and the Products grid
       below — the inherited pu-section padding-block was way too
       generous when followed by another full-padded section. */
    padding-bottom: clamp(2rem, 3vw, 3.5rem);
}
.pu-shop-cats + .pu-products {
    padding-top: clamp(2rem, 3vw, 3.5rem);
}
.pu-shop-cats .pu-section__h2 {
    color: rgba(255, 255, 255, 0.96);
}
.pu-cat-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 36px 32px 32px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color .2s ease, transform .25s ease, background .2s ease;
    min-height: 240px;
}
.pu-cat-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 32px; height: 2px;
    background: var(--pu-power-red, #DA291C);
    transition: width .25s ease;
}
.pu-cat-card:hover {
    border-color: var(--pu-power-red, #DA291C);
    background: rgba(218, 41, 28, 0.05);
    transform: translateY(-4px);
}
.pu-cat-card:hover::after { width: 64px; }
/* Higher specificity — Bricks .brxe-heading and global text styles
   would otherwise override these. Compound selectors win. */
.pu-shop-cats .pu-cat-card .pu-cat-card__code {
    font-family: var(--pu-font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 8px;
}
.pu-shop-cats .pu-cat-card .pu-cat-card__name {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 800;
    font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}
.pu-shop-cats .pu-cat-card .pu-cat-card__sub {
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin: 4px 0 auto;
}
.pu-shop-cats .pu-cat-card .pu-cat-card__cta {
    font-family: var(--pu-font-display, 'Barlow Condensed', sans-serif);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pu-power-red, #DA291C);
    margin-top: 16px;
    transition: transform .2s ease;
}
.pu-shop-cats .pu-cat-card:hover .pu-cat-card__cta { transform: translateX(4px); }

/* ── Mobile refinements ─────────────────────────────────────────── */
@media (max-width: 640px) {
    .pu-hero.pu-hero--category .pu-hero__poster {
        font-size: clamp(8rem, 36vw, 14rem);
        bottom: -1rem;
    }
    .pu-why::before {
        right: 1rem;
        top: 1rem;
        font-size: 9px;
        max-width: 50%;
        text-align: right;
    }
    .pu-cta-strip__actions {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1rem;
    }
    .pu-cta-strip__btn {
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────
   How It Works section (Direction B+, ported from mockups 2026-04-29)
   Used on /hitch/ category page.
   - Editorial header: kicker + big H2 + right-side mono meta, hairline rule
   - Section bg #fafafa to match .pu-intro for seamless flow
   - Charcoal/void step cards span full grid width (3-up)
   - Photos in uniform 4:3 with subtle filmic boost
   - Verb labels (RELEASE / INSERT / LOCK) in white display caps
   - Mono technical metaline with red dot, dashed divider above caption
   - Coordinate corner marks on the spec panel for service-manual feel
───────────────────────────────────────────────────────────────── */
.pu-how {
    padding: clamp(80px, 9vw, 112px) 0;
    background: #fafafa;
    color: var(--pu-charcoal, #2d2d2d);
    position: relative;
}

/* HEADER — kicker + H2 on left, mono meta on right, hairline rule below.
   width:100% breaks out of Bricks' default .brxe-container align-items:flex-start
   so the 1fr auto columns can actually distribute. */
.pu-how__header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 32px;
    width: 100%;
    margin-bottom: clamp(40px, 5vw, 64px);
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(45, 45, 45, 0.12);
}
.pu-how__header .pu-section__kicker {
    margin-bottom: 16px;
    color: rgba(45, 45, 45, 0.75);
}
.pu-how__header .pu-section__h2 {
    margin: 0;
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: clamp(48px, 6vw, 84px);
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.pu-how__header-meta {
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(45, 45, 45, 0.55);
    text-align: right;
    line-height: 1.6;
    padding-bottom: 10px;
}
.pu-how__header-meta strong {
    display: block;
    color: var(--pu-charcoal, #2d2d2d);
    font-weight: 600;
}
@media (max-width: 720px) {
    .pu-how__header { grid-template-columns: 1fr; }
    .pu-how__header-meta { text-align: left; }
}

/* GRID — width:100% to break out of Bricks' container default */
.pu-how__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2vw, 28px);
    width: 100%;
}
@media (max-width: 860px) {
    .pu-how__grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* CARD — charcoal/void, full-width within grid cell */
.pu-how__step {
    position: relative;
    background: #1a1a1c;
    color: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 48px -16px rgba(0, 0, 0, 0.18);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.4s ease;
}
.pu-how__step:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 36px 64px -20px rgba(0, 0, 0, 0.32);
}
/* Power-red hairline at the very top of each card */
.pu-how__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--pu-power-red, #da291c);
    z-index: 3;
}

/* PHOTO — uniform 4:3 crop with subtle filmic boost */
.pu-how__step .pu-how__step-image,
.pu-how__step img.brxe-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
    background: var(--pu-charcoal, #2d2d2d);
    margin: 0;
    filter: contrast(1.05) saturate(1.05);
}

/* SPEC PANEL — dark info block below the photo */
.pu-how__step-panel {
    padding: 24px clamp(20px, 2vw, 28px) 28px;
    position: relative;
}
/* Coordinate marks at the corners (subtle technical detail) */
.pu-how__step-panel::before,
.pu-how__step-panel::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(255, 255, 255, 0.18);
    border-style: solid;
}
.pu-how__step-panel::before {
    top: 14px;
    right: 14px;
    border-width: 1px 1px 0 0;
}
.pu-how__step-panel::after {
    bottom: 14px;
    left: 14px;
    border-width: 0 0 1px 1px;
}

/* VERB — RELEASE / INSERT / LOCK */
.pu-how__step-verb {
    font-family: var(--pu-font-display);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
}

/* TECHNICAL METALINE — small mono with red dot */
.pu-how__step-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #8f949b;
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.pu-how__step-meta::before {
    content: '●';
    color: #ff4233;
    font-weight: 600;
}

/* CAPTION */
.pu-how__step-text {
    margin: 0;
    font-family: var(--pu-font-utility);
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}
.pu-how__step-text em {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-family: var(--pu-font-utility, 'IBM Plex Mono', monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

/* ════════════════════════════════════════════════════════════════
   Category archive video — pulls _video from the category's flagship
   product. Sits between How It Works (Section 4) and the Lineup
   (Section 5) as the visual proof of the mechanism. Reuses the
   .pu-sp-video__frame styling (defined in woocommerce/_product.css)
   for the 16:9 embed sizing. Class is "pu-archive-video" so it
   doesn't collide with the homepage's .pu-video poster pattern.
   ════════════════════════════════════════════════════════════════ */
.pu-archive-video {
    background: #F2EDE1;
}
.pu-archive-video .pu-section__kicker {
    color: rgba(45, 45, 45, 0.7);  /* charcoal-ish on cream bg */
}
.pu-archive-video > .brxe-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 56px);
    display: block;
}
.pu-archive-video__media {
    margin-top: 1.5rem;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
    background: #000;
}