/* ============================================================================
   CITY HUB — minimal stylesheet. The page uses the SITE'S existing design
   system (.section, .container, .hero, .calc, .steps, .tools-grid, .features,
   .cta, .tag, .heading, .subtext, .btn .btn-red etc.) from front-page.php's
   inline styles, so this file only adds what's specific to the city hub:
   the install cost calculator inputs (different from the savings calc),
   the dealer/service hairline tables, the FAQ accordion, the trust strip,
   and the mobile sticky bar.
   ========================================================================== */

/* ─── Trust strip (logo-style row directly under hero) ───────────────────── */

.city-trust-strip {
    background: var(--gray-50, #fafafa);
    border-top: 1px solid var(--gray-200, #e5e5e5);
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    padding: 40px 0;
}
.city-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: center;
}
.city-trust-cell {
    text-align: center;
    border-right: 1px solid var(--gray-200, #e5e5e5);
    padding: 0 12px;
}
.city-trust-cell:last-child { border-right: none; }
.city-trust-num {
    font-size: 32px;
    font-weight: 700;
    color: var(--gray-900, #111);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}
.city-trust-num strong { color: var(--red, #dc2626); }
.city-trust-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gray-500, #777);
}
@media (max-width: 760px) {
    .city-trust-row { grid-template-columns: 1fr 1fr; gap: 20px; }
    .city-trust-cell { border-right: none; border-bottom: 1px solid var(--gray-200, #e5e5e5); padding-bottom: 16px; }
    .city-trust-cell:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}

/* ─── Brand logo strip — CDN logos + inline SVG wordmarks ────────────────── */

.city-brands {
    padding: 56px 0;
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    background: var(--white, #fff);
}
.city-brands-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    justify-content: center;
    align-items: center;
}
.city-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    color: var(--gray-700, #333);
    transition: color 0.2s, transform 0.15s;
}
.city-brand-logo svg {
    height: 36px;
    width: auto;
    display: block;
}
.city-brand-logo[title="BYD"]:hover           { color: #E60012; transform: translateY(-1px); }
.city-brand-logo[title="MG"]:hover            { color: #C8102E; transform: translateY(-1px); }
.city-brand-logo[title="Geely"]:hover         { color: #1F2937; transform: translateY(-1px); }
.city-brand-logo[title="Omoda"]:hover         { color: #B91C1C; transform: translateY(-1px); }
.city-brand-logo[title="Dongfeng"]:hover      { color: #C9171E; transform: translateY(-1px); }
.city-brand-logo[title="GWM Haval"]:hover     { color: #0F4C81; transform: translateY(-1px); }
.city-brand-logo[title="Volvo"]:hover         { color: #003057; transform: translateY(-1px); }
.city-brand-logo[title="BMW"]:hover           { color: #1C69D4; transform: translateY(-1px); }
.city-brand-logo[title="Mercedes-Benz"]:hover { color: #000000; transform: translateY(-1px); }
.city-brand-logo[title="Audi"]:hover          { color: #BB0A30; transform: translateY(-1px); }
@media (max-width: 760px) {
    .city-brands-row { gap: 20px 28px; }
    .city-brand-logo { height: 28px; }
    .city-brand-logo svg { height: 28px; }
}

/* ─── Install cost calculator (city-specific inputs, dark like homepage) ─── */

.city-installcalc { background: var(--gray-950, #0a0a0a); padding: 100px 0; }
@media (min-width: 768px) { .city-installcalc { padding: 128px 0; } }

.city-installcalc .tag,
.city-installcalc .heading,
.city-installcalc .subtext { color: inherit; }
.city-installcalc .tag { color: var(--red, #dc2626); }
.city-installcalc .heading { color: var(--white, #fff); }
.city-installcalc .subtext { color: var(--gray-400, #999); }

.city-installcalc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-top: 64px;
}
@media (max-width: 880px) {
    .city-installcalc-grid { grid-template-columns: 1fr; gap: 48px; }
}

.city-installcalc-inputs {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.city-installcalc-field label {
    display: block;
    font-size: 13px;
    color: var(--gray-400, #999);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.city-installcalc-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.city-installcalc-pill {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--gray-300, #bbb);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.city-installcalc-pill:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--white, #fff); }
.city-installcalc-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.city-installcalc-pill:has(input:checked) {
    background: var(--white, #fff);
    color: var(--gray-950, #0a0a0a);
    border-color: var(--white, #fff);
    font-weight: 600;
}
.city-installcalc-range {
    display: flex;
    flex-direction: column;
}
.city-installcalc-range-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.city-installcalc-range-head span {
    font-size: 13px;
    color: var(--gray-400, #999);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.city-installcalc-range-head strong {
    font-size: 20px;
    font-weight: 600;
    color: var(--white, #fff);
    letter-spacing: -0.02em;
}
.city-installcalc-field input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: var(--gray-700, #333);
    border-radius: 3px;
    outline: none;
}
.city-installcalc-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red, #dc2626);
    cursor: pointer;
    border: 2px solid var(--white, #fff);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
}
.city-installcalc-field input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red, #dc2626);
    cursor: pointer;
    border: 2px solid var(--white, #fff);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
}

.city-installcalc-result {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 44px;
    text-align: center;
}
.city-installcalc-result .big {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--red, #dc2626);
}
.city-installcalc-result .big-label {
    font-size: 13px;
    color: var(--gray-400, #999);
    margin-top: 8px;
    margin-bottom: 32px;
}
.city-installcalc-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.city-installcalc-row span { font-size: 13px; color: var(--gray-500, #777); }
.city-installcalc-row strong { font-size: 14px; font-weight: 600; color: var(--white, #fff); }
.city-installcalc-result .calc-cta { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.city-installcalc-result .calc-cta p { font-size: 12px; color: var(--gray-500, #777); margin-top: 10px; }

/* ─── FAQ accordion (light section) ──────────────────────────────────────── */

.city-faq-list {
    max-width: 760px;
    margin: 64px auto 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--gray-200, #e5e5e5);
}
.city-faq-item {
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    padding: 24px 0;
}
.city-faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-900, #111);
    outline: none;
    letter-spacing: -0.01em;
}
.city-faq-item summary::-webkit-details-marker { display: none; }
.city-faq-item summary::after {
    content: "+";
    font-size: 22px;
    color: var(--gray-400, #999);
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
}
.city-faq-item[open] summary { color: var(--red, #dc2626); }
.city-faq-item[open] summary::after { content: "−"; color: var(--red, #dc2626); }
.city-faq-item > div {
    margin-top: 16px;
    font-size: 14px;
    color: var(--gray-600, #555);
    line-height: 1.75;
}
.city-faq-item > div p { margin: 0 0 10px; }
.city-faq-item > div p:last-child { margin-bottom: 0; }

/* ─── Sticky mobile bottom bar (only on small viewports) ─────────────────── */

.city-sticky { display: none; }
@media (max-width: 768px) {
    .city-sticky {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--white, #fff);
        border-top: 1px solid var(--gray-200, #e5e5e5);
        padding: 10px;
        z-index: 100;
        display: flex;
        gap: 8px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(100%);
        transition: transform 0.2s ease-out;
    }
    .city-sticky.is-visible { transform: translateY(0); }
    .city-sticky .btn {
        flex: 1;
        text-align: center;
        padding: 12px;
        font-size: 13px;
    }
}

/* ─── Reviews strip (Hellopeter + Google badges) ─────────────────────────── */

.city-reviews-strip {
    background: var(--white, #fff);
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
    padding: 24px 0;
}
.city-reviews-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: stretch;
    justify-content: center;
}

/* Two-cell badge: branded logo (left) + neutral white rating (right) */
.city-review-badge {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s;
    background: var(--white, #fff);
    overflow: hidden;
    min-height: 56px;
}
.city-review-badge:hover {
    border-color: var(--gray-400, #999);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Logo cell */
.city-review-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -0.01em;
}
.city-review-logo svg { display: block; }

/* Hellopeter brand: teal background + white wordmark */
.city-review-logo--hp {
    background: #0FAFAB;
    color: #fff;
}
.city-review-logo--hp .city-review-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #fff;
    color: #0FAFAB;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
}

/* Google brand: white background, multi-colour G svg, separator border */
.city-review-logo--g {
    background: #fff;
    color: var(--gray-900, #111);
    border-right: 1px solid var(--gray-200, #e5e5e5);
}

/* Rating cell — always white background */
.city-review-badge-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 18px;
    background: var(--white, #fff);
    gap: 2px;
}
.city-review-badge-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.city-review-badge-score {
    font-size: 18px;
    font-weight: 800;
    color: var(--gray-900, #111);
    letter-spacing: -0.02em;
    line-height: 1;
}
.city-review-badge-stars {
    color: #FBBC04;
    font-size: 13px;
    letter-spacing: 1px;
}
.city-review-badge-meta {
    font-size: 11px;
    color: var(--gray-500, #777);
    font-weight: 500;
}

.city-review-quote {
    flex: 1;
    min-width: 240px;
    font-size: 14px;
    font-style: italic;
    color: var(--gray-600, #555);
    margin: 0;
    max-width: 480px;
    align-self: center;
}
@media (max-width: 760px) {
    .city-reviews-row { justify-content: center; gap: 12px; }
    .city-review-quote { display: none; }
    .city-review-logo { padding: 0 12px; }
    .city-review-badge-inner { padding: 8px 12px; }
    .city-review-badge-score { font-size: 16px; }
}

/* ─── Brands strip — lead text + readable spacing ────────────────────────── */

.city-brands-lead {
    text-align: center;
    font-size: 13px;
    color: var(--gray-500, #777);
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* ─── How-it-works head row (heading + inline CTA) ───────────────────────── */

.city-how-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: end;
    margin-bottom: 8px;
    padding-bottom: 8px;
}
.city-how-head .tag { margin-bottom: 8px; }
.city-how-head .heading { margin-bottom: 8px; }
.city-how-head .subtext { margin: 0; }
.city-how-head .city-how-cta { white-space: nowrap; }
@media (max-width: 760px) {
    .city-how-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}

/* The .steps grid is already styled by the homepage's inline CSS, but the
   step's number-and-label paragraph needs a small color tweak when our
   "01 — Photos" pattern is used. */
.steps .step .step-num { color: var(--red, #dc2626); }

/* ─── Calculator minimum-fee note ────────────────────────────────────────── */

.city-installcalc-min {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: var(--gray-400, #999);
    line-height: 1.5;
    text-align: left;
    transition: all 0.2s;
}
.city-installcalc-min strong {
    color: var(--white, #fff);
    font-weight: 700;
}
.city-installcalc-min.is-active {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.3);
    color: var(--white, #fff);
}
.city-installcalc-min.is-active strong {
    color: var(--red, #dc2626);
}

/* ─── By-the-numbers stats (master hub) ──────────────────────────────────── */
.city-hub__btn-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.city-hub__btn-num {
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 800;
    color: var(--gray-900, #111);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 12px;
}
.city-hub__btn-num strong { color: var(--red, #dc2626); }
.city-hub__btn-stat h3 { font-size: 15px; margin-bottom: 6px; }
.city-hub__btn-stat p { font-size: 12px; color: var(--gray-500, #777); line-height: 1.5; }
@media (max-width: 880px) {
    .city-hub__btn-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
    .city-hub__btn-grid { grid-template-columns: 1fr; }
}

/* ─── Service centres grid (service spoke) ───────────────────────────────── */
.city-hub__service-centres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
    margin-top: 56px;
}
.city-hub__service-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
}
.city-hub__service-centre-list { display: flex; flex-direction: column; gap: 16px; }
.city-hub__service-centre {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px;
    background: var(--white, #fff);
    border-radius: 10px;
    border: 1px solid var(--gray-200, #e5e5e5);
    transition: border-color 0.2s, transform 0.15s;
}
.city-hub__service-centre:hover { border-color: var(--gray-700, #333); transform: translateY(-1px); }
.city-hub__service-centre-name { font-size: 15px; font-weight: 700; color: var(--gray-900, #111); }
.city-hub__service-centre-name a { color: inherit; text-decoration: none; }
.city-hub__service-centre-name a:hover { color: var(--red, #dc2626); }
.city-hub__service-centre-suburb { font-size: 13px; color: var(--gray-500, #777); }
.city-hub__service-centre-phone {
    font-size: 13px;
    color: var(--red, #dc2626);
    text-decoration: none;
    font-weight: 600;
    margin-top: 4px;
}
.city-hub__service-centre-phone:hover { text-decoration: underline; }

/* ─── Service pricing table ──────────────────────────────────────────────── */
.city-hub__pricing-table-wrap {
    margin-top: 48px;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--gray-200, #e5e5e5);
    background: var(--white, #fff);
}
.city-hub__pricing-table { width: 100%; border-collapse: collapse; }
.city-hub__pricing-table th {
    text-align: left;
    padding: 18px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500, #777);
    background: var(--gray-50, #fafafa);
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
}
.city-hub__pricing-table td {
    padding: 18px 20px;
    font-size: 14px;
    color: var(--gray-700, #333);
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
    vertical-align: top;
}
.city-hub__pricing-table tr:last-child td { border-bottom: none; }
.city-hub__pricing-brand { font-weight: 700; color: var(--gray-900, #111); }
.city-hub__pricing-cost { font-weight: 700; color: var(--red, #dc2626); white-space: nowrap; }
.city-hub__pricing-notes { font-size: 13px; color: var(--gray-500, #777); }
.city-hub__pricing-caveat {
    margin-top: 20px;
    font-size: 12px;
    color: var(--gray-500, #777);
    text-align: center;
    font-style: italic;
}
@media (max-width: 640px) {
    .city-hub__pricing-table th,
    .city-hub__pricing-table td { padding: 12px 14px; font-size: 13px; }
}

/* ─── Emergency callout (repair spoke) ───────────────────────────────────── */
.city-hub__emergency {
    background: var(--gray-950, #0a0a0a);
    position: relative;
    overflow: hidden;
}
.city-hub__emergency::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.18) 0%, transparent 70%);
    pointer-events: none;
}
.city-hub__emergency-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
    align-items: center;
}
.city-hub__emergency .tag { color: #ff8a8a; }
.city-hub__emergency .heading { color: var(--white, #fff); }
.city-hub__emergency-sub {
    font-size: 16px;
    color: var(--gray-400, #999);
    line-height: 1.6;
    margin: 12px 0 28px;
    max-width: 540px;
}
.city-hub__emergency-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.city-hub__emergency-actions .btn-red {
    font-size: 18px;
    padding: 16px 28px;
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.4);
}
.city-hub__emergency-promise {
    margin-top: 18px;
    font-size: 13px;
    color: var(--gray-300, #bbb);
    font-style: italic;
}
.city-hub__emergency-covers {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 28px 32px;
}
.city-hub__emergency-covers h3 {
    color: var(--white, #fff);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 14px;
}
.city-hub__emergency-covers ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.city-hub__emergency-covers li {
    color: var(--gray-300, #bbb);
    font-size: 14px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}
.city-hub__emergency-covers li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--red, #dc2626);
    font-weight: 700;
}
@media (max-width: 880px) {
    .city-hub__emergency-inner { grid-template-columns: 1fr; gap: 32px; }
    .city-hub__emergency-actions .btn-red { font-size: 16px; padding: 14px 24px; }
    /* Reposition the red glow into the viewport at narrow widths — at desktop
       left:80% works, but on a 375px iPhone the 600px circle drifts off-screen
       and loses its visual purpose. */
    .city-hub__emergency::before {
        left: 50%;
        top: 0;
        width: 400px;
        height: 400px;
    }
}

/* ─── Parts categories + suppliers (spares spoke) ────────────────────────── */
.city-hub__parts-grid { margin-bottom: 56px; }
.city-hub__parts-suppliers {
    max-width: 760px;
    margin: 56px auto 0;
    padding: 32px;
    background: var(--gray-50, #fafafa);
    border-radius: 14px;
    border: 1px solid var(--gray-200, #e5e5e5);
}
.city-hub__parts-suppliers h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 14px;
}
.city-hub__parts-suppliers ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.city-hub__parts-suppliers li {
    color: var(--gray-700, #333);
    font-size: 14px;
    line-height: 1.55;
}
.city-hub__parts-suppliers li strong { color: var(--gray-900, #111); font-weight: 700; }

/* ─── Dealer directory (buy spoke) ───────────────────────────────────────── */
.city-hub__dealer-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    margin-top: 56px;
}
.city-hub__dealer-brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gray-200, #e5e5e5);
}
.city-hub__dealer-list { display: flex; flex-direction: column; gap: 14px; }
.city-hub__dealer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    background: var(--white, #fff);
    border-radius: 10px;
    border: 1px solid var(--gray-200, #e5e5e5);
    transition: border-color 0.2s, transform 0.15s;
}
.city-hub__dealer:hover { border-color: var(--gray-700, #333); transform: translateY(-1px); }
.city-hub__dealer-name { font-size: 15px; font-weight: 700; color: var(--gray-900, #111); }
.city-hub__dealer-name a { color: inherit; text-decoration: none; }
.city-hub__dealer-name a:hover { color: var(--red, #dc2626); }
.city-hub__dealer-suburb { font-size: 13px; color: var(--gray-500, #777); }
.city-hub__dealer-models {
    font-size: 12px;
    color: var(--gray-700, #333);
    margin-top: 6px;
    line-height: 1.5;
}
.city-hub__dealer-phone {
    font-size: 13px;
    color: var(--red, #dc2626);
    text-decoration: none;
    font-weight: 600;
    margin-top: 6px;
}
.city-hub__dealer-phone:hover { text-decoration: underline; }
.city-hub__dealer-caveat {
    margin-top: 32px;
    font-size: 12px;
    color: var(--gray-500, #777);
    text-align: center;
    font-style: italic;
}

/* ─── Incentives + finance cards (buy spoke) ─────────────────────────────── */
.city-hub__incentives {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 48px;
}
.city-hub__incentive {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 14px;
    transition: border-color 0.2s, transform 0.15s;
}
.city-hub__incentive:hover { border-color: var(--gray-700, #333); transform: translateY(-1px); }
.city-hub__incentive-kind {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--red, #dc2626);
    background: var(--red-glow, rgba(220, 38, 38, 0.08));
    padding: 4px 10px;
    border-radius: 999px;
}
.city-hub__incentive-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--gray-900, #111);
    margin: 0;
    line-height: 1.35;
}
.city-hub__incentive-detail {
    font-size: 14px;
    color: var(--gray-700, #333);
    line-height: 1.6;
    margin: 0;
}
.city-hub__incentive-eligibility {
    font-size: 13px;
    color: var(--gray-500, #777);
    margin: 4px 0 0;
    line-height: 1.5;
}
.city-hub__incentive-eligibility strong { color: var(--gray-700, #333); font-weight: 700; }
.city-hub__incentives-caveat {
    margin-top: 24px;
    font-size: 12px;
    color: var(--gray-500, #777);
    text-align: center;
    font-style: italic;
}

/* ─── Cross-spoke internal-link grid ─────────────────────────────────────── */
.city-hub__cross-links { margin-top: 48px; }
.city-hub__cross-links-back {
    margin: 32px auto 0;
    text-align: center;
    font-size: 14px;
    color: var(--gray-500, #777);
}
.city-hub__cross-links-back a {
    color: var(--gray-900, #111);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid var(--gray-300, #ccc);
    transition: color 0.2s, border-color 0.2s;
}
.city-hub__cross-links-back a:hover {
    color: var(--red, #dc2626);
    border-color: var(--red, #dc2626);
}

/* ─── Author + last-verified byline (E-E-A-T signal, Track A.5) ──────────── */
.city-hub__byline {
    padding: 14px 0;
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
    background: var(--white, #fff);
}
.city-hub__byline-line {
    margin: 0;
    text-align: center;
    font-size: 12px;
    color: var(--gray-500, #777);
    letter-spacing: 0.02em;
}
.city-hub__byline-line time { font-variant-numeric: tabular-nums; }
.city-hub__byline-sep { margin: 0 8px; opacity: 0.6; }
.city-hub__byline-author { color: var(--gray-700, #333); font-weight: 600; }

/* ─── Fear-buster panel (Track B.3 — the emotional spine) ────────────────── */
.city-hub__fear-busters {
    background: var(--gray-50, #fafafa);
    border-top: 1px solid var(--gray-100, #f5f5f5);
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
}
.city-hub__fear-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-top: 40px;
}
.city-hub__fear-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px;
    background: var(--white, #fff);
    border-radius: 14px;
    border: 1px solid var(--gray-200, #e5e5e5);
    transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.city-hub__fear-card:hover {
    border-color: var(--red, #dc2626);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.08);
}
.city-hub__fear-quote {
    font-size: 15px;
    font-style: italic;
    color: var(--gray-500, #777);
    margin: 0;
    line-height: 1.5;
}
.city-hub__fear-counter {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900, #111);
    margin: 0;
    line-height: 1.2;
}
.city-hub__fear-body {
    font-size: 14px;
    color: var(--gray-700, #333);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.city-hub__fear-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--red-glow, rgba(220, 38, 38, 0.06));
    border-radius: 10px;
    margin-top: 4px;
}
.city-hub__fear-stat-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--red, #dc2626);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.city-hub__fear-stat-label {
    font-size: 12px;
    color: var(--gray-500, #777);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.city-hub__fear-link {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--red, #dc2626);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.city-hub__fear-link:hover { border-color: var(--red, #dc2626); }

/* The "make your own fuel" desire amplifier — dark inversion below the 4 cards */
.city-hub__desire {
    margin-top: 44px;
    padding: 36px 32px;
    background: var(--gray-900, #111);
    color: var(--white, #fff);
    border-radius: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.city-hub__desire::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto auto;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.35) 0%, rgba(220, 38, 38, 0) 65%);
    pointer-events: none;
}
.city-hub__desire-eyebrow {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    color: var(--red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 8px;
}
.city-hub__desire-headline {
    position: relative;
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 14px;
    line-height: 1.1;
}
.city-hub__desire-body {
    position: relative;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 auto 22px;
    max-width: 640px;
    line-height: 1.55;
}
.city-hub__desire-cta {
    position: relative;
    display: inline-block;
    padding: 14px 28px;
    background: var(--red, #dc2626);
    color: var(--white, #fff);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.2s;
}
.city-hub__desire-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
}
@media (max-width: 640px) {
    .city-hub__desire-headline { font-size: 26px; }
    .city-hub__desire { padding: 28px 22px; }
}

/* ─── Compliance pill row (Track B.6 — trust band consolidation) ─────────── */
.city-compliance {
    padding: 18px 0 22px;
    background: var(--white, #fff);
    border-bottom: 1px solid var(--gray-100, #f5f5f5);
}
.city-compliance-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: center;
}
.city-compliance-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--gray-50, #fafafa);
    border: 1px solid var(--gray-200, #e5e5e5);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700, #333);
    letter-spacing: 0.01em;
    transition: border-color 0.2s, color 0.2s;
}
.city-compliance-pill::before {
    content: '✓';
    color: var(--red, #dc2626);
    font-weight: 800;
    font-size: 13px;
}
.city-compliance-pill:hover {
    border-color: var(--red, #dc2626);
    color: var(--gray-900, #111);
}
/* Kind-specific accents (optional — data file declares kind='cert' / 'promise' / 'speed') */
.city-compliance-pill--cert    { background: rgba(220, 38, 38, 0.04); }
.city-compliance-pill--promise { background: rgba(0, 122, 79, 0.04); }
.city-compliance-pill--promise::before { color: #007a4f; }

/* ─── Lifecycle ribbon (Track B.5 — the moat-selling visual spine) ───────── */
.city-hub__lifecycle {
    padding: 32px 0 36px;
    background: var(--gray-900, #111);
    color: var(--white, #fff);
    position: relative;
}
.city-hub__lifecycle::before {
    /* Subtle radial accent in the top-left so it doesn't read as a flat band */
    content: '';
    position: absolute;
    inset: -30% auto auto -10%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.18) 0%, rgba(220, 38, 38, 0) 70%);
    pointer-events: none;
}
.city-hub__lifecycle-eyebrow {
    position: relative;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--red, #dc2626);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 22px;
}
.city-hub__lifecycle-track {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    counter-reset: lifecycle;
}
/* Connecting line between nodes — a thin red gradient across the entire track */
.city-hub__lifecycle-track::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 7.14%;     /* 1 / 14 — centre of the first node */
    right: 7.14%;
    height: 2px;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.6) 50%, rgba(220, 38, 38, 0.15) 100%);
    z-index: 0;
}
.city-hub__lifecycle-node {
    position: relative;
    z-index: 1;
    text-align: center;
}
.city-hub__lifecycle-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 12px;
    color: var(--white, #fff);
    text-decoration: none;
    transition: transform 0.2s;
}
.city-hub__lifecycle-link:hover { transform: translateY(-2px); }
.city-hub__lifecycle-link:hover .city-hub__lifecycle-step {
    background: var(--red, #dc2626);
    border-color: var(--red, #dc2626);
}
.city-hub__lifecycle-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gray-900, #111);
    border: 2px solid rgba(255, 255, 255, 0.18);
    font-size: 16px;
    font-weight: 800;
    color: var(--white, #fff);
    font-variant-numeric: tabular-nums;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.city-hub__lifecycle-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--white, #fff);
    letter-spacing: 0.02em;
}
.city-hub__lifecycle-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
    max-width: 12ch;
}
.city-hub__lifecycle-here {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--red, #dc2626);
}

/* Active node — current page */
.city-hub__lifecycle-node.is-active .city-hub__lifecycle-step {
    background: var(--red, #dc2626);
    border-color: var(--red, #dc2626);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18), 0 6px 20px rgba(220, 38, 38, 0.35);
}
.city-hub__lifecycle-node.is-active .city-hub__lifecycle-label {
    color: var(--red, #dc2626);
}

@media (max-width: 900px) {
    /* Below 900px the 7-up grid gets too tight; switch to horizontal scroll */
    .city-hub__lifecycle-track {
        grid-template-columns: repeat(7, 130px);
        overflow-x: auto;
        gap: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 16px 8px;
        margin: 0 -16px;
    }
    .city-hub__lifecycle-track::after { left: 60px; right: 60px; }
    .city-hub__lifecycle-node { scroll-snap-align: center; }
    .city-hub__lifecycle-step { width: 48px; height: 48px; font-size: 14px; }
    .city-hub__lifecycle-track::after { top: 24px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Service grid (.tools-grid / .tool) — master-hub 6-card grid.
   These classes are reused from the homepage "tools" pattern, but the
   homepage stylesheet is NOT enqueued on city-hub pages — so without these
   rules the .tool-icon <img> renders at the PNG's natural ~500px size and
   blows out the layout. Defined here so city hubs are self-contained.
   ────────────────────────────────────────────────────────────────────── */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}
.tools-grid .tool {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 22px 22px;
    background: #fff;
    border: 1px solid var(--gray-200, #e8e8e8);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.tools-grid .tool:hover {
    border-color: var(--red, #dc2626);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.tools-grid .tool-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: var(--red-soft, #ffe6e6);
    border-radius: 12px;
    flex-shrink: 0;
}
.tools-grid .tool-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}
.tools-grid .tool h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 4px 0 0;
    color: var(--gray-900, #111);
}
.tools-grid .tool p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gray-600, #555);
    margin: 0;
    flex: 1;
}
.tools-grid .tool-arrow {
    font-size: 13px;
    font-weight: 700;
    color: var(--red, #dc2626);
    margin-top: 4px;
}
@media (max-width: 900px) {
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .tools-grid { grid-template-columns: 1fr; gap: 12px; }
    .tools-grid .tool { padding: 20px 18px; }
}

/* ============================================================================
   CITY HUB — RIVIAN-CLEAN REDESIGN (May 2026)
   Everything below is namespaced under .cpsa-city-hub so it cannot leak to the
   rest of the site or the kept spoke sections. Generic class names
   (.heading/.tag/.subtext/.centered/.faq/.final/.eyebrow) are deliberately
   renamed to .ch-* ; section-unique names (.fb/.svc/.nums/.feat/.car/.guide/
   .desire/.homecharge/.installcta/.photoband/.napbar/.citynav) are scoped and
   safe. The city hero keeps class .hero so city-hub.js sticky-bar still works.
   ========================================================================== */
.cpsa-city-hub{
  --ink:#232A25; --red:#DC2626; --red-dark:#B91C1C; --red-soft:#FFE6E6;
  --paper:#fff; --paper-soft:#F2F2F2; --paper-warm:#FAFAF8;
  --line:rgba(35,42,37,0.08); --mute:rgba(35,42,37,0.55);
  color:var(--ink); letter-spacing:-0.005em;
}
.cpsa-city-hub a{text-decoration:none;color:inherit;}
.cpsa-city-hub .wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.cpsa-city-hub .ch-block{padding:104px 0;}
.cpsa-city-hub .ch-centered{max-width:760px;margin:0 0 56px;}
.cpsa-city-hub .ch-row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 48px;}
.cpsa-city-hub .ch-tag{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--mute);margin:0 0 18px;}
.cpsa-city-hub .ch-heading{font-size:clamp(36px,3.2vw+12px,60px);font-weight:600;letter-spacing:-0.035em;line-height:1.02;margin:0 0 18px;color:#151515;}
.cpsa-city-hub .ch-subtext{font-size:18px;color:var(--mute);margin:0;line-height:1.5;max-width:640px;}
.cpsa-city-hub .ch-btn-light{background:#fff;color:var(--ink);}
.cpsa-city-hub .ch-btn-line{border:1.5px solid var(--ink);color:var(--ink);background:transparent;}

/* Sticky main nav on city pages (body class added by template) */
body.cpsa-city-page .cp-nav-band{position:sticky;top:0;z-index:200;}

/* HERO — photo-led, full-bleed, dark overlay, text bottom-left */
.cpsa-city-hub .hero{position:relative;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background-size:cover;background-position:center;}
.cpsa-city-hub .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,26,0.92) 0%,rgba(20,24,26,0.45) 45%,rgba(20,24,26,0.25) 100%);z-index:1;}
.cpsa-city-hub .hero-inner{max-width:1280px;margin:0 auto;padding:0 24px 56px;width:100%;position:relative;z-index:2;}
.cpsa-city-hub .hero .ch-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fff;margin:0 0 16px;background:var(--red);padding:7px 14px;border-radius:999px;}
.cpsa-city-hub .hero .ch-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;}
.cpsa-city-hub .hero h1{font-size:clamp(40px,5vw+10px,80px);font-weight:900;letter-spacing:-0.04em;line-height:0.9;margin:0 0 18px;color:#fff;text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,0.3);}
.cpsa-city-hub .hero .hero-desc{font-size:17px;line-height:1.55;color:rgba(255,255,255,0.9);max-width:600px;margin:0 0 28px;}
.cpsa-city-hub .hero-btns{display:flex;gap:12px;flex-wrap:wrap;}

/* NAP / critical-facts bar */
.cpsa-city-hub .napbar{background:var(--ink);color:#fff;padding:14px 0;}
.cpsa-city-hub .napbar-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-size:13px;}
.cpsa-city-hub .napbar .item{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,0.85);}
.cpsa-city-hub .napbar .item b{color:#fff;font-weight:700;}
.cpsa-city-hub .napbar .item svg{width:16px;height:16px;stroke:var(--red);fill:none;stroke-width:1.9;}
.cpsa-city-hub .napbar .phone{margin-left:auto;background:var(--red);color:#fff;padding:9px 18px;border-radius:8px;font-weight:700;}

/* CAPE TOWN SUB-NAV — sticky local navigation (top set by JS to nav height) */
.cpsa-city-hub .citynav{background:var(--ink);padding:0 24px;position:sticky;top:0;z-index:150;box-shadow:0 2px 14px rgba(0,0,0,0.12);}
.cpsa-city-hub .citynav-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;height:54px;}
.cpsa-city-hub .citynav-inner::-webkit-scrollbar{display:none;}
.cpsa-city-hub .citynav-city{font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;padding-right:18px;margin-right:8px;border-right:1px solid rgba(255,255,255,0.16);white-space:nowrap;flex-shrink:0;}
.cpsa-city-hub .citynav-city svg{width:16px;height:16px;stroke:var(--red);fill:none;stroke-width:2;}
.cpsa-city-hub .citynav-link{flex-shrink:0;font-size:14px;font-weight:500;color:rgba(255,255,255,0.6);padding:8px 14px;border-radius:8px;white-space:nowrap;}
.cpsa-city-hub .citynav-link.active{color:#fff;background:rgba(255,255,255,0.1);}
.cpsa-city-hub .citynav-link:hover{color:#fff;}
.cpsa-city-hub .citynav-switch{margin-left:auto;flex-shrink:0;font-size:13px;font-weight:500;color:rgba(255,255,255,0.5);padding:8px 12px;white-space:nowrap;}

/* FEAR-BUSTERS — pop via scale + contrast + brand red, no boxes */
.cpsa-city-hub .fb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;}
.cpsa-city-hub .fb{padding:52px 64px 44px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;}
.cpsa-city-hub .fb:nth-child(even){padding-left:64px;border-left:1px solid var(--line);}
.cpsa-city-hub .fb .fear{font-size:14px;font-weight:600;color:var(--mute);margin:0 0 14px;display:flex;align-items:center;gap:12px;}
.cpsa-city-hub .fb .fear::before{content:"";width:26px;height:3px;background:var(--red);border-radius:2px;flex-shrink:0;}
.cpsa-city-hub .fb h3{font-size:28px;font-weight:700;letter-spacing:-0.025em;margin:0 0 16px;line-height:1.08;color:#151515;}
.cpsa-city-hub .fb p{font-size:15px;color:var(--mute);line-height:1.6;margin:0 0 32px;}
.cpsa-city-hub .fb-foot{display:flex;align-items:flex-end;gap:14px;margin-top:auto;}
.cpsa-city-hub .fb-stat .n{font-size:clamp(52px,3.4vw+22px,72px);font-weight:800;letter-spacing:-0.045em;color:var(--red);line-height:0.85;}
.cpsa-city-hub .fb-stat .lbl{font-size:11px;color:var(--mute);margin-top:8px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600;}
.cpsa-city-hub .fb-link{font-size:14px;font-weight:600;color:var(--ink);margin-left:auto;align-self:flex-end;}
.cpsa-city-hub .fb-link:hover{color:var(--red);}

/* DESIRE — split-screen real photo | dark statement */
.cpsa-city-hub .desire{background:var(--ink);color:#fff;border-radius:20px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.cpsa-city-hub .desire-photo{background-size:cover;background-position:center;min-height:540px;}
.cpsa-city-hub .desire-text{padding:72px 60px;display:flex;flex-direction:column;justify-content:center;}
.cpsa-city-hub .desire .ch-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin:0 0 18px;}
.cpsa-city-hub .desire h2{font-size:clamp(34px,2.6vw+14px,56px);font-weight:600;letter-spacing:-0.04em;margin:0 0 20px;color:#fff;line-height:1.0;}
.cpsa-city-hub .desire p{font-size:18px;color:rgba(255,255,255,0.74);margin:0 0 30px;line-height:1.6;}
.cpsa-city-hub .desire .btn{align-self:flex-start;}

/* FULL-BLEED PHOTO BAND */
.cpsa-city-hub .photoband{position:relative;min-height:560px;display:flex;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden;}
.cpsa-city-hub .photoband::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,20,22,0.82) 0%,rgba(18,20,22,0.15) 45%,transparent 70%);}
.cpsa-city-hub .photoband-cap{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 24px 56px;width:100%;color:#fff;}
.cpsa-city-hub .photoband-cap .ch-eyebrow{font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.7);margin:0 0 12px;}
.cpsa-city-hub .photoband-cap h3{font-size:clamp(30px,2.8vw+10px,48px);font-weight:600;letter-spacing:-0.03em;line-height:1.02;margin:0 0 12px;max-width:640px;}
.cpsa-city-hub .photoband-cap p{font-size:17px;color:rgba(255,255,255,0.88);max-width:540px;margin:0 0 20px;line-height:1.5;}

/* CARS-TO-BUY EXCERPT */
.cpsa-city-hub .car-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cpsa-city-hub .car{display:flex;flex-direction:column;}
.cpsa-city-hub .car-photo{aspect-ratio:16/10;border-radius:14px;background:var(--paper-soft);background-size:cover;background-position:center;margin-bottom:16px;}
.cpsa-city-hub .car-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.cpsa-city-hub .car h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;margin:0;}
.cpsa-city-hub .car .price{font-size:18px;font-weight:800;letter-spacing:-0.02em;color:#151515;white-space:nowrap;}
.cpsa-city-hub .car .meta{font-size:13px;color:var(--mute);margin:6px 0 0;}
.cpsa-city-hub .car .view{font-size:14px;font-weight:600;color:var(--red);margin-top:12px;}

/* SERVICE GRID — borderless, hairline-divided */
.cpsa-city-hub .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:48px;row-gap:0;border-top:1px solid var(--line);}
.cpsa-city-hub .svc{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:40px 0;border-bottom:1px solid var(--line);}
.cpsa-city-hub .svc h3{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin:2px 0 0;}
.cpsa-city-hub .svc p{font-size:15px;color:var(--mute);margin:0;flex:1;line-height:1.55;}
.cpsa-city-hub .svc .arrow{font-size:14px;font-weight:600;color:var(--red);}
.cpsa-city-hub .ic{width:34px;height:34px;display:grid;place-items:start;color:var(--ink);flex-shrink:0;}
.cpsa-city-hub .ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* BY THE NUMBERS — giant editorial figures */
.cpsa-city-hub .nums{background:var(--paper-warm);}
.cpsa-city-hub .nums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 32px;}
.cpsa-city-hub .num .n{font-size:clamp(44px,4vw+8px,64px);font-weight:800;letter-spacing:-0.04em;color:var(--ink);line-height:0.95;margin-bottom:14px;}
.cpsa-city-hub .num .n strong,.cpsa-city-hub .num .n em{font-style:normal;font-weight:800;color:var(--red);}
.cpsa-city-hub .num .lbl{font-size:15px;font-weight:700;margin-bottom:8px;letter-spacing:-0.01em;}
.cpsa-city-hub .num .note{font-size:13px;color:var(--mute);line-height:1.55;}

/* HOME-CHARGING SPLIT */
.cpsa-city-hub .homecharge-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.02fr;align-items:stretch;border-radius:20px;overflow:hidden;background:var(--paper-soft);box-shadow:0 1px 0 var(--line);}
.cpsa-city-hub .homecharge-photo{background-size:cover;background-position:center;min-height:580px;}
.cpsa-city-hub .homecharge-text{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;}
.cpsa-city-hub .homecharge-text .ch-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);margin:0 0 14px;}
.cpsa-city-hub .homecharge-text h2{font-size:clamp(30px,2.4vw+12px,48px);font-weight:600;letter-spacing:-0.035em;line-height:1.02;margin:0 0 18px;color:#151515;}
.cpsa-city-hub .homecharge-text>p{font-size:17px;color:var(--mute);line-height:1.6;margin:0 0 26px;}
.cpsa-city-hub .hc-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:14px;}
.cpsa-city-hub .hc-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink);line-height:1.45;}
.cpsa-city-hub .hc-list svg{width:20px;height:20px;flex-shrink:0;stroke:var(--red);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:1px;}
.cpsa-city-hub .hc-list b{font-weight:700;}

/* WHY DIFFERENT */
.cpsa-city-hub .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.cpsa-city-hub .feat{display:flex;flex-direction:column;gap:14px;padding-top:32px;border-top:2px solid var(--ink);}
.cpsa-city-hub .feat h3{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin:2px 0 0;}
.cpsa-city-hub .feat p{font-size:15px;color:var(--mute);line-height:1.6;margin:0;}

/* INSTALL CTA BAND */
.cpsa-city-hub .installcta{background:var(--ink);color:#fff;}
.cpsa-city-hub .installcta-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;}
.cpsa-city-hub .installcta .ch-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--red);margin:0 0 14px;}
.cpsa-city-hub .installcta h2{font-size:clamp(32px,3vw+10px,52px);font-weight:600;letter-spacing:-0.035em;line-height:1.02;margin:0 0 16px;color:#fff;}
.cpsa-city-hub .installcta>div>p{font-size:17px;color:rgba(255,255,255,0.72);line-height:1.55;margin:0 0 26px;}
.cpsa-city-hub .installcta-price{display:flex;align-items:baseline;gap:10px;margin-bottom:22px;}
.cpsa-city-hub .installcta-price .n{font-size:48px;font-weight:800;letter-spacing:-0.03em;color:#fff;line-height:1;}
.cpsa-city-hub .installcta-price .lbl{font-size:14px;color:rgba(255,255,255,0.6);}
.cpsa-city-hub .installcta-side{display:flex;flex-direction:column;gap:0;}
.cpsa-city-hub .installcta-step{display:flex;gap:16px;padding:18px 0;border-top:1px solid rgba(255,255,255,0.12);}
.cpsa-city-hub .installcta-step .sn{font-size:14px;font-weight:800;color:var(--red);flex-shrink:0;}
.cpsa-city-hub .installcta-step .st{font-size:15px;color:rgba(255,255,255,0.9);line-height:1.4;}

/* GUIDES — editorial photo cards */
.cpsa-city-hub .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cpsa-city-hub .guide{display:flex;flex-direction:column;}
.cpsa-city-hub .guide-photo{aspect-ratio:16/10;background-size:cover;background-position:center;border-radius:14px;margin:0 0 18px;}
.cpsa-city-hub .guide .kicker{font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--red);margin:0 0 10px;}
.cpsa-city-hub .guide h3{font-size:20px;font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin:0 0 10px;color:#151515;}
.cpsa-city-hub .guide p{font-size:14px;color:var(--mute);line-height:1.55;margin:0 0 14px;flex:1;}
.cpsa-city-hub .guide .read{font-size:14px;font-weight:600;color:var(--ink);}
.cpsa-city-hub .guide:hover .read{color:var(--red);}

/* FAQ */
.cpsa-city-hub .ch-faq{max-width:860px;margin:0 auto;}
.cpsa-city-hub .ch-faq-item{border-bottom:1px solid var(--line);padding:22px 0;cursor:pointer;}
.cpsa-city-hub .ch-faq-item:first-child{border-top:1px solid var(--line);}
.cpsa-city-hub .ch-faq-q{font-size:17px;font-weight:700;letter-spacing:-0.01em;display:flex;justify-content:space-between;gap:16px;align-items:center;}
.cpsa-city-hub .ch-faq-q::after{content:"+";font-size:24px;font-weight:300;color:var(--red);}
.cpsa-city-hub .ch-faq-item.open .ch-faq-q::after{content:"\2212";}
.cpsa-city-hub .ch-faq-a{display:none;padding-top:12px;font-size:15px;color:var(--ink);line-height:1.6;}
.cpsa-city-hub .ch-faq-item.open .ch-faq-a{display:block;}

/* FINAL CTA */
.cpsa-city-hub .ch-final{background:var(--paper-warm);}
.cpsa-city-hub .ch-final-inner{max-width:1280px;margin:0 auto;background:var(--red);border-radius:24px;padding:56px 48px;text-align:center;color:#fff;}
.cpsa-city-hub .ch-final-inner .ch-tag{color:rgba(255,255,255,0.8);}
.cpsa-city-hub .ch-final-inner h2{font-size:clamp(32px,3vw+8px,52px);font-weight:600;letter-spacing:-0.035em;line-height:1;margin:0 0 14px;color:#fff;}
.cpsa-city-hub .ch-final-inner p{font-size:17px;color:rgba(255,255,255,0.9);max-width:600px;margin:0 auto 26px;}
.cpsa-city-hub .ch-final .ch-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* RESPONSIVE */
@media(max-width:900px){
  .cpsa-city-hub .fb-grid,.cpsa-city-hub .svc-grid,.cpsa-city-hub .nums-grid,.cpsa-city-hub .feat-grid,.cpsa-city-hub .car-grid,.cpsa-city-hub .guide-grid{grid-template-columns:1fr 1fr;}
  .cpsa-city-hub .installcta-inner{grid-template-columns:1fr;gap:32px;}
  .cpsa-city-hub .desire,.cpsa-city-hub .homecharge-inner{grid-template-columns:1fr;}
  .cpsa-city-hub .desire-photo{min-height:300px;}
  .cpsa-city-hub .homecharge-photo{min-height:320px;}
  .cpsa-city-hub .desire-text,.cpsa-city-hub .homecharge-text{padding:48px 36px;}
  .cpsa-city-hub .ch-block{padding:72px 0;}
  .cpsa-city-hub .fb:nth-child(even){padding-left:0;border-left:none;}
  .cpsa-city-hub .fb{padding-right:0;}
}
@media(max-width:600px){
  .cpsa-city-hub .fb-grid,.cpsa-city-hub .svc-grid,.cpsa-city-hub .nums-grid,.cpsa-city-hub .feat-grid,.cpsa-city-hub .car-grid,.cpsa-city-hub .guide-grid{grid-template-columns:1fr;}
  .cpsa-city-hub .ch-row-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .cpsa-city-hub .napbar .phone{margin-left:0;}
}