/* ============================================================
   TrueCost Insurance — Main Stylesheet
   Design tokens inspired by Univista Insurance:
   - Royal blue, deep navy, white, with warm accents
   - Bold display type, generous spacing, soft shadows
   ============================================================ */

:root {
    --c-primary:      #2A6BD6;     /* brand royal blue */
    --c-primary-dark: #1F54AC;
    --c-primary-soft: #EAF2FC;
    --c-secondary:    #0F2447;     /* deep navy */
    --c-secondary-2:  #16315F;
    --c-accent:       #FFC107;     /* warm yellow */
    --c-text:         #102447;
    --c-text-soft:    #4B5366;
    --c-muted:        #7A8195;
    --c-bg:           #FFFFFF;
    --c-bg-soft:      #F6F8FB;
    --c-bg-alt:       #EAF1FB;
    --c-border:       #DDE6F2;

    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-xl: 28px;

    --shadow-sm: 0 2px 6px rgba(15, 30, 61, .06);
    --shadow:    0 12px 30px rgba(15, 30, 61, .10);
    --shadow-lg: 0 24px 50px rgba(15, 30, 61, .15);

    --container: 1200px;

    --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--c-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--c-primary-dark); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--c-secondary);
    line-height: 1.2;
    margin: 0 0 .6em;
    font-weight: 800;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; }

ul, ol { padding-left: 1.2em; margin: 0 0 1em; }

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

.section { padding: 88px 0; }
.section--services    { background: var(--c-bg-soft); }
.section--steps       { background: var(--c-bg-alt); }
.section--testimonials{ background: linear-gradient(180deg,#fff 0%, var(--c-bg-soft) 100%); }
.section--blog        { background: var(--c-bg-soft); }

.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link {
    position: absolute; left: -9999px; top: 0; padding: 8px 14px; background: var(--c-secondary); color: #fff; z-index: 9999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Buttons ------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: .55em; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
    cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn--lg    { font-size: 1rem; padding: 16px 28px; }
.btn--block { display: flex; width: 100%; }

.btn--primary {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
    box-shadow: 0 10px 22px rgba(42,107,214,.28);
}
.btn--primary:hover {
    background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff;
    transform: translateY(-2px); box-shadow: 0 14px 28px rgba(42,107,214,.35);
}

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

.btn--white { background: #fff; color: var(--c-primary); border-color: #fff; }
.btn--white:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }

.btn--ghost-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost-white:hover { background: #fff; color: var(--c-primary); border-color: #fff; }

/* Topbar ------------------------------------------------------- */
.topbar {
    background: var(--c-secondary);
    color: rgba(255,255,255,.85);
    font-size: .85rem;
}
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: #fff; }

.topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; min-height: 42px; flex-wrap: wrap;
}
.topbar__contact, .topbar__menu, .topbar__lang, .topbar__social {
    list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
}
.topbar__contact li { display: inline-flex; align-items: center; gap: 8px; }
.topbar__contact i { color: var(--c-primary); }

.topbar__right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar__menu li a { padding: 4px 0; }

.topbar__lang { gap: 4px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
.topbar__lang a {
    display: inline-flex; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: .75rem;
}
.topbar__lang a.is-active { background: var(--c-primary); color: #fff; }

.topbar__social { gap: 10px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.18); }
.topbar__social a {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center;
}
.topbar__social a:hover { background: var(--c-primary); }

@media (max-width: 900px) { .hide-md { display: none; } }
@media (max-width: 640px) { .hide-sm { display: none; } .topbar__lang, .topbar__social { display: none; } }

/* Site header ------------------------------------------------- */
.site-header {
    background: #fff;
    box-shadow: var(--shadow-sm);
    position: sticky; top: 0; z-index: 80;
}
.site-header__inner {
    display: flex; align-items: center; gap: 24px; min-height: 84px;
}
.site-branding { margin-right: auto; }
.site-branding .custom-logo { max-height: 56px; }
.site-title {
    font-family: var(--font-display); font-weight: 900; font-size: 1.6rem;
    color: var(--c-secondary); display: inline-flex; align-items: baseline; gap: 2px;
}
.site-title__mark { color: var(--c-primary); }
.site-title__name { color: var(--c-secondary); }
.site-title__tag {
    display: block; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted);
}
.site-title--inverse .site-title__name { color: #fff; }

.primary-nav__menu {
    list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 4px;
}
.primary-nav__menu li { position: relative; }
.primary-nav__menu a {
    display: inline-flex; align-items: center; gap: 6px; padding: 12px 14px; border-radius: 8px;
    color: var(--c-secondary); font-family: var(--font-display); font-weight: 600; font-size: .92rem;
}
.primary-nav__menu a:hover,
.primary-nav__menu .current-menu-item > a,
.primary-nav__menu a.is-active {
    background: var(--c-primary-soft); color: var(--c-primary);
}

/* Sections targeted by the in-page nav need offset so the sticky header
   doesn't cover the heading when the user clicks an anchor link. */
#services, #why, #how, #testimonials, #locations, #blog, #colophon {
    scroll-margin-top: 100px;
}
.primary-nav__menu .menu-item-has-children > a::after {
    content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin-left: 4px; margin-top: -2px;
}
.primary-nav__menu .sub-menu {
    position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff;
    box-shadow: var(--shadow); border-radius: var(--radius); padding: 8px;
    list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s; z-index: 10;
}
.primary-nav__menu li:hover > .sub-menu,
.primary-nav__menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav__menu .sub-menu a { padding: 10px 12px; border-radius: 8px; }

.site-header__cta { flex-shrink: 0; }
/* Full number by default; the short label only appears on narrow phones. */
.site-header__cta-short { display: none; }

.nav-toggle {
    display: none; background: transparent; border: 0; padding: 8px; cursor: pointer;
    width: 44px; height: 44px; border-radius: 8px;
}
.nav-toggle__bar {
    display: block; width: 24px; height: 3px; background: var(--c-secondary); border-radius: 2px; margin: 4px auto;
    transition: transform .25s, opacity .25s;
}
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Below the desktop breakpoint the header reads: hamburger, logo, then the call
   button pushed to the right edge by .site-branding's auto margin. The nav itself
   drops out of flex flow — it is the absolutely positioned panel below. */
@media (max-width: 1024px) {
    .nav-toggle { display: block; }
    .site-header__cta { display: inline-flex; }

    .primary-nav {
        position: absolute; top: 100%; left: 0; right: 0; background: #fff;
        box-shadow: var(--shadow); border-top: 1px solid var(--c-border);
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
    }
    .primary-nav.is-open { max-height: 80vh; overflow: auto; }
    .primary-nav__menu { flex-direction: column; align-items: stretch; gap: 0; padding: 12px; }
    .primary-nav__menu a { padding: 14px 12px; }
    .primary-nav__menu .sub-menu {
        position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none;
        padding: 0 0 4px 18px;
    }
}

/* Narrow phones: the logo and a full phone number do not fit side by side, so the
   button drops to "Call us". The digits stay in the href, so the dialler still
   gets them — and the label no longer needs shrinking to fit. */
@media (max-width: 480px) {
    .site-header__inner { gap: 12px; min-height: 68px; }
    .site-branding .custom-logo { max-height: 42px; }

    .site-header__cta-number { display: none; }
    .site-header__cta-short  { display: inline; }

    /* Icon stacked over the label, and the pill dropped entirely: a filled button
       here competes with the page's own primary CTA, and stacking keeps a 44px tap
       target without eating the horizontal room the logo needs. */
    .site-header__cta {
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-height: 44px;
        padding: 4px 6px;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        color: var(--c-primary);
        font-size: .8rem;
        line-height: 1.15;
    }
    .site-header__cta i { font-size: 1.3rem; }

    /* .btn--primary:hover would otherwise repaint the pill on tap — same
       specificity, so this only wins by being later in the file. */
    .site-header__cta:hover,
    .site-header__cta:focus {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        color: var(--c-primary);
        transform: none;
    }
}

/* Eyebrow / section heads ------------------------------------- */
.eyebrow {
    display: inline-flex; align-items: center; gap: .5em;
    font-family: var(--font-display); font-weight: 700; font-size: .8rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--c-primary);
    background: var(--c-primary-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px;
}
.eyebrow--center { margin-left: auto; margin-right: auto; }

.section-head { max-width: 760px; margin: 0 0 56px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: .35em; }
.section-head p { color: var(--c-text-soft); font-size: 1.08rem; }

/* HERO -------------------------------------------------------- */
.hero {
    position: relative; isolation: isolate;
    padding: 72px 0 36px; color: #fff; overflow: hidden;
}
.hero__bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(1100px 480px at -10% -10%, rgba(255,255,255,.10), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(42,107,214,.45), transparent 60%),
        linear-gradient(135deg, var(--c-secondary) 0%, var(--c-secondary-2) 60%, #243A6F 100%);
}
.hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 16px);
    opacity: .6;
}

.hero__inner {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero__text .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.hero__title {
    color: #fff; font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 900; letter-spacing: -.015em;
    margin-bottom: .25em;
}
.hero__title span {
    background: linear-gradient(180deg, transparent 65%, rgba(42,107,214,.55) 65%);
    padding: 0 4px;
}
.hero__sub { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 540px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.hero__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero__actions .btn--ghost:hover { background: #fff; color: var(--c-secondary); border-color: #fff; }
.hero__trust {
    list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 24px; flex-wrap: wrap;
    color: rgba(255,255,255,.85); font-size: .92rem;
}
.hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust i { color: var(--c-accent); }

/* Hero quote form */
.hero__form {
    background: #fff; color: var(--c-text); border-radius: var(--radius-lg);
    padding: 30px; box-shadow: var(--shadow-lg);
    border: 1px solid var(--c-border);
}
.hero__form-title { color: var(--c-secondary); margin-bottom: 6px; font-size: 1.4rem; }
.hero__form-sub { color: var(--c-text-soft); margin-bottom: 18px; font-size: .95rem; }

.quote-form fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.quote-form__types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quote-type input { position: absolute; opacity: 0; pointer-events: none; }
.quote-type span {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px; border: 2px solid var(--c-border); border-radius: var(--radius);
    cursor: pointer; font-size: .78rem; font-weight: 700; color: var(--c-text-soft);
    transition: all .2s ease;
}
.quote-type span i { font-size: 1.2rem; color: var(--c-secondary); }
.quote-type:hover span { border-color: var(--c-primary); color: var(--c-primary); }
.quote-type:hover span i { color: var(--c-primary); }
.quote-type input:checked + span {
    border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary);
}
.quote-type input:checked + span i { color: var(--c-primary); }
.quote-type input:focus-visible + span { outline: 3px solid rgba(42,107,214,.3); }

.quote-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="tel"] {
    width: 100%; padding: 13px 14px; border: 1px solid var(--c-border); border-radius: var(--radius);
    font-size: .95rem; font-family: inherit; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.quote-form input:focus {
    outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(42,107,214,.15);
}
.quote-form__fineprint {
    display: flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: .82rem; margin: 12px 0 0;
}

/* Carrier strip */
.hero__carriers {
    margin-top: 50px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    justify-content: center;
    border-top: 1px solid rgba(255,255,255,.12); padding-top: 28px;
}
.hero__carriers-label {
    font-family: var(--font-display); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    font-size: .75rem; color: rgba(255,255,255,.65);
}
.hero__carriers ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.carrier-logo {
    display: inline-flex; padding: 8px 16px; border: 1px dashed rgba(255,255,255,.3); border-radius: 8px;
    color: rgba(255,255,255,.7); font-family: var(--font-display); font-weight: 800; letter-spacing: .1em; font-size: .8rem;
}

@media (max-width: 980px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero { padding-top: 56px; }
}
@media (max-width: 480px) {
    .quote-form__types { grid-template-columns: repeat(3, 1fr); }
    .quote-form__row { grid-template-columns: 1fr; }
}

/* SERVICES ---------------------------------------------------- */
.services-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.service-card {
    background: #fff; padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative; overflow: hidden;
}
.service-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c-primary);
    transform: scaleY(0); transform-origin: top; transition: transform .3s;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--c-primary-soft); }
.service-card:hover::before { transform: scaleY(1); }
.service-card__icon {
    width: 60px; height: 60px; border-radius: 16px;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem;
    box-shadow: 0 10px 20px rgba(42,107,214,.25); margin-bottom: 18px;
}
.service-card__title { color: var(--c-secondary); margin-bottom: 10px; }
.service-card__desc { color: var(--c-text-soft); margin-bottom: 14px; }
.service-card__link {
    display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-family: var(--font-display);
    font-size: .9rem; letter-spacing: .03em;
}
.service-card__link i { transition: transform .2s; }
.service-card__link:hover i { transform: translateX(3px); }

@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } .section { padding: 60px 0; } }

/* WHY --------------------------------------------------------- */
.why-grid {
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center;
}
.why-grid__media { position: relative; }
.why-image {
    background: linear-gradient(135deg, var(--c-secondary) 0%, var(--c-primary) 110%);
    border-radius: var(--radius-xl);
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}
.why-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.why-stats {
    position: absolute; bottom: -28px; right: -16px;
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 18px; display: flex; gap: 22px;
}
.why-stat strong {
    display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--c-primary); font-weight: 900;
    line-height: 1;
}
.why-stat span { font-size: .82rem; color: var(--c-text-soft); }

.why-list { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 14px; }
.why-list li { display: flex; gap: 12px; align-items: flex-start; }
.why-list i { color: var(--c-primary); font-size: 1.2rem; margin-top: 2px; }
.why-list strong { display: block; color: var(--c-secondary); font-family: var(--font-display); }
.why-list span { color: var(--c-text-soft); font-size: .94rem; }

@media (max-width: 900px) {
    .why-grid { grid-template-columns: 1fr; gap: 70px; }
    .why-stats { right: 16px; bottom: -20px; }
}

/* STEPS ------------------------------------------------------- */
.steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step;
}
.step {
    background: #fff; padding: 36px 28px; border-radius: var(--radius-lg); position: relative;
    border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
}
.step__num {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 900; font-size: 1.5rem;
    width: 56px; height: 56px; border-radius: 16px; color: #fff;
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    box-shadow: 0 10px 20px rgba(42,107,214,.25); margin-bottom: 18px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--c-text-soft); margin: 0; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* TESTIMONIALS ----------------------------------------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial {
    background: #fff; padding: 28px; border-radius: var(--radius-lg);
    border: 1px solid var(--c-border); box-shadow: var(--shadow-sm); margin: 0;
    position: relative;
}
.testimonial::before {
    content: "\201C"; position: absolute; top: 6px; right: 18px;
    font-size: 5rem; color: var(--c-primary-soft); font-family: serif; line-height: 1;
}
.testimonial__stars { color: var(--c-accent); margin-bottom: 10px; font-size: .92rem; }
.testimonial blockquote {
    margin: 0 0 18px; color: var(--c-text); font-size: 1rem; line-height: 1.65;
    quotes: none;
}
.testimonial figcaption { display: flex; align-items: center; gap: 12px; }
.testimonial__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary), var(--c-primary-dark)); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800;
}
.testimonial__person strong { display: block; color: var(--c-secondary); font-family: var(--font-display); }
.testimonial__person small { color: var(--c-muted); font-size: .82rem; }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* LOCATIONS --------------------------------------------------- */
.locations-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.locations-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.locations-list li {
    background: #fff; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm); transition: transform .2s, border-color .2s;
}
.locations-list li:hover { transform: translateY(-3px); border-color: var(--c-primary-soft); }
.locations-list strong { display: block; color: var(--c-secondary); font-family: var(--font-display); margin-bottom: 2px; }
.locations-list span { color: var(--c-text-soft); font-size: .88rem; }

@media (max-width: 900px) { .locations-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .locations-list { grid-template-columns: 1fr; } }

/* BLOG -------------------------------------------------------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-grid--archive { grid-template-columns: repeat(2, 1fr); }
.blog-card {
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--c-bg-alt); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--c-muted); font-size: 3rem;
    background: linear-gradient(135deg, var(--c-bg-alt), var(--c-primary-soft));
}
.blog-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card__date { font-size: .8rem; color: var(--c-muted); font-weight: 600; letter-spacing: .04em; }
.blog-card__title { margin: 0 0 4px; font-size: 1.15rem; }
.blog-card__title a { color: var(--c-secondary); }
.blog-card__title a:hover { color: var(--c-primary); }
.blog-card__body p { color: var(--c-text-soft); margin: 0 0 4px; flex: 1; }
.blog-card__more { margin-top: auto; align-self: flex-start; font-weight: 700; font-family: var(--font-display); font-size: .88rem; }

@media (max-width: 900px) { .blog-grid, .blog-grid--archive { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid, .blog-grid--archive { grid-template-columns: 1fr; } }

/* CTA BAND ---------------------------------------------------- */
.cta-band {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff; position: relative; overflow: hidden;
}
.cta-band::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(400px 200px at 90% 30%, rgba(255,255,255,.18), transparent 60%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 18px);
}
.cta-band__inner {
    position: relative; padding: 50px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.9); }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* FOOTER ------------------------------------------------------ */
.site-footer { background: var(--c-secondary); color: rgba(255,255,255,.78); padding-top: 70px; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }
.site-footer .widget-title { color: #fff; font-size: 1rem; margin-bottom: 18px; letter-spacing: .04em; text-transform: uppercase; }

.site-footer__grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px;
}
.footer-col--brand .site-title { color: #fff; }
.footer-col--brand .site-title .site-title__name { color: #fff; }
.footer-about { margin: 14px 0 18px; max-width: 360px; line-height: 1.7; font-size: .94rem; }

.footer-contact { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.footer-contact i { color: var(--c-primary); margin-top: 4px; }

.footer-social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.footer-social a {
    width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
.footer-social a:hover { background: var(--c-primary); color: #fff; }

.footer-menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-menu a { font-size: .94rem; }
.footer-menu li a::before { content: "›"; margin-right: 8px; color: var(--c-primary); }

.footer-newsletter { display: flex; gap: 8px; margin-top: 6px; }
.footer-newsletter input {
    flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
    color: #fff; font-size: .92rem; font-family: inherit;
}
.footer-newsletter input::placeholder { color: rgba(255,255,255,.55); }
.footer-newsletter input:focus { outline: 0; border-color: var(--c-primary); background: rgba(255,255,255,.12); }
.footer-newsletter .btn { padding: 12px 16px; border-radius: var(--radius); }
.footer-fineprint { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 10px; }

.site-footer__bottom { background: rgba(0,0,0,.18); padding: 18px 0; }
.site-footer__bottom-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem;
}
.footer-legal { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 1000px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* PAGE BANNER + ARCHIVE -------------------------------------- */
.page-banner {
    background: linear-gradient(135deg, var(--c-secondary) 0%, var(--c-secondary-2) 100%);
    color: #fff; padding: 60px 0; position: relative; overflow: hidden;
}
.page-banner::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(700px 300px at 90% 50%, rgba(42,107,214,.25), transparent 60%);
}
.page-banner > .container { position: relative; }
.page-banner__title { color: #fff; margin: 0 0 8px; }
.page-banner__title span { color: var(--c-primary); }
.breadcrumbs { color: rgba(255,255,255,.7); font-size: .9rem; }
.breadcrumbs a { color: rgba(255,255,255,.85); }
.breadcrumbs span { margin: 0 6px; }

.archive-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
@media (max-width: 1000px) { .archive-grid { grid-template-columns: 1fr; } }

.archive-grid__side { display: flex; flex-direction: column; gap: 20px; }
.widget {
    background: #fff; padding: 22px; border-radius: var(--radius-lg);
    border: 1px solid var(--c-border); box-shadow: var(--shadow-sm);
}
.widget-title { color: var(--c-secondary); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 6px 0; border-bottom: 1px dashed var(--c-border); }
.widget li:last-child { border-bottom: 0; }

.no-sidebar .archive-grid { grid-template-columns: 1fr; }

.content-narrow { max-width: 820px; margin: 0 auto; }
.entry-thumb { margin: 0 0 28px; border-radius: var(--radius-lg); overflow: hidden; }
.entry-content { font-size: 1.05rem; line-height: 1.8; color: var(--c-text); }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content blockquote {
    margin: 1.6em 0; padding: 18px 22px; background: var(--c-primary-soft); border-left: 4px solid var(--c-primary);
    border-radius: var(--radius); color: var(--c-secondary); font-style: italic;
}
.entry-content code {
    background: var(--c-bg-alt); padding: 2px 6px; border-radius: 4px; font-size: .92em;
}
.entry-content pre {
    background: var(--c-secondary); color: #fff; padding: 18px; border-radius: var(--radius); overflow: auto;
}

.entry-meta { list-style: none; padding: 0; margin: 0 0 18px; display: flex; gap: 18px; flex-wrap: wrap; color: var(--c-text-soft); font-size: .9rem; }
.entry-meta i { color: var(--c-primary); margin-right: 4px; }
.entry-tags { margin-top: 24px; color: var(--c-text-soft); font-size: .9rem; }
.entry-tags i { color: var(--c-primary); margin-right: 6px; }

/* Pagination */
.pagination { margin-top: 30px; display: flex; justify-content: center; }
.pagination .nav-links, .navigation .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers, .navigation .page-numbers {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--c-border); color: var(--c-secondary);
    font-family: var(--font-display); font-weight: 700; font-size: .9rem;
    transition: all .2s;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

/* Search form ------------------------------------------------- */
.search-form { display: flex; gap: 6px; }
.search-form__input {
    flex: 1; padding: 12px 14px; border-radius: var(--radius);
    border: 1px solid var(--c-border); font-family: inherit; font-size: .95rem;
}
.search-form__input:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(42,107,214,.15); }
.search-form__submit {
    border: 0; background: var(--c-primary); color: #fff; padding: 0 16px; border-radius: var(--radius); cursor: pointer;
    font-size: 1rem; transition: background .2s;
}
.search-form__submit:hover { background: var(--c-primary-dark); }

/* 404 --------------------------------------------------------- */
.error-404 { text-align: center; max-width: 600px; margin: 0 auto; padding: 40px 0; }
.error-404__code {
    font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 16vw, 11rem);
    line-height: 1; color: var(--c-primary); letter-spacing: -.05em;
}
.error-404__search { margin: 22px auto; max-width: 420px; }

/* Comments ---------------------------------------------------- */
.comments-area { margin-top: 50px; }
.comments-title { margin-bottom: 22px; }
.comment-list { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 18px; }
.comment-body {
    background: #fff; padding: 22px; border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
}
.comment-form { background: #fff; padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--c-border); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--c-border);
    font-family: inherit; font-size: .95rem; margin-top: 4px;
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .form-submit input { all: revert; }
.comment-form input[type="submit"] {
    margin-top: 8px; background: var(--c-primary); color: #fff; border: 0; padding: 12px 22px;
    border-radius: 999px; font-family: var(--font-display); font-weight: 700; cursor: pointer;
}

/* Back to top ------------------------------------------------- */
.back-to-top {
    position: fixed; right: 22px; bottom: 22px; z-index: 70;
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--c-primary); color: #fff; box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--c-primary-dark); }

/* Utilities --------------------------------------------------- */
.no-results { background: #fff; padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--c-border); }

/* GET-QUOTE PAGE --------------------------------------------- */
.quote-page {
    background: linear-gradient(180deg, #EAF2FC 0%, #F5F9FE 100%);
    padding: 64px 0 96px;
}
.quote-page__title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: var(--c-secondary);
    /* The 36px gap that used to sit here moved to the subtitle below, so the two
       read as one block instead of drifting apart. */
    margin: 0 0 10px;
    line-height: 1.1;
}
.quote-page__subtitle {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    font-weight: 600;
    color: var(--c-text-soft);
    margin: 0 0 36px;
    line-height: 1.45;
}
.quote-page__step {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text-soft);
    margin: 0 0 22px;
}
.quote-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 32px;
}
@media (max-width: 900px) {
    .quote-page__grid { grid-template-columns: 1fr; gap: 36px; }

    /* Below this width the columns stack, so the desktop 64px top padding just
       pushes the form off the first screen. */
    .quote-page { padding-top: 20px; }

    /* Arriving with ?type= fixes the coverage, so the one remaining card cannot
       be changed — stacked, it only costs a screenful above the form. Hidden with
       display:none, which (unlike disabled) still submits the checked radio, and
       the JS reads :checked rather than visibility. */
    .quote-page__grid--preselected .quote-page__col--types { display: none; }
}

/* Insurance type cards */
.quote-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Single-card mode (when arriving from the hero with ?type=…) */
.quote-cards--single { grid-template-columns: 1fr; }
.quote-card {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 14px 18px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    box-shadow: var(--shadow-sm);
}
.quote-card input { position: absolute; opacity: 0; pointer-events: none; }
.quote-card:hover { border-color: #C7DAF3; transform: translateY(-1px); }
.quote-card__icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--c-primary-soft); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    flex-shrink: 0;
}
.quote-card__label {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.05rem;
    color: var(--c-secondary);
}
.quote-card__check {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: .85rem;
    transition: background .2s, border-color .2s, color .2s;
    flex-shrink: 0;
}
.quote-card:has(input:checked) {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(42,107,214,.10), var(--shadow-sm);
}
.quote-card:has(input:checked) .quote-card__check {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.quote-card:focus-within { outline: 0; }
.quote-card:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(42,107,214,.25), var(--shadow-sm);
}
@media (max-width: 480px) {
    .quote-cards { grid-template-columns: 1fr; }
}

/* Personal info fields */
.quote-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-field--full { grid-column: 1 / -1; }

/* A dental quote asks for name, phone and state only — age, email and language
   drop out. Driven by a class on the form so the reduced shape is already
   correct in the served HTML, before main.js runs. */
.quote-page__form--dental [data-tc-hide-for="dental"] { display: none; }
.quote-field label {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--c-secondary);
    margin-bottom: 6px;
}
.quote-field .req { color: var(--c-primary); margin-left: 2px; }
.quote-field input {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff;
    font-family: inherit;
    font-size: .95rem;
    color: var(--c-text);
    transition: border-color .2s, box-shadow .2s;
}
.quote-field input:focus {
    outline: 0;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(42,107,214,.15);
}
.quote-field input.is-invalid {
    border-color: #DC3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.12);
}

/* Select styling */
.quote-field select {
    width: 100%;
    padding: 13px 16px;
    padding-right: 40px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232A6BD6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 12px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--c-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.quote-field select:hover {
    border-color: #B5CAEB;
}
.quote-field select:focus {
    outline: 0;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(42,107,214,.15);
}
.quote-field select:disabled {
    background-color: #F6F8FB;
    color: var(--c-muted);
    cursor: not-allowed;
}
.quote-field select.is-invalid {
    border-color: #DC3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.12);
}

/* Option styling */
.quote-field select option {
    padding: 12px;
    color: var(--c-text);
    background: #fff;
}
.quote-field select option:hover {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
.quote-field select option:checked {
    background: var(--c-primary);
    color: #fff;
}

/* Searchable select — combobox layered over a native <select data-searchable>.
   Only active once JS has enhanced the field; the plain select styles above
   remain the no-JS fallback. */
.tc-combo { position: relative; }
.tc-combo__native {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.quote-field .tc-combo__input {
    width: 100%;
    padding: 13px 40px 13px 16px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232A6BD6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
    background-size: 12px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--c-text);
    cursor: pointer;
    text-overflow: ellipsis;
    transition: border-color .2s, box-shadow .2s;
}
.quote-field .tc-combo__input::placeholder { color: var(--c-muted); }
.quote-field .tc-combo__input:hover { border-color: #B5CAEB; }
.quote-field .tc-combo__input:focus {
    outline: 0;
    cursor: text;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(42,107,214,.15);
}
.quote-field .tc-combo__input.is-invalid {
    border-color: #DC3545;
    box-shadow: 0 0 0 3px rgba(220,53,69,.12);
}
.tc-combo.is-open .tc-combo__input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232A6BD6' d='M11 7L6 2 1 7'/%3E%3C/svg%3E");
}

.tc-combo__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overscroll-behavior: contain;
}
.tc-combo__option {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: .95rem;
    line-height: 1.3;
    color: var(--c-text);
    cursor: pointer;
}
.tc-combo__option:hover,
.tc-combo__option.is-active {
    background: var(--c-primary-soft);
    color: var(--c-primary);
}
.tc-combo__option[aria-selected="true"] { font-weight: 600; }
.tc-combo__option[aria-selected="true"].is-active {
    background: var(--c-primary);
    color: #fff;
}
.tc-combo__empty {
    padding: 10px 12px;
    font-size: .9rem;
    color: var(--c-muted);
}

@media (max-width: 480px) {
    .quote-fields { grid-template-columns: 1fr; }
}

/* Terms + submit */
.quote-page__terms {
    border-top: 1px solid var(--c-border);
    padding-top: 24px;
    margin-bottom: 24px;
}
.quote-checkbox {
    display: flex; gap: 12px; align-items: flex-start;
    cursor: pointer;
    font-size: .92rem;
    color: var(--c-text-soft);
    line-height: 1.6;
}
.quote-checkbox input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--c-primary);
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}
.quote-checkbox a { font-weight: 600; }
.quote-page__submit {
    display: flex;
    /* Was a row with the button as its only child; the carrier logos below it need
       to stack, not sit alongside. */
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
}
.quote-page__submit .btn {
    min-width: 320px;
    padding: 18px 32px;
    font-size: 1.05rem;
}

/* Carrier logos under the submit button. The source files vary wildly in aspect
   ratio, so both dimensions are capped and neither is fixed — every logo fits the
   same box without being stretched. The global img reset supplies height:auto. */
.quote-page__carriers {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    /* Full width because align-items:center on the column parent would otherwise
       size this to its content and let the row overflow instead of wrapping. */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 26px;
}
.quote-page__carriers li {
    display: flex;
    align-items: center;
    justify-content: center;
}
.quote-page__carriers img {
    max-height: 50px;
    max-width: 90%;
    width: auto;
}

/* Supporting copy under the logos. text-align matters here: the parent centres
   these as flex items, but that does not centre the wrapped lines inside them. */
.quote-page__carriers-note {
    margin: 26px 0 15px;
    max-width: 46ch;
    text-align: center;
    color: var(--c-text-soft);
    font-size: 1.15rem;
    line-height: 1.5;
}
.quote-page__call {
    margin: 25px 0 0;
    text-align: center;
    color: var(--c-text-soft);
    font-size: .95rem;
}
.quote-page__call a {
    color: var(--c-primary);
    text-decoration: underline;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .quote-page__carriers-note{ font-size: .95rem; margin: 25px 0 0;}
}

/* Small screens: a two-up grid rather than a shrinking wrapped row. Mirrors the
   homepage partners strip at its own breakpoint, so the two logo rows read as one
   treatment. Six logos divide evenly into three rows, so there is no orphan. */
@media (max-width: 600px) {
    .quote-page__carriers { gap: 22px 28px; }
    .quote-page__carriers li { flex: 0 0 calc(50% - 28px); }
    .quote-page__carriers img { max-height: 44px; max-width: 100%; }
}
@media (max-width: 560px) {
    .quote-page__submit .btn { min-width: 0; width: 100%; }
}

/* Status alerts */
.quote-page__alert {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 24px;
    display: flex; gap: 12px; align-items: center;
    font-weight: 600;
    border: 1px solid transparent;
}
.quote-page__alert i { font-size: 1.2rem; }
.quote-page__alert--success {
    background: #E7F7EF; color: #0F7A45; border-color: #BFE8D2;
}
.quote-page__alert--error {
    background: #FCEBED; color: #B7202E; border-color: #F5C2C7;
}

/* Thank You Page ------------------------------------------------ */
.quote-success {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 40px 0;
}
.quote-success__wrapper {
    text-align: center;
    max-width: 640px;
    animation: fadeInUp .6s ease-out;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Agent portrait rather than a glyph badge. The source is a 3:2 transparent PNG
   with the subject centred and dead space either side — that space renders as
   nothing, so the image needs no cropping, only a cap on how wide it gets. */
.quote-success__icon {
    display: block;
    width: min(300px, 70%);
    margin: 0 auto 16px;
}
.quote-success__icon img {
    display: block;
    width: 100%;
    height: auto;
}

.quote-success__title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    color: var(--c-secondary);
    margin: 0 0 12px;
    font-weight: 900;
}

.quote-success__subtitle {
    font-size: 1.2rem;
    color: var(--c-text-soft);
    margin: 0 0 28px;
    font-weight: 500;
}

.quote-success__content {
    background: var(--c-primary-soft);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 32px;
    border: 1px solid #D4E4F7;
}

.quote-success__content p {
    color: var(--c-text);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

.quote-success__info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.quote-success__info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    transition: transform .2s, box-shadow .2s;
}

.quote-success__info-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.quote-success__info-item i {
    font-size: 1.8rem;
    color: var(--c-primary);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-soft);
    border-radius: 50%;
}

.quote-success__info-item h3 {
    font-size: .95rem;
    margin: 0 0 6px;
    color: var(--c-secondary);
}

.quote-success__info-item p {
    font-size: .85rem;
    color: var(--c-text-soft);
    margin: 0;
    line-height: 1.5;
}

.quote-success__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.quote-success__actions .btn {
    min-width: 240px;
}

@media (max-width: 768px) {
    .quote-success {
        min-height: auto;
        padding: 32px 0;
    }
    
    .quote-success__info {
        grid-template-columns: 1fr;
    }
    
    .quote-success__actions {
        flex-direction: column;
    }
    
    .quote-success__actions .btn {
        min-width: 0;
        width: 100%;
    }
}

/* PARTNERS — auto-scrolling logo strip ----------------------- */
.partners {
    background: #fff;
    padding: 56px 0;
    border-bottom: 1px solid var(--c-border);
}
.partners__intro {
    text-align: center;
    color: var(--c-text-soft);
    font-size: 1.05rem;
    max-width: 760px;
    margin: 0 auto 36px;
    line-height: 1.5;
}
.partners__strip {
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.partners__track {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: tc-marquee 40s linear infinite;
}
.partners__strip:hover .partners__track,
.partners__strip:focus-within .partners__track {
    animation-play-state: paused;
}
.partners__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-width: 140px;
}
.partners__item img {
    max-height: 44px;
    width: auto;
    object-fit: contain;
    filter: saturate(1) opacity(.85);
    transition: filter .2s, transform .2s;
}
.partners__item:hover img { filter: saturate(1) opacity(1); }
.partners__item span {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.55rem;
    letter-spacing: -.5px;
    color: var(--partner-color, var(--c-secondary));
    white-space: nowrap;
    opacity: .85;
    transition: opacity .2s, transform .2s;
}
.partners__item:hover span,
.partners__item:hover img { opacity: 1; transform: translateY(-2px); }

@keyframes tc-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Touch devices: keep the marquee but allow touch-pan as a manual override */
@media (hover: none) {
    .partners__strip { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .partners__item { scroll-snap-align: center; }
}

/* Small screens: drop the marquee entirely — wrap into a static grid */
@media (max-width: 600px) {
    .partners { padding: 40px 0; }
    .partners__intro { font-size: .98rem; margin-bottom: 22px; padding: 0 8px; }

    .partners__strip {
        overflow: visible;
        -webkit-mask-image: none;
                mask-image: none;
    }
    .partners__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 22px 28px;
    }
    .partners__item--clone { display: none; }
    .partners__item { min-width: 0; height: auto; flex: 0 0 calc(50% - 28px); }
    .partners__item span { font-size: 1.15rem; }
    .partners__item img { max-height: 36px; }
}

/* Reduced motion: stop the animation, wrap into rows instead */
@media (prefers-reduced-motion: reduce) {
    .partners__strip { -webkit-mask-image: none; mask-image: none; }
    .partners__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 32px;
    }
}

/* HERO — light variant (front page) ------------------------- */
.hero--light {
    background: linear-gradient(180deg, #EAF2FC 0%, #F5F9FE 100%);
    color: var(--c-text);
    padding: 80px 0 90px;
    overflow: hidden;
}
.hero--light .hero__inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 56px;
    align-items: center;
}
/* When there's no side image, use a single centered column so the hero
   doesn't leave a big empty area on the right. */
.hero--light .hero__inner:not(:has(.hero__media)) {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.hero--light .hero__inner:not(:has(.hero__media)) .hero-cta { max-width: none; }
.hero--light .hero__title {
    color: var(--c-secondary);
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    font-weight: 800;
    margin-bottom: .25em;
    line-height: 1.1;
}
.hero--light .hero__title span {
    background: none;
    color: var(--c-primary);
    padding: 0;
}
.hero--light .hero__sub {
    color: var(--c-text-soft);
    font-size: 1.1rem;
    max-width: 540px;
    margin-bottom: 28px;
}
.hero--light .hero__sub em {
    font-style: italic;
    color: var(--c-secondary);
    font-weight: 600;
}

/* Hero CTA panel (radio cards + button) */
.hero-cta { max-width: 560px; }
.hero-cta fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.hero-cta__types {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.hero-cta__type {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    box-shadow: var(--shadow-sm);
}
.hero-cta__type input { position: absolute; opacity: 0; pointer-events: none; }
.hero-cta__type:hover { border-color: #C7DAF3; transform: translateY(-1px); }
.hero-cta__type-icon {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-primary-soft); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-cta__type-icon svg { width: 20px; height: 20px; }
.hero-cta__type-label {
    flex: 1;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1rem;
    color: var(--c-secondary);
}
.hero-cta__type-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--c-border);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: .8rem;
    transition: background .2s, border-color .2s, color .2s;
    flex-shrink: 0;
}
.hero-cta__type:has(input:checked) {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(42,107,214,.10), var(--shadow-sm);
}
.hero-cta__type:has(input:checked) .hero-cta__type-check {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}
.hero-cta__type:has(input:focus-visible) {
    box-shadow: 0 0 0 3px rgba(42,107,214,.25), var(--shadow-sm);
}
.hero-cta__submit { padding: 16px 28px; font-size: 1.05rem; }
.hero-cta__call {
    margin: 14px 0 0;
    color: var(--c-text-soft);
    font-size: .95rem;
}
.hero-cta__call a {
    color: var(--c-primary);
    text-decoration: underline;
    font-weight: 700;
}

/* Trust bar — sits at the top of the testimonials section */
.trust-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 40px;
}
.trust-bar__image {
    max-width: 900px;
    width: 110%;
    height: auto;
    display: block;
}
@media (max-width: 600px) {
    .trust-bar { margin-bottom: 55px; }
}

/* Hero side image */
.hero__media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 50% 50% 14px 14px / 60% 60% 14px 14px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--c-bg-alt);
}
.hero__media img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero__media-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #E0EDFC 0%, #C7DAF3 100%);
    color: rgba(15, 36, 71, .25);
    font-size: 9rem;
}

@media (max-width: 980px) {
    .hero--light .hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .hero__media { aspect-ratio: 16 / 11; border-radius: var(--radius-lg); max-width: 600px; margin: 0 auto; }
}
@media (max-width: 480px) {
    .hero-cta__types { grid-template-columns: 1fr; }
    .hero--light { padding: 56px 0; }
}

/* CLOSING QUOTE CTA ----------------------------------------- */
/* Same picker as the hero, repeated at the foot of the home page. The gradient
   runs the opposite way to .hero--light so the two read as bookends. */
.quote-cta-section {
    background: linear-gradient(180deg, #F5F9FE 0%, #EAF2FC 100%);
    border-top: 1px solid var(--c-border);
    padding: 80px 0;
}
.quote-cta-section .section-head { margin-bottom: 34px; }
.quote-cta-section .hero-cta {
    max-width: 620px;
    margin: 0 auto;
}
@media (max-width: 600px) {
    .quote-cta-section { padding: 56px 0; }
}


/* REVIEWS — Elfsight Google + Facebook ----------------------- */
.reviews-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
}
.reviews-col {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    padding: 22px;
    overflow: hidden;
}
.reviews-col__title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem;
    color: var(--c-secondary);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
}
.reviews-col__title i { color: var(--c-primary); font-size: 1.3rem; }
.reviews-col [class*="elfsight-app-"] { min-height: 320px; }

@media (max-width: 900px) {
    .reviews-grid { grid-template-columns: 1fr; }
}

/* LANDING PAGE TEMPLATE -------------------------------------- */
.landing-header {
    background: #fff;
    box-shadow: var(--shadow-sm);
    padding: 14px 0;
    position: sticky; top: 0; z-index: 60;
}
.landing-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.landing-footer {
    background: var(--c-secondary);
    color: rgba(255,255,255,.7);
    padding: 20px 0;
    text-align: center;
    font-size: .88rem;
}
.landing-footer p { margin: 0; }
.tc-landing .site-main { min-height: 60vh; padding: 40px 0; }

/* Full-width page tweaks */
.tc-fullwidth .entry-content { max-width: 980px; margin: 0 auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

.text-center { text-align: center; }

.test{
    color: red;
    background-color: yellow;
    
}