/* ============================================================
   Hub B — Open & Approachable
   Child theme: Ashton Child
   Scoped to .ssd-wrap to avoid parent BS3 conflicts.
   ============================================================ */

/* Color tokens come from the shared brand palette in style.css :root
   (--ssd-*). Only layout-only tokens are scoped locally here. */
.ssd-wrap {
    --hb-radius:    16px;
    --hb-radius-sm: 10px;
    --hb-pad-x:     clamp(20px, 5vw, 64px);
    --hb-pad-y:     72px;
    color: var(--ssd-text) !important;
}

/* ── Global reset ── */
.ssd-wrap * { box-sizing: border-box !important; }
.ssd-wrap p,
.ssd-wrap h1,
.ssd-wrap h2,
.ssd-wrap h3,
.ssd-wrap ul,
.ssd-wrap ol,
.ssd-wrap li { margin: 0 !important; padding: 0 !important; }

/* ── Breadcrumb ── */
.ssd-wrap .ssd-breadcrumb {
    background: var(--ssd-white) !important;
    border-bottom: 1px solid var(--ssd-border) !important;
    padding: 14px var(--hb-pad-x) !important;
    width: 100% !important;
}
.ssd-wrap .breadcrumb__inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    color: var(--ssd-muted) !important;
    max-width: var(--ssd-container-w) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.ssd-wrap .breadcrumb__inner a { color: var(--ssd-text-secondary) !important; text-decoration: none !important; }
.ssd-wrap .breadcrumb__inner a:hover { color: var(--ssd-primary-dark) !important; }
.ssd-wrap .breadcrumb__inner span:last-child { color: var(--ssd-text) !important; font-weight: 600 !important; }

/* ── Buttons ── */
.ssd-wrap .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    transition: all 160ms !important;
    white-space: nowrap !important;
}
.ssd-wrap .btn--pill    { border-radius: 999px !important; }
.ssd-wrap .btn--lg      { padding: 14px 28px !important; }
.ssd-wrap .btn--block   { width: 100% !important; display: flex !important; }
.ssd-wrap .btn--primary { background: var(--ssd-primary-dark) !important; color: var(--ssd-white) !important; }
.ssd-wrap .btn--primary:hover { background: var(--ssd-primary) !important; color: var(--ssd-white) !important; }
.ssd-wrap .btn--ghost   { background: transparent !important; color: var(--ssd-text) !important; border-color: var(--ssd-border) !important; }
.ssd-wrap .btn--ghost:hover { background: var(--ssd-light-bg) !important; }
.ssd-wrap .btn--accent  { background: var(--ssd-accent) !important; color: var(--ssd-white) !important; }
.ssd-wrap .btn--accent:hover { background: var(--ssd-primary) !important; }
.ssd-wrap .btn--ghost-light { background: rgba(var(--ssd-white-rgb),.12) !important; color: var(--ssd-white) !important; border-color: rgba(var(--ssd-white-rgb),.25) !important; }
.ssd-wrap .btn--ghost-light:hover { background: rgba(var(--ssd-white-rgb),.2) !important; }

/* ── Badge ── */
.ssd-wrap .badge--tint {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--ssd-primary-light) !important;
    color: var(--ssd-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    margin-bottom: 20px !important;
}
.ssd-wrap .badge__dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: var(--ssd-primary) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* ══ HERO ══════════════════════════════════════════════════
   Same two-column shape as before (copy + stat card) — refined for a
   more considered, modern feel: softer ambient light instead of a
   flat gradient blob, a tighter type scale, and the stat card redrawn
   as a real grid of facts (hairline dividers) instead of four numbers
   floating in a loose 2×2. */
.ssd-wrap .hero {
    background: var(--ssd-white) !important;
    /* Top padding is its own, tighter clamp — the previous shared
       top/bottom value left too much air between the sticky header
       and the title; bottom keeps the roomier value. */
    padding: clamp(20px, 3vw, 32px) var(--hb-pad-x) clamp(48px, 8vw, 88px) !important;
    position: relative !important;
    overflow: hidden !important;
}
.ssd-wrap .hero__blob {
    position: absolute !important;
    right: -160px !important; top: -160px !important;
    width: 640px !important; height: 640px !important;
    background: radial-gradient(circle, rgba(var(--ssd-primary-rgb), .16) 0%, transparent 72%) !important;
    filter: blur(2px) !important;
    pointer-events: none !important; z-index: 0 !important;
}
.ssd-wrap .hero__inner {
    position: relative !important; z-index: 1 !important;
    display: grid !important;
    grid-template-columns: 1fr 420px !important;
    gap: 56px !important;
    align-items: center !important;
    max-width: var(--ssd-container-w) !important;
    margin-left: auto !important; margin-right: auto !important;
}
.ssd-wrap .hero__copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; }
.ssd-wrap .hero__title {
    /* Matches the city page's own H1 scale (1.5rem base up to a
       2rem cap at 1024px+) instead of running its own, much larger
       clamp — one consistent title size across the site's hero
       sections. */
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: var(--ssd-text) !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 18px !important;
}
.ssd-wrap .hero__title-accent {
    background: linear-gradient(100deg, var(--ssd-primary-dark) 20%, var(--ssd-primary) 80%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: var(--ssd-primary-dark) !important;
}
@media (min-width: 768px)  { .ssd-wrap .hero__title { font-size: 1.75rem !important; } }
@media (min-width: 1024px) { .ssd-wrap .hero__title { font-size: 2rem !important; } }

/* Lede in a bordered container — same treatment as the city page's
   .city-hero__intro, instead of floating plain text. */
.ssd-wrap .hero__lede {
    font-size: 14.5px !important;
    color: var(--ssd-text-secondary) !important;
    line-height: 1.6 !important;
    /* No max-width cap — fills the whole left column's width
       (responsive via the grid below) instead of stopping at an
       arbitrary 500px regardless of how much room is available. */
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 30px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--ssd-border) !important;
    border-radius: var(--hb-radius-sm) !important;
    background: var(--ssd-light-bg) !important;
    box-sizing: border-box !important;
}
.ssd-wrap .hero__lede strong { color: var(--ssd-text) !important; font-weight: 700 !important; }
.ssd-wrap .hero__actions { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; }

/* Numbers card — a grid of facts with real dividers, not four
   floating stats; a thin brand-color cap distinguishes it as a
   "proof" object rather than another content block. */
.ssd-wrap .hero__numbers {
    background: var(--ssd-white) !important;
    border: 1px solid var(--ssd-border) !important;
    border-radius: var(--hb-radius) !important;
    padding: 30px 32px !important;
    box-shadow: 0 24px 56px -28px rgba(var(--ssd-primary-rgb), .35), 0 2px 8px rgba(var(--ssd-black-rgb), .04) !important;
    position: relative !important;
    overflow: hidden !important;
}
.ssd-wrap .hero__numbers::before {
    content: "" !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, var(--ssd-primary-dark), var(--ssd-primary)) !important;
}
.ssd-wrap .hero__numbers-eyebrow { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ssd-muted) !important; display: block !important; margin-bottom: 22px !important; }
.ssd-wrap .hero__numbers-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; margin-bottom: 22px !important; }
.ssd-wrap .hero__num {
    padding: 0 18px 18px 0 !important;
    border-right: 1px solid var(--ssd-border) !important;
    border-bottom: 1px solid var(--ssd-border) !important;
}
.ssd-wrap .hero__num:nth-child(2n) { border-right: none !important; padding-left: 18px !important; padding-right: 0 !important; }
.ssd-wrap .hero__num:nth-last-child(-n+2) { border-bottom: none !important; padding-bottom: 0 !important; }
.ssd-wrap .hero__num:not(:nth-child(2n)) { padding-left: 0 !important; }
.ssd-wrap .hero__num:nth-child(n+3) { padding-top: 18px !important; }
.ssd-wrap .hero__num-val { display: block !important; font-size: 1.7rem !important; font-weight: 800 !important; letter-spacing: -.01em !important; color: var(--ssd-primary-dark) !important; line-height: 1 !important; margin-bottom: 6px !important; }
.ssd-wrap .hero__num-label { display: block !important; font-size: 13px !important; color: var(--ssd-muted) !important; line-height: 1.35 !important; }
.ssd-wrap .hero__numbers-note { background: var(--ssd-primary-light) !important; border-radius: var(--hb-radius-sm) !important; padding: 12px 16px !important; display: flex !important; align-items: center !important; gap: 10px !important; font-size: 12.5px !important; line-height: 1.4 !important; color: var(--ssd-primary-dark) !important; }
.ssd-wrap .hero__numbers-pill { background: var(--ssd-primary) !important; color: var(--ssd-white) !important; border-radius: 4px !important; padding: 3px 8px !important; font-size: 11px !important; font-weight: 800 !important; white-space: nowrap !important; flex-shrink: 0 !important; }

@media (prefers-reduced-motion: no-preference) {
    .ssd-wrap .hero__copy, .ssd-wrap .hero__numbers {
        opacity: 0; animation: ssd-hero-reveal 560ms cubic-bezier(.16,.8,.3,1) forwards;
    }
    .ssd-wrap .hero__numbers { animation-delay: 90ms; }
}
@keyframes ssd-hero-reveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1024px) { .ssd-wrap .hero__inner { grid-template-columns: 1fr !important; } .ssd-wrap .hero__numbers { max-width: 480px !important; } }
@media (max-width: 640px)  { .ssd-wrap .hero { padding: 44px 20px !important; } }

/* ══ KEY FACTS ═════════════════════════════════════════════ */
.ssd-wrap .key-facts { background: var(--ssd-light-bg) !important; padding: var(--hb-pad-y) var(--hb-pad-x) !important; }
.ssd-wrap .key-facts__panel { background: var(--ssd-white) !important; border: 1px solid var(--ssd-border) !important; border-radius: 20px !important; padding: 40px !important; max-width: var(--ssd-container-w) !important; margin-left: auto !important; margin-right: auto !important; }
.ssd-wrap .key-facts__head { display: flex !important; justify-content: space-between !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 28px !important; padding-bottom: 20px !important; border-bottom: 1px solid var(--ssd-border) !important; }
.ssd-wrap .key-facts__title { font-size: 1.7rem !important; font-weight: 800 !important; color: var(--ssd-text) !important; letter-spacing: -0.02em !important; }
.ssd-wrap .key-facts__kicker { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ssd-muted) !important; }
.ssd-wrap .key-facts__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; list-style: none !important; }
.ssd-wrap .key-facts__card { border: 1px solid var(--ssd-border) !important; border-radius: var(--hb-radius-sm) !important; padding: 20px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.ssd-wrap .key-facts__term { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: var(--ssd-muted) !important; }
.ssd-wrap .key-facts__def { font-size: 15.5px !important; color: var(--ssd-text) !important; line-height: 1.55 !important; }
.ssd-wrap .key-facts__def a { color: var(--ssd-primary-dark) !important; }

@media (max-width: 1024px) { .ssd-wrap .key-facts__grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px)  { .ssd-wrap .key-facts__grid { grid-template-columns: 1fr !important; } }

/* ══ CTA BRIDGE ════════════════════════════════════════════ */
.ssd-wrap .cta-bridge { padding: 0 var(--hb-pad-x) var(--hb-pad-y) !important; background: var(--ssd-light-bg) !important; }
.ssd-wrap .cta-bridge__inner { background: var(--ssd-primary) !important; border-radius: 20px !important; padding: 48px !important; display: grid !important; grid-template-columns: 1fr 280px !important; gap: 40px !important; align-items: center !important; position: relative !important; overflow: hidden !important; max-width: var(--ssd-container-w) !important; margin-left: auto !important; margin-right: auto !important; }
.ssd-wrap .cta-bridge__ring { position: absolute !important; right: -80px !important; top: -80px !important; width: 300px !important; height: 300px !important; border: 1px solid rgba(var(--ssd-white-rgb),.12) !important; border-radius: 50% !important; pointer-events: none !important; }
.ssd-wrap .cta-bridge__eyebrow { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ssd-primary) !important; display: block !important; margin-bottom: 10px !important; }
.ssd-wrap .cta-bridge__title { font-size: 1.7rem !important; font-weight: 800 !important; color: var(--ssd-white) !important; margin-bottom: 10px !important; letter-spacing: -0.02em !important; }
.ssd-wrap .cta-bridge__lede { font-size: 15px !important; color: var(--ssd-text-on-primary-muted) !important; line-height: 1.65 !important; }
.ssd-wrap .cta-bridge__actions { display: flex !important; flex-direction: column !important; gap: 12px !important; position: relative !important; z-index: 1 !important; }

@media (max-width: 768px) { .ssd-wrap .cta-bridge__inner { grid-template-columns: 1fr !important; padding: 32px 24px !important; } }

/* ══ A-Z DIRECTORY ═════════════════════════════════════════ */
.ssd-wrap .az { background: var(--ssd-white) !important; padding: var(--hb-pad-y) var(--hb-pad-x) 40px !important; }
.ssd-wrap .az__head { display: flex !important; justify-content: space-between !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 8px !important; padding-bottom: 20px !important; margin-bottom: 20px !important; border-bottom: 2px solid var(--ssd-text) !important; }
.ssd-wrap .az__title { font-size: 1.6rem !important; font-weight: 800 !important; color: var(--ssd-text) !important; letter-spacing: -0.02em !important; }
.ssd-wrap .az__meta { font-size: 13px !important; color: var(--ssd-muted) !important; }
.ssd-wrap .az__list { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; list-style: none !important; background: var(--ssd-light-bg) !important; border-radius: var(--hb-radius) !important; padding: 20px !important; }
.ssd-wrap .az__item { display: inline-flex !important; }
.ssd-wrap .az__pill { display: inline-block !important; background: var(--ssd-white) !important; border: 1px solid var(--ssd-border) !important; border-radius: 999px !important; padding: 7px 18px !important; font-size: 15px !important; font-weight: 500 !important; color: var(--ssd-primary) !important; text-decoration: none !important; transition: all 150ms !important; }
.ssd-wrap .az__pill:hover { background: var(--ssd-primary) !important; color: var(--ssd-white) !important; border-color: var(--ssd-primary) !important; }

/* ══ CITY CARD GRID ════════════════════════════════════════
   Signature: every card carries the city's own 2-letter mark
   somewhere — the whole color field when there's no featured image
   yet, or a small corner tag once one is added — so the grid reads
   as one system regardless of which cities have art yet. */
.ssd-wrap .state-grid { background: var(--ssd-white) !important; padding: 0 var(--hb-pad-x) var(--hb-pad-y) !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; max-width: calc(var(--ssd-container-w) + var(--hb-pad-x) * 2) !important; margin-left: auto !important; margin-right: auto !important; }

.ssd-wrap .state-card {
    background: var(--ssd-white) !important;
    border: 1px solid var(--ssd-border) !important;
    border-radius: var(--hb-radius) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease !important;
}
.ssd-wrap .state-card:hover,
.ssd-wrap .state-card:focus-within {
    box-shadow: 0 16px 40px -14px rgba(var(--ssd-primary-rgb), .32) !important;
    border-color: var(--ssd-primary-light) !important;
    transform: translateY(-3px) !important;
}
@media (prefers-reduced-motion: reduce) {
    .ssd-wrap .state-card:hover, .ssd-wrap .state-card:focus-within { transform: none !important; }
}

/* ── Media: featured photo, or the color-field mark when there isn't one — same footprint either way ── */
.ssd-wrap .state-card__media {
    position: relative !important;
    aspect-ratio: 3 / 2 !important;
    overflow: hidden !important;
    background: var(--ssd-primary-light) !important;
}
.ssd-wrap .state-card__img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; display: block !important; margin: 0 !important;
    transition: transform 500ms ease !important;
}
.ssd-wrap .state-card:hover .state-card__img { transform: scale(1.045) !important; }
@media (prefers-reduced-motion: reduce) {
    .ssd-wrap .state-card:hover .state-card__img { transform: none !important; }
}

/* Bottom fade keeps the badge/tag legible over any photo regardless of its own brightness. */
.ssd-wrap .state-card__scrim {
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(180deg, rgba(6, 40, 41, 0) 45%, rgba(6, 40, 41, .62) 100%) !important;
    pointer-events: none !important;
}

/* No photo yet — the mark IS the artwork, so the card never reads as an empty placeholder. */
.ssd-wrap .state-card__mark {
    position: absolute !important; inset: 0 !important;
    display: grid !important; place-items: center !important;
    background: linear-gradient(135deg, var(--ssd-primary) 0%, var(--ssd-primary-darker) 100%) !important;
}
.ssd-wrap .state-card__mark-ring {
    position: absolute !important;
    width: 180% !important; aspect-ratio: 1 !important;
    right: -35% !important; bottom: -55% !important;
    border: 1px solid rgba(var(--ssd-white-rgb), .22) !important;
    border-radius: 50% !important;
}
.ssd-wrap .state-card__mark-text {
    position: relative !important; z-index: 1 !important;
    font-size: clamp(2.5rem, 7vw, 3.5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    color: var(--ssd-white) !important;
    line-height: 1 !important;
}

/* Photo present — same 2-letter mark, now a small corner tag instead of the whole surface. */
.ssd-wrap .state-card__tag {
    position: absolute !important; left: 14px !important; bottom: 12px !important; top: auto !important;
    font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em !important;
    color: var(--ssd-white) !important;
    background: rgba(var(--ssd-black-rgb), .32) !important;
    backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(var(--ssd-white-rgb), .28) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}

.ssd-wrap .state-card__badge {
    position: absolute !important; top: 12px !important; right: 12px !important; left: auto !important;
    background: rgba(var(--ssd-white-rgb), .22) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(var(--ssd-white-rgb), .4) !important;
    border-radius: 999px !important; padding: 5px 11px 5px 9px !important;
    font-size: 11px !important; font-weight: 700 !important; color: var(--ssd-white) !important;
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
}
.ssd-wrap .state-card__badge-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--ssd-white) !important; box-shadow: 0 0 0 3px rgba(var(--ssd-white-rgb), .25) !important; display: inline-block !important; flex-shrink: 0 !important; }

/* ── Body ── */
.ssd-wrap .state-card__body { padding: 20px 20px 4px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; gap: 7px !important; }
.ssd-wrap .state-card__title { font-size: 1.125rem !important; font-weight: 800 !important; letter-spacing: -.01em !important; color: var(--ssd-text) !important; }
.ssd-wrap .state-card__title a {
    color: inherit !important; text-decoration: none !important;
    background-image: linear-gradient(var(--ssd-primary-dark), var(--ssd-primary-dark)) !important;
    background-repeat: no-repeat !important; background-position: 0 100% !important;
    background-size: 0 1px !important; transition: background-size 200ms ease !important;
}
.ssd-wrap .state-card__title a:hover,
.ssd-wrap .state-card__title a:focus-visible { background-size: 100% 1px !important; }
.ssd-wrap .state-card__kicker { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--ssd-primary-dark) !important; }
.ssd-wrap .state-card__copy { font-size: 14px !important; color: var(--ssd-text-secondary) !important; line-height: 1.55 !important; flex: 1 !important; margin-bottom: 4px !important; }

/* ── CTA: full-width bar that fills solid on card hover ── */
.ssd-wrap .state-card__cta {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    font-size: 13.5px !important; font-weight: 700 !important;
    color: var(--ssd-primary-dark) !important; text-decoration: none !important;
    background: var(--ssd-primary-light) !important;
    padding: 13px 20px !important;
    transition: background 200ms ease, color 200ms ease !important;
}
.ssd-wrap .state-card:hover .state-card__cta,
.ssd-wrap .state-card__cta:focus-visible {
    background: var(--ssd-primary) !important; color: var(--ssd-white) !important;
}
.ssd-wrap .state-card__cta-arrow { display: inline-block !important; transition: transform 200ms ease !important; }
.ssd-wrap .state-card:hover .state-card__cta-arrow { transform: translateX(3px) !important; }
@media (prefers-reduced-motion: reduce) {
    .ssd-wrap .state-card__cta-arrow, .ssd-wrap .state-card__title a { transition: none !important; }
}

.ssd-wrap .state-card__title a:focus-visible,
.ssd-wrap .state-card__cta:focus-visible {
    outline: 2px solid var(--ssd-primary-dark) !important;
    outline-offset: 2px !important;
}

@media (max-width: 1024px) { .ssd-wrap .state-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px)  { .ssd-wrap .state-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .ssd-wrap .state-card__media { aspect-ratio: 16 / 10 !important; } }

/* ══ TOPICAL ═══════════════════════════════════════════════ */
.ssd-wrap .topical { background: var(--ssd-light-bg) !important; padding: var(--hb-pad-y) var(--hb-pad-x) !important; }
.ssd-wrap .topical__head { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; text-align: center !important; margin-bottom: 48px !important; }
.ssd-wrap .topical__eyebrow { display: block !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ssd-primary-dark) !important; margin-bottom: 12px !important; }
.ssd-wrap .topical__title { font-size: 2.2rem !important; font-weight: 800 !important; color: var(--ssd-text) !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; margin-bottom: 14px !important; }
.ssd-wrap .topical__lede { font-size: 15px !important; color: var(--ssd-text-secondary) !important; line-height: 1.65 !important; }
.ssd-wrap .topical__grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; max-width: var(--ssd-container-w) !important; margin-left: auto !important; margin-right: auto !important; }
.ssd-wrap .topical__card { background: var(--ssd-white) !important; border: 1px solid var(--ssd-border) !important; border-radius: var(--hb-radius) !important; padding: 28px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
.ssd-wrap .topical__num { font-size: 11px !important; font-weight: 800 !important; color: var(--ssd-primary-dark) !important; background: var(--ssd-primary-light) !important; width: 28px !important; height: 28px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.ssd-wrap .topical__card-title { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--ssd-text) !important; }
.ssd-wrap .topical__card-body { font-size: 15.5px !important; color: var(--ssd-text-secondary) !important; line-height: 1.65 !important; }

@media (max-width: 640px) { .ssd-wrap .topical__grid { grid-template-columns: 1fr !important; } }

/* ══ PROCESS ═══════════════════════════════════════════════ */
.ssd-wrap .process { background: var(--ssd-white) !important; padding: var(--hb-pad-y) var(--hb-pad-x) !important; }
.ssd-wrap .process__head { text-align: center !important; margin-bottom: 56px !important; }
.ssd-wrap .process__eyebrow { display: block !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ssd-primary-dark) !important; margin-bottom: 12px !important; }
.ssd-wrap .process__title { font-size: 2.2rem !important; font-weight: 800 !important; color: var(--ssd-text) !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; }
.ssd-wrap .process__grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; max-width: var(--ssd-container-w) !important; margin-left: auto !important; margin-right: auto !important; }
.ssd-wrap .process__step { background: var(--ssd-light-bg) !important; border: 1px solid var(--ssd-border) !important; border-radius: var(--hb-radius) !important; padding: 28px 24px 24px !important; position: relative !important; margin-top: 20px !important; }
.ssd-wrap .process__num { position: absolute !important; top: -20px !important; left: 20px !important; width: 40px !important; height: 40px !important; background: var(--ssd-primary) !important; color: var(--ssd-white) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; font-weight: 800 !important; box-shadow: 0 4px 12px rgba(var(--ssd-primary-rgb),.3) !important; }
.ssd-wrap .process__step-title { font-size: 16px !important; font-weight: 700 !important; color: var(--ssd-text) !important; margin-bottom: 10px !important; margin-top: 8px !important; }
.ssd-wrap .process__step-body { font-size: 15px !important; color: var(--ssd-text-secondary) !important; line-height: 1.65 !important; }

@media (max-width: 768px) { .ssd-wrap .process__grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .ssd-wrap .process__grid { grid-template-columns: 1fr !important; } }

/* ══ TRUST ═════════════════════════════════════════════════ */
/* Every other section centers its content at a max-width of
   var(--ssd-container-w) (matching the header/nav above), usually via
   a separate inner wrapper div. .trust applies grid directly to the
   section itself instead (no wrapper), so it needs a different trick
   to stay aligned: grow the side padding past --hb-pad-x, once the
   viewport is wide enough, by exactly enough to center a
   --ssd-container-w-wide content box — same visual result as a
   max-width wrapper, with no markup change. */
.ssd-wrap .trust { background: var(--ssd-primary) !important; padding: var(--hb-pad-y) max(var(--hb-pad-x), calc((100% - var(--ssd-container-w)) / 2)) !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 56px !important; align-items: start !important; }
.ssd-wrap .trust__copy { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.ssd-wrap .trust__eyebrow { display: block !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ssd-primary) !important; margin-bottom: 14px !important; }
.ssd-wrap .trust__title { font-size: 2.1rem !important; font-weight: 800 !important; color: var(--ssd-white) !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; margin-bottom: 18px !important; }
.ssd-wrap .trust__lede { font-size: 16px !important; color: var(--ssd-text-on-primary-muted) !important; line-height: 1.65 !important; margin-bottom: 24px !important; }
.ssd-wrap .trust__memberships { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; margin-bottom: 28px !important; }
.ssd-wrap .trust__membership { background: rgba(var(--ssd-white-rgb),.12) !important; color: var(--ssd-white) !important; border-radius: 999px !important; padding: 6px 16px !important; font-size: 13px !important; font-weight: 600 !important; display: inline-block !important; }
.ssd-wrap .trust__founders { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.ssd-wrap .trust__founder { background: rgba(var(--ssd-white-rgb),.08) !important; border: 1px solid rgba(var(--ssd-white-rgb),.12) !important; border-radius: var(--hb-radius-sm) !important; padding: 16px !important; display: flex !important; align-items: center !important; gap: 14px !important; }
.ssd-wrap .trust__founder-mark { width: 48px !important; height: 48px !important; background: rgba(var(--ssd-white-rgb),.15) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; font-weight: 800 !important; color: var(--ssd-white) !important; flex-shrink: 0 !important; }
.ssd-wrap .trust__founder-meta { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.ssd-wrap .trust__founder-name { font-weight: 700 !important; color: var(--ssd-white) !important; font-size: 15px !important; }
.ssd-wrap .trust__founder-role { font-size: 13px !important; color: var(--ssd-text-on-primary-muted) !important; }
.ssd-wrap .trust__side { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.ssd-wrap .trust__rating { background: var(--ssd-white) !important; border-radius: var(--hb-radius) !important; padding: 28px !important; display: flex !important; align-items: center !important; gap: 20px !important; }
.ssd-wrap .trust__rating-score { font-size: 3.5rem !important; font-weight: 900 !important; color: var(--ssd-primary) !important; line-height: 1 !important; flex-shrink: 0 !important; }
.ssd-wrap .trust__rating-stars { font-size: 18px !important; color: var(--ssd-primary) !important; letter-spacing: 2px !important; display: block !important; margin-bottom: 6px !important; }
.ssd-wrap .trust__rating-copy { font-size: 13.5px !important; color: var(--ssd-text-secondary) !important; line-height: 1.5 !important; }
.ssd-wrap .trust__rating-copy strong { color: var(--ssd-text) !important; }
.ssd-wrap .trust__press { background: var(--ssd-white) !important; border-radius: var(--hb-radius) !important; padding: 24px 28px !important; }
.ssd-wrap .trust__press-title { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: var(--ssd-muted) !important; display: block !important; margin-bottom: 16px !important; }
.ssd-wrap .trust__press-list { list-style: none !important; }
.ssd-wrap .trust__press-item a { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 14px 0 !important; border-bottom: 1px solid var(--ssd-border) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ssd-text) !important; text-decoration: none !important; gap: 12px !important; }
.ssd-wrap .trust__press-item:last-child a { border-bottom: none !important; padding-bottom: 0 !important; }
.ssd-wrap .trust__press-arrow { font-size: 13px !important; color: var(--ssd-primary-dark) !important; white-space: nowrap !important; font-weight: 600 !important; }

@media (max-width: 768px) { .ssd-wrap .trust { grid-template-columns: 1fr !important; gap: 32px !important; } }

/* FAQ and Conversion sections now use the shared faq-compact.php /
   conversion-compact.php template parts (see page-locations-hub-b.php)
   — same components as the city/state pages — instead of a hub-only
   reimplementation. Their styling lives in faq-compact.css /
   conversion-compact.css, which now sets its own label line-height and
   input margin-bottom explicitly (previously only city-b.css's own
   leftover, page-specific rules happened to provide those, which is
   why this page needed no fix of its own here before). */

/* ══ RESPONSIVE OVERFLOW PREVENTION ═══════════════════════ */
/* .ssd-wrap itself is deliberately excluded here: overflow-x:hidden on
   any ancestor of a position:sticky element (like the sticky asides in
   the shared faq-compact/conversion-compact parts below) disables
   sticky positioning entirely (a well-known CSS/Chromium behavior).
   .hero and .cta-bridge already clip their own oversized decorative
   blobs directly, so the wrapper-level rule was redundant
   belt-and-suspenders anyway, not load-bearing. */
.ssd-wrap .hero,
.ssd-wrap .key-facts,
.ssd-wrap .cta-bridge,
.ssd-wrap .az,
.ssd-wrap .state-grid,
.ssd-wrap .topical,
.ssd-wrap .process,
.ssd-wrap .trust { overflow-x: hidden !important; box-sizing: border-box !important; }

@media (max-width: 480px) {
    .ssd-wrap .hero { padding: 40px 16px !important; }
    .ssd-wrap .hero__title { font-size: 2.2rem !important; }
    .ssd-wrap .hero__actions { flex-direction: column !important; width: 100% !important; }
    .ssd-wrap .hero__actions .btn { width: 100% !important; }
    .ssd-wrap .key-facts__panel { padding: 20px !important; }
    .ssd-wrap .trust__rating { flex-direction: column !important; text-align: center !important; }
}

/* Clearance for the fixed site header is handled by js/theme.js, which
   keeps #wrapper's padding-top in sync with the header's real height
   on load and on resize — including on this page, where the parent
   theme's "Menu Transparent" option adds a
   #wrapper.hasbg.transparent { padding-top: 0 !important; } rule that
   would otherwise win; theme.js sets its value as !important too so it
   takes priority. No page-specific fallback value needed here. */