@import url('./curby.css');

:root {
    --blue: #2E86C1;
    --blue-dark: #246da1;
    --navy: #154360;
    --blue-bg: #D6EAF8;
    --blue-bg-pale: #EBF5FB;
    --blue-border: #AED6F1;
    --yellow: #FDD835;
    --yellow-bright: #FFE059;
    --text-on-blue: #1F618D;
    --white: #FFFFFF;
    --ink: #154360;
    --ink-muted: #1F618D;
    --radius-btn: 6px;
    --radius-card: 12px;
    --nav-height: 64px;
    --content-max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.625rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: 1.125rem; }
p  { margin: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 2px;
    border-radius: var(--radius-btn);
}

.eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--blue);
}
.eyebrow.on-navy  { color: var(--yellow); }
.eyebrow.on-blue  { color: var(--yellow); }
.eyebrow.on-pale  { color: var(--blue); }

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    padding: 14px 22px;
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    min-height: 48px;
    white-space: nowrap;
}
.btn-primary {
    background: var(--yellow);
    color: var(--navy);
    border-color: var(--yellow);
}
.btn-primary:hover, .btn-primary:focus-visible {
    background: var(--yellow-bright);
    border-color: var(--yellow-bright);
    text-decoration: none;
}
.btn-secondary {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    text-decoration: none;
}
.btn-outline {
    background: transparent;
    color: var(--blue);
    /* Use full --blue (not --blue-border) so the outline reads as deliberate
       against the light-blue hero bg instead of looking ghosted/disabled. */
    border-color: var(--blue);
}
.btn-outline:hover, .btn-outline:focus-visible {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    text-decoration: none;
}
.btn-block { width: 100%; }

/* ---------- nav ---------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--blue);
    color: var(--white);
}
.site-nav-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 20px;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    gap: 24px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand-mark {
    width: 36px;
    height: 36px;
    display: block;
    flex-shrink: 0;
}
.nav-brand-name .em { color: var(--yellow); }
.nav-brand-name .re { color: var(--white); }

/* nav-menu is the drawer container (a div, not a ul). On desktop it's a
   transparent flex row holding only the nav-menu-links list. On mobile
   it becomes a fixed full-width drawer with trust pill + icon links + phone footer. */
.nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0;
    padding: 0;
}
.nav-menu-links {
    display: flex;
    gap: 4px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-menu-links a {
    color: rgba(255, 255, 255, 0.88);
    padding: 8px 14px;
    border-radius: var(--radius-btn);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.nav-menu-links a:hover {
    color: var(--white);
    background: var(--blue-dark);
    text-decoration: none;
}
/* Trust pill, phone footer, and link icons are mobile-drawer-only */
.nav-menu-trust { display: none; }
.nav-menu-phone { display: none; }
.nav-menu-icon { display: none; }

.nav-cta {
    flex-shrink: 0;
}
/* Desktop nav CTA shows the actual phone number (so stranded users at a
   work computer can read the digits without clicking). Mobile keeps the
   shorter "Call 24/7" label since the drawer already exposes the full
   number in the phone footer. */
.nav-cta-label-desktop { display: inline; }
.nav-cta-label-mobile  { display: none; }
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    color: var(--white);
    width: 44px;
    height: 44px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
    .nav-menu {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: var(--blue);
        flex-direction: column;
        align-items: stretch;
        padding: 16px 20px 24px;
        gap: 12px;
        border-top: 1px solid var(--blue-dark);
        transform: translateY(-120%);
        /* Closed state: hidden + non-interactive. Visibility transition is delayed
           so the slide-out animation completes before the menu fully disappears.
           Without this, iOS Safari composites the off-screen drawer above the
           sticky nav during scroll, producing a "ghost" of menu items at the top. */
        visibility: hidden;
        pointer-events: none;
        transition: transform 180ms ease, visibility 0s linear 180ms;
        max-height: calc(100vh - var(--nav-height));
        overflow-y: auto;
    }
    .nav-menu.is-open {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 180ms ease, visibility 0s linear 0s;
    }

    /* Trust pill — small navy chip with a yellow status dot */
    .nav-menu-trust {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background: var(--blue-dark);
        border-radius: 999px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.92);
        align-self: flex-start;
        line-height: 1.2;
    }
    .nav-menu-trust-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--yellow);
        flex-shrink: 0;
    }

    /* Stacked icon links */
    .nav-menu-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .nav-menu-links a {
        padding: 12px 14px;
        font-size: 15px;
        gap: 14px;
    }
    .nav-menu-icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        opacity: 0.85;
        flex-shrink: 0;
    }

    /* Phone footer pinned to the bottom of the drawer with the actual number visible */
    .nav-menu-phone {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: auto;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-btn);
        text-decoration: none;
    }
    .nav-menu-phone-icon {
        width: 22px;
        height: 22px;
        color: var(--yellow);
        flex-shrink: 0;
    }
    .nav-menu-phone-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }
    .nav-menu-phone-label {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
    }
    .nav-menu-phone-number {
        font-size: 18px;
        font-weight: 500;
    }

    .nav-toggle { display: inline-flex; }
    .nav-cta .btn { padding: 10px 14px; min-height: 40px; font-size: 14px; }
    .nav-cta-label-desktop { display: none; }
    .nav-cta-label-mobile  { display: inline; }
}

/* ---------- layout helpers ---------- */
.section {
    padding: clamp(48px, 8vw, 96px) 20px;
}
/* Compressed section padding — apply to the section that should feel like
   the "transition into the closing zone" rather than its own standalone
   block. Matches .cta-band's padding so the run of (tight section → CTA
   band → footer) reads as a single closing rhythm instead of three
   identically-breathing blocks. */
.section.section-tight {
    padding: clamp(40px, 6vw, 64px) 20px;
}
.section-inner {
    max-width: var(--content-max);
    margin: 0 auto;
}
.section-light-blue { background: var(--blue-bg); color: var(--ink); }
.section-pale-blue  { background: var(--blue-bg-pale); color: var(--ink); }
.section-blue       { background: var(--blue); color: var(--white); }
.section-navy       { background: var(--navy); color: var(--white); }
.section-white      { background: var(--white); color: var(--ink); }

/* ---------- hero ---------- */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
@media (min-width: 900px) {
    .hero-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 56px;
        /* Stretch columns vertically so the form anchors to the top of its
           cell (align-self: start below) and the left column extends to fit
           Curby — turns the height delta into deliberate negative space
           instead of orphan-floating the form. */
        align-items: stretch;
    }
    .hero-form-card {
        align-self: start;
    }
}
/* Make .hero-copy a flex column so .curby-mascot-wrap.is-hero can use
   order:-1 to sit above the H1 on mobile, then fall back to source order
   (below the CTAs) at >=1100px. */
.hero-copy {
    display: flex;
    flex-direction: column;
}
.hero-copy h1 { margin-bottom: 20px; color: var(--navy); }

/* At-a-glance trust pill — single line under the H1, yellow bullet dots
   prefix each signal. Lives in the hero so emergency-service trust signals
   land before the fold (the navy trust strip is below the fold on mobile). */
.hero-trust-pill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--navy);
    letter-spacing: 0.01em;
}
.hero-trust-pill li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero-trust-pill li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--yellow);
    flex-shrink: 0;
}
.hero-copy p.hero-lead {
    font-size: 17px;
    max-width: 52ch;
    color: var(--text-on-blue);
    margin-bottom: 28px;
}
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
/* Mobile hero reorder: dissolve .hero-copy via display:contents so its
   children + .hero-form-card become flat siblings inside .hero-grid and
   can be ordered together. New mobile order:
     1. Curby (centered, 220px)
     2. Eyebrow
     3. H1
     4. Form card (surfaced right after the headline)
     5. Lead paragraph (below the form, for users who want context)
     6. CTA buttons
   Cuts scroll-to-form from ~3 screens to ~1 on a 390px iPhone. */
@media (max-width: 899px) {
    .hero-copy { display: contents; }
    .hero-grid { gap: 20px; align-items: stretch; }
    .hero-grid .curby-mascot-wrap.is-hero { order: 1; }
    /* Drop the "Roadside rescue specialists" eyebrow on mobile — it adds visual
       noise above an already-dense H1, and the H1 itself communicates the same idea. */
    .hero-grid .eyebrow { display: none; }
    .hero-grid h1 { order: 3; margin-bottom: 0; }
    .hero-grid .hero-trust-pill { order: 4; margin: 0; }
    .hero-form-card { order: 5; }
    .hero-grid .hero-lead { order: 6; margin-bottom: 0; }
    .hero-grid .hero-ctas { order: 7; }
}

.hero-form-card {
    background: var(--blue);
    color: var(--white);
    padding: clamp(24px, 3vw, 32px);
    /* Add iOS safe-area on top of the existing padding so Safari's bottom
       URL bar doesn't occlude the submit on notched iPhones. */
    padding-bottom: calc(clamp(24px, 3vw, 32px) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-card);
    border: 1px solid var(--blue-dark);
}
.hero-form-card h2 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 6px;
}
.hero-form-card .form-sub {
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    margin-bottom: 22px;
}
.hero-form {
    display: grid;
    gap: 14px;
}
.field-row {
    display: grid;
    gap: 6px;
}
.field-row label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
}
.field-row input,
.field-row select {
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    padding: 12px 14px;
    border: 1px solid var(--blue-dark);
    background: var(--white);
    color: var(--ink);
    border-radius: var(--radius-btn);
    width: 100%;
    min-height: 46px;
}
.field-row input:focus,
.field-row select:focus {
    border-color: var(--yellow);
    outline: 2px solid var(--yellow);
    outline-offset: 1px;
}
.hero-form .btn { margin-top: 6px; }
.hero-form .form-note {
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    text-align: center;
    margin-top: 4px;
}

/* ---------- trust strip ---------- */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px 24px;
}
.trust-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    align-items: start;
}
.trust-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-btn);
    background: rgba(253, 216, 53, 0.12);
    color: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.trust-icon svg { width: 22px; height: 22px; }
.trust-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--yellow);
    margin-bottom: 4px;
    line-height: 1.3;
}
.trust-copy {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
}

/* ---------- services grid ---------- */
.section-heading {
    text-align: left;
    max-width: 640px;
    margin-bottom: 40px;
}
.section-heading h2 {
    color: var(--navy);
    margin-bottom: 12px;
}
.section-heading.on-blue h2 { color: var(--white); }
.section-heading p {
    color: var(--text-on-blue);
    font-size: 16px;
}
.section-heading.on-blue p { color: rgba(255,255,255,0.88); }

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.service-card {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-card);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}
.service-card.is-popular {
    border: 2px solid var(--blue);
    padding: 23px;
}
.service-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--blue-bg);
    padding: 4px 10px;
    border-radius: 999px;
}
.service-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-btn);
    background: var(--blue-bg);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-icon svg { width: 24px; height: 24px; }
.service-card h3 {
    color: var(--navy);
    font-size: 17px;
}
.service-card p {
    font-size: 14px;
    color: var(--text-on-blue);
    line-height: 1.55;
}
.service-meta {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    margin-top: auto;
}

/* ---------- why us ---------- */
.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
@media (min-width: 900px) {
    .why-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.why-copy h2 { color: var(--white); margin-bottom: 16px; }
.why-copy p {
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    margin-bottom: 24px;
    max-width: 46ch;
}
.feature-stack {
    display: grid;
    gap: 16px;
}
.feature-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-card);
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
}
.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-btn);
    background: var(--yellow);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-item h3 {
    font-size: 16px;
    color: var(--white);
    margin-bottom: 4px;
}
.feature-item p {
    font-size: 14px;
    color: rgba(255,255,255,0.82);
    margin: 0;
    line-height: 1.55;
}

/* ---------- how it works ---------- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.step-card {
    background: var(--white);
    border: 1px solid var(--blue-border);
    border-radius: var(--radius-card);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.step-number {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
}
.step-card h3 { color: var(--navy); font-size: 18px; }
.step-card p { font-size: 14px; color: var(--text-on-blue); line-height: 1.6; }

/* ---------- final CTA band ---------- */
.cta-band {
    background: var(--navy);
    color: var(--white);
    padding: clamp(40px, 6vw, 64px) 20px;
}
.cta-band-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 720px) {
    .cta-band-inner { grid-template-columns: 1fr auto; }
}
.cta-band h2 { color: var(--white); font-size: 1.5rem; }
.cta-band p { color: rgba(255,255,255,0.82); font-size: 15px; margin-top: 6px; }
.cta-band-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
/* Coverage facts merged from the deleted §7 — sits below the CTAs as
   supporting info rather than a standalone section. */
.cta-band-coverage {
    max-width: var(--content-max);
    margin: 28px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

/* ---------- footer ---------- */
.site-footer {
    background: var(--navy);
    color: rgba(255,255,255,0.7);
    padding: 48px 20px 32px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}
@media (min-width: 720px) {
    .footer-inner { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
}
.footer-brand-name { color: var(--white); font-weight: 500; font-size: 17px; margin-bottom: 10px; }
.footer-brand-copy { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 34ch; }
.footer-col h4 {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    margin-bottom: 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-col a { color: rgba(255,255,255,0.7); font-size: 14px; }
.footer-col a:hover { color: var(--white); text-decoration: underline; }
.footer-meta {
    max-width: var(--content-max);
    margin: 32px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

/* ---------- image placeholder ---------- */
.photo-placeholder {
    background: var(--blue-bg);
    border: 1px dashed var(--blue-border);
    border-radius: var(--radius-card);
    color: var(--text-on-blue);
    font-size: 12px;
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

/* ---------- utility ---------- */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}
.skip-link {
    position: absolute;
    top: -40px; left: 8px;
    background: var(--yellow);
    color: var(--navy);
    padding: 8px 12px;
    border-radius: var(--radius-btn);
    font-weight: 500;
    z-index: 100;
}
.skip-link:focus { top: 8px; }