/*
 Theme Name: Nickey 2026
 Theme URI:  https://nickeyperformance.com
 Description: Custom theme for NicKey Performance
 Author:      Clicks Web Design
 Version:     1.0.0
*/

/* ── Design tokens ────────────────────────────────
   Centralized values for colors, type, layout, motion, and content rhythm.
   To rebrand or retune spacing site-wide, change values here — every
   component that references var(--...) updates in one shot.
*/
:root {
    /* Brand */
    --c-red:        #DA251C;
    --c-red-hover:  #b01e16;
    --c-red-bright: #FF2F2F;

    /* Surface — dark */
    --c-dark:       #1a1d1e;   /* deepest: nav bar, hover bg */
    --c-dark-2:     #262a2b;   /* primary dark: title bar, dark cards */
    --c-dark-3:     #3a3e3f;   /* divider on dark surface */

    /* Neutral */
    --c-white:      #fff;
    --c-black:      #000;
    --c-text:       #333;
    --c-text-muted: #666;
    --c-text-faint: #888;

    /* Borders / soft surfaces */
    --c-border-light: #e0e0e0;
    --c-border-mid:   #ccc;
    --c-border-soft:  #ddd;

    /* Typography */
    --font-sans: 'Open Sans', sans-serif;

    /* Layout */
    --container-max: 1200px;
    --container-pad: 20px;

    /* Motion */
    --t-fast: 0.15s;
    --t-base: 0.2s;
    --t-slow: 0.3s;

    /* Page title bar (page.php / single.php / page-inventory.php).
       Light parchment band sits between the dark nav and the content;
       red accent line at the bottom keeps the brand chrome consistent. */
    --c-page-title-bg: #f5f1ea;        /* warm cream — vintage paper */
    --c-page-title-fg: var(--c-dark);  /* title text on the cream band */
    --page-title-py:   56px;
    --page-title-size: 38px;

    /* Content rhythm — default editor pages */
    --content-line-height: 1.6;
    --content-p-margin:    12px;
}

/* ── Reset & Base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--c-text);
    background: var(--c-white);
}

a { color: var(--c-red); text-decoration: none; }
a:hover { color: var(--c-red-hover); }

ul, ol { margin-left: 20px; }

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

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

/* ── Logo Bar ─────────────────────────────────── */
#header-logo-bar {
    background: var(--c-dark-2);
    padding: 18px 0;
    border-bottom: 1px solid var(--c-dark-3);
}

.logo-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.logo-bar-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-self: start;
}

.logo-bar-phone,
.logo-bar-email {
    color: #ccc;
    font-size: 13px;
    transition: color 0.2s;
}

.logo-bar-phone:hover,
.logo-bar-email:hover { color: var(--c-red); }

.logo-bar-phone i,
.logo-bar-email i { margin-right: 6px; color: var(--c-red); }

.logo-bar-logo img {
    max-width: 360px;
    display: block;
}

.logo-bar-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    justify-self: end;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.4);
    color: #fff;
    font-size: 14px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.social-icon:hover {
    border-color: var(--c-red);
    color: var(--c-red);
}

/* ── Nav Bar (sticky) ─────────────────────────── */
#header-nav-bar {
    background: var(--c-dark);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

body.admin-bar #header-nav-bar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #header-nav-bar {
        top: 46px;
    }
}

.nav-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* Small logo — hidden until sticky activated via JS */
.nav-sticky-logo {
    display: none;
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.nav-sticky-logo img { height: 36px; width: auto; display: block; }

#header-nav-bar.is-pinned .nav-sticky-logo { display: block; }

/* When pinned, the small logo occupies the left side of the bar (absolutely
   positioned). Switch the menu's flex alignment from center to flex-end so it
   sits to the right of the logo instead of running through it on medium
   screens (~900–1200px). */
#header-nav-bar.is-pinned .nav-bar-inner { justify-content: flex-end; }

/* ── Primary Nav Menu ─────────────────────────── */
#top-menu,
#top-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#top-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}

#top-menu > li { position: relative; }

#top-menu > li > a {
    display: block;
    padding: 16px 13px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: color 0.2s;
    white-space: nowrap;
}

#top-menu > li > a:hover,
#top-menu > li.current-menu-item > a,
#top-menu > li.current_page_item > a,
#top-menu > li.current_page_ancestor > a { color: var(--c-red); }

/* Red underline on active item */
#top-menu > li.current-menu-item > a::after,
#top-menu > li.current_page_item > a::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--c-red);
    margin-top: 2px;
}

/* Dropdowns */
#top-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--c-dark-2);
    border-top: 3px solid var(--c-red);
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

#top-menu > li:hover .sub-menu { display: block; }

#top-menu .sub-menu li a {
    display: block;
    padding: 11px 18px;
    color: #ddd;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid #333;
    transition: background 0.15s, color 0.15s;
}

#top-menu .sub-menu li:last-child a { border-bottom: none; }

#top-menu .sub-menu li a:hover {
    background: var(--c-dark);
    color: var(--c-red);
    padding-left: 24px;
}

/* ── Mobile hamburger ─────────────────────────── */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 16px;
}

/* ── Mobile phone (left, mirrors hamburger) ───── */
.nav-phone {
    display: none;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    transition: border-color 0.2s, color 0.2s;
}

.nav-phone:hover,
.nav-phone:focus {
    border-color: var(--c-red);
    color: var(--c-red);
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    position: relative;
    transition: background 0.3s;
}

.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    position: absolute;
    transition: all 0.3s;
}

.nav-toggle span::before { top: -7px; }
.nav-toggle span::after  { top:  7px; }

/* ── Page Title Bar ─────────────────────────────
   Full-width parchment band that sits between the sticky nav and the
   content container. Lightens the top of the page (the dark nav stack
   used to read as a wall of black) and the red accent line keeps brand
   continuity with the dark chrome above.

   Used by page.php and single.php. Inventory has its own .inventory-header
   that mirrors these tokens. Vehicle and home templates have their own
   headers and don't use this band.
*/
.page-title-bar {
    background-color: var(--c-page-title-bg);
    border-bottom: 4px solid var(--c-red);
    padding: var(--page-title-py) 0;
    margin-bottom: 32px;
}

.nickey-page-title,
.entry-content h1:first-child {
    font-size: var(--page-title-size);
    font-weight: 800;
    color: var(--c-page-title-fg);
    font-family: var(--font-sans);
    margin: 0;
    line-height: 1.15;
    letter-spacing: 0.5px;
}

/* Legacy fallback: when the h1 is rendered inline inside .entry-content
   (older content with a literal <h1> at the top), repaint it as a band so
   pages that haven't been migrated still look like the new design. */
.entry-content h1:first-child {
    background-color: var(--c-page-title-bg);
    border-bottom: 4px solid var(--c-red);
    padding: var(--page-title-py) var(--container-pad);
    margin: 0 0 32px;
    display: block;
}

/* Reversed red K — Nickey trademark glyph.
   Injected by main.js into headings and nav links wherever a lowercase or
   uppercase K appears mid-word. Always renders uppercase, mirrored, brand red.
   `font: inherit` forces the span to pick up the parent's family / weight /
   size / style so the K's stroke matches the surrounding letters — without
   it, browser defaults can produce a visibly thinner glyph. */
.nickeyK {
    display: inline-block;
    font: inherit;
    color: var(--c-red-bright);
    text-transform: uppercase;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

/* Red CTA bands paint a red gradient background, which makes the brand-red
   .nickeyK glyph disappear into it. Whiten the K on those surfaces so the
   trademark stays legible against red. (history-cta is a dark band, but
   its K still reads against the dark gradient, so keep it whitened too.) */
.cta-band .nickeyK,
.history-cta .nickeyK {
    color: #fff;
}

/* ── Main Content ─────────────────────────────── */
/* Only apply the sticky-footer min-height when the skip-link target is an
   actual <main> element. The inventory page lands the skip link on the
   .inventory-header banner instead, which has its own sizing. */
main#main-content {
    min-height: 60vh;
}

.nickey-page {
    padding: 0 0 48px;
}

.entry-content {
    line-height: var(--content-line-height);
}

.entry-content h2 {
    font-size: 22px;
    color: var(--c-dark-2);
    margin: 22px 0 10px;
    line-height: 1.25;
}

.entry-content h3 {
    font-size: 18px;
    color: var(--c-dark-2);
    margin: 18px 0 8px;
    line-height: 1.3;
}

.entry-content p { margin: 0 0 var(--content-p-margin); }

/* WP block editor often emits empty <p>&nbsp;</p> between paragraphs from
   pasted content. Collapse them so the visual rhythm matches the spacing
   defined by --content-p-margin. */
.entry-content p:empty { display: none; }

/* Responsive: tighten the title band on small screens so it doesn't
   dominate the viewport on phones. */
@media (max-width: 720px) {
    .page-title-bar {
        padding: 36px 0;
    }
    .nickey-page-title,
    .entry-content h1:first-child {
        font-size: 28px;
    }
    .entry-content h1:first-child {
        padding: 36px var(--container-pad);
    }
}

/* ── Hero Section ─────────────────────────────── */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 620px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 60px 20px;
    max-width: 860px;
    width: 100%;
}

.hero-eyebrow {
    color: var(--c-red);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 16px;
}

.hero-headline {
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 20px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.hero-sub {
    font-size: 18px;
    color: rgba(255,255,255,0.88);
    margin: 0 0 36px;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-hero {
    display: inline-block;
    padding: 14px 32px;
    background: var(--c-red);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--c-red);
    transition: background 0.2s, color 0.2s;
}

.btn-hero:hover {
    background: var(--c-red-hover);
    border-color: var(--c-red-hover);
    color: #fff;
}

.btn-hero--outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.7);
}

.btn-hero--outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--c-dark-2);
}

/* ── About Section ────────────────────────────── */
.about-section {
    background: #f7f7f7;
    padding: 70px 0 60px;
    text-align: center;
}

.about-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-red);
    margin-bottom: 14px;
}

.about-section .about-heading {
    font-size: 38px;
    font-weight: 800;
    color: var(--c-dark-2);
    margin: 0 0 40px;
    position: relative;
    display: inline-block;
}

.about-section .about-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--c-red);
    margin: 14px auto 0;
}

/* Two-column layout */
.about-columns {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 50px;
    text-align: left;
    margin-bottom: 50px;
    align-items: start;
}

.about-col-main p {
    font-size: 15px;
    line-height: 1.85;
    color: #444;
    margin: 0 0 16px;
}

.about-cta {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* Stats column */
.about-col-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-stat {
    background: var(--c-dark-2);
    color: #fff;
    padding: 20px 16px;
    text-align: center;
    border-left: 4px solid var(--c-red);
}

.about-stat__number {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}

.about-stat__plus {
    font-size: 24px;
    color: var(--c-red);
}

.about-stat__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
}

/* Stage Cards */
.stage-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 10px;
    text-align: left;
}

.stage-card {
    display: block;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 4px solid #555;
    padding: 28px 24px;
    position: relative;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stage-card:hover,
.stage-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: #d5d5d5;
    border-top-color: var(--c-red);
}

.stage-card:focus-visible {
    outline: 3px solid var(--c-red);
    outline-offset: 4px;
}

.stage-card--featured {
    border-top-color: var(--c-red);
}

.stage-card__cue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-red);
}

.stage-card__cue-arrow {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.stage-card:hover .stage-card__cue-arrow,
.stage-card:focus-visible .stage-card__cue-arrow {
    transform: translateX(4px);
}

.stage-card__badge {
    position: absolute;
    top: -1px;
    right: 20px;
    background: var(--c-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
}

.stage-card__num {
    font-size: 48px;
    font-weight: 800;
    color: #e8e8e8;
    line-height: 1;
    margin-bottom: 10px;
    font-style: italic;
}

.stage-card--featured .stage-card__num { color: #f5c0bc; }

.stage-card h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-dark-2);
    margin: 0 0 10px;
}

.stage-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0;
}

.btn-red {
    display: inline-block;
    padding: 12px 28px;
    background: var(--c-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid var(--c-red);
    transition: background 0.2s, color 0.2s;
}

.btn-red:hover {
    background: var(--c-red-hover);
    border-color: var(--c-red-hover);
    color: #fff;
}

.btn-red--outline {
    background: transparent;
    color: var(--c-red);
}

.btn-red--outline:hover {
    background: var(--c-red);
    color: #fff;
}

/* ── Vehicles Section ─────────────────────────── */
.vehicles-section {
    padding: 70px 0 80px;
    background: #f7f7f7;
    position: relative;
}

.vehicles-section-header {
    text-align: center;
    margin-bottom: 48px;
}

.vehicles-section-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--c-red);
    margin-bottom: 10px;
    position: relative;
    padding: 0 38px;
}
.vehicles-section-eyebrow::before,
.vehicles-section-eyebrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28px;
    height: 2px;
    background: var(--c-red);
}
.vehicles-section-eyebrow::before { left: 0; }
.vehicles-section-eyebrow::after  { right: 0; }

.vehicles-section-header h2 {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-dark);
    margin: 0 0 12px;
}

.vehicles-section-header p {
    color: #666;
    font-size: 16px;
    margin: 0;
}

/* ── Vehicle Cards ────────────────────────────── */
.vehicle-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 44px;
}

.vehicle-card {
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 4px solid var(--c-dark);
    display: flex;
    flex-direction: column;
    transition: border-top-color .25s, box-shadow .25s, transform .25s;
    box-shadow: 0 2px 14px rgba(0,0,0,.06);
    overflow: hidden;
}

.vehicle-card:hover {
    border-top-color: var(--c-red);
    box-shadow: 0 14px 32px rgba(0,0,0,.16);
    transform: translateY(-4px);
}

.vehicle-card--sold:hover {
    border-top-color: var(--c-dark);
}

/* Media area */
.vehicle-card__media {
    position: relative;
    background: var(--c-dark);
}

.vehicle-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.vehicle-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.vehicle-card:hover .vehicle-card__image img {
    transform: scale(1.05);
}

.vehicle-card__no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a2d2e 0%, var(--c-dark) 100%);
    color: rgba(255,255,255,.55);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* For Sale racing-badge */
.vehicle-card__status {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--c-red);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
}

/* SOLD diagonal stamp */
.vehicle-card__sold-stamp {
    position: absolute;
    top: 14px;
    right: 14px;
    transform: rotate(-8deg);
    transform-origin: center;
    color: var(--c-red);
    background: rgba(255,255,255,.94);
    border: 3px solid var(--c-red);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 3px;
    padding: 4px 12px;
    z-index: 3;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* Body */
.vehicle-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vehicle-card__header {
    padding: 18px 22px 14px;
    background: #fff;
    border-bottom: 1px solid #ececec;
}

.vehicle-card__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-red);
    margin-bottom: 6px;
}

.vehicle-card__model {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-dark);
}

.vehicle-card__model a {
    color: inherit;
    transition: color .2s;
}

.vehicle-card__model a:hover { color: var(--c-red); }

/* Specs grid */
.vehicle-card__specs {
    margin: 0;
    padding: 16px 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    background: #fafafa;
    flex: 1;
    border-bottom: 1px solid #ececec;
}

.vehicle-card__spec { margin: 0; min-width: 0; }

.vehicle-card__spec dt {
    margin: 0 0 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
}

.vehicle-card__spec dd {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-dark);
    word-break: break-word;
}

/* Cards with zero populated specs still render the grey band so the price-row
   and CTA stay anchored to the bottom and align with sibling cards in the grid. */
.vehicle-card__specs--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.vehicle-card__specs-empty-note {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a8a8a;
}

/* Price row */
.vehicle-card__price-row {
    background: linear-gradient(135deg, var(--c-dark-2) 0%, var(--c-dark) 100%);
    color: #fff;
    padding: 14px 22px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-top: 2px solid var(--c-red);
}

.vehicle-card__price-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}

.vehicle-card__price {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
    margin-left: auto;
    line-height: 1;
}

.vehicle-card__price--call {
    font-size: 18px;
    color: var(--c-red);
}

.vehicle-card__price-obo {
    font-size: 11px;
    font-weight: 800;
    color: var(--c-red);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    align-self: center;
}

/* CTA button */
.vehicle-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 0;
    background: var(--c-red);
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: background .2s, gap .2s;
    border: none;
}

.vehicle-card__btn:hover {
    background: var(--c-red-hover);
    color: #fff !important;
    gap: 16px;
}

.vehicle-card__btn-arrow {
    font-weight: 900;
    transition: transform .2s;
    line-height: 1;
}

.vehicle-card:hover .vehicle-card__btn-arrow {
    transform: translateX(4px);
}

.vehicles-view-all {
    text-align: center;
    margin-top: 10px;
}

/* ── No Vehicles Empty State ──────────────────── */
.no-vehicles-found {
    text-align: center;
    padding: 60px 20px;
    background: #f7f7f7;
    border: 2px dashed #ddd;
    max-width: 560px;
    margin: 0 auto 40px;
}

.no-vehicles-icon {
    font-size: 52px;
    color: var(--c-red);
    margin-bottom: 20px;
    opacity: 0.8;
}

.no-vehicles-found h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--c-dark-2);
    margin: 0 0 12px;
}

.no-vehicles-found p {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 28px;
}

.no-vehicles-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Vehicles Widget ──────────────────────────── */
.center {
    text-align: center;
    font-size: 25px;
    margin-bottom: 25px;
    font-weight: bold;
}

.car-grid { text-align: right; }

.car-grid .car-grid-item {
    width: 31%;
    display: inline-block;
    margin-right: 3%;
    text-align: center;
    box-shadow: 2px 2px 12px 0 #888;
    margin-bottom: 20px;
    padding-bottom: 10px;
    vertical-align: top;
}

.car-grid .car-grid-item:nth-child(3n) { margin-right: 0; }

#internalCar .carHeader {
    width: 100%;
    margin-bottom: 25px;
    text-align: center;
    background-color: #929292;
    padding: 15px;
}

#internalCar .carHeader img {
    max-height: 350px;
    margin: auto;
}

.car-grid .car-grid-item #internalCar .carHeader .carLeft {
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.car-grid .car-grid-item #internalCar .carHeader .carLeft img { width: 100%; }

.car-grid .car-grid-item h2 {
    padding: 8px;
    margin: 0;
    line-height: 19px;
}

.car-grid .car-grid-item h2 a {
    font-size: 16px;
    font-weight: 800;
    color: var(--c-dark-2);
}

.car-grid .car-grid-item h2 a:hover { color: var(--c-red); }

.car-grid .car-grid-item p {
    padding: 0 8px;
    margin: 4px 0;
    font-size: 14px;
}

.car-grid .btn {
    background-color: #000;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: 10px 20px;
    margin: 8px 0;
    transition: background 0.2s;
}

.car-grid .btn:hover { background-color: var(--c-red); }
.car-grid .btn a { color: #fff; }

/* ── Video Gallery ────────────────────────────── */
.video-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.video-thumb {
    flex: 0 0 calc(33.333% - 14px);
    box-shadow: 3px 3px 3px 2px #ccc;
}

.video-thumb-title {
    font-weight: bold;
    font-size: 16px;
    background-color: var(--c-dark-2);
    color: #fff;
    padding: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* ── Vintage Ads Gallery ──────────────────────── */
#gallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#gallery a {
    flex: 1 1 22%;
    padding: 5px 10px;
    border: 1px solid #000;
    margin: 5px 10px;
    align-self: center;
}

#gallery img { width: 100%; }

/* ── Buttons ──────────────────────────────────── */
.btn-red,
input[type="submit"],
button[type="submit"] {
    background-color: var(--c-red);
    border: none;
    color: #fff;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-red:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--c-red-hover);
    color: #fff;
}

/* ── Footer ───────────────────────────────────── */
#main-footer {
    position: relative;
    background-color: var(--c-dark-2);
    color: #c8ccce;
    padding: 64px 0 0;
    border-top: 3px solid var(--c-red);
}

.footer-widgets {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 48px;
}

.footer-col { min-width: 0; }

.footer-col h3 {
    position: relative;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 22px;
    padding: 0 0 12px;
    font-family: 'Open Sans', sans-serif;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    background-color: var(--c-red);
}

.footer-col p,
.footer-col a {
    color: #c8ccce;
    font-size: 14px;
    line-height: 1.7;
}

.footer-col a {
    transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--c-red-bright); }

/* Brand column: address + contact list */
.footer-address {
    font-style: normal;
    color: #c8ccce;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
}

.footer-contact li:first-child { border-top: 0; }

.footer-contact-label {
    flex: 0 0 auto;
    min-width: 52px;
    color: var(--c-red-bright);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.footer-contact a {
    color: #fff;
    font-weight: 600;
    word-break: break-word;
}

/* Hours: two-column rows */
.footer-hours {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-hours li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-hours li:first-child { border-top: 0; }

.footer-hours li span:first-child {
    color: #9ea3a5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: 600;
}

.footer-hours li span:last-child {
    color: #fff;
    font-weight: 600;
}

/* Quick Links: arrow-prefixed list, slide on hover */
.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li { margin: 0; }

.footer-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    color: #c8ccce;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-menu li:first-child a { border-top: 0; }

.footer-menu li a::before {
    content: '';
    width: 14px;
    height: 2px;
    background-color: var(--c-red);
    transition: width 0.2s ease, background-color 0.2s ease;
    flex: 0 0 auto;
}

.footer-menu li a:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-menu li a:hover::before {
    width: 22px;
    background-color: var(--c-red-bright);
}

/* Footer bottom strip */
#footer-bottom {
    background-color: var(--c-dark);
    color: #7d8385;
    padding: 18px 0;
    font-size: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

#footer-bottom p {
    margin: 0;
    letter-spacing: 0.04em;
}

#footer-bottom .footer-bottom-meta {
    color: #5e6365;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
}

#footer-bottom a { color: #aaa; }
#footer-bottom a:hover { color: var(--c-red-bright); }

@media (max-width: 980px) {
    #main-footer { padding-top: 48px; }

    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 36px;
        padding-bottom: 36px;
    }

    #footer-bottom .container {
        justify-content: center;
        text-align: center;
    }
}

/* ── Footer Contact Form ──────────────────────── */
#footerContactForm form {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
}

#footerContactForm p {
    flex: 1 1 33%;
    padding-right: 20px;
    margin-bottom: 16px;
}

#footerContactForm p:nth-child(5) { flex: 1 1 100%; }

#footerContactForm input,
#footerContactForm label,
#footerContactForm textarea { width: 100%; }

#footerContactForm input[type="submit"] {
    background-color: var(--c-red);
    padding: 10px 0;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    border: none;
    cursor: pointer;
}

#footerContactForm input[type="submit"]:hover { background-color: #000; }

/* ── Utility ──────────────────────────────────── */
.clearfix::after { content: ''; display: table; clear: both; }

/* ── Media Queries ────────────────────────────── */
@media (max-width: 1024px) {
    #top-menu > li > a { padding: 18px 9px; font-size: 11px; }
}

@media (max-width: 900px) {
    .logo-bar-left { display: none; }

    .logo-bar-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .logo-bar-logo img { max-width: 240px; }

    .logo-bar-right {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        justify-self: auto;
    }

    .social-icon { width: 32px; height: 32px; font-size: 13px; }

    .nav-bar-inner { min-height: 52px; }
    .nav-toggle { display: block; }
    .nav-phone { display: flex; }
    .nav-sticky-logo { display: none !important; }

    #top-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c-dark-2);
        z-index: 999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }

    #top-menu.nav-open { display: flex; }

    #top-menu > li > a {
        padding: 13px 20px;
        border-bottom: 1px solid var(--c-dark-3);
        font-size: 13px;
    }

    #top-menu .sub-menu {
        position: static;
        display: none;
        border-top: none;
        box-shadow: none;
        background: var(--c-dark);
    }

    #top-menu > li.menu-open .sub-menu { display: block; }
    #top-menu .sub-menu li a { padding-left: 32px; }
}

@media (max-width: 768px) {
    .hero-section { min-height: 420px; }
    .hero-headline { font-size: 32px; }
    .hero-sub { font-size: 15px; }

    .about-columns { grid-template-columns: 1fr; gap: 30px; }
    .about-col-stats { flex-direction: row; flex-wrap: wrap; }
    .about-stat { flex: 1 1 45%; }
    .stage-cards { grid-template-columns: 1fr; }

    .vehicle-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

    .car-grid .car-grid-item { width: 48%; }
    .car-grid .car-grid-item:nth-child(3n) { margin-right: 3%; }
    .car-grid .car-grid-item:nth-child(even) { margin-right: 0; }

    .video-thumb { flex: 0 0 calc(50% - 10px); }

    #gallery a { flex: 1 1 30%; }

    #footerContactForm p { flex: 1 1 100%; padding-right: 0; }
}

@media (max-width: 576px) {
    .hero-headline { font-size: 26px; }
    .vehicle-cards-grid { grid-template-columns: 1fr; }
    .car-grid .car-grid-item { width: 100%; margin-right: 0; }
    .video-thumb { flex: 0 0 100%; }
    #gallery a { flex: 1 1 45%; }
    .header-logo img { max-width: 160px; }
}

/* ── Vehicle Detail Template ──────────────────── */
.vehicle-detail {
    padding: 25px 20px 60px;
}

/* Header / title */
.vehicle-header {
    position: relative;
    margin-bottom: 25px;
}
.vehicle-detail .entry-content h1.vehicle-title {
    font-family: 'Open Sans', sans-serif;
    font-size: 38px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    background-color: var(--c-dark-2);
    color: #ffffff;
    padding: 22px 28px;
    margin: 0;
    border-bottom: 4px solid var(--c-red);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.vehicle-status {
    position: absolute;
    top: 18px;
    right: 28px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    padding: 6px 14px;
    border: 2px solid currentColor;
}
.vehicle-status.is-for-sale { color: var(--c-red); background: rgba(255, 255, 255, 0.05); }
.vehicle-status.is-sold     { color: #ffffff; background: var(--c-red); border-color: var(--c-red); }

/* Two-column layout */
.vehicle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 30px;
    align-items: start;
}
.vehicle-main { min-width: 0; }

@media (max-width: 980px) {
    .vehicle-layout {
        grid-template-columns: 1fr;
    }
    .vehicle-sidebar { position: static; }

    /* Mobile-only blocks (rendered in the main column) become visible. The
       desktop copies (rendered in the sidebar) are hidden. */
    .vehicle-specs--mobile           { display: block; }
    .vehicle-specs--desktop          { display: none; }
    .vehicle-price-card-wrap--mobile { display: block; }
    .vehicle-price-card-wrap--desktop { display: none; }
}

/* Hero image */
.vehicle-hero {
    position: relative;
    background: var(--c-dark);
    overflow: hidden;
    border-bottom: 4px solid var(--c-red);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
.vehicle-hero a {
    display: block;
    position: relative;
    line-height: 0;
}
.vehicle-hero img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}
.vehicle-hero a:hover img { transform: scale(1.02); }
.vehicle-hero-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 22px;
    line-height: 42px;
    text-align: center;
    transition: background 0.15s, color 0.15s;
}
.vehicle-hero a:hover .vehicle-hero-zoom { background: var(--c-red); }

/* Sold stamp on the hero */
.vehicle-sold-stamp {
    position: absolute;
    top: 28px;
    right: -56px;
    z-index: 5;
    background: var(--c-red);
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 8px;
    text-transform: uppercase;
    padding: 12px 70px;
    transform: rotate(20deg);
    border: 3px double rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

/* Gallery wrapper - lets the gallery plugin's own styles take over */
.vehicle-gallery {
    margin-top: 16px;
}

/* Sidebar */
.vehicle-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 110px;
}

/* Price card */
.vehicle-price-card {
    background: linear-gradient(135deg, var(--c-dark-2) 0%, var(--c-dark) 100%);
    color: #ffffff;
    padding: 26px 22px;
    text-align: center;
    border-top: 4px solid var(--c-red);
    border-bottom: 4px solid var(--c-red);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}
.vehicle-price-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 6px;
}
.vehicle-price {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
}
.vehicle-price-call { font-size: 28px; }
.vehicle-price-obo {
    display: block;
    color: var(--c-red);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-top: 10px;
    text-transform: uppercase;
}
.vehicle-trades {
    display: block;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.vehicle-price-card-sold .vehicle-price {
    color: var(--c-red);
    letter-spacing: 8px;
}

/* Card containers (specs, description, features, inquire) */
.vehicle-block {
    background: #ffffff;
    border: 1px solid #e2e2e2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.vehicle-detail .entry-content h2.vehicle-section-title,
.vehicle-detail h2.vehicle-section-title {
    background: var(--c-dark-2);
    color: #ffffff;
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 13px 20px;
    margin: 0;
    border-left: 4px solid var(--c-red);
}

/* Red brand selection color for vehicle pages so highlighted text on the
   dark title bars stays legible (overrides default browser blue). */
.vehicle-detail ::selection {
    background: var(--c-red);
    color: #ffffff;
}
.vehicle-detail ::-moz-selection {
    background: var(--c-red);
    color: #ffffff;
}
.vehicle-block-body {
    padding: 22px 24px;
    font-size: 16px;
    line-height: 1.65;
    color: #2a2a2a;
}
.vehicle-block-body p:first-child { margin-top: 0; }
.vehicle-block-body p:last-child  { margin-bottom: 0; }

/* Desktop view: hide all mobile-only block copies. The matching 980px media
   query above flips visibility — sidebar copies hide, main-column copies show. */
@media (min-width: 981px) {
    .vehicle-specs--mobile           { display: none; }
    .vehicle-price-card-wrap--mobile { display: none; }
}

/* Specs list */
.vehicle-specs-list { margin: 0; padding: 0; }
.vehicle-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
}
.vehicle-spec-row:last-child { border-bottom: none; }
.vehicle-spec-row:nth-child(odd) { background: #fafafa; }
.vehicle-spec-row dt {
    font-weight: 700;
    color: #6b6b6b;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 11px;
    margin: 0;
    flex: 0 0 auto;
}
.vehicle-spec-row dd {
    margin: 0;
    color: var(--c-dark);
    font-weight: 700;
    text-align: right;
    word-break: break-word;
}

/* Features body - WYSIWYG content */
.vehicle-features-body {
    padding: 22px 24px;
    color: #2a2a2a;
    font-size: 15px;
    line-height: 1.55;
}
.vehicle-features-body > *:first-child { margin-top: 0; }
.vehicle-features-body > *:last-child  { margin-bottom: 0; }
.vehicle-features-body p {
    margin: 0 0 12px;
}
.vehicle-features-body h2,
.vehicle-features-body h3,
.vehicle-features-body h4 {
    margin: 18px 0 10px;
    color: var(--c-dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}
.vehicle-features-body h2 { font-size: 18px; }
.vehicle-features-body h3 { font-size: 16px; }
.vehicle-features-body h4 { font-size: 14px; }
.vehicle-features-body a {
    color: var(--c-red);
    text-decoration: none;
    border-bottom: 1px solid rgba(218,37,28,0.35);
}
.vehicle-features-body a:hover { border-bottom-color: var(--c-red); }
.vehicle-features-body strong { color: var(--c-dark); }
.vehicle-features-body img {
    max-width: 100%;
    height: auto;
    margin: 8px 0;
}
.vehicle-features-body ul,
.vehicle-features-body ol {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    columns: 2;
    column-gap: 28px;
}
@media (max-width: 600px) {
    .vehicle-features-body ul,
    .vehicle-features-body ol { columns: 1; }
}
.vehicle-features-body li {
    position: relative;
    padding: 6px 6px 6px 24px;
    break-inside: avoid;
    font-size: 14px;
    line-height: 1.45;
}
.vehicle-features-body ul > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 14px;
    width: 9px;
    height: 9px;
    background: var(--c-red);
    transform: rotate(45deg);
}
.vehicle-features-body ol {
    counter-reset: vfeat;
}
.vehicle-features-body ol > li {
    counter-increment: vfeat;
}
.vehicle-features-body ol > li::before {
    content: counter(vfeat) ".";
    position: absolute;
    left: 0;
    top: 6px;
    color: var(--c-red);
    font-weight: 800;
    font-size: 14px;
    min-width: 20px;
}


/* Inquire form */
.vehicle-inquire { padding: 0; }
.vehicle-detail .entry-content h2.vehicle-inquire-title,
.vehicle-detail h2.vehicle-inquire-title {
    background: var(--c-red);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 14px 18px;
    margin: 0;
    text-align: center;
}
.vehicle-inquire-body { padding: 18px; }
.vehicle-inquire .wpcf7 form { margin: 0; }
.vehicle-inquire .wpcf7 p { margin: 0 0 10px; }
.vehicle-inquire input[type="text"],
.vehicle-inquire input[type="email"],
.vehicle-inquire input[type="tel"],
.vehicle-inquire input[type="url"],
.vehicle-inquire textarea,
.vehicle-inquire select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #cccccc;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: #2a2a2a;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.vehicle-inquire input[type="text"]:focus,
.vehicle-inquire input[type="email"]:focus,
.vehicle-inquire input[type="tel"]:focus,
.vehicle-inquire textarea:focus {
    border-color: var(--c-red);
    outline: none;
}
.vehicle-inquire textarea { min-height: 100px; resize: vertical; }
.vehicle-inquire input[type="submit"],
.vehicle-inquire .wpcf7 input[type="submit"] {
    background: var(--c-red) !important;
    color: #ffffff !important;
    border: none !important;
    width: 100%;
    padding: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}
.vehicle-inquire input[type="submit"]:hover,
.vehicle-inquire .wpcf7 input[type="submit"]:hover {
    background: var(--c-red-hover) !important;
}
.vehicle-inquire .wpcf7-not-valid-tip { font-size: 12px; }
.vehicle-inquire .wpcf7-response-output { font-size: 13px; }

/* Description and features stacking */
.vehicle-main > .vehicle-block { margin-top: 28px; }

/* Lightbox */
.vehicle-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.94);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
}
.vehicle-lightbox-overlay.is-open { display: flex; }
.vehicle-lightbox-stage {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vehicle-lightbox-img {
    max-width: 100%;
    max-height: 86vh;
    object-fit: contain;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.vehicle-lightbox-close,
.vehicle-lightbox-prev,
.vehicle-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: #ffffff;
    font-size: 22px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
    line-height: 1;
}
.vehicle-lightbox-close:hover,
.vehicle-lightbox-prev:hover,
.vehicle-lightbox-next:hover {
    background: var(--c-red);
    border-color: var(--c-red);
}
.vehicle-lightbox-close { top: 24px; right: 24px; font-size: 28px; }
.vehicle-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.vehicle-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.vehicle-lightbox-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
}
@media (max-width: 600px) {
    .vehicle-lightbox-overlay { padding: 60px 16px; }
    .vehicle-lightbox-prev,
    .vehicle-lightbox-next { width: 40px; height: 40px; font-size: 18px; }
    .vehicle-lightbox-prev { left: 8px; }
    .vehicle-lightbox-next { right: 8px; }
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .vehicle-detail { padding: 12px 16px 40px; }
    .vehicle-detail .entry-content h1.vehicle-title {
        font-size: 26px;
        padding: 18px 20px;
        letter-spacing: 0.5px;
    }
    .vehicle-status {
        position: static;
        display: inline-block;
        margin-top: 10px;
    }
    .vehicle-sold-stamp {
        font-size: 20px;
        letter-spacing: 5px;
        padding: 8px 50px;
        right: -40px;
        top: 20px;
    }
    .vehicle-price { font-size: 32px; }
}

/* ── Inventory Page ────────────────────────────────────────────────── */
.inventory-page { background: #f7f7f7; }

.inventory-header {
    background: var(--c-page-title-bg);
    color: var(--c-page-title-fg);
    padding: 50px 0 36px;
    border-bottom: 4px solid var(--c-red);
}

.inventory-header__title {
    margin: 0 0 22px;
    font-size: 38px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-page-title-fg);
}

.inventory-search {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--c-border-light);
    transition: border-color .2s;
    max-width: 720px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.inventory-search:focus-within { border-color: var(--c-red); }

.inventory-search__icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: #888;
    font-size: 14px;
}

.inventory-search__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 18px 14px 46px;
    font-size: 15px;
    color: var(--c-dark);
    background: transparent;
}

.inventory-search__btn {
    border: none;
    cursor: pointer;
    padding: 12px 28px;
    font-family: inherit;
}

.inventory-header__count {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--c-text-muted);
    letter-spacing: 1px;
}
.inventory-header__count strong {
    color: var(--c-page-title-fg);
    font-size: 16px;
    font-weight: 800;
    margin-right: 4px;
}
/* Cross-link between for-sale and sold archives, shown next to the count. */
.inventory-cross-link {
    display: inline-block;
    margin-left: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-red);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
.inventory-cross-link:hover {
    border-bottom-color: var(--c-red);
    color: var(--c-red-hover);
}

/* Layout */
.inventory-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    padding: 36px 20px 60px;
    align-items: start;
}

/* ── Sidebar ──────────────────────────────────────── */
.inventory-sidebar {
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.inventory-filter {
    border-bottom: 1px solid #ececec;
}
.inventory-filter:last-of-type { border-bottom: none; }

.inventory-filter__summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.inventory-filter__summary::-webkit-details-marker { display: none; }
.inventory-filter__summary:hover { background: #fafafa; }

.inventory-filter__chevron {
    color: #888;
    font-size: 12px;
    transition: transform .2s;
}
.inventory-filter[open] .inventory-filter__chevron { transform: rotate(180deg); }

.inventory-filter__body {
    padding: 4px 20px 18px;
}

.inventory-filter__empty {
    margin: 0;
    font-size: 13px;
    color: #888;
    font-style: italic;
}

/* Range inputs (year/price) */
.inventory-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.inventory-range label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
}
.inventory-range select,
.inventory-range input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-dark);
    border: 1px solid #d0d0d0;
    background: #fff;
    box-sizing: border-box;
}
.inventory-range select:focus,
.inventory-range input[type="number"]:focus {
    outline: none;
    border-color: var(--c-red);
}

/* Checkbox lists */
.inventory-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}
.inventory-checklist li { margin: 0; }

.inventory-checklist__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 14px;
    color: var(--c-dark);
    border-radius: 2px;
}
.inventory-checklist__item:hover { background: #fafafa; }
.inventory-checklist__item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--c-red);
    cursor: pointer;
    margin: 0;
}

.inventory-sidebar__actions {
    padding: 18px 20px;
    background: #fafafa;
    border-top: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    position: sticky;
    bottom: 0;
}

.inventory-apply {
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-family: inherit;
}

.inventory-clear {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #666;
    padding: 6px;
}
.inventory-clear:hover { color: var(--c-red); }

/* ── Toolbar ──────────────────────────────────────── */
.inventory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e0e0e0;
    flex-wrap: wrap;
}

.inventory-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inventory-toolbar__sort label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
}
.inventory-toolbar__sort select {
    padding: 7px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-dark);
    border: 1px solid #d0d0d0;
    background: #fff;
    cursor: pointer;
}
.inventory-toolbar__sort select:focus {
    outline: none;
    border-color: var(--c-red);
}

.inventory-view-toggle {
    display: inline-flex;
    border: 1px solid #d0d0d0;
}
.inventory-view-toggle__btn {
    width: 38px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    background: #fff;
    border-right: 1px solid #d0d0d0;
    transition: background .2s, color .2s;
    font-size: 14px;
}
.inventory-view-toggle__btn:last-child { border-right: none; }
.inventory-view-toggle__btn:hover { background: #fafafa; color: var(--c-dark); }
.inventory-view-toggle__btn.is-active {
    background: var(--c-red);
    color: #fff;
}

/* ── Results: compact view ────────────────────────── */
.inventory-results--compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 30px;
}
.inventory-results--compact .vehicle-card__expanded { display: none; }

/* ── Results: expanded view (single column, horizontal cards) ── */
.inventory-results--expanded {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 30px;
}
.inventory-results--expanded .vehicle-card {
    flex-direction: row;
    align-items: stretch;
}
.inventory-results--expanded .vehicle-card__media {
    flex: 0 0 38%;
    max-width: 38%;
}
.inventory-results--expanded .vehicle-card__image {
    height: 100%;
    aspect-ratio: auto;
}
.inventory-results--expanded .vehicle-card__body {
    flex: 1;
    min-width: 0;
}
.inventory-results--expanded .vehicle-card__specs--compact { display: none; }

.inventory-results--expanded .vehicle-card__expanded {
    padding: 16px 22px 0;
    background: #fafafa;
    flex: 1;
    border-bottom: 1px solid #ececec;
}

.vehicle-card__excerpt {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

.vehicle-card__specs--full {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 0 14px;
    background: transparent;
    border: none;
    gap: 10px 18px;
    margin: 0;
}
.vehicle-card__specs--full .vehicle-card__spec dt { font-size: 9px; }
.vehicle-card__specs--full .vehicle-card__spec dd { font-size: 13px; }

/* ── Pagination ───────────────────────────────────── */
.inventory-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 10px;
}
.inventory-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-dark);
    background: #fff;
    border: 1px solid #d0d0d0;
    transition: background .2s, color .2s, border-color .2s;
}
.inventory-pagination .page-numbers:hover {
    background: #fafafa;
    border-color: var(--c-dark);
}
.inventory-pagination .page-numbers.current {
    background: var(--c-red);
    color: #fff;
    border-color: var(--c-red);
}
.inventory-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1100px) {
    .inventory-layout { grid-template-columns: 240px 1fr; gap: 24px; }
    .inventory-results--compact { grid-template-columns: repeat(2, 1fr); }
    .vehicle-card__specs--full { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .inventory-layout {
        grid-template-columns: 1fr;
    }
    .inventory-sidebar {
        position: static;
        max-height: none;
    }
    .inventory-header { padding: 36px 0 26px; }
    .inventory-header__title { font-size: 28px; }
    .inventory-search__btn { padding: 10px 18px; font-size: 13px; }
    .inventory-results--expanded .vehicle-card {
        flex-direction: column;
    }
    .inventory-results--expanded .vehicle-card__media {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .inventory-results--expanded .vehicle-card__image {
        aspect-ratio: 4/3;
    }
}

@media (max-width: 540px) {
    .inventory-results--compact { grid-template-columns: 1fr; }
    .inventory-toolbar { padding: 12px; }
    .inventory-search__btn { padding: 10px 14px; }
    .vehicle-card__specs--full { grid-template-columns: repeat(2, 1fr); }
}

/* ── Accessibility ─────────────────────────────────
   Skip link: visually hidden until focused, then pinned
   to the top of the viewport so keyboard users can jump
   past the header/nav to the main content. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 12px 18px;
    background: var(--c-dark);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    left: 0;
    outline: 2px solid var(--c-red);
    outline-offset: 2px;
}

/* Targets of the skip link receive focus but should not show
   a default outline since they're page regions, not controls. */
#main-content:focus { outline: none; }

/* Global keyboard-only focus ring. :focus-visible avoids showing
   the ring on mouse clicks while preserving it for Tab navigation. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--c-red);
    outline-offset: 2px;
}

/* ── YouTube Facade ────────────────────────────────
   Replaces heavy YouTube iframes with a static thumbnail
   that swaps in the real player on click. See
   includes/js/youtube-facade.js for the swap logic.
   The wrap holds a stable 16:9 box and both the button
   and (post-click) iframe are absolutely positioned to
   fill it — keeps geometry predictable even when Divi
   or other parent containers impose their own sizing. */
.yt-facade-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 1em;
    background: #000;
}
.yt-facade {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    transition: box-shadow .25s ease;
}
.yt-facade:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, .28);
}
.yt-facade > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .25s ease;
}
.yt-facade:hover > img,
.yt-facade:focus-visible > img {
    transform: scale(1.04);
    filter: brightness(.92);
}
.yt-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 60px;
    background: rgba(218, 37, 28, 0.92);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
    transition: background .2s ease, transform .25s ease, box-shadow .25s ease;
    pointer-events: none;
}
.yt-facade__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: 0;
    height: 0;
    border-left: 22px solid #fff;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play {
    background: var(--c-red);
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 6px 28px rgba(0, 0, 0, .45);
}
.yt-facade__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
@media (max-width: 600px) {
    .yt-facade__play {
        width: 64px;
        height: 46px;
        border-radius: 10px;
    }
    .yt-facade__play::before {
        border-left-width: 16px;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
}

/* ── Media Page (page-media.php) ───────────────────
   Vintage ads / magazine wall. 30 fixed ACF item slots
   (image + caption + outbound link). Each card links
   out to a PDF or external URL in a new tab.
   The page header reuses the default cream .page-title-bar
   so this template stays visually consistent with other
   simple content pages. */
.media-section { padding: 24px 0 56px; }
.media-intro {
    margin: 0 0 28px;
    color: var(--c-dark);
    font-size: 1.05rem;
    line-height: 1.5;
    font-style: italic;
}
.media-content { margin-bottom: 28px; }
.media-empty {
    background: #f6f6f6;
    border: 1px dashed #ccc;
    padding: 24px;
    text-align: center;
    color: #666;
    border-radius: 4px;
}

.media-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.media-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.media-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
    border-color: var(--c-red);
}
.media-card__link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    background: #fff;
}
.media-card__link:hover,
.media-card__link:focus { color: inherit; text-decoration: none; }
.media-card__link:focus-visible {
    outline: 3px solid var(--c-red);
    outline-offset: 2px;
}
/* Frame holds a fixed 3:4 (portrait, magazine-cover-ish) box so every
   thumbnail occupies the same footprint regardless of source aspect ratio.
   Images are object-fit: cover — they fill the box and crop overflow
   rather than letterboxing, which keeps the grid visually consistent.   */
.media-card__frame {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f4f4f4;
}
.media-card__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    transition: transform .35s ease;
}
.media-card:hover .media-card__frame img { transform: scale(1.04); }
.media-card__caption {
    display: block;
    padding: 10px 12px 12px;
    color: var(--c-dark);
    font-size: .9rem;
    line-height: 1.35;
    text-align: center;
    border-top: 1px solid #eee;
    background: #fafafa;
}

@media (max-width: 980px) {
    .media-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 700px) {
    .media-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 420px) {
    .media-grid { grid-template-columns: 1fr; }
}

/* ── Media Lightbox ────────────────────────────────
   Used for items that have no outbound link — clicking
   the card pops the full-size image in an overlay. JS
   in includes/js/media-lightbox.js wires up open/close
   and prev/next navigation across the unlinked items.  */
.media-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .92);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 56px;
}
.media-lightbox-overlay.is-open { display: flex; }
.media-lightbox-stage {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}
.media-lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    display: block;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
    background: #111;
}
.media-lightbox-caption {
    color: #f4f4f4;
    font-size: .95rem;
    line-height: 1.4;
    text-align: center;
    max-width: 720px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.media-lightbox-counter {
    position: absolute;
    top: 16px;
    left: 20px;
    color: #fff;
    font-size: .9rem;
    background: rgba(0, 0, 0, .4);
    padding: 4px 10px;
    border-radius: 3px;
}
.media-lightbox-close,
.media-lightbox-prev,
.media-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 0;
    width: 48px;
    height: 48px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
}
.media-lightbox-close:hover,
.media-lightbox-prev:hover,
.media-lightbox-next:hover {
    background: var(--c-red);
    transform: scale(1.06);
}
.media-lightbox-close:focus-visible,
.media-lightbox-prev:focus-visible,
.media-lightbox-next:focus-visible {
    outline: 3px solid var(--c-red);
    outline-offset: 3px;
}
.media-lightbox-close { top: 16px; right: 20px; font-size: 28px; }
.media-lightbox-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.media-lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.media-lightbox-prev:hover { transform: translateY(-50%) scale(1.06); }
.media-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.media-lightbox-overlay.is-single .media-lightbox-prev,
.media-lightbox-overlay.is-single .media-lightbox-next,
.media-lightbox-overlay.is-single .media-lightbox-counter { display: none; }

@media (max-width: 700px) {
    .media-lightbox-overlay { padding: 56px 12px; }
    .media-lightbox-prev, .media-lightbox-next {
        width: 40px; height: 40px; font-size: 18px;
    }
    .media-lightbox-prev { left: 8px; }
    .media-lightbox-next { right: 8px; }
}

/* =====================================================================
   SHARED COMPONENTS
   Reusable building blocks for page templates. Per-page CSS below adds
   layout-specific tweaks only — typography, button chrome, panels, and
   the closing CTA band are unified here so the brand chrome stays in
   sync across stages, services, news-events, and registry templates.
   (history-cta is a dark band, intentionally NOT this pattern.)
   ===================================================================== */

/* ── Eyebrow ────────────────────────────────────────
   Uppercase red label that introduces a heading.       */
.eyebrow {
    margin: 0 0 12px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.82rem;
}
.eyebrow--on-dark { color: var(--c-red-bright, #ff5f55); }
.eyebrow--on-red  { color: rgba(255, 255, 255, 0.85); }

/* ── Intro band ─────────────────────────────────────
   Cream page-opening section: eyebrow → H1 → lede →
   optional jump nav. Variants: `--on-white` for the
   stages page, default cream for everything else.     */
.intro-band {
    background: var(--c-cream, #f5f1ea);
    padding: 56px 0 48px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.intro-band--on-white {
    background: #fff;
    border-bottom: 1px solid #ececec;
}
.intro-band__inner {
    max-width: 880px;
    margin: 0 auto;
}
.intro-band__heading {
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark);
    font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.intro-band__body {
    margin: 0 auto;
    max-width: 720px;
    color: #4a4f51;
    font-size: 1.05rem;
    line-height: 1.65;
}
.intro-band__body--with-nav { margin-bottom: 28px; }

/* ── Content panel ──────────────────────────────────
   Section with content + sidebar grid, shared between
   news-events and registry. `--light` = white, `--dark`
   = dark gradient. Default inner is 1.45:1; `--balanced`
   stretches to a more even 1.1:0.9.                    */
.content-panel {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
}
.content-panel--light { background: #fff; }
.content-panel--dark {
    background: linear-gradient(160deg, #1a1d1e 0%, #262a2b 60%, #1a1d1e 100%);
    color: #fff;
}
.content-panel__numeral {
    position: absolute;
    top: 16px;
    right: -10px;
    font-size: clamp(140px, 18vw, 240px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: rgba(26, 29, 30, 0.05);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.content-panel--dark .content-panel__numeral { color: rgba(255, 255, 255, 0.05); }
.content-panel__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.content-panel__inner--balanced {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: stretch;
}
.content-panel__title {
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
}
.content-panel--dark .content-panel__title { color: #fff; }
.content-panel__body {
    color: #4a4f51;
    font-size: 1.02rem;
    line-height: 1.65;
}
.content-panel__body p { margin: 0 0 14px; }
.content-panel__body p:last-child { margin-bottom: 0; }
.content-panel__body strong { color: var(--c-dark); }
.content-panel--dark .content-panel__body { color: rgba(255, 255, 255, 0.82); }
.content-panel--dark .content-panel__body strong { color: #fff; }

/* ── Sidebar callout ────────────────────────────────
   Pull-quote / decorative attestation card. Cream bg
   with red left bar; large quote/check mark on top.
   `--quote` positions the mark as a hanging quote glyph
   above the body; default mark sits inline.            */
.sidebar-callout {
    position: relative;
    background: var(--c-cream, #f5f1ea);
    border-left: 4px solid var(--c-red);
    padding: 36px 32px 32px;
    color: var(--c-dark);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}
.sidebar-callout__mark {
    display: block;
    margin: 0 0 10px;
    color: var(--c-red);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
    pointer-events: none;
}
.sidebar-callout__mark--quote {
    position: absolute;
    top: -10px;
    left: 18px;
    margin: 0;
    font-size: 110px;
}
.sidebar-callout__body {
    margin: 18px 0 12px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark);
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
}
.sidebar-callout__attr {
    margin: 0;
    color: rgba(26, 29, 30, 0.65);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ── Form card ──────────────────────────────────────
   White card on dark backgrounds with red top stripe
   and drop shadow. Bundles scoped Contact Form 7
   overrides so the inputs match brand chrome wherever
   the card is dropped.                                 */
.form-card {
    background: #fff;
    color: var(--c-dark);
    padding: 32px 28px 28px;
    border-top: 4px solid var(--c-red);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    align-self: stretch;
    position: relative;
}
.form-card__heading {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark);
    font-size: 1.4rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
}
.form-card__intro {
    margin: 0 0 18px;
    color: #3a3f41;
    font-size: 0.95rem;
    line-height: 1.55;
}
.form-card__placeholder {
    margin: 0;
    padding: 16px 18px;
    border: 2px dashed rgba(26, 29, 30, 0.2);
    background: var(--c-cream, #f5f1ea);
    color: #4a4f51;
    font-size: 0.92rem;
    line-height: 1.55;
}
.form-card__placeholder code {
    font-family: 'Courier New', monospace;
    background: rgba(26, 29, 30, 0.08);
    padding: 1px 6px;
    font-size: 0.85rem;
}
.form-card__form { margin: 0; }
.form-card__form .wpcf7 form,
.form-card__form .wpcf7-form { margin: 0; }
.form-card__form .wpcf7 p,
.form-card__form .wpcf7-form p { margin: 0 0 14px; }
.form-card__form .wpcf7 label,
.form-card__form label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-dark);
}
.form-card__form input[type="text"],
.form-card__form input[type="email"],
.form-card__form input[type="tel"],
.form-card__form input[type="url"],
.form-card__form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid rgba(26, 29, 30, 0.2);
    background: #fff;
    color: var(--c-dark);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.form-card__form input:focus,
.form-card__form textarea:focus {
    outline: none;
    border-color: var(--c-red);
    background: #fff;
}
.form-card__form textarea { min-height: 110px; resize: vertical; }
.form-card__form input[type="submit"],
.form-card__form button[type="submit"] {
    display: inline-block;
    width: 100%;
    margin-top: 4px;
    padding: 13px 28px;
    background: var(--c-red);
    color: #fff;
    border: 2px solid var(--c-red);
    font-family: inherit;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.form-card__form input[type="submit"]:hover,
.form-card__form button[type="submit"]:hover {
    background: var(--c-dark);
    color: #fff;
    border-color: var(--c-dark);
}
.form-card__form input[type="submit"]:focus-visible,
.form-card__form button[type="submit"]:focus-visible {
    outline: 3px solid var(--c-red);
    outline-offset: 4px;
}
.form-card__form .wpcf7-not-valid-tip { font-size: 12px; }
.form-card__form .wpcf7-response-output { font-size: 13px; }

/* Generic CF7 contact form layout: side-by-side name/email row,
   required/optional label markers. Pairs with the form template
   used in the Contact / inquiry CF7 forms. */
.form-card .cf7-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-card .cf7-row .cf7-field { margin: 0 0 14px; }

.form-card .cf7-req {
    color: var(--c-red);
    margin-left: 2px;
}

.form-card .cf7-opt {
    color: #888;
    font-weight: 400;
    font-size: 12px;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

.form-card .cf7-actions { margin: 6px 0 0; }

@media (max-width: 600px) {
    .form-card .cf7-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ── CTA band ───────────────────────────────────────
   Red gradient closing strip with eyebrow / heading /
   body and one or more buttons. Default button is white
   filled; `--alt` is the transparent ghost variant.    */
.cta-band {
    background: linear-gradient(135deg, var(--c-red) 0%, #a91710 100%);
    padding: 64px 0 60px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: rgba(255, 255, 255, 0.04);
    transform: rotate(18deg);
    pointer-events: none;
}
.cta-band__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.cta-band__heading {
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.1;
}
.cta-band__body {
    margin: 0 auto 26px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.04rem;
    line-height: 1.55;
}
.cta-band__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.cta-band__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: #fff;
    color: var(--c-red);
    border: 2px solid #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.cta-band__button:hover {
    background: var(--c-dark);
    color: #fff;
    border-color: var(--c-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
.cta-band__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}
.cta-band__button--alt {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}
.cta-band__button--alt:hover {
    background: #fff;
    color: var(--c-red);
    border-color: #fff;
}

/* ── Shared component responsive ──────────────────── */
@media (max-width: 980px) {
    .content-panel__inner,
    .content-panel__inner--balanced {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }
    .form-card { padding: 28px 22px 24px; }
    .sidebar-callout { padding: 28px 24px 24px; }
}
@media (max-width: 700px) {
    .intro-band { padding: 40px 0 36px; }
    .content-panel { padding: 56px 0; }
    .content-panel__numeral { font-size: 130px; top: 8px; right: -16px; }
    .cta-band { padding: 52px 0 48px; }
    .cta-band__button { padding: 12px 22px; font-size: 0.9rem; }
}

/* ─────────────────────────────────────────────────
   Camaro Stages page (page-camaro-stages.php)
   Anatomy: cream page-title-bar → light intro band →
   three alternating stage panels (Stage III is the
   featured dark spotlight) → comparison table →
   red CTA band. Big roman numerals are decorative
   watermarks behind each panel.                       */

/* Intro band — see shared `.intro-band.intro-band--on-white` near the top of this file. */

/* ── Stage panels ──────────────────────────────────── */
.stage-panel {
    position: relative;
    overflow: hidden;
    padding: 64px 0;
}
.stage-panel--one   { background: #fff; }
.stage-panel--two   { background: #f6f3ee; }
.stage-panel--three {
    background: linear-gradient(135deg, #1f2324 0%, var(--c-dark) 60%, #0f1112 100%);
    color: #f4f4f4;
    border-top: 4px solid var(--c-red);
    border-bottom: 4px solid var(--c-red);
}

/* Decorative watermark numeral */
.stage-panel__numeral {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Open Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(280px, 38vw, 540px);
    line-height: .8;
    color: rgba(218, 37, 28, .055);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.stage-panel--one   .stage-panel__numeral { right: -3vw; }
.stage-panel--two   .stage-panel__numeral { left: -3vw; }
.stage-panel--three .stage-panel__numeral {
    color: rgba(255, 255, 255, .03);
    right: -2vw;
}

.stage-panel__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}
/* Default: image left, content right (Stage I, Stage III) */
.stage-panel__media   { order: 1; }
.stage-panel__content { order: 2; }
/* Stage II flips for visual rhythm */
.stage-panel--two .stage-panel__media   { order: 2; }
.stage-panel--two .stage-panel__content { order: 1; }

.stage-panel__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}
.stage-panel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.stage-panel:hover .stage-panel__media img { transform: scale(1.03); }

.stage-panel__media-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-dark-2), var(--c-dark));
    color: rgba(255, 255, 255, .12);
    font-family: 'Open Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(120px, 18vw, 220px);
    line-height: 1;
    letter-spacing: -.04em;
    border: 1px solid rgba(255, 255, 255, .06);
}
.stage-panel__media-placeholder span { display: block; }

.stage-panel--three .stage-panel__media {
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(218, 37, 28, .35) inset;
}

.stage-panel__badge {
    position: absolute;
    top: 14px;
    left: -8px;
    background: var(--c-red);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    padding: 8px 16px 8px 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    z-index: 2;
}
.stage-panel__badge::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    border-top: 6px solid #8e1610;
    border-left: 8px solid transparent;
}

.stage-panel__eyebrow {
    margin: 0 0 8px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .8rem;
}
.stage-panel--three .stage-panel__eyebrow { color: var(--c-red-bright); }
.stage-panel__title {
    margin: 0 0 14px;
    font-family: 'Open Sans', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    line-height: 1.05;
    color: var(--c-dark);
}
.stage-panel--three .stage-panel__title { color: #fff; }

.stage-panel__lede {
    margin: 0 0 22px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444;
}
.stage-panel--three .stage-panel__lede { color: #d3d6d7; }

.stage-features {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 18px;
}
.stage-features li {
    position: relative;
    padding-left: 26px;
    font-size: .95rem;
    line-height: 1.45;
    color: #2d3132;
}
.stage-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .35em;
    width: 16px;
    height: 16px;
    background: var(--c-red);
    clip-path: polygon(20% 50%, 0 70%, 40% 100%, 100% 25%, 80% 10%, 40% 65%);
}
.stage-panel--three .stage-features li { color: #e2e5e6; }
.stage-panel--three .stage-features li::before { background: var(--c-red-bright); }

.stage-panel__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.stage-price {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--c-dark-2);
    color: #fff;
    padding: 12px 20px;
    border-left: 4px solid var(--c-red);
    line-height: 1.1;
}
.stage-panel--three .stage-price {
    background: rgba(255, 255, 255, .06);
    border-left-color: var(--c-red-bright);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.stage-price__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(255, 255, 255, .65);
    margin-bottom: 2px;
}
.stage-price__amount {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    color: #fff;
}
.stage-price__note {
    font-size: .72rem;
    color: rgba(255, 255, 255, .55);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.stage-panel__cta { font-size: .92rem; }
.stage-panel--three .stage-panel__cta {
    background: var(--c-red-bright);
    border-color: var(--c-red-bright);
}
.stage-panel--three .stage-panel__cta:hover {
    background: var(--c-red);
    border-color: var(--c-red);
}

@media (max-width: 900px) {
    .stage-panel { padding: 44px 0; }
    .stage-panel__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .stage-panel--two .stage-panel__media,
    .stage-panel--two .stage-panel__content,
    .stage-panel__media,
    .stage-panel__content { order: unset; }
    .stage-panel__media { order: 1; }
    .stage-panel__content { order: 2; }
    .stage-panel__numeral { font-size: clamp(220px, 60vw, 360px); opacity: .5; }
    .stage-features { grid-template-columns: 1fr; }
}

/* ── Comparison Table ──────────────────────────────── */
.stages-compare {
    background: #f6f3ee;
    padding: 64px 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}
.stages-compare__eyebrow {
    margin: 0 0 8px;
    text-align: center;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.stages-compare__heading {
    margin: 0 0 28px;
    text-align: center;
    color: var(--c-dark);
    font-family: 'Open Sans', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.1;
}

/* Wrapper enables horizontal scroll on small screens without breaking the
   table's grid alignment. The first column gets a sticky-looking left edge
   via the white background to imply it stays put while users scroll. */
.compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    border-radius: 4px;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
    background: #fff;
    font-size: .95rem;
}
.compare-table thead th {
    background: var(--c-dark-2);
    color: #fff;
    text-align: center;
    padding: 18px 14px;
    font-family: 'Open Sans', system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
    border-bottom: 4px solid var(--c-red);
    position: relative;
}
.compare-table__col-numeral {
    display: block;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--c-red);
    margin-bottom: 4px;
}
.compare-table__col-name {
    display: block;
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .12em;
}
.compare-table__col-flag {
    display: block;
    margin-top: 6px;
    background: var(--c-red);
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .65rem;
    letter-spacing: .12em;
    font-weight: 800;
    text-transform: uppercase;
}
.compare-table__col--featured {
    background: linear-gradient(180deg, var(--c-dark) 0%, #2a1a18 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.compare-table__feature {
    text-align: left;
    color: var(--c-dark);
    font-weight: 700;
    background: #fafafa;
    padding: 12px 18px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: .95rem;
    width: 38%;
}
.compare-table thead .compare-table__feature {
    background: var(--c-dark-2);
    color: #fff;
    font-weight: 800;
    text-align: left;
    font-size: .85rem;
}
.compare-table tbody td {
    padding: 12px 14px;
    text-align: center;
    border-bottom: 1px solid #eee;
    color: #2d3132;
    vertical-align: middle;
}
.compare-table tbody td.compare-table__col--featured {
    background: rgba(218, 37, 28, .045);
    box-shadow: inset 4px 0 0 0 rgba(218, 37, 28, .35), inset -4px 0 0 0 rgba(218, 37, 28, .35);
    color: var(--c-dark);
    font-weight: 600;
}
.compare-table tbody tr:nth-child(even) td:not(.compare-table__col--featured) {
    background: #fbfaf8;
}
.compare-table tbody tr:nth-child(even) .compare-table__feature {
    background: #f4f3ef;
}
.compare-table tbody tr:hover td {
    background: rgba(255, 247, 245, .9);
}
.compare-table tbody tr:hover td.compare-table__col--featured {
    background: rgba(218, 37, 28, .08);
}
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child .compare-table__feature {
    border-bottom: 0;
}

.compare-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--c-red);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
}
.compare-no {
    color: #c0c4c5;
    font-size: 1.2rem;
    font-weight: 800;
}
.compare-val {
    display: inline-block;
    color: var(--c-dark);
    font-weight: 600;
}

@media (max-width: 700px) {
    .stages-compare { padding: 44px 0; }
    .compare-table thead th { padding: 12px 8px; }
    .compare-table__feature { padding: 10px 12px; font-size: .88rem; }
    .compare-table tbody td { padding: 10px 8px; font-size: .88rem; }
    .compare-table__col-numeral { font-size: 1.3rem; }
}

/* Bottom CTA band — see shared `.cta-band` near the top of this file. */

/* ─────────────────────────────────────────────────
   Nickey History page (page-history.php)
   Anatomy: cream title bar → light intro band →
   3-tile milestone timeline → alternating story
   sections (light / cream) with a dark "1967 / 427"
   featured panel and a small team-callouts band →
   red CTA with phone number.                          */

/* ── Intro band (also serves as the page title band) ─
   Cream background + 4px red accent line continues the
   site-wide page-title chrome, but the section also holds
   the page H1 and lede so we don't stack two headers. */
.history-intro {
    background: var(--c-page-title-bg);
    padding: 72px 0 56px;
    border-bottom: 4px solid var(--c-red);
}
.history-intro__inner {
    max-width: 880px;
    text-align: center;
}
.history-intro__eyebrow {
    margin: 0 0 12px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.history-intro__heading {
    margin: 0 0 20px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: .5px;
}
.history-intro__lede {
    margin: 0;
    color: #444;
    font-size: 1.06rem;
    line-height: 1.65;
}
@media (max-width: 720px) {
    .history-intro { padding: 48px 0 36px; }
}

/* ── Milestone timeline ────────────────────────────── */
.history-timeline {
    background: var(--c-dark-2);
    padding: 36px 0;
    border-top: 4px solid var(--c-red);
    border-bottom: 4px solid var(--c-red);
}
.history-timeline__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}
.history-timeline__item {
    position: relative;
    padding: 8px 12px;
    color: #f4f4f4;
}
.history-timeline__item + .history-timeline__item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(255, 255, 255, .12);
}
.history-timeline__year {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1;
    color: var(--c-red-bright);
    letter-spacing: .04em;
}
.history-timeline__label {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* ── Story sections ────────────────────────────────── */
.history-section {
    padding: 64px 0;
}
.history-section--light { background: #fff; }
.history-section--cream { background: #f6f3ee; }

.history-section__inner {
    max-width: 820px;
}

/* Split layout: figure left, content right (Chapter One) */
.history-section--split { padding: 72px 0; }
.history-section__split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}
.history-section__figure {
    margin: 0;
    background: var(--c-dark);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
    border-top: 4px solid var(--c-red);
}
.history-section__figure img {
    display: block;
    width: 100%;
    height: auto;
}
.history-section__figure figcaption {
    padding: 14px 18px;
    background: var(--c-dark);
    color: rgba(255, 255, 255, .82);
    font-size: .8rem;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.history-section__content { min-width: 0; }
@media (max-width: 880px) {
    .history-section--split { padding: 48px 0; }
    .history-section__split {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}
.history-section__eyebrow {
    position: relative;
    margin: 0 0 12px;
    padding-left: 44px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.history-section__eyebrow::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 3px;
    background: var(--c-red);
    transform: translateY(-50%);
}
.history-section__heading {
    margin: 0 0 22px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    line-height: 1.1;
}
.history-section__body p {
    margin: 0 0 16px;
    color: #333;
    font-size: 1.04rem;
    line-height: 1.7;
}
.history-section__body p:last-child { margin-bottom: 0; }

/* ── Featured dark panel: 1967 / 427 ────────────────── */
.history-featured {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    background: linear-gradient(135deg, #1f2324 0%, var(--c-dark) 60%, #0f1112 100%);
    color: #f4f4f4;
    border-top: 4px solid var(--c-red);
    border-bottom: 4px solid var(--c-red);
}
.history-featured__watermark {
    position: absolute;
    top: 50%;
    right: -2vw;
    transform: translateY(-50%);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(280px, 38vw, 540px);
    line-height: .8;
    color: rgba(255, 255, 255, .035);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.history-featured__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
}
.history-featured__eyebrow {
    margin: 0 0 12px;
    color: var(--c-red-bright);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.history-featured__heading {
    margin: 0 0 22px;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.05;
}
.history-featured__body {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 1.08rem;
    line-height: 1.7;
}

/* ── Inline team cards (footer of Chapter Two) ─────── */
.history-team-inline {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.history-team-inline__card {
    padding: 18px 20px;
    background: #fff;
    border-left: 4px solid var(--c-red);
}
.history-team-inline__name {
    margin: 0 0 4px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.05rem;
    letter-spacing: .04em;
}
.history-team-inline__role {
    margin: 0;
    color: #555;
    font-size: .88rem;
    line-height: 1.45;
}
@media (max-width: 720px) {
    .history-team-inline { grid-template-columns: 1fr; }
}

/* ── Bottom CTA band ───────────────────────────────────
   Dark canvas with a single red accent (the phone pill).
   The previous all-red treatment created red-on-red overlap;
   this design keeps red as a focal accent only. A 4px red
   bottom border separates the band from the dark footer. */
.history-cta {
    background: linear-gradient(135deg, #1f2324 0%, var(--c-dark) 60%, #0f1112 100%);
    padding: 72px 0;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--c-red);
    border-bottom: 4px solid var(--c-red);
}
.history-cta::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 60%;
    height: 180%;
    background: rgba(255, 255, 255, .025);
    transform: rotate(18deg);
    pointer-events: none;
}
.history-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
}
.history-cta__eyebrow {
    margin: 0 0 10px;
    color: var(--c-red-bright);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.history-cta__heading {
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.15;
}
.history-cta__body {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.02rem;
    line-height: 1.55;
}
.history-cta__phone {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
    padding: 16px 32px;
    margin: 0 0 28px;
    background: var(--c-red);
    border: 2px solid var(--c-red);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(218, 37, 28, .35);
    transition: background var(--t-base) ease, border-color var(--t-base) ease, transform var(--t-base) ease, box-shadow var(--t-base) ease;
}
.history-cta__phone:hover {
    background: #b01e16;
    border-color: #b01e16;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(218, 37, 28, .45);
}
.history-cta__phone-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}
.history-cta__phone-number {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    letter-spacing: .04em;
}
.history-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.history-cta__button {
    display: inline-block;
    padding: 12px 26px;
    background: #fff;
    color: var(--c-dark);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .9rem;
    text-decoration: none;
    border: 2px solid #fff;
    transition: background var(--t-base) ease, color var(--t-base) ease, transform var(--t-base) ease, box-shadow var(--t-base) ease;
}
.history-cta__button:hover {
    background: var(--c-red);
    color: #fff;
    border-color: var(--c-red);
    transform: translateY(-2px);
}
.history-cta__button--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}
.history-cta__button--ghost:hover {
    background: #fff;
    color: var(--c-dark);
    border-color: #fff;
}
.history-cta__button:focus-visible,
.history-cta__phone:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 760px) {
    .history-intro { padding: 40px 0 28px; }
    .history-section { padding: 44px 0; }
    .history-featured { padding: 56px 0; }
    .history-team { padding: 40px 0; }
    .history-cta { padding: 48px 0; }

    .history-timeline__list {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .history-timeline__item + .history-timeline__item::before {
        left: 18%;
        right: 18%;
        top: -10px;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    .history-team__grid {
        grid-template-columns: 1fr;
    }

    .history-cta__phone {
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }
}

/* ─────────────────────────────────────────────────
   Continuation Cars page (page-continuation-cars.php)
   Anatomy: cream intro → two-card type split (white)
   → dark four-pillar grid → dark video band with yt
   facade → cream specialty callout → dark CTA.        */

/* ── Intro ─────────────────────────────────────────── */
.continuation-intro {
    background: var(--c-page-title-bg);
    padding: 72px 0 56px;
    border-bottom: 4px solid var(--c-red);
}
.continuation-intro__inner {
    max-width: 880px;
    text-align: center;
}
.continuation-intro__eyebrow {
    margin: 0 0 12px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.continuation-intro__heading {
    margin: 0 0 20px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: .5px;
}
.continuation-intro__lede {
    margin: 0;
    color: #444;
    font-size: 1.06rem;
    line-height: 1.65;
}
@media (max-width: 720px) {
    .continuation-intro { padding: 48px 0 36px; }
}

/* ── Two-card type split ───────────────────────────── */
.continuation-types {
    background: #fff;
    padding: 72px 0;
}
.continuation-types__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.continuation-types__grid--single {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}
.continuation-card {
    position: relative;
    background: #f6f3ee;
    padding: 36px 32px 32px;
    border-top: 4px solid var(--c-red);
    border-radius: 4px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .06);
}
.continuation-card--accent {
    background: var(--c-dark);
    color: #f4f4f4;
}
.continuation-card__eyebrow {
    margin: 0 0 10px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .78rem;
}
.continuation-card--accent .continuation-card__eyebrow {
    color: var(--c-red-bright);
}
.continuation-card__heading {
    margin: 0 0 16px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: .4px;
}
.continuation-card--accent .continuation-card__heading {
    color: #fff;
}
.continuation-card__body {
    margin: 0 0 14px;
    color: #444;
    font-size: 1rem;
    line-height: 1.65;
}
.continuation-card--accent .continuation-card__body {
    color: rgba(255, 255, 255, .82);
}
.continuation-card__body:last-of-type { margin-bottom: 0; }
.continuation-card__link {
    display: inline-block;
    margin-top: 20px;
    color: var(--c-red-bright);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .85rem;
    text-decoration: none;
    border-bottom: 2px solid var(--c-red);
    padding-bottom: 4px;
    transition: color .2s ease, border-color .2s ease;
}
.continuation-card__link:hover {
    color: #fff;
    border-color: #fff;
}
@media (max-width: 900px) {
    .continuation-types { padding: 56px 0; }
    .continuation-types__grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* ── Four pillars ──────────────────────────────────── */
.continuation-pillars {
    background: var(--c-dark-2);
    padding: 64px 0;
    border-top: 4px solid var(--c-red);
    color: #f4f4f4;
    text-align: center;
}
.continuation-pillars__eyebrow {
    margin: 0 0 10px;
    color: var(--c-red-bright);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.continuation-pillars__heading {
    margin: 0 0 36px;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: .4px;
}
.continuation-pillars__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: left;
}
.continuation-pillars__grid--1up { grid-template-columns: minmax(0, 520px); justify-content: center; }
.continuation-pillars__grid--2up { grid-template-columns: repeat(2, 1fr); }
.continuation-pillars__grid--3up { grid-template-columns: repeat(3, 1fr); }
.continuation-pillar {
    position: relative;
    padding: 28px 22px 24px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    border-top: 3px solid var(--c-red);
    border-radius: 3px;
}
.continuation-pillar__numeral {
    display: block;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--c-red-bright);
    letter-spacing: .04em;
    margin-bottom: 8px;
}
.continuation-pillar__name {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: .5px;
}
.continuation-pillar__body {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
    line-height: 1.55;
}
@media (max-width: 980px) {
    .continuation-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .continuation-pillars__grid { grid-template-columns: 1fr; }
}

/* ── Video band ────────────────────────────────────── */
.continuation-video {
    background: linear-gradient(135deg, #1f2324 0%, var(--c-dark) 60%, #0f1112 100%);
    padding: 72px 0;
    text-align: center;
    color: #f4f4f4;
}
.continuation-video__inner {
    max-width: 960px;
}
.continuation-video__eyebrow {
    margin: 0 0 10px;
    color: var(--c-red-bright);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.continuation-video__heading {
    margin: 0 0 32px;
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: .4px;
}
.continuation-video__frame {
    border: 4px solid var(--c-red);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.continuation-video__frame .yt-facade-wrap { display: block; }

/* Branded poster — used because YouTube has no thumbnail for this video.
   Replace this with a real <img> in the facade button if a still frame is
   ever uploaded; the markup pattern is identical to any other yt-facade. */
.continuation-video__facade {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(218, 37, 28, .18), transparent 55%),
        linear-gradient(135deg, #2a2e2f 0%, var(--c-dark) 60%, #0a0c0d 100%);
    overflow: hidden;
}
.continuation-video__facade::before {
    content: 'K';
    position: absolute;
    right: -.08em;
    bottom: -.32em;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(11rem, 30vw, 24rem);
    line-height: 1;
    color: rgba(218, 37, 28, .14);
    transform: scaleX(-1);
    pointer-events: none;
    user-select: none;
}
.continuation-video__poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(20px, 5vw, 44px) 24px 0;
    text-align: center;
    pointer-events: none;
    z-index: 1;
}
.continuation-video__poster-eyebrow {
    color: var(--c-red-bright);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: clamp(.7rem, 1.2vw, .85rem);
    margin-bottom: 8px;
}
.continuation-video__poster-title {
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.1rem, 2.6vw, 1.9rem);
    letter-spacing: .04em;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
@media (max-width: 720px) {
    .continuation-video { padding: 56px 0; }
}

/* ── Specialty Cars callout ────────────────────────── */
.continuation-specialty {
    background: #f6f3ee;
    padding: 56px 0;
    border-top: 1px solid rgba(0, 0, 0, .06);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.continuation-specialty__inner {
    max-width: 820px;
    text-align: center;
}
.continuation-specialty__eyebrow {
    margin: 0 0 10px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
}
.continuation-specialty__heading {
    margin: 0 0 18px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: .4px;
}
.continuation-specialty__body {
    margin: 0;
    color: #444;
    font-size: 1.02rem;
    line-height: 1.65;
}

/* ── Dealer Network ────────────────────────────────────
   Two-column layout: a sticky list of authorized dealers on the left, an
   interactive Leaflet map on the right. Hovering or focusing a card
   activates the matching pin and flies the map to it.                       */
.dealer-intro {
    background: var(--c-page-title-bg);
    padding: 56px 0 36px;
    border-bottom: 4px solid var(--c-red);
}
.dealer-intro__inner {
    max-width: 820px;
    text-align: center;
}
.dealer-intro__eyebrow {
    margin: 0 0 10px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .82rem;
}
.dealer-intro__heading {
    margin: 0 0 18px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: .5px;
}
.dealer-intro__lede {
    color: #444;
    font-size: 1.05rem;
    line-height: 1.65;
}
.dealer-intro__lede p { margin: 0; }

.dealer-network {
    padding: 56px 0 72px;
    background: #fff;
}
.dealer-network__inner {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
@media (max-width: 980px) {
    .dealer-network__inner {
        grid-template-columns: 1fr;
    }
}

.dealer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}
@media (max-width: 980px) {
    .dealer-list {
        max-height: none;
        order: 2;
    }
}
.dealer-list::-webkit-scrollbar { width: 8px; }
.dealer-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .18); border-radius: 4px; }

.dealer-card {
    position: relative;
    background: #fff;
    border: 1px solid #e6e1d8;
    border-left: 3px solid #d6cfc1;
    border-radius: 4px;
    padding: 14px 16px 14px 56px;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    outline: none;
}
.dealer-card:hover,
.dealer-card:focus-visible,
.dealer-card.is-active {
    border-color: var(--c-red);
    border-left-color: var(--c-red);
    box-shadow: 0 6px 18px rgba(218, 37, 28, .12);
    transform: translateY(-1px);
}
.dealer-card.is-active {
    background: #fff8f7;
}
.dealer-card__num {
    position: absolute;
    left: 14px;
    top: 14px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-dark-2);
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: .85rem;
    border-radius: 3px;
    transition: background .18s ease;
}
.dealer-card:hover .dealer-card__num,
.dealer-card:focus-visible .dealer-card__num,
.dealer-card.is-active .dealer-card__num {
    background: var(--c-red);
}
.dealer-card__name {
    margin: 0 0 4px;
    color: var(--c-dark);
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: .3px;
}
.dealer-card__address {
    margin: 0 0 8px;
    color: #444;
    font-size: .92rem;
    line-height: 1.4;
    font-style: normal;
}
.dealer-card__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: .88rem;
}
.dealer-card__links li { margin: 0; }
.dealer-card__phone,
.dealer-card__site {
    color: var(--c-red);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dealer-card__phone:hover,
.dealer-card__site:hover { color: var(--c-red-hover); text-decoration: underline; }
.dealer-card__phone i,
.dealer-card__site i { font-size: .8rem; opacity: .85; }

.dealer-card--no-map { cursor: default; }
.dealer-card--no-map:hover { transform: none; box-shadow: none; }

/* ── Map ── */
.dealer-map-wrap {
    position: sticky;
    top: 24px;
}
@media (max-width: 980px) {
    .dealer-map-wrap {
        position: static;
        order: 1;
    }
}
.dealer-map {
    width: 100%;
    height: 600px;
    border: 4px solid var(--c-red);
    border-radius: 4px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
    background: #eaeaea;
    z-index: 0;
}
@media (max-width: 980px) {
    .dealer-map { height: 380px; }
}
.dealer-map--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: .95rem;
}
.dealer-map__hint {
    margin: 10px 0 0;
    font-size: .82rem;
    color: #666;
    text-align: center;
    letter-spacing: .04em;
}

/* Custom DivIcon — Leaflet's built-in PNG marker is replaced with our SVG. */
.dealer-pin {
    background: transparent !important;
    border: 0 !important;
    transition: transform .18s ease, filter .18s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}
.dealer-pin svg { display: block; }
.dealer-pin.is-active {
    filter: drop-shadow(0 4px 10px rgba(218, 37, 28, .55));
    z-index: 999;
}

/* Popup styling */
.leaflet-popup-content-wrapper {
    border-radius: 4px;
    border-top: 3px solid var(--c-red);
    padding: 4px 6px;
}
.leaflet-popup-content {
    margin: 10px 14px;
    font-family: var(--font-sans);
    font-size: .92rem;
}
.dealer-popup__name {
    margin: 0 0 4px;
    color: var(--c-dark);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .98rem;
    letter-spacing: .3px;
}
.dealer-popup__addr {
    margin: 0 0 6px;
    color: #444;
    line-height: 1.4;
}
.dealer-popup__links {
    margin: 0;
    color: var(--c-red);
    font-weight: 600;
}
.dealer-popup__links a {
    color: var(--c-red);
    text-decoration: none;
}
.dealer-popup__links a:hover { color: var(--c-red-hover); text-decoration: underline; }

/* ── Services Page (page-services.php) ──────────────
   Consolidates the legacy three Joomla pages — Vehicle
   Consignment, NicKey Appraisal Services, and NicKey
   Performance Dyno Tuning — into a single ACF-driven
   template. Anatomy: cream intro + jump-nav → three
   alternating panels (white / cream / dark dyno) → red
   gradient CTA. The dyno panel hosts spec cards + a
   YouTube video grid that reuses the existing
   .yt-facade markup. */

/* Intro band — see shared `.intro-band` near the top of this file. */
.services-jump {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
}
.services-jump__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 2px solid rgba(26, 29, 30, 0.18);
    background: #fff;
    color: var(--c-dark);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.services-jump__link span {
    color: var(--c-red);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
}
.services-jump__link:hover,
.services-jump__link:focus-visible {
    border-color: var(--c-red);
    color: var(--c-red);
    transform: translateY(-1px);
}

/* Service panels — share spacing, alternate surface treatment. */
.service-panel {
    position: relative;
    overflow: hidden;
    padding: 72px 0;
}
.service-panel__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.service-panel__inner--full {
    grid-template-columns: 1fr;
    gap: 40px;
}
.service-panel__numeral {
    position: absolute;
    top: 16px;
    right: -10px;
    font-size: clamp(140px, 18vw, 240px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: rgba(26, 29, 30, 0.05);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.service-panel__eyebrow {
    margin: 0 0 10px;
    color: var(--c-red);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.service-panel__title {
    margin: 0 0 18px;
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--c-dark);
    letter-spacing: -0.01em;
}
.service-panel__body {
    color: #3f4244;
    font-size: 1.02rem;
    line-height: 1.7;
}
.service-panel__body p { margin: 0 0 14px; }
.service-panel__body p:last-child { margin-bottom: 0; }
.service-panel__body strong { color: var(--c-dark); }
.service-panel__header {
    max-width: 820px;
}

/* Variant 01 — Consignment (white) */
.service-panel--consignment { background: #fff; }

/* Contact card — shared by consignment service. */
.service-contact {
    background: var(--c-cream, #f5f1ea);
    border: 1px solid rgba(26, 29, 30, 0.08);
    border-top: 4px solid var(--c-red);
    padding: 28px 28px 24px;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}
.service-contact__label {
    margin: 0 0 16px;
    color: var(--c-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.service-contact__list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}
.service-contact__list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(26, 29, 30, 0.08);
}
.service-contact__list li:last-child { border-bottom: 0; }
.service-contact__list a {
    color: var(--c-dark);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    word-break: break-word;
    transition: color .2s ease;
}
.service-contact__list a:hover { color: var(--c-red); }
.service-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--c-red);
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.service-contact__hint {
    margin: 0;
    color: #5b5e60;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Variant 02 — Appraisal (cream) */
.service-panel--appraisal { background: var(--c-cream, #f5f1ea); }

.service-features {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.service-features li {
    position: relative;
    padding: 8px 0 8px 32px;
    color: #3f4244;
    font-size: 0.98rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(26, 29, 30, 0.06);
}
.service-features li:last-child { border-bottom: 0; }
.service-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--c-red);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5,8.5 6.5,11.5 12.5,5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.service-disclaimer {
    background: #fff;
    border: 1px solid rgba(26, 29, 30, 0.1);
    border-left: 4px solid var(--c-red);
    padding: 24px 24px 22px;
    border-radius: 4px;
}
.service-disclaimer__label {
    margin: 0 0 10px;
    color: var(--c-red);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.service-disclaimer__body {
    margin: 0;
    color: #4a4f51;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Variant 03 — Dyno (dark spotlight) */
.service-panel--dyno {
    background: linear-gradient(180deg, #1a1d1e 0%, #262a2b 100%);
    color: #d8dadb;
    padding: 80px 0;
}
.service-panel--dyno .service-panel__numeral { color: rgba(255, 255, 255, 0.05); }
.service-panel--dyno .service-panel__eyebrow { color: var(--c-red); }
.service-panel--dyno .service-panel__title { color: #fff; }
.service-panel--dyno .service-panel__body { color: #c8cacc; }
.service-panel--dyno .service-panel__body strong { color: #fff; }

.dyno-stats {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dyno-stat {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid var(--c-red);
    padding: 22px 18px 20px;
    text-align: left;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dyno-stat__value {
    color: #fff;
    font-size: clamp(1.85rem, 1.5rem + 1vw, 2.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}
.dyno-stat__unit {
    margin-top: 6px;
    color: var(--c-red);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.dyno-stat__label {
    margin-top: 12px;
    color: #aeb1b3;
    font-size: 0.85rem;
    line-height: 1.4;
}

.dyno-features {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 28px 32px 26px;
    border-radius: 4px;
    margin-bottom: 40px;
}
.dyno-features__heading {
    margin: 0 0 14px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.service-features--dyno li {
    color: #c8cacc;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
.service-features--dyno li::before {
    background: var(--c-red);
}
.dyno-features__call {
    margin: 18px 0 0;
    color: #c8cacc;
    font-size: 0.98rem;
}
.dyno-features__call a {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid var(--c-red);
    padding-bottom: 1px;
    transition: color .2s ease, border-color .2s ease;
}
.dyno-features__call a:hover { color: var(--c-red); }

.dyno-videos__heading {
    margin: 0 0 18px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dyno-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.dyno-video {
    margin: 0;
}
.dyno-video .yt-facade-wrap {
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.dyno-video__caption {
    margin-top: 12px;
    color: #c8cacc;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
}

/* ── YouTube placeholder card ───────────────────────
   Branded fallback that replaces the YouTube CDN
   thumbnail with a NicKey-styled card built from the
   video title. Click behavior is preserved by the
   shared yt-facade JS (it swaps the <button> for an
   iframe regardless of inner content). Four variants
   provide visual variety across the 2x2 grid. */
.yt-facade--placeholder {
    background: linear-gradient(135deg, #1a1d1e 0%, #2a2e30 60%, #1a1d1e 100%);
}
.yt-facade--placeholder > img { display: none; } /* defensive: ignore <img> if any sneaks in */
.yt-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px 24px 64px;
    text-align: left;
    overflow: hidden;
    transition: transform .35s ease, filter .25s ease;
}
.yt-placeholder::before {
    /* Brand red accent stripe along the top edge. */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--c-red);
}
.yt-placeholder::after {
    /* Diagonal accent wash so each card reads as a
       graphic, not a flat dark rectangle. */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(218, 37, 28, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%);
    pointer-events: none;
}
.yt-placeholder__eyebrow {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    margin-bottom: auto;
    padding: 5px 10px;
    background: rgba(218, 37, 28, 0.15);
    border: 1px solid rgba(218, 37, 28, 0.45);
    color: #ff8b86;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 3px;
}
.yt-placeholder__title {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: clamp(1rem, 0.85rem + 0.6vw, 1.25rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    /* Cap to 3 lines so long titles don't blow out the card. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yt-placeholder__watermark {
    position: absolute;
    right: -18px;
    bottom: -36px;
    font-size: 220px;
    line-height: 0.8;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.04);
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.yt-facade--placeholder:hover .yt-placeholder,
.yt-facade--placeholder:focus-visible .yt-placeholder {
    transform: scale(1.02);
    filter: brightness(1.05);
}

/* Variants — same skeleton, different accent palette
   so the four-card grid doesn't feel uniform. */
.yt-placeholder--v1 { background: linear-gradient(135deg, #1a1d1e 0%, #2a2e30 60%, #1a1d1e 100%); }
.yt-placeholder--v2 { background: linear-gradient(135deg, #211618 0%, #2f1f21 50%, #1a1d1e 100%); }
.yt-placeholder--v2 .yt-placeholder::after {
    background:
        radial-gradient(ellipse at bottom left, rgba(218, 37, 28, 0.22) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.45) 100%);
}
.yt-placeholder--v3 { background: linear-gradient(135deg, #1a1d1e 0%, #1f2426 55%, #11171a 100%); }
.yt-placeholder--v3 .yt-placeholder::after {
    background:
        radial-gradient(ellipse at top left, rgba(218, 37, 28, 0.16) 0%, transparent 50%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.yt-placeholder--v4 { background: linear-gradient(135deg, #14171a 0%, #2a2026 60%, #1a1d1e 100%); }
.yt-placeholder--v4 .yt-placeholder::after {
    background:
        radial-gradient(ellipse at bottom right, rgba(218, 37, 28, 0.20) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.5) 100%);
}

@media (max-width: 600px) {
    .yt-placeholder { padding: 18px 18px 56px; }
    .yt-placeholder__watermark { font-size: 160px; bottom: -22px; right: -10px; }
    .yt-placeholder__title { font-size: 1rem; }
}

/* Bottom CTA band — see shared `.cta-band` near the top of this file. */

/* ── Services Page — Responsive ─────────────────────── */
@media (max-width: 980px) {
    .service-panel { padding: 56px 0; }
    .service-panel__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .service-panel--dyno { padding: 64px 0; }
    .dyno-stats { grid-template-columns: repeat(2, 1fr); }
    .dyno-videos__grid { grid-template-columns: 1fr; }
    .dyno-features { padding: 24px 22px; }
}
@media (max-width: 600px) {
    .services-jump { gap: 8px; }
    .services-jump__link { padding: 8px 14px; font-size: 0.8rem; }
    .service-panel { padding: 44px 0; }
    .service-panel__numeral { font-size: 130px; top: 8px; right: -16px; }
    .service-contact { padding: 22px 20px 20px; }
    .service-disclaimer { padding: 20px 18px 18px; }
    .dyno-stats { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────
   News & Events page (page-news-events.php)
   Anatomy: cream intro band → press coverage panel
   (white) with pull-quote sidebar → 2-up YouTube
   videos (cream) → dark mailing-list spotlight with
   inline CF7 form card → red CTA band.
   Reuses the existing .yt-placeholder card system. */

/* Intro band, content panels, sidebar callout, form card, CTA band —
   see SHARED COMPONENTS near the top of this file. */

.news-jump {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
}
.news-jump__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 2px solid rgba(26, 29, 30, 0.18);
    background: #fff;
    color: var(--c-dark);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.news-jump__link span {
    color: var(--c-red);
    font-size: 0.78rem;
    letter-spacing: 0.15em;
}
.news-jump__link:hover,
.news-jump__link:focus-visible {
    border-color: var(--c-red);
    color: var(--c-red);
    transform: translateY(-1px);
}

/* Press subheading + article CTA wrap (page-specific extras inside the
   shared .content-panel). */
.news-press__subheading {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.news-press__link-wrap {
    margin: 22px 0 0;
}

/* Featured Videos band — sits between the press panel and the mailing list. */
.news-videos {
    background: var(--c-cream, #f5f1ea);
    padding: 64px 0 72px;
}
.news-videos__header {
    text-align: center;
    margin: 0 0 36px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.news-videos__eyebrow {
    margin: 0 0 8px;
    color: var(--c-red);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.news-videos__heading {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark);
    letter-spacing: 0.01em;
}
.news-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.news-video {
    margin: 0;
}
.news-video .yt-facade-wrap {
    margin: 0;
    border: 1px solid rgba(26, 29, 30, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.news-video__caption {
    margin-top: 14px;
    color: var(--c-dark);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

/* Mailing list panel — dark spotlight with the form on a white card. */
.news-mailing__quote {
    margin: 0 0 22px;
    padding: 16px 22px;
    border-left: 4px solid var(--c-red);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
    line-height: 1.55;
    font-style: italic;
}
.news-mailing__quote p { margin: 0; }

/* Form card + bottom CTA band — see SHARED COMPONENTS near the top of this file. */

@media (max-width: 980px) {
    .news-videos__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .news-jump { gap: 8px; }
    .news-jump__link { padding: 8px 14px; font-size: 0.8rem; }
    .news-videos { padding: 44px 0 50px; }
}

/* =====================================================================
   NicKey Registry — page-registry.php
   Mirrors the news-events architecture:
   intro band → about panel → 4 category cards → dark submission spotlight
   → red gradient CTA. Buttons follow brand standard (sharp rectangles).
   ===================================================================== */

/* Intro band — see shared `.intro-band` near the top of this file. */

/* Jump nav (sharp rectangles, no pills) */
.registry-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 24px auto 0;
}
.registry-jump__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 2px solid var(--c-dark, #1a1d1e);
    color: var(--c-dark, #1a1d1e);
    background: transparent;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.registry-jump__link span {
    color: var(--c-red, #DA251C);
    font-weight: 800;
}
.registry-jump__link:hover {
    background: var(--c-dark, #1a1d1e);
    color: #fff;
}
.registry-jump__link:hover span { color: #fff; }
.registry-jump__link:focus-visible {
    outline: 3px solid var(--c-red, #DA251C);
    outline-offset: 4px;
}

/* Content panel + sidebar callout — see SHARED COMPONENTS near the top of this file. */

/* Categories grid ----------------------------------------------------- */
.registry-categories {
    background: #f5f1ea;
    padding: 80px 0 90px;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.registry-categories__header {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}
.registry-categories__eyebrow {
    color: var(--c-red, #DA251C);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.85rem;
    margin: 0 0 12px;
}
.registry-categories__heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark, #1a1d1e);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.08;
    margin: 0 0 16px;
}
.registry-categories__lede {
    color: #3a3f41;
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
}
.registry-categories__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

/* Single category card */
.registry-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 12px 36px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.registry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px rgba(0,0,0,0.1);
}
.registry-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #1a1d1e;
    overflow: hidden;
}
.registry-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.registry-card__media-placeholder {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, rgba(218,37,28,0.18) 0%, transparent 55%),
        linear-gradient(135deg, #262a2b 0%, #1a1d1e 60%, #0f1112 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.registry-card__media-watermark {
    position: absolute;
    bottom: -28px;
    right: -10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    color: rgba(255,255,255,0.06);
    font-size: 240px;
    line-height: 1;
    pointer-events: none;
}
.registry-card__media-numeral {
    position: relative;
    color: var(--c-red, #DA251C);
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 4rem;
    letter-spacing: 0.02em;
}
.registry-card__body {
    padding: 30px 28px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.registry-card__numeral {
    color: var(--c-red, #DA251C);
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.registry-card__name {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark, #1a1d1e);
    font-size: 1.4rem;
    letter-spacing: -0.005em;
    line-height: 1.15;
    margin: 0 0 8px;
}
.registry-card__tagline {
    color: #6b6f72;
    font-size: 0.92rem;
    font-style: italic;
    margin: 0 0 14px;
}
.registry-card__copy {
    color: #3a3f41;
    font-size: 0.96rem;
    line-height: 1.6;
}
.registry-card__copy p { margin: 0 0 12px; }

.registry-card__feature {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 2px solid var(--c-red, #DA251C);
}
.registry-card__feature-eyebrow {
    color: var(--c-red, #DA251C);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 800;
    margin: 0 0 6px;
}
.registry-card__feature-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    color: var(--c-dark, #1a1d1e);
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0 0 10px;
}
.registry-card__feature-body {
    color: #3a3f41;
    font-size: 0.92rem;
    line-height: 1.6;
}
.registry-card__feature-body p { margin: 0 0 10px; }
.registry-card__feature-body p:last-child { margin-bottom: 0; }

/* Submission requirements list ---------------------------------------- */
.registry-req-list {
    list-style: none;
    counter-reset: req;
    padding: 0;
    margin: 22px 0 0;
}
.registry-req-list li {
    counter-increment: req;
    position: relative;
    padding: 12px 14px 12px 56px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--c-red, #DA251C);
    color: #e4e0d6;
    font-size: 0.98rem;
    line-height: 1.45;
}
.registry-req-list li::before {
    content: counter(req, decimal-leading-zero);
    position: absolute;
    left: 14px;
    top: 12px;
    color: var(--c-red, #DA251C);
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

/* Submission form card + bottom CTA band — see SHARED COMPONENTS near
   the top of this file. */

/* Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
    .registry-categories__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
    .registry-jump { gap: 8px; }
    .registry-jump__link { padding: 8px 14px; font-size: 0.78rem; }
    .registry-categories { padding: 50px 0 56px; }
    .registry-card__body { padding: 24px 22px 22px; }
    .registry-card__name { font-size: 1.2rem; }
}

/* =====================================================================
   Finance page (page-finance.php)
   Anatomy: intro band w/ inline apply CTA → light content panel
   (partner copy + branded "lending partner" sidebar card) → dark
   content panel hosting a 3-step grid → light highlights panel with
   a checked feature list → red CTA band with disclaimer.
   Uses shared .intro-band, .content-panel, .cta-band components.
   ===================================================================== */

/* Inline CTA under the intro lede */
.intro-band__cta {
    margin: 28px 0 0;
}

/* Partner section ----------------------------------------------------- */
.finance-partner__cta {
    margin: 26px 0 0;
}

/* Branded lending-partner sidebar card (dark, racy) */
.finance-partner-card {
    background: linear-gradient(160deg, #1a1d1e 0%, #262a2b 60%, #1a1d1e 100%);
    color: #fff;
    border-top: 4px solid var(--c-red);
    padding: 32px 28px 28px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    position: relative;
}
.finance-partner-card__eyebrow {
    margin: 0 0 8px;
    color: var(--c-red-bright, #ff5f55);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.78rem;
}
.finance-partner-card__name {
    margin: 0 0 10px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: 0.02em;
}
.finance-partner-card__tagline {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.78);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.4;
}
.finance-partner-card__list {
    list-style: none;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 14px;
}
.finance-partner-card__list li {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 12px;
    align-items: baseline;
}
.finance-partner-card__label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.55);
}
.finance-partner-card__value {
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    word-break: break-word;
}
.finance-partner-card__value:hover { color: var(--c-red-bright, #ff5f55); }

/* How it works (dark panel) ------------------------------------------ */
.finance-steps__header {
    max-width: 760px;
    margin: 0 auto 44px;
    text-align: center;
}
.finance-steps__intro {
    margin: 14px auto 0;
    max-width: 680px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.02rem;
    line-height: 1.6;
}

.finance-steps__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    counter-reset: fin-step;
}
.finance-step {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border-top: 3px solid var(--c-red);
    padding: 36px 26px 28px;
    color: #fff;
    transition: transform 0.2s ease, background 0.2s ease;
}
.finance-step:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.06);
}
.finance-step__num {
    display: block;
    margin: 0 0 14px;
    font-family: var(--font-sans);
    font-weight: 800;
    color: var(--c-red);
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: 0.02em;
}
.finance-step__title {
    margin: 0 0 12px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.finance-step__body {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
    line-height: 1.6;
}

/* Highlights panel ---------------------------------------------------- */
.finance-highlights {
    align-self: stretch;
}
.finance-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.finance-features li {
    position: relative;
    padding: 12px 16px 12px 44px;
    background: var(--c-cream, #f5f1ea);
    border-left: 3px solid var(--c-red);
    color: var(--c-dark);
    font-size: 0.98rem;
    line-height: 1.45;
}
.finance-features li::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-55%) rotate(45deg);
    width: 7px;
    height: 13px;
    border-right: 2.5px solid var(--c-red);
    border-bottom: 2.5px solid var(--c-red);
}

/* Disclaimer below CTA buttons ---------------------------------------- */
.finance-disclaimer {
    margin: 24px auto 0;
    max-width: 720px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
    .finance-steps__grid { grid-template-columns: 1fr; gap: 18px; }
    .finance-step { padding: 28px 22px 22px; }
    .finance-step__num { font-size: 2.2rem; margin-bottom: 10px; }
}
@media (max-width: 600px) {
    .finance-partner-card { padding: 26px 22px 22px; }
    .finance-partner-card__list li { grid-template-columns: 60px 1fr; gap: 10px; }
}

/* =====================================================================
   Contact page (page-contact.php)
   Anatomy: cream intro band → light content panel (3 contact tiles +
   hours on the left, form-card on the right) → full-bleed Leaflet map
   with a sticky info card overlay → red CTA band.
   Reuses .intro-band, .content-panel, .form-card, .cta-band, .dealer-popup.
   ===================================================================== */

/* Contact tiles (Visit / Call / Email) -------------------------------- */
.contact-tiles {
    list-style: none;
    margin: 28px 0 36px;
    padding: 0;
    display: grid;
    gap: 14px;
}
.contact-tile {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: flex-start;
    background: var(--c-cream, #f5f1ea);
    border-left: 3px solid var(--c-red);
    padding: 20px 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}
.contact-tile__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-red);
    color: #fff;
    border-radius: 0;
    flex-shrink: 0;
}
.contact-tile__body { min-width: 0; }
.contact-tile__label {
    margin: 0 0 4px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.74rem;
}
.contact-tile__value {
    margin: 0 0 6px;
    color: var(--c-dark);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
}
.contact-tile__value a {
    color: var(--c-dark);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    word-break: break-word;
}
.contact-tile__value a:hover {
    color: var(--c-red);
    border-bottom-color: var(--c-red);
}
.contact-tile__hint {
    margin: 0;
    color: rgba(26, 29, 30, 0.65);
    font-size: 0.86rem;
    line-height: 1.4;
}
.contact-tile__link {
    display: inline-block;
    margin-top: 4px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
}
.contact-tile__link:hover { color: var(--c-red-hover); }

/* Hours card ---------------------------------------------------------- */
.contact-hours {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.contact-hours .eyebrow { margin-bottom: 14px; }
.contact-hours__list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}
.contact-hours__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.contact-hours__row:last-child { border-bottom: 0; }
.contact-hours__row dt {
    margin: 0;
    color: var(--c-dark);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.contact-hours__row dd {
    margin: 0;
    color: #4a4f51;
    font-size: 0.95rem;
    text-align: right;
}
.contact-hours__row.is-today {
    background: rgba(218, 37, 28, 0.06);
    border-left: 3px solid var(--c-red);
    border-bottom-style: solid;
    margin: 0 -10px;
    padding: 10px 12px;
}
.contact-hours__row.is-today dt,
.contact-hours__row.is-today dd { color: var(--c-dark); }
.contact-hours__today {
    display: inline-block;
    background: var(--c-red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    padding: 3px 8px;
    line-height: 1;
}
.contact-hours__note {
    margin: 16px 0 0;
    color: rgba(26, 29, 30, 0.7);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Form card overrides on this page ------------------------------------ */
.contact-form-card { align-self: start; }

/* Map section --------------------------------------------------------- */
.contact-map-section {
    background: var(--c-cream, #f5f1ea);
    padding: 64px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.contact-map-section__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 32px;
}
.contact-map-section__heading {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark);
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.contact-map-wrap {
    position: relative;
    margin: 0;
}
.contact-map {
    width: 100%;
    height: 520px;
    background: #1a1d1e;
    z-index: 0;
}
.contact-pin svg { display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35)); }

.contact-map-card {
    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 2;
    width: min(340px, calc(100% - 48px));
    background: #fff;
    color: var(--c-dark);
    border-top: 4px solid var(--c-red);
    padding: 26px 26px 24px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.22);
}
.contact-map-card__eyebrow {
    margin: 0 0 6px;
    color: var(--c-red);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.74rem;
}
.contact-map-card__name {
    margin: 0 0 10px;
    font-family: var(--font-sans);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--c-dark);
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.contact-map-card__addr {
    margin: 0 0 14px;
    color: #3a3f41;
    font-size: 0.98rem;
    line-height: 1.45;
}
.contact-map-card__links {
    list-style: none;
    margin: 0 0 18px;
    padding: 14px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: grid;
    gap: 8px;
}
.contact-map-card__links a {
    color: var(--c-dark);
    font-weight: 700;
    font-size: 0.95rem;
    word-break: break-word;
}
.contact-map-card__links a:hover { color: var(--c-red); }

.contact-map-card .btn-red {
    display: inline-block;
    margin: 0;
}

/* Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
    .contact-tile { padding: 18px 18px; }
    .contact-tile__icon { width: 40px; height: 40px; }
    .contact-map { height: 420px; }
    .contact-map-card {
        position: static;
        width: auto;
        margin: -36px 16px 0;
    }
}
@media (max-width: 600px) {
    .contact-map-section { padding-top: 48px; }
    .contact-map { height: 340px; }
    .contact-tiles { gap: 10px; }
    .contact-tile {
        grid-template-columns: 44px 1fr;
        gap: 14px;
        padding: 16px 16px;
    }
    .contact-tile__icon { width: 36px; height: 36px; }
    .contact-tile__icon svg { width: 18px; height: 18px; }
    .contact-hours__row dd { font-size: 0.88rem; }
}

/* ── 404 page ───────────────────────────────────────
   Wrong-turn template. Reuses .intro-band + .cta-band;
   adds a number-plate style 404, a search input, and
   a numbered list of popular destinations.            */
.nwi-404 .intro-band { padding-bottom: 48px; }

.nwi-404__plate {
    display: inline-block;
    margin: 12px 0 18px;
    padding: 8px 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(72px, 12vw, 132px);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--c-red);
    background: #fff;
    border: 4px solid var(--c-dark);
    box-shadow: 6px 6px 0 var(--c-dark);
}

.nwi-404__search {
    display: flex;
    max-width: 560px;
    margin: 28px 0 0;
    border: 2px solid var(--c-dark);
    background: #fff;
    transition: box-shadow 0.2s ease;
}

.nwi-404__search:focus-within {
    box-shadow: 4px 4px 0 var(--c-red);
}

.nwi-404__search input[type="search"] {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 14px 16px;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    background: transparent;
    color: var(--c-dark);
}

.nwi-404__search input[type="search"]::placeholder {
    color: #888;
}

.nwi-404__search button {
    border: 0;
    background: var(--c-red);
    color: #fff;
    padding: 0 26px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: background 0.2s ease;
}

.nwi-404__search button:hover { background: var(--c-red-hover); }

.nwi-404__search button:focus-visible {
    outline: 3px solid var(--c-red);
    outline-offset: 4px;
}

.nwi-404__links-section {
    background: #fff;
    padding: 64px 0 72px;
}

.nwi-404__links-heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-dark);
    font-size: clamp(24px, 3vw, 32px);
    margin: 4px 0 32px;
}

.nwi-404__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.nwi-404__links li { margin: 0; }

.nwi-404__links a {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px;
    row-gap: 4px;
    align-items: baseline;
    padding: 22px 24px;
    background: #f7f7f7;
    border: 2px solid transparent;
    border-left: 4px solid var(--c-red);
    color: var(--c-dark);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nwi-404__links a:hover,
.nwi-404__links a:focus-visible {
    background: #fff;
    border-color: var(--c-dark);
    border-left-color: var(--c-red);
    transform: translateX(4px);
}

.nwi-404__links a:focus-visible {
    outline: 3px solid var(--c-red);
    outline-offset: 4px;
}

.nwi-404__link-num {
    grid-row: 1 / span 2;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: var(--c-red);
    letter-spacing: 0.04em;
    line-height: 1;
}

.nwi-404__link-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-dark);
}

.nwi-404__link-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .nwi-404__plate { box-shadow: 4px 4px 0 var(--c-dark); border-width: 3px; }
    .nwi-404__links { grid-template-columns: 1fr; }
    .nwi-404__search { flex-direction: column; }
    .nwi-404__search button { padding: 14px; }
}

/* ── WP core [gallery] shortcode ────────────────────
   Grid override of the default gallery markup. Pairs
   with the use_default_gallery_style → false filter
   in functions.php which suppresses WP's inline
   <style> block. The shortcode's `columns="N"`
   attribute drives the layout via .gallery-columns-N. */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 0 24px;
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }

.gallery .gallery-item {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.gallery .gallery-icon { margin: 0; }

.gallery .gallery-icon a,
.gallery .gallery-icon img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery .gallery-icon img {
    border: 0;
    background: var(--c-dark);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery .gallery-icon a:hover img,
.gallery .gallery-icon a:focus-visible img {
    opacity: 0.88;
}

.gallery .gallery-icon a:focus-visible {
    outline: 3px solid var(--c-red);
    outline-offset: 3px;
}

.gallery .gallery-caption {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    padding: 6px 2px 0;
    text-align: left;
    margin: 0;
}

@media (max-width: 720px) {
    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6,
    .gallery-columns-7,
    .gallery-columns-8,
    .gallery-columns-9 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .gallery-columns-2,
    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6,
    .gallery-columns-7,
    .gallery-columns-8,
    .gallery-columns-9 {
        grid-template-columns: 1fr;
    }
}