/* ============================================================
   Redesign layer -- incremental restyle toward the Vercel
   reference design (see /design-preview/ and the vercel capture).
   Loaded globally in base.html AFTER style.css so it can override.
   Grows section by section as the redesign proceeds.
   ============================================================ */

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */

/* Match the preview's typography in the header area. */
.site-header,
.site-header a,
.site-header span,
.site-header button,
.site-header input {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

/* Dark navy contact bar, sits above the white nav row at every width.
   Full-bleed with a small side inset to line up with the full-bleed
   header below it (the reference site centres this in a 1280px box --
   our header isn't boxed, so it's edge-to-edge here instead). */
.header-topbar {
    background: #0a1d4d;
    color: #cbd5e1;
    border-bottom: 1px solid #1e3a70;
    padding: 8px 20px;
}

.header-topbar-inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 18px;
}

.header-topbar-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.header-topbar a,
.header-topbar span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.header-topbar a:hover {
    color: #00eafe;
}

.header-topbar svg {
    width: 14px;
    height: 14px;
    color: #00eafe;
    flex-shrink: 0;
}

.header-topbar-sep {
    color: #1e3a70;
}

/* On small screens, shed the lower-priority items so the bar stays a
   couple of lines tall -- CRA badge first, then the hours -- keeping
   address + phones + email. (Selectors are scoped past .header-topbar
   so they out-specify the generic ".header-topbar span" rule above.) */
@media (max-width: 991.98px) {
    .header-topbar .header-topbar-cra {
        display: none;
    }
}

@media (max-width: 640px) {
    .header-topbar .header-topbar-hours {
        display: none;
    }

    /* Centre the groups instead of pushing them to opposite edges
       (matches the reference site's mobile top bar). */
    .header-topbar-inner,
    .header-topbar-group {
        justify-content: center;
    }
}


/* ---------------------------------------------------------------
   HOME HERO
   Single left-aligned column over the existing blue gradient
   background (kept from style.css). New .hero-rd-* classes so the
   old .hero-* rules + their media queries don't apply.
   --------------------------------------------------------------- */

/* Break out of Bootstrap's centred, max-1320px .container for the hero,
   but keep equal gutters so the centred block below sits in the middle
   of the viewport, not just the middle of a lopsided box. */
.home-hero > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.home-hero .hero-rd {
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

/* Pill badges -- preview's .vp-badge shape, inverted for the dark hero. */
.hero-rd-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.hero-rd-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
}

.hero-rd-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2rem, 4.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 auto 1.25rem;
    max-width: 820px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

.hero-rd-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 1.75rem;
    max-width: 820px;
}

/* Bullet list -- one consistent check icon on every row.
   align-items:center (both here and on the <li>) used to mean: a
   two-line item (its text wraps on narrow screens) got its icon
   centered against the full two-line block instead of the first
   line, AND that li re-centered itself at a different horizontal
   position than the single-line items next to it (each li was sized
   to its own content and centered independently). flex-start on both
   axes pins every icon to one shared left edge and to the top of its
   own text, so bullets line up regardless of how any one of them
   wraps -- the list block itself still centers as a whole via
   width:fit-content + the margin below. */
.hero-rd-points {
    list-style: none;
    margin: 0 auto 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
    text-align: left;
}

.hero-rd-points li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
}

.hero-rd-check {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #00eafe;
    /* Nudges the icon down from the text's hard top edge to sit level
       with the first line's cap-height instead of its ascent line. */
    margin-top: 0.2em;
}

/* Buttons -- preview .vp-btn shapes; outline variant adapted for the
   dark background. */
.hero-rd-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}

.hero-rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.hero-rd-btn:hover {
    text-decoration: none;
}

.hero-rd-btn-primary {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.hero-rd-btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
}

/* Light / near-white buttons (like the preview's secondary buttons),
   kept slightly translucent so they don't read as pure white. */
.hero-rd-btn-outline {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.hero-rd-btn-outline:hover {
    background: #ffffff;
    color: #0f172a;
}

/* Small trust indicators under the buttons (preview .vp-stat-row). */
.hero-rd-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
}

.hero-rd-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.hero-rd-trust-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #00eafe;
}

@media (max-width: 767.98px) {
    .hero-rd-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ---------------------------------------------------------------
   HOME SERVICES
   Preview style: left-aligned header, 3-up text-only card grid,
   "View all" link, navy CTA banner. White section (overrides the
   base stylesheet's forced grey section background).
   --------------------------------------------------------------- */

.svc-rd {
    background: #ffffff !important;
    padding: 4.5rem 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

/* Left edge lines up with the hero content. */
.svc-rd > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* Split header: heading/subtitle left, "View All" link top-right,
   aligned with the heading. */
.svc-rd-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

.svc-rd-header-text {
    max-width: 820px;
}

.svc-rd-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem;
}
/* Keep the heading on one line once there's room for it. */
@media (min-width: 1000px) {
    .svc-rd-title {
        white-space: nowrap;
    }
}

.svc-rd-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    max-width: 640px;
}

.svc-rd-header-btn {
    flex-shrink: 0;
    font-size: 0.9rem;
    padding: 0.7rem 1.35rem;
}

.svc-rd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.svc-rd-empty {
    grid-column: 1 / -1;
    color: #64748b;
}

/* ---- Card ----
   Slightly grey-tinted card on the white section, with a soft border
   and a small drop shadow so each card reads as a distinct surface. */
.svc-rd-card {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06),
        0 1px 2px rgba(15, 23, 42, 0.04);
}

.svc-rd-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.svc-rd-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
}
.svc-rd-icon svg {
    width: 20px;
    height: 20px;
}

.svc-rd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.svc-rd-tag {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    white-space: nowrap;
}

.svc-rd-tag-popular {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    color: #b45309;
    background: #fef3c7;
    border-color: #fde68a;
}
.svc-rd-tag-popular svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Type scale in the card: title (large) > ideal-for = description
   (medium, same size) > deliverables (small). */
.svc-rd-card-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
    margin: 0 0 0.65rem;
}

.svc-rd-ideal {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #64748b;
    margin: 0 0 0.75rem;
}
.svc-rd-ideal strong {
    color: #334155;
}

.svc-rd-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 1rem;
}

.svc-rd-deliv-wrap {
    border-top: 1px solid #e2e8f0;
    padding-top: 1rem;
    margin-bottom: 1.25rem;
}

.svc-rd-deliv-head {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin: 0 0 0.6rem;
}

.svc-rd-deliv {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.svc-rd-deliv li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #475569;
}
.svc-rd-deliv li svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #2563eb;
}

/* Actions: [ Book Consultation | Call ] row, then a full-width
   "Full Details" button that links to the service's own page. */
.svc-rd-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: auto;
}

.svc-rd-actions-row {
    display: flex;
    gap: 0.6rem;
}

.svc-rd-book {
    flex: 2 1 0;
}

.svc-rd-call {
    flex: 1 1 0;
}
.svc-rd-call svg {
    width: 15px;
    height: 15px;
}

.svc-rd-fulldetails {
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1d4ed8;
}
.svc-rd-fulldetails:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Buttons (services scope for now -- to be unified across sections later). */
.svc-rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}

.svc-rd-btn-primary {
    background: #2563eb;
    color: #ffffff;
}
.svc-rd-btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
}

.svc-rd-btn-outline {
    background: #f1f5f9;
    color: #0f172a;
}
.svc-rd-btn-outline:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.svc-rd-btn-ghost {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.svc-rd-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Arrow that slides right on button hover (Full Details, View All, etc.) */
.rd-arrow {
    display: inline-block;
    transition: transform 0.18s ease;
}
.svc-rd-btn:hover .rd-arrow,
.wc-rd-about-teamlink:hover .rd-arrow {
    transform: translateX(4px);
}

/* Dark "explore the full services page" banner (sits above the custom
   CTA banner): heading + blurb on the left, button on the right. */
.svc-rd-explore {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
    background: #0b1630;
    border-radius: 20px;
    padding: 1.75rem 2rem;
    color: #ffffff;
}
.svc-rd-explore-text {
    max-width: 720px;
}
.svc-rd-explore h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.4rem;
}
.svc-rd-explore p {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #94a3b8;
    margin: 0;
}
.svc-rd-explore .svc-rd-btn {
    flex-shrink: 0;
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
}

/* Navy CTA banner at the foot of the section. */
.svc-rd-cta {
    margin-top: 2.5rem;
    background: linear-gradient(120deg, #0a1d4d, #0d235d);
    border-radius: 24px;
    padding: 1.85rem 2rem;
    text-align: center;
    color: #ffffff;
}

.svc-rd-cta h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.4rem;
}

.svc-rd-cta p {
    color: #cbd5e1;
    margin: 0 0 1.15rem;
}

.svc-rd-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: center;
}
.svc-rd-cta-actions .svc-rd-btn {
    font-size: 0.95rem;
    padding: 0.8rem 1.5rem;
}
.svc-rd-cta-actions .svc-rd-btn svg {
    width: 15px;
    height: 15px;
}

/* Card copy on the HOME PAGE is written short on purpose
   (home_content.py keeps only a ~3-line intro and 3 deliverables --
   full text lives on the service's own "Full Details" page). These
   clamps are a safety net, not the primary truncation mechanism: on
   both mobile AND desktop, anything that still runs past 2 lines
   (ideal-for) or the stated line count gets an ellipsis instead of
   overflowing the card.
   Scoped to `.svc-rd` (the home page's section wrapper) specifically
   -- the /services/ list page reuses these same card classes but
   wants the FULL untruncated text, so it wraps its grid in a
   different section (.svcs-rd-list, see further down this file) and
   never inherits this clamp. */
.svc-rd .svc-rd-ideal {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.svc-rd .svc-rd-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.svc-rd .svc-rd-deliv li span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .svc-rd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    /* Header stacks: heading + subtitle, then the "View All Services"
       button full width below them. */
    .svc-rd-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .svc-rd-grid {
        grid-template-columns: 1fr;
    }
    .svc-rd-explore {
        justify-content: center;
        text-align: center;
    }
    .svc-rd-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ---------------------------------------------------------------
   WHY CHOOSE  (grey section, 2-col: reasons on the left,
   dark "About" spotlight box on the right)
   --------------------------------------------------------------- */

.wc-rd {
    background: #f8fafc !important;
    padding: 4.5rem 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

/* Left edge lines up with the hero + services sections. */
.wc-rd > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.wc-rd-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    column-gap: 2.5rem;
    row-gap: 1.85rem;
    align-items: start;
}
/* Left column flows head -> cards -> actions; the spotlight box sits in
   the second column and spans exactly the cards row, so its top edge
   lines up with the first card and its bottom with the last card. */
.wc-rd-head { grid-column: 1; grid-row: 1; }
.wc-rd-cards { grid-column: 1; grid-row: 2; }
.wc-rd-actions { grid-column: 1; grid-row: 3; }
.wc-rd-about {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
}

.wc-rd-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.wc-rd-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.wc-rd-intro {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    max-width: 560px;
}

.wc-rd-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
}

.wc-card {
    display: flex;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.wc-card-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wc-card-icon svg {
    width: 20px;
    height: 20px;
}

.wc-card-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.45rem;
}

.wc-card h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 0.35rem;
}

.wc-card p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}

.wc-rd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.wc-rd-actions .svc-rd-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
}

.wc-rd-btn-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #1d4ed8;
}
.wc-rd-btn-outline:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

/* ---- Dark "About" spotlight box ---- */
.wc-rd-about {
    display: flex;
    flex-direction: column;
    background: linear-gradient(150deg, #0a1d4d, #0d235d);
    border-radius: 20px;
    padding: 1.85rem;
    color: #cbd5e1;
}

.wc-rd-about-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #38bdf8;
    margin-bottom: 0.9rem;
}

.wc-rd-about-bio {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
}

.wc-rd-about-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wc-rd-about-stats div {
    display: flex;
    flex-direction: column;
}
.wc-rd-about-stats strong {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
}
.wc-rd-about-stats span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    margin-top: 0.15rem;
}

/* Pushed to the bottom so the spotlight sits against the last card. */
.wc-rd-about-leader {
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.wc-rd-about-leader-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #38bdf8;
    margin-bottom: 0.5rem;
}

.wc-rd-about-name {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.wc-rd-about-role {
    font-size: 0.85rem;
    color: #93b4f5;
    margin-top: 0.25rem;
}

.wc-rd-about-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
    color: #94a3b8;
}
.wc-rd-about-foot a {
    color: #cbd5e1;
    text-decoration: none;
}
.wc-rd-about-foot a:hover {
    color: #38bdf8;
}
.wc-rd-about-teamlink {
    font-weight: 700;
    color: #38bdf8 !important;
}

@media (max-width: 900px) {
    .wc-rd-grid {
        grid-template-columns: 1fr;
    }
    .wc-rd-head,
    .wc-rd-cards,
    .wc-rd-actions,
    .wc-rd-about {
        grid-column: 1;
        grid-row: auto;
    }
    .wc-rd-intro {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .wc-rd-actions .svc-rd-btn {
        flex: 1 1 100%;
    }
}


/* ---------------------------------------------------------------
   BRANCH NETWORK / LOCATIONS  (white section, split header,
   4-up office cards, dark "explore" pill below)
   --------------------------------------------------------------- */

.loc-rd {
    background: #ffffff !important;
    padding: 4.5rem 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

.loc-rd > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.loc-rd-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.loc-rd-header-text {
    max-width: 820px;
}

.loc-rd-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.loc-rd-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem;
}
/* One line once there's room for it next to the header button. */
@media (min-width: 1100px) {
    .loc-rd-title {
        white-space: nowrap;
    }
}

.loc-rd-subtitle {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

.loc-rd-header-btn {
    flex-shrink: 0;
    font-size: 0.9rem;
    padding: 0.7rem 1.35rem;
}

.loc-rd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.loc-card {
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.loc-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.75rem;
}

.loc-card-tag {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.loc-card-hq {
    font-size: 0.65rem;
    font-weight: 800;
    color: #b45309;
    white-space: nowrap;
}

.loc-card-name {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.loc-card-addr {
    font-size: 0.83rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0 0 1rem;
    flex-grow: 1;
}

.loc-card-foot {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.9rem;
}

.loc-card-phone {
    font-size: 0.82rem;
    color: #475569;
    margin: 0 0 0.75rem;
}
.loc-card-phone a {
    color: #1d4ed8;
    text-decoration: none;
}

.loc-card-btn {
    width: 100%;
    font-size: 0.78rem;
    padding: 0.6rem 0.75rem;
}

/* Dark "explore all locations" pill, centred below the grid. */
.loc-rd-explore {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* "Not Near an Office? File 100% Online" banner -- reuses the /locations/
   page's .loc-pg-online-* classes (already unscoped) so it's pixel-identical;
   this wrapper only adds the spacing to sit under the explore pill, inside
   the same .loc-rd > .container gutters so its edges line up exactly with
   the cards and header above it. */
.loc-rd-online {
    margin-top: 2.5rem;
}

.loc-rd-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0b1220;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s;
}
.loc-rd-explore-btn:hover {
    background: #131c30;
    color: #ffffff;
}
.loc-rd-explore-btn svg {
    width: 16px;
    height: 16px;
    color: #38bdf8;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .loc-rd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .loc-rd-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .loc-rd-grid {
        grid-template-columns: 1fr;
    }
    .loc-rd-explore-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}


/* ---------------------------------------------------------------
   FAQ  (centred, everything inside one rounded panel, 2x2 cards)
   --------------------------------------------------------------- */

.faq-rd {
    background: #ffffff !important;
    padding: 4.5rem 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

.faq-rd-box {
    max-width: 1040px;
    margin: 0 auto;
    background: #f5f7fa;
    border: 1px solid #e6ebf2;
    border-radius: 24px;
    padding: clamp(1.75rem, 4vw, 3.25rem);
}

.faq-rd-head {
    margin: 0 auto 2.5rem;
    text-align: center;
}
.faq-rd-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.65rem;
}
/* Keep the heading on one line once the panel is wide enough. */
@media (min-width: 900px) {
    .faq-rd-head h2 {
        white-space: nowrap;
    }
}
.faq-rd-head p {
    max-width: 560px;
    margin: 0 auto;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

.faq-rd-q {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #2563eb;
}

/* ---- Accordion: home page and service detail pages both use this
   click-to-expand list. ---- */
.faq-rd-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-rd-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s;
}
.faq-rd-item.is-open {
    border-color: #dbeafe;
}

.faq-rd-toggle {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.faq-rd-q-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.faq-rd-question {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0f172a;
}

.faq-rd-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #64748b;
    transition: transform 0.2s ease, color 0.2s ease;
}
.faq-rd-item.is-open .faq-rd-chevron {
    transform: rotate(180deg);
    color: #2563eb;
}

.faq-rd-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.faq-rd-answer-inner {
    padding: 0 1.5rem 1.25rem calc(1.5rem + 18px + 0.5rem);
}
.faq-rd-answer-inner p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

.faq-rd-cta {
    text-align: center;
    margin-top: 2.5rem;
}
.faq-rd-cta-btn {
    font-size: 0.95rem;
    padding: 0.85rem 1.75rem;
}
.faq-rd-cta-btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 700px) {
    .faq-rd-cta-btn {
        width: 100%;
        justify-content: center;
    }
}


/* Faint hairline between the redesigned home sections, so the
   white <-> off-white transitions read as a subtle divider. Each
   section carries its own top line (one line per boundary; the dark
   hero -> services edge is left alone). */
.wc-rd,
.loc-rd,
.vid-rd,
.faq-rd,
.testimonials-section {
    border-top: 1px solid #e6ebf2;
}


/* ---------------------------------------------------------------
   VIDEO PROMO  (off-white card: text left, navy "play" panel right)
   --------------------------------------------------------------- */

.vid-rd {
    background: #f8fafc !important;
    padding: 4.5rem 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

.vid-rd > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.vid-rd-card {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.vid-rd-text {
    padding: clamp(1.75rem, 3.5vw, 3rem);
}

.vid-rd-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.vid-rd-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin: 0 0 0.9rem;
}

.vid-rd-body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 1.5rem;
    max-width: 46ch;
}

.vid-rd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.vid-rd-actions .svc-rd-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
}

.vid-rd-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1d4ed8;
    text-decoration: none;
}
.vid-rd-more:hover {
    color: #1d4ed8;
}
.vid-rd-more:hover .rd-arrow {
    transform: translateX(4px);
}

/* Navy "play" panel (the video link): YouTube thumbnail behind a navy
   overlay, with the play button + label on top. */
.vid-rd-play {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    min-height: 260px;
    padding: 2rem;
    background: linear-gradient(150deg, #0a1d4d, #0d235d);
    color: #ffffff;
    text-decoration: none;
}

.vid-rd-thumb {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.vid-rd-play::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(150deg, rgba(10, 29, 77, 0.58), rgba(13, 35, 93, 0.82));
}

.vid-rd-play-btn {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #ffffff;
    color: #2563eb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}
.vid-rd-play-btn svg {
    width: 26px;
    height: 26px;
    margin-left: 3px;
}
.vid-rd-play:hover .vid-rd-play-btn {
    transform: scale(1.08);
}

.vid-rd-play-label {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
    .vid-rd-card {
        grid-template-columns: 1fr;
    }
    .vid-rd-play {
        min-height: 200px;
    }
}

@media (max-width: 640px) {
    .vid-rd-actions .svc-rd-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* ---------------------------------------------------------------
   TESTIMONIALS  (grey section, centred header, 4 Google-review cards)
   --------------------------------------------------------------- */

.tst-rd {
    background: #f8fafc !important;
    padding: 4.5rem 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

.tst-rd > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.tst-rd-head {
    text-align: center;
    margin-bottom: 2.75rem;
}

/* "View More Testimonials" -- its own right-aligned row above the
   centred eyebrow/title/subtitle, so it can never collide with the
   heading no matter how wide that text gets (a corner button
   absolutely positioned over a centred, unconstrained-width heading
   would overlap it at in-between viewport widths). */
.tst-rd-more {
    display: flex;
    width: fit-content;
    margin: 0 0 1.75rem auto;
}

.tst-rd-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.tst-rd-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.tst-rd-subtitle {
    max-width: 620px;
    margin: 0 auto;
    font-size: 0.98rem;
    line-height: 1.6;
    color: #475569;
}

.tst-rd-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.tst-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.tst-tag {
    align-self: flex-start;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    margin-bottom: 0.85rem;
}

.tst-stars {
    color: #f59e0b;
    font-size: 0.95rem;
    letter-spacing: 2px;
    margin-bottom: 0.85rem;
}

.tst-quote {
    flex-grow: 1;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1e293b;
    margin: 0 0 1.25rem;
}

.tst-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #0f172a;
}

.tst-src {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 0.4rem;
}

@media (max-width: 700px) {
    .tst-rd-more {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1024px) {
    .tst-rd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .tst-rd-grid {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------------
   "READY TO START YOUR BUSINESS?"  (navy gradient section:
   text/actions left, dark consultation form card right)
   --------------------------------------------------------------- */

.cta-rd {
    background: linear-gradient(120deg, #0a1d4d, #0d235d 50%, #142962);
    color: #cbd5e1;
    padding: 4.5rem 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

.cta-rd > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.cta-rd-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 2.5rem 3rem;
    align-items: start;
}

.cta-rd-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.cta-rd-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 1rem;
}

.cta-rd-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0 0 1.75rem;
    max-width: 40ch;
}

.cta-rd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}
.cta-rd-actions .svc-rd-btn {
    font-size: 0.9rem;
    padding: 0.8rem 1.4rem;
}
.cta-rd-btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.cta-rd-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.cta-rd-mini {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
}
.cta-rd-mini span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.cta-rd-mini svg {
    width: 15px;
    height: 15px;
    color: #38bdf8;
    flex-shrink: 0;
}
.cta-rd-mini a {
    color: #cbd5e1;
    text-decoration: none;
}
.cta-rd-mini a:hover {
    color: #38bdf8;
}

/* ---- Dark form card ---- */
.cta-rd-form-card {
    background: #0b1220;
    border: 1px solid #1e3a70;
    border-radius: 18px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.cta-rd-form-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}
.cta-rd-form-badge svg {
    width: 12px;
    height: 12px;
}

.cta-rd-form-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.4rem;
}
.cta-rd-form-sub {
    font-size: 0.86rem;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0 0 1.4rem;
}

.cta-rd-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
.cta-rd-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cta-rd-field-wide {
    grid-column: 1 / -1;
}
.cta-rd-field > span {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.cta-rd-field > span em {
    color: #38bdf8;
    font-style: normal;
}

.cta-rd-form-card input,
.cta-rd-form-card select,
.cta-rd-form-card textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    color: #e2e8f0;
    background: #060c17;
    border: 1px solid #1e3a70;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.cta-rd-form-card textarea {
    resize: vertical;
    min-height: 2.4rem;
}
.cta-rd-form-card select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 1.9rem;
}
.cta-rd-form-card input::placeholder,
.cta-rd-form-card textarea::placeholder {
    color: #64748b;
}
.cta-rd-form-card input:focus,
.cta-rd-form-card select:focus,
.cta-rd-form-card textarea:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.cta-rd-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding: 0.85rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.cta-rd-submit:hover {
    background: #1d4ed8;
}
.cta-rd-submit svg {
    width: 16px;
    height: 16px;
}

.cta-rd-form-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 1rem 0 0;
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: center;
}
.cta-rd-form-foot svg {
    width: 13px;
    height: 13px;
    color: #38bdf8;
}
.cta-rd-form-foot a {
    color: #38bdf8;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 900px) {
    .cta-rd-grid {
        grid-template-columns: 1fr;
    }
    .cta-rd-lead {
        max-width: none;
    }
}
@media (max-width: 520px) {
    .cta-rd-fields {
        grid-template-columns: 1fr;
    }
    .cta-rd-actions .svc-rd-btn {
        flex: 1 1 100%;
    }
}


/* ---------------------------------------------------------------
   FOOTER  (dark navy, 3 columns: brand + contact + social /
   Services + Government / Quick Links + CTA buttons)
   --------------------------------------------------------------- */

.ft-rd {
    background: #071538;
    color: #cbd5e1;
    border-top: 1px solid #1e3a70;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    font-size: 0.9rem;
}

.ft-rd-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2.5rem clamp(1.5rem, 6vw, 4rem) 1.5rem;
}

/* Top row: "View Services ->" link, right-aligned, with a divider. */
.ft-rd-top {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 1.25rem;
    margin-bottom: 2.25rem;
    border-bottom: 1px solid #1e3a70;
}
.ft-rd-viewservices {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #38bdf8;
    text-decoration: none;
    transition: color 0.15s;
}
.ft-rd-viewservices:hover {
    color: #ffffff;
}
.ft-rd-viewservices:hover .rd-arrow {
    transform: translateX(4px);
}

.ft-rd-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.15fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #1e3a70;
}

.ft-rd-logo {
    display: inline-block;
    line-height: 0;
}
.ft-rd-logo img {
    height: 46px;
    width: auto;
    display: block;
}

.ft-rd-tagline {
    margin: 1rem 0;
    line-height: 1.6;
    color: #cbd5e1;
    max-width: 46ch;
}

.ft-rd-contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.ft-rd-contact > div {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #e2e8f0;
    font-size: 0.86rem;
}
.ft-rd-contact svg {
    width: 16px;
    height: 16px;
    color: #38bdf8;
    flex-shrink: 0;
}
.ft-rd-contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.ft-rd-contact a:hover {
    color: #38bdf8;
}

.ft-rd-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
}
.ft-rd-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid #1e3a70;
    color: #cbd5e1;
    transition: background 0.15s, color 0.15s;
}
.ft-rd-social a:hover {
    background: #2563eb;
    color: #ffffff;
}
.ft-rd-social svg {
    width: 17px;
    height: 17px;
}

.ft-rd h4 {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}
.ft-rd h4.ft-rd-h4-gap {
    margin-top: 1.75rem;
}

.ft-rd-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ft-rd-links li {
    margin-bottom: 0.55rem;
}
.ft-rd-links a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.86rem;
    transition: color 0.15s;
}
.ft-rd-links a:hover {
    color: #38bdf8;
}

.ft-rd-branches {
    margin: 1.35rem 0 0;
    padding-top: 1.15rem;
    border-top: 1px solid #1e3a70;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #cbd5e1;
    white-space: nowrap;
}
.ft-rd-branches-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    white-space: normal;
}

.ft-rd-cta-btns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: 1.75rem;
}
.ft-rd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
}
.ft-rd-btn-primary {
    background: #2563eb;
    color: #ffffff;
}
.ft-rd-btn-primary:hover {
    background: #1d4ed8;
    color: #ffffff;
}
.ft-rd-btn-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border: 1px solid #1e3a70;
}
.ft-rd-btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.ft-rd-btn:hover .rd-arrow {
    transform: translateX(4px);
}

.ft-rd-bottom {
    padding-top: 1.5rem;
    font-size: 0.78rem;
    color: #94a3b8;
    text-align: center;
}
.ft-rd-bottom p {
    margin: 0;
}

@media (max-width: 900px) {
    .ft-rd-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ft-rd-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 560px) {
    .ft-rd-grid {
        grid-template-columns: 1fr;
    }
    .ft-rd-top {
        justify-content: flex-start;
    }
}

/* ============================================================
   Back-to-top button -- sits directly above the chatbot bubble,
   bottom-right, on every page. Hidden until the user scrolls
   down; smooth-scrolls to the top on click. Kept just under the
   chatbot launcher (z 1999) / overlay (z 2000) so an open chat
   covers it.
   ============================================================ */
.rd-backtotop {
    position: fixed;
    right: 31px;          /* centre-aligns with the 60px chat bubble at right:24px */
    bottom: 96px;         /* 24 (bubble bottom) + 60 (bubble) + 12 gap */
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #1e3a70;
    background: #0a1d4d;
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1998;
    box-shadow: 0 8px 24px rgba(10, 29, 77, 0.4);
    opacity: 0;
    visibility: hidden;          /* flips instantly with the class -- NOT transitioned */
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease,
                background 0.15s ease, color 0.15s ease;
}
.rd-backtotop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.rd-backtotop:hover {
    background: #12295f;
    color: #7dd3fc;
}
.rd-backtotop:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}
.rd-backtotop svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 480px) {
    .rd-backtotop {
        right: 33px;      /* centre-aligns with the 60px bubble on mobile */
        bottom: 96px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-backtotop {
        transition: opacity 0.2s ease;
        transform: none;
    }
    .rd-backtotop.is-visible {
        transform: none;
    }
}

/* ============================================================
   Consultation modal -- a compact popup of the "Book a Free
   Consultation" form (markup: consultation_modal.html). Opened by
   any [data-consult-open] element; reuses the .cta-rd-form-card
   styling for everything inside. Posts to /contact/ like the
   home-page CTA form; the /contact/ page is unchanged.
   ============================================================ */
body.consult-open {
    overflow: hidden;
}

.consult-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 5vh, 3rem) clamp(1rem, 5vw, 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.consult-modal[hidden] {
    display: none;
}

.consult-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 12, 33, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: consultFade 0.15s ease;
}

.consult-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: auto;
    /* tighter than the section CTA card's clamp(1.5rem, 3vw, 2.25rem) */
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    animation: consultPop 0.18s ease;
}

@keyframes consultFade {
    from { opacity: 0; }
}
@keyframes consultPop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

.consult-modal-close {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #1e3a70;
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.consult-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.consult-modal-close svg {
    width: 16px;
    height: 16px;
}

/* keep the heading clear of the close button, and trim spacing a bit */
.consult-modal-dialog .cta-rd-form-title {
    padding-right: 2.25rem;
}
.consult-modal-dialog .cta-rd-form-sub {
    margin-bottom: 1rem;
}
.consult-modal-dialog .cta-rd-fields {
    gap: 0.7rem 0.9rem;
}

@media (max-width: 520px) {
    .consult-modal {
        padding: 0;
        align-items: stretch;
    }
    .consult-modal-dialog {
        max-width: 100%;
        min-height: 100%;
        margin: 0;
        border-radius: 0;
    }
    .consult-modal-close {
        position: fixed;
        top: 10px;
        right: 10px;
        background: #0a1d4d;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consult-modal-backdrop,
    .consult-modal-dialog {
        animation: none;
    }
}

/* ============================================================
   CONTACT PAGE  (contact.html) -- same layout as before
   (message form + direct contact details, then a map) restyled
   to the redesign system. Reuses .cta-rd-form-card / .cta-rd-*
   for the dark message-form card.
   ============================================================ */

.ct-rd-hero,
.ct-rd,
.ct-rd-map {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
/* Off-white so it separates cleanly from the white header above it,
   fenced by faint dividers top and bottom. */
.ct-rd-hero {
    background: #f8fafc !important;
    border-top: 1px solid #e6ebf2;
    border-bottom: 1px solid #e6ebf2;
    padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.ct-rd {
    background: #ffffff !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.ct-rd-map {
    background: #f8fafc !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid #e6ebf2;
}

/* Left edge lines up with the home-page redesign sections. */
.ct-rd-hero > .container,
.ct-rd > .container,
.ct-rd-map > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* ---- shared eyebrow (blue on light) ---- */
.ct-rd-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

/* ---- page header ---- */
.ct-rd-hero-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    margin: 0 0 0.85rem;
}
.ct-rd-hero-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 auto;
    max-width: 640px;
}
.ct-rd-hero-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.5rem;
    margin-top: 1.5rem;
}
.ct-rd-hero-quick a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
}
.ct-rd-hero-quick a:hover {
    color: #2563eb;
}
.ct-rd-hero-quick svg {
    width: 16px;
    height: 16px;
    color: #2563eb;
}

/* ---- form + info grid ---- */
.ct-rd-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem 3rem;
    align-items: stretch;   /* right column matches the form card's height */
}

/* the message-form card is .cta-rd-form-card; nudge a couple of things */
.ct-rd-form-card .cta-rd-form-title {
    font-size: 1.5rem;
}
/* beats `.cta-rd-field > span` (the uppercase field-label rule) */
.ct-rd-form .cta-rd-field > .ct-rd-err {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: #fca5a5;
}

/* ---- right column: direct contact details ----
   No heading here: the boxes start level with the message-form card
   (both are grid items) so the two columns line up top and bottom.
   space-between spreads the extra height so the last item (the branch
   button) ends level with the form card's footer. */
.ct-rd-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.6rem;
}

/* Two labelled groups -- "Reach Us Directly" (dark, clickable buttons)
   and "Plan Your Visit" (light, read-only reference cards) -- so the
   two kinds of box read as visually distinct at a glance instead of
   six identical dark boxes. */
.ct-rd-info-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ct-rd-info-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.1rem;
}
.ct-rd-info-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot, #2563eb);
    flex-shrink: 0;
}

/* the two phone numbers sit side by side */
.ct-rd-method-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

/* Dark boxes to match the message-form card (Vercel-style). */
.ct-rd-method {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #0b1220;
    border: 1px solid #1e3a70;
    border-radius: 14px;
    padding: 0.95rem 1.05rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(10, 29, 77, 0.08);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ct-rd-method:hover {
    border-color: var(--method-accent, #38bdf8);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}
.ct-rd-method-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--method-accent, #38bdf8);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-rd-method-icon svg {
    width: 19px;
    height: 19px;
}
.ct-rd-method-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.ct-rd-method-h {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.15s ease;
}
.ct-rd-method-p {
    font-size: 0.82rem;
    color: #94a3b8;
    transition: color 0.15s ease;
}
/* hover: white -> that method's own accent color, like the footer links */
.ct-rd-method:hover .ct-rd-method-h {
    color: var(--method-accent, #38bdf8);
}
.ct-rd-method:hover .ct-rd-method-p {
    color: #cbd5e1;
}
.ct-rd-method .rd-arrow {
    margin-left: auto;
    color: #64748b;
}
.ct-rd-method:hover .rd-arrow {
    transform: translateX(3px);
    color: var(--method-accent, #38bdf8);
}

/* compact variant used for the paired phone buttons -- stacks the icon
   above the text so the number always fits on one line */
.ct-rd-method-sm {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.9rem 0.95rem;
}
.ct-rd-method-sm .ct-rd-method-icon {
    width: 34px;
    height: 34px;
}
.ct-rd-method-sm .ct-rd-method-icon svg {
    width: 15px;
    height: 15px;
}
.ct-rd-method-sm .ct-rd-method-h {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}
.ct-rd-method-sm .ct-rd-method-p {
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
}
/* hover: number turns this button's own accent color */
.ct-rd-method-sm:hover .ct-rd-method-h {
    color: var(--method-accent, #38bdf8);
}
.ct-rd-method-sm:hover .ct-rd-method-p {
    color: var(--method-accent, #38bdf8);
}

/* ---- "Plan Your Visit" info cards ----
   Deliberately the opposite treatment from .ct-rd-method above: light
   surface, no hover lift, no arrow -- these are read, not clicked (the
   one real link inside -- "Open in Google Maps" -- has its own
   underline-style affordance). The colored top edge + icon is the only
   thing they share with the button family, so the two box types read
   as clearly different at a glance while still lining up in the same
   column. */
.ct-rd-info-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--info-accent, #0ea5e9);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ct-rd-info-card .ct-rd-panel-h {
    color: #0f172a;
}
.ct-rd-info-card .ct-rd-panel-h svg {
    color: var(--info-accent, #0ea5e9);
}
.ct-rd-info-card .ct-rd-hours-row span:first-child {
    color: #64748b;
}
.ct-rd-info-card .ct-rd-hours-row span:last-child {
    color: #0f172a;
}
.ct-rd-info-card .ct-rd-panel-note {
    color: #94a3b8;
}
.ct-rd-info-card .ct-rd-addr {
    color: #475569;
}
.ct-rd-info-card .ct-rd-addr strong {
    color: #0f172a;
}
.ct-rd-info-card .ct-rd-panel-link {
    color: var(--info-accent, #0ea5e9);
}

.ct-rd-panel-h {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.7rem;
}
.ct-rd-panel-h svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.ct-rd-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
}
.ct-rd-hours-row span:last-child {
    font-weight: 600;
}
.ct-rd-panel-note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
}
.ct-rd-addr {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
}
.ct-rd-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.ct-rd-panel-link:hover .rd-arrow {
    transform: translateX(3px);
}

/* "View all branch locations" button under the office panel */
.ct-rd-branches-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.85rem 1.2rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    background: #2563eb;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.15s;
}
.ct-rd-branches-btn:hover {
    background: #1d4ed8;
}
.ct-rd-branches-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.ct-rd-branches-btn:hover .rd-arrow {
    transform: translateX(3px);
}

/* ---- map ---- */
.ct-rd-map-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.5rem;
}
.ct-rd-map-frame {
    position: relative;
    border: 2px solid #0a1d4d;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(10, 29, 77, 0.16);
}
.ct-rd-map-frame iframe {
    display: block;
    width: 100%;
    position: relative;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ct-rd-map-frame.is-loaded iframe {
    opacity: 1;
}
/* Satellite/hybrid tiles take a beat to stream in and default to a
   near-black backdrop while they load -- this placeholder covers that
   so visitors see a calm on-brand panel instead of a flash of black. */
.ct-rd-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #eef4ff, #dbeafe);
    color: #1d4ed8;
    font-size: 0.9rem;
    font-weight: 700;
    transition: opacity 0.3s ease;
}
.ct-rd-map-loading svg {
    width: 28px;
    height: 28px;
}
.ct-rd-map-frame.is-loaded .ct-rd-map-loading {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    .ct-rd-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 600px) {
    .ct-rd-hero-quick {
        flex-direction: column;
        gap: 0.55rem;
    }
    .ct-rd-method-p {
        font-size: 0.8rem;
    }
}
@media (max-width: 355px) {
    .ct-rd-method-pair {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   LOCATIONS PAGE  (locations.html) -- branch selector strip +
   swappable detail panel (no reload), an "all offices" grid, and
   the online-filing banner. Data: core.home_content.LOCATIONS.
   ============================================================ */

.loc-pg-hero,
.loc-pg,
.loc-pg-online {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
.loc-pg-hero {
    background: #f8fafc !important;
    border-top: 1px solid #e6ebf2;
    border-bottom: 1px solid #e6ebf2;
    padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.loc-pg {
    background: #ffffff !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.loc-pg-online {
    background: #f8fafc !important;
    border-top: 1px solid #e6ebf2;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.loc-pg-hero > .container,
.loc-pg > .container,
.loc-pg-online > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.loc-pg-hero .ct-rd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.loc-pg-hero .ct-rd-eyebrow svg {
    width: 13px;
    height: 13px;
}
.loc-pg-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    margin: 0 0 0.85rem;
}
.loc-pg-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 auto;
    max-width: 680px;
}

/* ---- branch selector strip ---- */
.loc-pg-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}
.loc-pg-tab {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: left;
    padding: 0.9rem 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.loc-pg-tab:hover {
    border-color: #bfdbfe;
    transform: translateY(-1px);
}
.loc-pg-tab.is-active {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
}
.loc-pg-tab-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.loc-pg-tab-region {
    color: #94a3b8;
}
.loc-pg-tab-hq {
    color: #d97706;
}
.loc-pg-tab.is-active .loc-pg-tab-region,
.loc-pg-tab.is-active .loc-pg-tab-hq {
    color: rgba(255, 255, 255, 0.85);
}
.loc-pg-tab-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}
.loc-pg-tab.is-active .loc-pg-tab-name {
    color: #ffffff;
}
.loc-pg-tab-city {
    font-size: 0.78rem;
    color: #64748b;
}
.loc-pg-tab.is-active .loc-pg-tab-city {
    color: rgba(255, 255, 255, 0.8);
}

/* ---- swappable detail panel ---- */
.loc-pg-detail {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
}
.loc-pg-detail[hidden] {
    display: none;
}
.loc-pg-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #eef2f7;
}
.loc-pg-detail-headings {
    min-width: 0;
}
.loc-pg-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}
.loc-pg-badge {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}
.loc-pg-badge-amber {
    color: #b45309;
    background: #fffbeb;
    border-color: #fde68a;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}
.loc-pg-detail-name {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.loc-pg-detail-blurb {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #64748b;
    margin: 0;
}
.loc-pg-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    flex-shrink: 0;
}
.loc-pg-detail-actions .svc-rd-btn {
    font-size: 0.88rem;
    padding: 0.7rem 1.25rem;
}

.loc-pg-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem 2rem;
    margin-top: 1.6rem;
}
.loc-pg-col-h {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a;
    margin-bottom: 0.6rem;
}
.loc-pg-col-h svg {
    width: 14px;
    height: 14px;
    color: #2563eb;
    flex-shrink: 0;
}
.loc-pg-col-h:not(:first-child) {
    margin-top: 1.15rem;
}
.loc-pg-addr,
.loc-pg-hours,
.loc-pg-transit {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #475569;
}
.loc-pg-hours-note {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: #94a3b8;
}
.loc-pg-contact-line {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
}
.loc-pg-contact-line span {
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.loc-pg-contact-line a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}
.loc-pg-contact-line a:hover {
    text-decoration: underline;
}

/* ---- all offices grid ---- */
.loc-pg-all {
    margin-top: clamp(3rem, 6vw, 4.5rem);
}
.loc-pg-all-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin: 0 0 0.5rem;
}
.loc-pg-all-sub {
    text-align: center;
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 auto 2rem;
    max-width: 520px;
}
.loc-pg-all-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.loc-pg-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.loc-pg-card.is-active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.loc-pg-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}
.loc-pg-card-tag {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}
.loc-pg-card-region {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.loc-pg-card-name {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}
.loc-pg-card-addr {
    font-size: 0.8rem;
    line-height: 1.55;
    color: #64748b;
    margin: 0 0 0.7rem;
}
.loc-pg-card-contact {
    font-size: 0.8rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 1rem;
}
.loc-pg-card-contact strong {
    color: #334155;
    font-weight: 700;
}
.loc-pg-card-select {
    width: 100%;
    margin-top: auto;
    padding: 0.7rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background: #2563eb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.loc-pg-card-select:hover {
    background: #1d4ed8;
}
.loc-pg-card.is-active .loc-pg-card-select {
    background: #1e40af;
}
.loc-pg-card-maps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
}
.loc-pg-card-maps:hover {
    color: #2563eb;
}
.loc-pg-card-maps svg {
    width: 12px;
    height: 12px;
}

/* ---- online-filing banner ---- */
.loc-pg-online-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    background: linear-gradient(120deg, #0a1d4d, #0d235d 50%, #142962);
    border: 1px solid #1e3a70;
    border-radius: 22px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
}
.loc-pg-online-text {
    min-width: 0;
    max-width: 640px;
}
.loc-pg-online-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}
.loc-pg-online-eyebrow svg {
    width: 13px;
    height: 13px;
}
.loc-pg-online-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.6rem;
}
.loc-pg-online-body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
}
.loc-pg-online-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    background: #2563eb;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s;
}
.loc-pg-online-btn:hover {
    background: #1d4ed8;
}
.loc-pg-online-btn:hover .rd-arrow {
    transform: translateX(3px);
}

/* ---- responsive ---- */
@media (max-width: 980px) {
    .loc-pg-all-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 860px) {
    .loc-pg-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 760px) {
    .loc-pg-detail-head {
        flex-direction: column;
    }
    .loc-pg-detail-actions {
        width: 100%;
    }
    .loc-pg-detail-actions .svc-rd-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
    .loc-pg-detail-grid {
        grid-template-columns: 1fr;
    }
    .loc-pg-online-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .loc-pg-online-btn {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 560px) {
    .loc-pg-all-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 460px) {
    .loc-pg-tabs {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   SERVICE DETAIL PAGE  (service_detail.html) -- redesigned to the
   home-page system. Reuses .ct-rd-eyebrow, .svc-rd-btn*, .faq-rd*,
   and .cta-rd-form-card* for the dark sticky booking form.
   ============================================================ */

.sd-rd-hero,
.sd-rd-body,
.sd-rd-benefits,
.sd-rd-cta {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}

/* Left/right edge lines up with the home-page redesign sections. */
.sd-rd-hero > .container,
.sd-rd-body > .container,
.sd-rd-benefits > .container,
.sd-rd-cta > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* ---- Hero (light band, subtle blue wash) ---- */
.sd-rd-hero {
    background:
        radial-gradient(1100px 380px at 12% -40%, #eef4ff 0%, rgba(238, 244, 255, 0) 70%),
        #f8fafc !important;
    border-bottom: 1px solid #e6ebf2;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2.25rem, 4vw, 3.25rem);
}

.sd-rd-hero-inner {
    max-width: 820px;
}

.sd-rd-hero h1 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.12;
    margin: 0 0 0.9rem;
}

.sd-rd-hero-intro {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 1.6rem;
    max-width: 680px;
}

.sd-rd-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.6rem;
}
.sd-rd-hero-actions .svc-rd-btn {
    font-size: 0.92rem;
    padding: 0.8rem 1.4rem;
}
.sd-rd-hero-actions .svc-rd-btn svg {
    width: 15px;
    height: 15px;
}

.sd-rd-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}
.sd-rd-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
}
.sd-rd-trust svg {
    width: 16px;
    height: 16px;
    color: #2563eb;
    flex-shrink: 0;
}

/* ---- Body: 2-col (content + sticky form) ---- */
.sd-rd-body {
    background: #ffffff !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.sd-rd-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.5rem 3rem;
    align-items: start;
}

.sd-rd-main {
    min-width: 0;
}

.sd-rd-overview h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
}
.sd-rd-prose p {
    font-size: 1rem;
    line-height: 1.7;
    color: #475569;
    margin: 0 0 1rem;
}
.sd-rd-prose p:last-child {
    margin-bottom: 0;
}

/* "Ideal for" callout */
.sd-rd-ideal {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
}
.sd-rd-ideal svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #2563eb;
}
.sd-rd-ideal p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #334155;
}
.sd-rd-ideal strong {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    margin-bottom: 0.2rem;
}

/* "What's included" checklist card */
.sd-rd-incl {
    margin-top: 1.75rem;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: clamp(1.35rem, 3vw, 1.85rem);
}
.sd-rd-incl h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
}
.sd-rd-incl ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}
.sd-rd-incl li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #475569;
}
.sd-rd-incl li svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #2563eb;
}

/* ---- Sticky booking form (dark) ---- */
.sd-rd-aside {
    position: sticky;
    top: 1.5rem;
}
.sd-rd-aside .cta-rd-form-card .cta-rd-form-title {
    font-size: 1.4rem;
}
/* Same 2-up field grid as the popup/home consultation form (narrower
   gap since this card is a bit tighter than that one) -- keeps the
   form compact instead of stretching far past the left column. */
.sd-rd-aside .cta-rd-fields {
    gap: 0.7rem 0.9rem;
}
/* Django-rendered widgets carry .form-control; normalise them to the
   dark-card input styling used elsewhere in the redesign. */
.sd-rd-aside .cta-rd-form-card .form-control {
    width: 100%;
    font-family: inherit;
    font-size: 0.9rem;
    color: #e2e8f0;
    background: #060c17;
    border: 1px solid #1e3a70;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.sd-rd-aside .cta-rd-form-card .form-control::placeholder {
    color: #64748b;
}
.sd-rd-aside .cta-rd-form-card .form-control:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}
.sd-rd-aside .cta-rd-form-card textarea.form-control {
    resize: vertical;
    min-height: 3.2rem;
}
.sd-rd-field-error {
    font-size: 0.75rem;
    color: #fca5a5;
    margin-top: 0.1rem;
}

/* ---- Benefits (off-white, 3-up) ---- */
.sd-rd-benefits {
    background: #f8fafc !important;
    border-top: 1px solid #e6ebf2;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.sd-rd-benefits-head {
    max-width: 640px;
    margin: 0 0 2rem;
}
.sd-rd-benefits-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.6rem;
}
.sd-rd-benefits-head p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}
.sd-rd-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.sd-rd-benefit {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sd-rd-benefit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}
.sd-rd-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    margin-bottom: 1rem;
}
.sd-rd-benefit-icon svg {
    width: 21px;
    height: 21px;
}
.sd-rd-benefit h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.45rem;
}
.sd-rd-benefit p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* ---- Final CTA band (navy) ---- */
.sd-rd-cta {
    background: linear-gradient(120deg, #0a1d4d, #0d235d 55%, #142962);
    color: #cbd5e1;
    padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.sd-rd-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.sd-rd-cta h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 0.8rem;
}
.sd-rd-cta p {
    font-size: 1rem;
    line-height: 1.65;
    color: #cbd5e1;
    margin: 0 auto 1.6rem;
    max-width: 52ch;
}
.sd-rd-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
}
.sd-rd-cta-actions .svc-rd-btn {
    font-size: 0.95rem;
    padding: 0.85rem 1.6rem;
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .sd-rd-grid {
        grid-template-columns: 1fr;
    }
    .sd-rd-aside {
        position: static;
    }
    .sd-rd-benefits-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .sd-rd-hero-actions .svc-rd-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
    .sd-rd-cta-actions .svc-rd-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}


/* Generic centered-hero modifier -- add alongside .sd-rd-hero on any
   page that wants its eyebrow/H1/intro centered instead of the
   system's default left-aligned layout (used by /services/ and
   /tax-tools/ so far). */
.sd-rd-hero-center .sd-rd-hero-inner {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.sd-rd-hero-center .sd-rd-hero-intro {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   SERVICES LIST PAGE (services.html) -- the full catalog, one
   detailed card per service. The cards themselves reuse the home
   page's .svc-rd-grid / .svc-rd-card system as-is (same 3-up grid,
   same "Book Consultation" + "Call" row then full-width "Full
   Details" button) -- deliberately a DIFFERENT section wrapper than
   home's `.svc-rd` so this page's cards don't inherit that section's
   line-clamp/ellipsis rules (see the "Card copy on the HOME PAGE..."
   comment further up this file) and show the full text instead.
   The hero reuses .sd-rd-hero / .ct-rd-eyebrow, centered via the
   generic .sd-rd-hero-center modifier above.
   ============================================================ */

.svcs-rd-list {
    background: #f8fafc !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
.svcs-rd-list > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}
.svcs-rd-list .svc-rd-card {
    background: #ffffff;
}


/* ============================================================
   TAX TOOLS PAGE (tax_tools.html) -- interactive document checklist
   + key deadlines + FAQ + tips. Reuses .sd-rd-hero / .sd-rd-cta /
   .ct-rd-eyebrow / .svc-rd-btn* / .faq-rd-* (the FAQ is the exact
   same click-to-expand accordion used on the home and service
   pages). Everything below is new to this page.
   ============================================================ */
.tt-rd {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
.tt-rd > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

.tt-rd-checklist {
    background: #ffffff !important;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.tt-rd-deadlines {
    background: #f8fafc !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    border-top: 1px solid #e6ebf2;
    border-bottom: 1px solid #e6ebf2;
}
.tt-rd-tips {
    background: #ffffff !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.tt-rd-section-head {
    max-width: 640px;
    margin: 0 auto 2.5rem;
    text-align: center;
}
.tt-rd-section-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0.65rem 0 0.65rem;
}
.tt-rd-section-head p {
    font-size: 0.98rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* ---- Checklist tabs ---- */
.tt-rd-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
}
.tt-rd-tab {
    display: inline-block;
    text-decoration: none;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tt-rd-tab:hover {
    background: #e2e8f0;
}
.tt-rd-tab.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* ---- Checklist panel ---- */
.tt-rd-panel-card {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 20px;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
}

.tt-rd-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e6ebf2;
    margin-bottom: 1.5rem;
}
.tt-rd-panel-head h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.35rem;
}
.tt-rd-panel-head > div:first-child p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    max-width: 46ch;
}

.tt-rd-readiness {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-shrink: 0;
}
.tt-rd-readiness-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
}
.tt-rd-readiness-label {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.tt-rd-readiness-count {
    font-size: 0.85rem;
    color: #334155;
}
.tt-rd-readiness-count strong {
    color: #2563eb;
    font-size: 1.05rem;
}
.tt-rd-ring {
    --pct: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(#2563eb calc(var(--pct) * 1%), #e2e8f0 0);
    display: grid;
    place-items: center;
    transition: background 0.25s ease;
}
.tt-rd-ring::after {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
}

.tt-rd-progress-track {
    height: 8px;
    border-radius: 999px;
    background: #eef2f7;
    overflow: hidden;
    margin-bottom: 1.75rem;
}
.tt-rd-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.tt-rd-category {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563eb;
    margin: 1.5rem 0 0.75rem;
}
.tt-rd-category:first-of-type {
    margin-top: 0;
}

.tt-rd-items {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}
.tt-rd-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    cursor: pointer;
}
.tt-rd-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #2563eb;
    cursor: pointer;
}
.tt-rd-item-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}
.tt-rd-item-desc {
    display: block;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #64748b;
    margin-top: 0.15rem;
}
.tt-rd-item-main {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-rd-essential {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    white-space: nowrap;
}

.tt-rd-note {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #334155;
    margin-bottom: 1.5rem;
}
.tt-rd-note svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #2563eb;
}

.tt-rd-btn-arrow {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.tt-rd-panel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e6ebf2;
}
.tt-rd-panel-foot span {
    font-size: 0.88rem;
    color: #64748b;
}
.tt-rd-panel-foot strong {
    color: #0f172a;
}

/* ---- Deadlines grid ---- */
.tt-rd-deadlines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.tt-rd-deadline-card {
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-left: 4px solid var(--tt-tag-color, #2563eb);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tt-rd-deadline-card[data-tag="personal"] { --tt-tag-color: #2563eb; }
.tt-rd-deadline-card[data-tag="corporate"] { --tt-tag-color: #4f46e5; }
.tt-rd-deadline-card[data-tag="payroll"] { --tt-tag-color: #0891b2; }
.tt-rd-deadline-card[data-tag="gst_hst"] { --tt-tag-color: #1e3a8a; }

.tt-rd-deadline-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}
.tt-rd-deadline-date {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tt-tag-color, #2563eb);
    line-height: 1.25;
}
.tt-rd-deadline-tag {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tt-tag-color, #2563eb);
    background: color-mix(in srgb, var(--tt-tag-color, #2563eb) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--tt-tag-color, #2563eb) 25%, #ffffff);
    border-radius: 999px;
    padding: 0.28rem 0.6rem;
    white-space: nowrap;
}
.tt-rd-deadline-card h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.tt-rd-deadline-card p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}

.tt-rd-reminder {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #334155;
}
.tt-rd-reminder svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #2563eb;
}

/* ---- Tips ---- */
.tt-rd-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.tt-rd-tip {
    background: #f8fafc;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 1.5rem;
}
.tt-rd-tip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.85rem;
}
.tt-rd-tip h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.tt-rd-tip p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}
.tt-rd-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    margin-top: 2rem;
}
.tt-rd-cta-row span {
    font-size: 0.92rem;
    color: #475569;
}

@media (max-width: 960px) {
    .tt-rd-deadlines-grid,
    .tt-rd-tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 760px) {
    .tt-rd-panel-head {
        flex-direction: column;
    }
    .tt-rd-readiness {
        align-self: stretch;
        justify-content: space-between;
    }
    .tt-rd-readiness-text {
        align-items: flex-start;
        text-align: left;
    }
}
@media (max-width: 640px) {
    .tt-rd-deadlines-grid,
    .tt-rd-tips-grid {
        grid-template-columns: 1fr;
    }
    .tt-rd-panel-foot {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ============================================================
   ABOUT PAGE (about.html) -- hero reuses .sd-rd-hero/.sd-rd-hero-center
   + .ct-rd-eyebrow (same system as /services/ and /tax-tools/). The
   "at a glance" card in the Our Story section reuses the home page's
   dark .wc-rd-about* card exactly as-is. The closing CTA reuses
   .sd-rd-cta (same as /service/<slug>/). Only the story checklist,
   Mission/Vision cards, and the Values grid below are new.
   ============================================================ */

/* ---- Hero stat row (added below .sd-rd-hero-intro on this page) ---- */
.abt-rd-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem 2.75rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e6ebf2;
}
.abt-rd-hero-stats div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.abt-rd-hero-stats strong {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
}
.abt-rd-hero-stats span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-top: 0.2rem;
}

.abt-rd-story,
.abt-rd-mv,
.abt-rd-values {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
.abt-rd-story > .container,
.abt-rd-mv > .container,
.abt-rd-values > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* ---- Our Story ---- */
.abt-rd-story {
    background: #ffffff !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.abt-rd-story h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem;
}
.abt-rd-story-lead {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.5;
    margin: 0 0 1rem;
}
.abt-rd-story p {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #475569;
}
/* Beats the plain-element rule above so the dark "at a glance" card
   (reused from home.html's .wc-rd-about) keeps its own light-on-navy
   bio color instead of inheriting this section's dark body-text color. */
.abt-rd-story .wc-rd-about-bio {
    color: #cbd5e1;
}
.abt-rd-points {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.abt-rd-points li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1e293b;
}
.abt-rd-points svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: #17c964;
}

/* ---- Mission & Vision ---- */
.abt-rd-mv {
    background: #f8fafc !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    border-top: 1px solid #e6ebf2;
    border-bottom: 1px solid #e6ebf2;
}
.abt-rd-mv-head,
.abt-rd-values-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.abt-rd-mv-head h2,
.abt-rd-values-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0.6rem 0 0.6rem;
}
.abt-rd-mv-head p,
.abt-rd-values-head p {
    font-size: 1rem;
    color: #475569;
    margin: 0;
}
.abt-rd-mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}
.abt-rd-mv-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--mv-accent, #2563eb);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.abt-rd-mv-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--mv-accent, #2563eb);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
}
.abt-rd-mv-icon svg {
    width: 24px;
    height: 24px;
}
.abt-rd-mv-card h3 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.6rem;
}
.abt-rd-mv-card p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #475569;
    margin: 0;
}

/* ---- Core Values ---- */
.abt-rd-values {
    background: #ffffff !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.abt-rd-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.abt-rd-value-card {
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
    padding: 1.85rem 1.6rem;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.abt-rd-value-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.abt-rd-value-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--val-accent, #2563eb);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
}
.abt-rd-value-icon svg {
    width: 22px;
    height: 22px;
}
.abt-rd-value-card h4 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.abt-rd-value-card p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

@media (max-width: 900px) {
    .abt-rd-mv-grid {
        grid-template-columns: 1fr;
    }
    .abt-rd-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .abt-rd-values-grid {
        grid-template-columns: 1fr;
    }
    .abt-rd-hero-stats {
        gap: 1.25rem 1.75rem;
    }
}

/* ============================================================
   TEAM PAGE (team.html) -- hero reuses .sd-rd-hero/.sd-rd-hero-center
   + .ct-rd-eyebrow (same system as /services/ and /tax-tools/), and
   the closing CTA reuses .sd-rd-cta (same as /service/<slug>/). The
   founder/leadership card below reuses the same dark navy gradient
   language as home.html's .wc-rd-about, just bigger and with a real
   photo slot. Everything else (grid cards, fallback avatar) is new.
   ============================================================ */
.team-rd-spotlight,
.team-rd-grid-section,
.team-rd-empty {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
.team-rd-spotlight > .container,
.team-rd-grid-section > .container,
.team-rd-empty > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* ---- Leadership spotlight ---- */
.team-rd-spotlight {
    background: #ffffff !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.team-rd-spotlight-card {
    display: grid;
    grid-template-columns: 300px 1fr;
    background: linear-gradient(150deg, #0a1d4d, #0d235d);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(10, 29, 77, 0.18);
}
.team-rd-spotlight-media {
    position: relative;
    background: linear-gradient(150deg, #1e3a8a, #2563eb);
}
.team-rd-spotlight-photo {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    /* Deliberately plain center, not the grid cards' top-anchored
       crop: this photo's box is much shorter relative to its width
       here (especially the mobile 4:3 override below), and anchoring
       a tall portrait source to the top showed hair down to about
       eye level and cropped off the rest of the face entirely -- a
       worse failure than the grid cards' original centered-crop bug,
       which only trimmed some chin/beard, never the whole lower face. */
    object-position: center;
}
.team-rd-spotlight-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 320px;
    color: rgba(255, 255, 255, 0.85);
}
.team-rd-spotlight-fallback svg {
    width: 96px;
    height: 96px;
}
.team-rd-spotlight-body {
    padding: clamp(1.75rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.team-rd-spotlight-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #38bdf8;
    margin-bottom: 0.85rem;
}
.team-rd-spotlight-name {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 0 0 0.4rem;
}
.team-rd-spotlight-quals {
    font-size: 0.95rem;
    font-weight: 500;
    color: #93b4f5;
}
.team-rd-spotlight-position {
    font-size: 1rem;
    font-weight: 600;
    color: #7dd3fc;
    margin: 0 0 1rem;
}
.team-rd-spotlight-bio {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0;
    max-width: 60ch;
}
.team-rd-spotlight-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.team-rd-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
}
.team-rd-contact-link:hover {
    color: #38bdf8;
}
.team-rd-contact-link svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: #38bdf8;
}
.team-rd-social {
    display: inline-flex;
    gap: 0.6rem;
    margin-left: auto;
}
.team-rd-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    transition: background 0.15s, color 0.15s;
}
.team-rd-social a:hover {
    background: #38bdf8;
    color: #0a1d4d;
}
.team-rd-social a svg {
    width: 15px;
    height: 15px;
}

/* ---- Grid of specialists ---- */
.team-rd-grid-section {
    background: #f8fafc !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.team-rd-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.team-rd-section-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0.6rem 0 0.6rem;
}
.team-rd-section-head p {
    font-size: 1rem;
    color: #475569;
    margin: 0;
}
.team-rd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.team-rd-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.team-rd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}
.team-rd-card-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(150deg, #4EC5D4, #5A7FFF);
}
.team-rd-card-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.35s ease;
}
.team-rd-card:hover .team-rd-card-photo {
    transform: scale(1.04);
}
.team-rd-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.9);
}
.team-rd-card-fallback svg {
    width: 64px;
    height: 64px;
}
.team-rd-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.5rem;
}
.team-rd-card-name {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 0.35rem;
}
.team-rd-card-quals {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}
.team-rd-card-position {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin: 0.6rem 0 0.85rem;
}
.team-rd-card-bio {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.team-rd-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #eef2f7;
}
.team-rd-contact-link-sm {
    color: #475569;
}
.team-rd-contact-link-sm svg {
    color: #2563eb;
}
.team-rd-contact-link-sm:hover {
    color: #2563eb;
}
.team-rd-card-foot .team-rd-social {
    margin-left: 0;
}
.team-rd-card-foot .team-rd-social a {
    width: 28px;
    height: 28px;
    background: #f1f5f9;
    color: #475569;
}
.team-rd-card-foot .team-rd-social a:hover {
    background: #2563eb;
    color: #ffffff;
}
.team-rd-card-foot .team-rd-social a svg {
    width: 13px;
    height: 13px;
}

/* ---- Empty state ---- */
.team-rd-empty {
    background: #f8fafc !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.team-rd-empty-inner {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    color: #64748b;
}
.team-rd-empty-inner svg {
    width: 48px;
    height: 48px;
    color: #94a3b8;
    margin-bottom: 1rem;
}
.team-rd-empty-inner h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.team-rd-empty-inner p {
    margin: 0;
}

@media (max-width: 960px) {
    .team-rd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 700px) {
    .team-rd-spotlight-card {
        grid-template-columns: 1fr;
    }
    .team-rd-spotlight-media {
        /* Taller than the old 4/3: that ratio was short enough to crop
           a portrait headshot down to roughly hair-to-eyes only. 3/4
           keeps nearly the whole source photo in frame regardless of
           exactly how it's framed. */
        aspect-ratio: 3 / 4;
    }
    .team-rd-spotlight-photo,
    .team-rd-spotlight-fallback {
        min-height: 0;
    }
}
@media (max-width: 560px) {
    .team-rd-grid {
        grid-template-columns: 1fr;
    }
    .team-rd-social {
        margin-left: 0;
        width: 100%;
    }
}

/* ============================================================
   BLOG (blog_list.html, blog_detail.html, _blog_card.html) --
   hero/article-header reuse .sd-rd-hero/.sd-rd-hero-center +
   .ct-rd-eyebrow, closing CTA reuses .sd-rd-cta, pagination/CTA
   buttons reuse .svc-rd-btn*. The spotlight card, grid cards, and
   article typography (.blog-rd-prose) are new to this page. The
   article body itself (.blog-rd-prose) only ever receives
   {{ post.content|linebreaks }} -- the actual post text is never
   altered by this file, only how it's framed.
   ============================================================ */
.blog-rd-spotlight,
.blog-rd-grid-section,
.blog-rd-empty,
.blog-rd-article-hero,
.blog-rd-article-image,
.blog-rd-article-body,
.blog-rd-related {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
.blog-rd-spotlight > .container,
.blog-rd-grid-section > .container,
.blog-rd-empty > .container,
.blog-rd-article-hero > .container,
.blog-rd-article-image > .container,
.blog-rd-article-body > .container,
.blog-rd-related > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* ---- shared bits: meta dot separator, card "Featured" badge ---- */
.blog-rd-dot {
    color: #cbd5e1;
    font-size: 0.7rem;
}

/* ---- Latest-article spotlight (blog_list.html, page 1 only) ---- */
.blog-rd-spotlight {
    background: #ffffff !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2rem);
}
.blog-rd-spotlight-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.blog-rd-spotlight-card:hover {
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}
.blog-rd-spotlight-media {
    display: block;
    position: relative;
    min-height: 280px;
    background: linear-gradient(150deg, #4EC5D4, #5A7FFF);
}
.blog-rd-spotlight-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.blog-rd-spotlight-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.9);
}
.blog-rd-spotlight-fallback svg {
    width: 64px;
    height: 64px;
}
.blog-rd-spotlight-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(1.75rem, 4vw, 3rem);
}
.blog-rd-spotlight-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.blog-rd-spotlight-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 0.6rem;
}
.blog-rd-spotlight-meta {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1rem;
}
.blog-rd-spotlight-excerpt {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 1.4rem;
}
.blog-rd-spotlight-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #2563eb;
    margin-top: auto;
}
.blog-rd-spotlight-card:hover .blog-rd-spotlight-link .rd-arrow {
    transform: translateX(4px);
}

/* ---- Grid (main list, related articles) ---- */
.blog-rd-grid-section {
    background: #f8fafc !important;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.blog-rd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
.blog-rd-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blog-rd-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}
.blog-rd-card-media {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: linear-gradient(150deg, #4EC5D4, #5A7FFF);
}
.blog-rd-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.blog-rd-card:hover .blog-rd-card-media img {
    transform: scale(1.05);
}
.blog-rd-card-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.9);
}
.blog-rd-card-fallback svg {
    width: 40px;
    height: 40px;
}
.blog-rd-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: #2563eb;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}
.blog-rd-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.4rem 1.5rem 1.6rem;
}
.blog-rd-card-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 0.6rem;
}
.blog-rd-card-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.6rem;
}
.blog-rd-card-title a {
    color: #0f172a;
    text-decoration: none;
}
.blog-rd-card:hover .blog-rd-card-title a {
    color: #2563eb;
}
.blog-rd-card-excerpt {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #475569;
    margin: 0 0 1.1rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-rd-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    margin-top: auto;
}
.blog-rd-card:hover .blog-rd-card-link .rd-arrow {
    transform: translateX(4px);
}

/* ---- Pagination ---- */
.blog-rd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 3rem;
}
.blog-rd-page-current {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
}

/* ---- Empty state ---- */
.blog-rd-empty {
    background: #f8fafc !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.blog-rd-empty-inner {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    color: #64748b;
}
.blog-rd-empty-inner svg {
    width: 48px;
    height: 48px;
    color: #94a3b8;
    margin-bottom: 1rem;
}
.blog-rd-empty-inner h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.blog-rd-empty-inner p {
    margin: 0;
}

/* ---- Article header (blog_detail.html) ---- */
.blog-rd-article-hero {
    background: #f8fafc !important;
    border-bottom: 1px solid #e6ebf2;
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 2.5rem);
}
.blog-rd-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.blog-rd-back:hover .rd-arrow {
    transform: translateX(-3px);
}
.blog-rd-article-title {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    max-width: 900px;
    margin: 0 0 1rem;
}
.blog-rd-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #64748b;
}
.blog-rd-featured-pill {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

/* ---- Featured image ---- */
.blog-rd-article-image {
    background: #f8fafc !important;
    padding: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}
.blog-rd-article-image img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
}

/* ---- Article body + typography ---- */
.blog-rd-article-body {
    background: #ffffff !important;
    padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 4rem);
}
.blog-rd-prose {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #334155;
}
.blog-rd-prose p {
    margin: 0 0 1.4rem;
}
.blog-rd-prose p:last-child {
    margin-bottom: 0;
}
.blog-rd-prose strong,
.blog-rd-prose b {
    color: #0f172a;
    font-weight: 700;
}
.blog-rd-prose a {
    color: #2563eb;
    text-decoration: underline;
}
/* Headings and <hr> below are unused by blog posts themselves (plain
   paragraphs only) but shared by any other page using .blog-rd-prose
   for a constrained-width reading column, e.g. privacy_policy.html. */
.blog-rd-prose h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin: 2.25rem 0 0.85rem;
}
.blog-rd-prose h2:first-child {
    margin-top: 0;
}
.blog-rd-prose hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2rem 0;
}
.blog-rd-prose-fineprint {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* ---- Author card ---- */
.blog-rd-author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 760px;
    margin: 2.5rem auto 0;
    padding: 1.5rem;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
}
.blog-rd-author-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(150deg, #4EC5D4, #5A7FFF);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.blog-rd-author-avatar svg {
    width: 26px;
    height: 26px;
}
.blog-rd-author-info {
    display: flex;
    flex-direction: column;
}
.blog-rd-author-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.2rem;
}
.blog-rd-author-name {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.blog-rd-author-bio {
    font-size: 0.88rem;
    color: #475569;
    margin-top: 0.15rem;
}

/* ---- Share ---- */
.blog-rd-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 760px;
    margin: 1.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid #eef2f7;
}
.blog-rd-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}
.blog-rd-share-buttons {
    display: flex;
    gap: 0.6rem;
}
.blog-rd-share-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    transition: background 0.15s, color 0.15s;
}
.blog-rd-share-buttons a:hover {
    background: #2563eb;
    color: #ffffff;
}
.blog-rd-share-buttons svg {
    width: 15px;
    height: 15px;
}

/* ---- Related articles ---- */
.blog-rd-related {
    background: #f8fafc !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    border-top: 1px solid #e6ebf2;
}
.blog-rd-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.blog-rd-section-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0.6rem 0 0;
}

@media (max-width: 960px) {
    .blog-rd-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 760px) {
    .blog-rd-spotlight-card {
        grid-template-columns: 1fr;
    }
    .blog-rd-spotlight-media {
        min-height: 220px;
        aspect-ratio: 2 / 1;
    }
}
@media (max-width: 560px) {
    .blog-rd-grid {
        grid-template-columns: 1fr;
    }
    .blog-rd-author-card {
        flex-direction: column;
        text-align: center;
    }
    .blog-rd-share {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   TESTIMONIALS PAGE (testimonials.html) -- hero reuses the shared
   .sd-rd-hero / .sd-rd-cta system (see about.html). The body is a
   "wall of love": the first review becomes a large navy spotlight
   quote (same gradient as the home-page About preview), the rest
   sit in a colour-accented 3-up grid. Tag/star/quote/name/source
   classes (.tst-*) are shared with the home-page preview cards so
   both places read as the same visual language.
   ============================================================ */
.tm-pg-wall {
    background: #ffffff !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
}
.tm-pg-wall > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}

/* ---- Featured trio: 3 different kinds of client (personal / business /
   a complex CRA-resolution case) introduced by a short centred head ---- */
.tm-pg-featured-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2rem;
}
.tm-pg-featured-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin: 0.85rem 0 0;
}
.tm-pg-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.tm-pg-featured-card {
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
}
.tm-pg-featured-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--tm-accent, #2563eb);
    margin-bottom: 0.6rem;
}

/* ---- Card (shared by the featured trio and the grid below): a flex
   column with the quote set to grow, so the name/source line always
   sits flush with the bottom of the card regardless of quote length --
   otherwise shorter quotes leave the name floating mid-card while
   longer ones push it down, so names in the same row never line up. ---- */
.tm-pg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.tm-pg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-top: 4px solid var(--tm-accent, #2563eb);
    border-radius: 16px;
    padding: 1.75rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tm-pg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.tm-pg-card-mark {
    position: absolute;
    top: -0.6rem;
    right: 0.75rem;
    font-family: Georgia, serif;
    font-size: 5.5rem;
    line-height: 1;
    color: var(--tm-accent, #2563eb);
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}
.tm-pg-card .tst-tag,
.tm-pg-card .tst-stars,
.tm-pg-card .tst-quote,
.tm-pg-card .tst-name,
.tm-pg-card .tst-src {
    position: relative;
}

@media (max-width: 1024px) {
    .tm-pg-featured-grid,
    .tm-pg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .tm-pg-featured-grid,
    .tm-pg-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   THANK YOU PAGE (thank_you.html) -- hero reuses .sd-rd-hero, the
   contact methods below reuse .ct-rd-method/.ct-rd-info-card as-is
   (same dark buttons + light hours card as /contact/), and the
   closing actions reuse .sd-rd-cta. Only the success icon and the
   numbered step cards are new to this page.
   ============================================================ */
.ty-pg-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #17c964;
    color: #ffffff;
    margin: 0 auto 1.25rem;
}
.ty-pg-check svg {
    width: 32px;
    height: 32px;
}
.ty-pg-lead {
    font-size: 1.15rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.ty-pg-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.ty-pg-section-head h2 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #0f172a;
    margin: 0.6rem 0 0;
}

/* ---- "What Happens Next" steps ---- */
.ty-pg-steps {
    background: #f8fafc !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    border-top: 1px solid #e6ebf2;
    border-bottom: 1px solid #e6ebf2;
}
.ty-pg-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.ty-pg-step {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: 4px solid var(--step-accent, #2563eb);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}
.ty-pg-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--step-accent, #2563eb);
    color: #ffffff;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 auto 1.1rem;
}
.ty-pg-step h4 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.ty-pg-step p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
}

/* ---- Contact methods + hours (same components as /contact/) ---- */
.ty-pg-contact {
    background: #ffffff !important;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.ty-pg-methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.ty-pg-hours {
    max-width: 420px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .ty-pg-steps-grid,
    .ty-pg-methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 700px) {
    .ty-pg-steps-grid,
    .ty-pg-methods-grid {
        grid-template-columns: 1fr;
    }
}