/* ================================================================
   NX Recovery — Enterprise Design System
   Implementation of Phase 5 Design Tokens + Phase 7 Creative Direction
   ================================================================ */

/* ---------- Design Tokens ---------- */
:root {
    /* Brand */
    --brand-black: #111111;
    --brand-yellow: #FFC107;
    --brand-yellow-hover: #E5AC00;
    --surface-dark: #1A1A1A;
    --white: #FFFFFF;

    /* Neutral scale */
    --n-0:   #FFFFFF;
    --n-50:  #FAFAFA;
    --n-100: #F5F5F5;
    --n-200: #EEEEEE;
    --n-300: #DDDDDD;
    --n-400: #BDBDBD;
    --n-500: #8A8A8A;
    --n-600: #666666;
    --n-700: #4A4A4A;
    --n-800: #2B2B2B;
    --n-900: #111111;

    /* Semantic */
    --success: #2E7D32;
    --warning: #F9A825;
    --error:   #D32F2F;
    --info:    #1565C0;

    /* Text */
    --text-primary:   var(--n-900);
    --text-secondary: var(--n-700);
    --text-tertiary:  var(--n-500);
    --text-disabled:  var(--n-400);
    --text-inverse:   #FFFFFF;

    /* Spacing (8pt) */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
    --sp-3xl: 64px;
    --sp-4xl: 96px;
    --sp-5xl: 128px;

    /* Radius */
    --r-none: 0;
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;

    /* Shadow */
    --e1: 0 1px 2px rgba(0,0,0,.06);
    --e2: 0 4px 8px rgba(0,0,0,.08);
    --e3: 0 8px 24px rgba(0,0,0,.12);
    --e4: 0 16px 40px rgba(0,0,0,.18);

    /* Motion */
    --t-fast: 150ms;
    --t-std: 200ms;
    --t-mod: 300ms;
    --t-slow: 450ms;
    --ease: cubic-bezier(.4,.0,.2,1);
    --ease-out: cubic-bezier(.0,.0,.2,1);
    --ease-in:  cubic-bezier(.4,.0,1,1);

    /* Type */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Layout */
    --container: 1280px;
    --gutter: 24px;
    --page-pad: clamp(20px, 5vw, 80px);
    --header-h: 76px;
    --header-h-scrolled: 64px;
    --alert-h: 34px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--white);
    font-feature-settings: "ss01","cv11";
    min-height: 100vh;
    overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid var(--brand-yellow);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
p { text-wrap: pretty; margin: 0 0 var(--sp-md); }
h1,h2,h3,h4,h5,h6 { margin: 0 0 var(--sp-md); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
ul, ol { margin: 0 0 var(--sp-md); padding-left: 1.25em; }
li + li { margin-top: 6px; }

/* ---------- Typography scale ---------- */
.eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 var(--sp-md);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--n-400);
}
.eyebrow--dark { color: var(--n-400); }
.eyebrow--dark::before { background: var(--n-600); }

h1, .h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.06; font-weight: 800; letter-spacing: -0.025em; }
h2, .h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
h3, .h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
h4, .h4 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
h5, .h5 { font-size: 18px; line-height: 1.35; font-weight: 600; }
h6, .h6 { font-size: 14px; line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }

.lede { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--text-secondary); max-width: 60ch; }
.meta { font-size: 13px; color: var(--text-tertiary); letter-spacing: 0.02em; }
.small { font-size: 14px; }

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
}
.container--wide { max-width: 1440px; }
.container--narrow { max-width: 960px; }

.section { padding: clamp(56px, 8vw, 120px) 0; }
.section--tight { padding: clamp(40px, 5vw, 72px) 0; }
.section--dark {
    background: var(--brand-black);
    color: var(--text-inverse);
}
.section--dark .lede,
.section--dark .meta { color: var(--n-400); }
.section--surface { background: var(--n-50); }

.grid { display: grid; gap: var(--sp-lg); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* Section header pattern */
.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-xl);
    margin-bottom: clamp(32px, 4vw, 56px);
    flex-wrap: wrap;
}
.section-head__title { max-width: 720px; }
.section-head__title h2 { margin: 0; }
.section-head__title .lede { margin-top: var(--sp-md); }
.section-head__aside { flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    border-radius: var(--r-md);
    transition: background var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
    white-space: nowrap;
    border: 1px solid transparent;
    min-height: 48px;
    text-align: center;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--brand-yellow);
    color: var(--brand-black);
}
.btn--primary:hover { background: var(--brand-yellow-hover); }

.btn--dark {
    background: var(--brand-black);
    color: var(--white);
}
.btn--dark:hover { background: var(--surface-dark); }

.btn--ghost {
    background: transparent;
    color: var(--brand-black);
    border-color: var(--n-300);
}
.btn--ghost:hover { border-color: var(--brand-black); background: var(--n-50); }

.btn--dark-ghost {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.24);
}
.btn--dark-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.06); }

.btn--lg { padding: 18px 28px; font-size: 16px; min-height: 56px; }
.btn--sm { padding: 10px 16px; font-size: 14px; min-height: 40px; }
.btn--block { display: flex; width: 100%; }
.btn--icon-only { padding: 12px; min-width: 44px; }

/* ---------- Cards ---------- */
.card {
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    padding: var(--sp-xl);
    transition: border-color var(--t-std) var(--ease), transform var(--t-std) var(--ease);
}
.card--flat { border: 1px solid var(--n-200); background: var(--white); }
.card--hover:hover { border-color: var(--n-400); }
.card--dark {
    background: var(--surface-dark);
    border-color: var(--n-800);
    color: var(--text-inverse);
}

/* Chip */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--n-100);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
    border: 1px solid var(--n-200);
}
.chip--yellow { background: var(--brand-yellow); color: var(--brand-black); border-color: transparent; font-weight: 600; }
.chip--dark { background: rgba(255,255,255,.08); color: var(--white); border-color: rgba(255,255,255,.12); }
.chip--yellow-outline {
    background: transparent;
    border-color: var(--brand-yellow);
    color: var(--brand-yellow);
}

.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Header / Nav ---------- */
.alert-bar {
    background: var(--brand-black);
    color: var(--n-300);
    font-size: 13px;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--n-800);
    flex-wrap: wrap;
}
.alert-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.01em;
}
.alert-bar__item svg { width: 14px; height: 14px; opacity: 0.7; }
.alert-bar__item strong { color: var(--white); font-weight: 500; }
.alert-bar a { color: var(--brand-yellow); font-weight: 500; }

/* Partial wrapper must not constrain the sticky header.
   Without display:contents the sticky element's containing block is the
   short wrapper div, so it un-sticks the moment the wrapper scrolls out. */
[data-partial="header"] { display: contents; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--n-200);
    transition: box-shadow var(--t-std) var(--ease), background var(--t-std) var(--ease);
}
.site-header.is-scrolled {
    box-shadow: var(--e2);
    background: rgba(255,255,255,0.92);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-xl);
    height: var(--header-h);
}
.site-header.is-scrolled .site-header__inner { height: var(--header-h-scrolled); }
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--brand-black);
    flex-shrink: 0;
}
.brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brand-black);
    color: var(--brand-yellow);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.02em;
}
.brand__word {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    line-height: 1;
}
.brand__word small {
    display: block;
    font-weight: 500;
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 3px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav a {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease);
    position: relative;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--brand-black); }
.nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--brand-yellow);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.phone-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--brand-black);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    transition: background var(--t-fast) var(--ease);
}
.phone-link:hover { background: var(--n-100); }
.phone-link svg { width: 16px; height: 16px; }
.phone-link small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 3px;
    text-transform: uppercase;
}
.phone-link__txt { line-height: 1; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    color: var(--brand-black);
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
    .nav, .header-actions .phone-link small { display: none; }
    .nav-toggle { display: inline-flex; }
    .header-actions .btn { padding: 10px 14px; min-height: 44px; }
    .header-actions .phone-link {
        padding: 8px;
        border-radius: 50%;
        background: var(--n-100);
    }
}
@media (max-width: 560px) {
    .header-actions .btn--emerg { display: none; }
}

/* Mobile drawer */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 700;
    display: none;
}
.drawer.is-open { display: block; }
.drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    animation: fadeIn var(--t-std) var(--ease-out);
}
.drawer__panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(360px, 100%);
    background: var(--white);
    display: flex;
    flex-direction: column;
    padding: 20px;
    animation: slideInRight var(--t-mod) var(--ease-out);
    overflow-y: auto;
}
.drawer__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--n-200);
    margin-bottom: 20px;
}
.drawer__close { padding: 10px; border-radius: var(--r-sm); }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__nav { list-style: none; padding: 0; margin: 0; }
.drawer__nav li { border-bottom: 1px solid var(--n-100); }
.drawer__nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 4px;
    font-size: 18px;
    font-weight: 500;
    color: var(--brand-black);
}
.drawer__nav a svg { width: 18px; height: 18px; opacity: 0.5; }
.drawer__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideInRight { from { transform: translateX(30px); opacity: 0.6 } to { transform: none; opacity: 1 } }
@keyframes fadeSlideUp { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ---------- Mobile sticky bottom bar ---------- */
.mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--brand-black);
    color: var(--white);
    z-index: 90;
    display: none;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0));
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
.mobile-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px;
    border-radius: var(--r-sm);
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.mobile-bar a svg { width: 20px; height: 20px; }
.mobile-bar a.is-primary {
    background: var(--brand-yellow);
    color: var(--brand-black);
}
@media (max-width: 900px) {
    .mobile-bar { display: grid; }
    body { padding-bottom: 84px; }
}

/* ---------- Footer ---------- */
.site-footer {
    background: var(--brand-black);
    color: var(--n-300);
    padding: clamp(56px, 8vw, 96px) 0 40px;
    border-top: 1px solid var(--n-800);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--sp-2xl);
    margin-bottom: var(--sp-2xl);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); } }
@media (max-width: 500px) { .site-footer__grid { grid-template-columns: 1fr; } }
.footer-col h4 {
    color: var(--white);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 20px;
    font-weight: 600;
}
.footer-col a {
    display: block;
    font-size: 15px;
    color: var(--n-400);
    padding: 4px 0;
    line-height: 1.6;
}
.footer-col a:hover { color: var(--white); }
.footer-brand p { color: var(--n-400); font-size: 15px; max-width: 32ch; }
.footer-brand .brand { color: var(--white); margin-bottom: 18px; }
.footer-brand .brand__mark { background: var(--brand-yellow); color: var(--brand-black); }

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    font-size: 14px;
}
.footer-contact div { display: flex; align-items: flex-start; gap: 8px; color: var(--n-400); }
.footer-contact svg { width: 14px; height: 14px; margin-top: 4px; flex-shrink: 0; opacity: 0.6; }
.footer-contact strong { color: var(--white); font-weight: 500; }

.footer-bottom {
    border-top: 1px solid var(--n-800);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: 13px;
    color: var(--n-500);
    flex-wrap: wrap;
}
.footer-bottom nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero {
    padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 8vw, 120px);
    background: var(--white);
    position: relative;
    overflow: hidden;
}
.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 12px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--sp-lg);
    background: var(--n-50);
}
.hero__eyebrow .chip__dot { background: var(--success); }
.hero h1 {
    font-size: clamp(38px, 5.8vw, 72px);
    letter-spacing: -0.03em;
    line-height: 1.03;
    margin-bottom: var(--sp-lg);
    font-weight: 800;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(180deg, transparent 62%, rgba(255,193,7,.5) 62%, rgba(255,193,7,.5) 92%, transparent 92%);
    padding: 0 4px;
}
.hero__lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-secondary); margin-bottom: var(--sp-xl); max-width: 52ch; line-height: 1.55; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--sp-xl); }
.hero__ctas .btn { flex: 0 1 auto; }
.hero__ctas .btn--primary { min-width: 220px; }

.hero__phone {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    max-width: fit-content;
    margin-bottom: var(--sp-lg);
}
.hero__phone__icon {
    width: 40px; height: 40px;
    background: var(--brand-black);
    color: var(--brand-yellow);
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.hero__phone__icon svg { width: 18px; height: 18px; }
.hero__phone__num { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-black); line-height: 1.1; }
.hero__phone__lbl { font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }

.hero__trust {
    display: flex;
    gap: 32px;
    padding-top: var(--sp-lg);
    border-top: 1px solid var(--n-200);
    flex-wrap: wrap;
}
.hero__trust__item { }
.hero__trust__item strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-black);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.hero__trust__item span { font-size: 13px; color: var(--text-tertiary); }

.hero__media {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--n-100);
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(6%) contrast(1.02);
}
.hero__media__badge {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.hero__media__meta {
    background: rgba(17,17,17,0.75);
    backdrop-filter: blur(8px);
    color: var(--white);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero__media__meta .chip__dot { background: var(--brand-yellow); }
.hero__media__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 24px 24px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
}
.hero__media__caption strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }

@media (max-width: 900px) {
    .hero__media { aspect-ratio: 4/3; order: -1; margin-bottom: 20px; }
}

/* ---------- Trust snapshot / marquee ---------- */
.trust-strip {
    background: var(--surface-dark);
    color: var(--white);
    padding: 24px 0;
    border-top: 1px solid var(--n-800);
    border-bottom: 1px solid var(--n-800);
}
.trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-lg);
    align-items: center;
}
@media (max-width: 700px) { .trust-strip__grid { grid-template-columns: repeat(2, 1fr); } }
.trust-strip__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}
.trust-strip__item svg { width: 24px; height: 24px; color: var(--brand-yellow); flex-shrink: 0; }
.trust-strip__item strong { display: block; font-size: 15px; color: var(--white); font-weight: 600; letter-spacing: -0.005em; }
.trust-strip__item span { display: block; font-size: 12px; color: var(--n-400); letter-spacing: 0.02em; }

/* ---------- Service cards ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--t-std) var(--ease), border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
}
.service-card:hover {
    transform: translateY(-2px);
    border-color: var(--n-400);
    box-shadow: var(--e2);
}
.service-card__media {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--n-100);
    position: relative;
}
.service-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
    filter: grayscale(4%) contrast(1.02);
}
.service-card:hover .service-card__media img { transform: scale(1.03); }
.service-card__media__tag {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--brand-black);
    color: var(--brand-yellow);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.service-card__body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.service-card__body h3 {
    margin: 0 0 10px;
    font-size: 22px;
    letter-spacing: -0.015em;
}
.service-card__body p {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}
.service-card__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}
.service-card__body li { position: relative; padding-left: 20px; }
.service-card__body li::before {
    content: "";
    position: absolute; left: 0; top: 9px;
    width: 10px; height: 2px;
    background: var(--brand-black);
}
.service-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--brand-black);
    padding-top: 16px;
    border-top: 1px solid var(--n-100);
}
.service-card__cta svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease); }
.service-card:hover .service-card__cta svg { transform: translateX(3px); }

/* ---------- Process (how it works) ---------- */
.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    counter-reset: step;
}
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process { grid-template-columns: 1fr; } }

.process__step {
    counter-increment: step;
    padding: var(--sp-xl);
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    position: relative;
}
.process__step::before {
    content: "0" counter(step);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 0.12em;
    margin-bottom: 40px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-yellow);
    width: fit-content;
}
.process__step h4 {
    font-size: 20px;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.process__step p {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Process on dark bg */
.section--dark .process__step {
    background: var(--surface-dark);
    border-color: var(--n-800);
    color: var(--text-inverse);
}
.section--dark .process__step::before { color: var(--n-500); }
.section--dark .process__step p { color: var(--n-400); }

/* ---------- Reviews / testimonials ---------- */
.review-card {
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.review-card__stars {
    display: inline-flex;
    gap: 3px;
    color: var(--brand-yellow);
}
.review-card__stars svg { width: 15px; height: 15px; fill: currentColor; }
.review-card blockquote {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
    font-weight: 400;
}
.review-card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--n-100);
    margin-top: auto;
}
.review-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--n-100);
    color: var(--brand-black);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.review-card__name { font-weight: 600; font-size: 14px; color: var(--brand-black); line-height: 1.2; }
.review-card__loc { font-size: 12px; color: var(--text-tertiary); }

.reviews-summary {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 24px;
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
}
.reviews-summary__score {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.reviews-summary__score strong {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}
.reviews-summary__score span { color: var(--text-tertiary); font-size: 15px; }
.reviews-summary__stars { color: var(--brand-yellow); display: inline-flex; gap: 2px; }
.reviews-summary__stars svg { width: 18px; height: 18px; fill: currentColor; }
.reviews-summary__count { font-size: 14px; color: var(--text-secondary); }

/* ---------- Coverage map ---------- */
.coverage {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
}
@media (max-width: 900px) { .coverage { grid-template-columns: 1fr; } }
.coverage__map {
    background: var(--surface-dark);
    border-radius: var(--r-lg);
    padding: 32px;
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    display: grid;
    place-items: center;
    border: 1px solid var(--n-800);
}
.coverage__map svg { width: 100%; height: 100%; }
.coverage__map__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}
@media (max-width: 900px) {
    .coverage__map { padding: 20px; aspect-ratio: 4/5; }
}
@media (max-width: 560px) {
    .coverage__map { padding: 14px; }
}
.coverage__regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.coverage__region {
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast) var(--ease);
}
.coverage__region:hover { border-color: var(--brand-black); }
.coverage__region strong { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; letter-spacing: -0.005em; }
.coverage__region span { font-size: 13px; color: var(--text-tertiary); }

/* ---------- Feature list (why choose) ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
    padding: 28px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    background: var(--white);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.feature__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-black);
    color: var(--brand-yellow);
    display: grid;
    place-items: center;
    margin-bottom: 8px;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h4 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.feature p { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

.section--dark .feature { background: var(--surface-dark); border-color: var(--n-800); color: var(--text-inverse); }
.section--dark .feature p { color: var(--n-400); }
.section--dark .feature__icon { background: var(--brand-yellow); color: var(--brand-black); }

/* ---------- FAQ / accordion ---------- */
.accordion { display: grid; gap: 0; border-top: 1px solid var(--n-200); }
.accordion__item {
    border-bottom: 1px solid var(--n-200);
}
.accordion__q {
    width: 100%;
    text-align: left;
    padding: 24px 32px 24px 4px;
    font-size: 17px;
    font-weight: 600;
    color: var(--brand-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: relative;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease);
}
.accordion__q:hover { color: var(--text-secondary); }
.accordion__q::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 14px; height: 14px;
    background:
        linear-gradient(currentColor, currentColor) center/14px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center/2px 14px no-repeat;
    transform: translateY(-50%) rotate(0deg);
    transition: transform var(--t-mod) var(--ease);
}
.accordion__item[open] .accordion__q::after {
    background:
        linear-gradient(currentColor, currentColor) center/14px 2px no-repeat;
    transform: translateY(-50%) rotate(180deg);
}
.accordion__a {
    padding: 0 4px 24px 4px;
    max-width: 72ch;
    color: var(--text-secondary);
    font-size: 15.5px;
    line-height: 1.65;
}
.accordion__a p { margin: 0 0 10px; }
.accordion__a p:last-child { margin-bottom: 0; }

/* ---------- Fleet strip ---------- */
.fleet-strip {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
}
@media (max-width: 900px) { .fleet-strip { grid-template-columns: 1fr; } }
.fleet-strip__media {
    aspect-ratio: 4/3;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--n-100);
}
.fleet-strip__media img { width: 100%; height: 100%; object-fit: cover; }
.fleet-strip__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
}
.fleet-strip__stat {
    padding: 20px;
    background: var(--n-50);
    border-radius: var(--r-md);
    border-left: 3px solid var(--brand-yellow);
}
.fleet-strip__stat strong {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--brand-black);
    line-height: 1;
    margin-bottom: 6px;
}
.fleet-strip__stat span { font-size: 13px; color: var(--text-tertiary); }

/* ---------- Pricing table ---------- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.price-card {
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    transition: border-color var(--t-std) var(--ease);
}
.price-card--feature {
    border-color: var(--brand-black);
    background: var(--brand-black);
    color: var(--white);
}
.price-card--feature h3, .price-card--feature .price-card__amount { color: var(--white); }
.price-card__tag {
    position: absolute;
    top: -12px;
    left: 32px;
    background: var(--brand-yellow);
    color: var(--brand-black);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.price-card h3 { font-size: 20px; margin: 0; }
.price-card__amount {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--brand-black);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.price-card__amount small {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0;
}
.price-card--feature .price-card__amount small { color: var(--n-400); }
.price-card__desc { color: var(--text-secondary); font-size: 14.5px; margin: 0; }
.price-card--feature .price-card__desc { color: var(--n-400); }
.price-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14.5px; }
.price-card li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-secondary); line-height: 1.5; }
.price-card--feature li { color: var(--n-300); }
.price-card li svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 5px; color: var(--brand-black); }
.price-card--feature li svg { color: var(--brand-yellow); }

/* ---------- CTA banner ---------- */
.cta-banner {
    background: var(--brand-black);
    color: var(--white);
    padding: clamp(48px, 6vw, 80px);
    border-radius: var(--r-lg);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--sp-2xl);
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 900px) { .cta-banner { grid-template-columns: 1fr; padding: 40px 28px; } }
.cta-banner::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 240px; height: 240px;
    background: radial-gradient(circle at top right, rgba(255,193,7,0.15), transparent 70%);
    pointer-events: none;
}
.cta-banner h2 {
    font-size: clamp(28px, 3.4vw, 44px);
    margin: 0 0 16px;
    letter-spacing: -0.025em;
    color: var(--white);
    line-height: 1.1;
}
.cta-banner p { color: var(--n-300); font-size: 17px; margin: 0; max-width: 46ch; }
.cta-banner__actions { display: flex; flex-direction: column; gap: 12px; }
.cta-banner__phone {
    background: var(--surface-dark);
    padding: 20px;
    border-radius: var(--r-md);
    border: 1px solid var(--n-800);
}
.cta-banner__phone__num {
    display: block;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--brand-yellow);
    line-height: 1.1;
}
.cta-banner__phone__lbl { font-size: 12px; color: var(--n-400); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; display: block; }

/* ---------- Form ---------- */
.form {
    display: grid;
    gap: 20px;
}
.form__row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}
.field label small { color: var(--text-tertiary); font-weight: 400; letter-spacing: 0; }
.field input, .field select, .field textarea {
    padding: 12px 14px;
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    background: var(--white);
    font-size: 15px;
    transition: border-color var(--t-fast) var(--ease);
    min-height: 46px;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--n-500); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--brand-yellow); outline-offset: 1px; border-color: var(--brand-black); }
.field__hint { font-size: 12.5px; color: var(--text-tertiary); }

.radio-group, .check-group { display: grid; gap: 10px; }
.radio-tile, .check-tile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--n-300);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
    background: var(--white);
}
.radio-tile:hover, .check-tile:hover { border-color: var(--brand-black); }
.radio-tile input, .check-tile input { margin-top: 3px; accent-color: var(--brand-black); }
.radio-tile:has(input:checked), .check-tile:has(input:checked) { border-color: var(--brand-black); background: var(--n-50); }
.radio-tile strong { display: block; font-weight: 600; font-size: 15px; }
.radio-tile span { font-size: 13px; color: var(--text-tertiary); }

/* Radio grid layout */
.radio-tiles-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 500px) { .radio-tiles-2 { grid-template-columns: 1fr; } }

/* ---------- Page hero (for internal pages) ---------- */
.page-hero {
    padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 72px);
    background: var(--n-50);
    border-bottom: 1px solid var(--n-200);
}
.page-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-2xl); align-items: end; }
@media (max-width: 900px) { .page-hero__grid { grid-template-columns: 1fr; } }
.page-hero h1 {
    font-size: clamp(36px, 4.5vw, 56px);
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin: 0 0 20px;
    max-width: 20ch;
}
.page-hero__lede { font-size: clamp(16px, 1.3vw, 19px); color: var(--text-secondary); line-height: 1.55; margin: 0; max-width: 50ch; }
.page-hero__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.page-hero__aside .chip { background: var(--white); border-color: var(--n-200); }

/* Breadcrumb */
.crumbs {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.crumbs a { color: var(--text-secondary); font-weight: 500; }
.crumbs a:hover { color: var(--brand-black); }
.crumbs span { color: var(--text-tertiary); }

/* ---------- Content prose ---------- */
.prose { max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--text-primary); }
.prose p, .prose ul, .prose ol, .prose blockquote { margin-bottom: 20px; }
.prose h2 { margin-top: 40px; margin-bottom: 16px; font-size: 30px; }
.prose h3 { margin-top: 28px; margin-bottom: 12px; font-size: 22px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: 8px; color: var(--text-secondary); }
.prose blockquote {
    border-left: 3px solid var(--brand-yellow);
    padding: 8px 0 8px 20px;
    font-size: 19px;
    color: var(--text-primary);
    font-style: italic;
    line-height: 1.5;
}
.prose a { color: var(--brand-black); text-decoration: underline; text-decoration-color: var(--brand-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Legal accordion (compact section that hosts Privacy + Terms) ---------- */
.legal-section {
    background: var(--brand-black);
    color: var(--n-300);
    padding: 48px 0 72px;
    border-top: 1px solid var(--n-800);
}
.legal-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.legal-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--n-500);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
}
.legal-section__eyebrow::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--brand-yellow);
    display: inline-block;
}
.legal-section__title {
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}
.legal-section__note {
    color: var(--n-500);
    font-size: 13px;
    max-width: 42ch;
    line-height: 1.5;
    margin: 0;
}
.legal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
}
.legal-item {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--n-800);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-std) var(--ease), background var(--t-std) var(--ease);
}
.legal-item.is-open {
    border-color: var(--brand-yellow);
    background: rgba(255,193,7,0.03);
}
.legal-item__trigger {
    all: unset;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    cursor: pointer;
    font-family: inherit;
    color: var(--white);
    box-sizing: border-box;
}
.legal-item__trigger:focus-visible {
    outline: 2px solid var(--brand-yellow);
    outline-offset: -2px;
}
.legal-item__num {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.05);
    color: var(--brand-yellow);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.legal-item__label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.legal-item__label strong {
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.legal-item__label span {
    color: var(--n-500);
    font-size: 13px;
    font-weight: 400;
}
.legal-item__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--n-700);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform var(--t-std) var(--ease), border-color var(--t-std) var(--ease), background var(--t-std) var(--ease);
    color: var(--n-400);
}
.legal-item__icon svg { width: 14px; height: 14px; }
.legal-item.is-open .legal-item__icon {
    transform: rotate(45deg);
    border-color: var(--brand-yellow);
    background: var(--brand-yellow);
    color: var(--brand-black);
}
.legal-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 380ms var(--ease);
}
.legal-item.is-open .legal-item__panel {
    grid-template-rows: 1fr;
}
.legal-item__panel > div {
    overflow: hidden;
    min-height: 0;
}
.legal-item__body {
    padding: 4px 24px 28px;
    border-top: 1px solid var(--n-800);
    color: var(--n-400);
    font-size: 15px;
    line-height: 1.7;
}
.legal-item.is-open .legal-item__body { border-top-color: rgba(255,193,7,0.25); }
.legal-item__body h3 {
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    margin: 22px 0 8px;
    letter-spacing: -0.005em;
}
.legal-item__body h3:first-child { margin-top: 20px; }
.legal-item__body p { margin: 0 0 12px; }
.legal-item__body ul { padding-left: 20px; margin: 0 0 12px; }
.legal-item__body li { margin-bottom: 6px; }
.legal-item__body a {
    color: var(--brand-yellow);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.legal-item__body a:hover { color: var(--brand-yellow-hover); }
@media (max-width: 640px) {
    .legal-section { padding: 40px 0 56px; }
    .legal-item__trigger { padding: 16px 18px; gap: 12px; }
    .legal-item__body { padding: 4px 18px 22px; font-size: 14px; }
    .legal-item__label strong { font-size: 15px; }
    .legal-item__label span { font-size: 12px; }
}

/* ---------- Region / Coverage list ---------- */
.regions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .regions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .regions-grid { grid-template-columns: 1fr; } }
.region-tile {
    background: var(--white);
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color var(--t-fast) var(--ease);
}
.region-tile:hover { border-color: var(--brand-black); }
.region-tile__title { font-weight: 600; font-size: 16px; color: var(--brand-black); letter-spacing: -0.01em; }
.region-tile__sub { font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .gallery { grid-template-columns: 1fr; } }
.gallery__item {
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--n-100);
    position: relative;
}
.gallery__item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease);
    filter: grayscale(2%) contrast(1.02);
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; aspect-ratio: auto; }
.gallery__caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    color: var(--white);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity var(--t-std) var(--ease);
}
.gallery__item:hover .gallery__caption { opacity: 1; }

/* Blog list */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.article-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.article-card__media {
    aspect-ratio: 16/10;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--n-100);
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.03); }
.article-card__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.article-card h3 { font-size: 22px; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.25; }
.article-card p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }
.article-card__meta { font-size: 12px; color: var(--text-tertiary); margin-top: 8px; }

/* Anim utilities */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* Utility */
.center { text-align: center; }
.hide-mobile { display: initial; }
.hide-desktop { display: none; }
.mt-sm { margin-top: var(--sp-md); }
.mt-md { margin-top: var(--sp-lg); }
.mt-lg { margin-top: var(--sp-xl); }
.mt-xl { margin-top: var(--sp-2xl); }
.no-underline { text-decoration: none; }
.divider { border-top: 1px solid var(--n-200); margin: var(--sp-2xl) 0; }
@media (max-width: 700px) {
    .hide-mobile { display: none; }
    .hide-desktop { display: initial; }
}

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

/* Print */
@media print {
    .site-header, .site-footer, .mobile-bar, .alert-bar, .fab-stack { display: none; }
    body { padding-bottom: 0; }
}

/* ==========================================================
   Single-page site additions
   ========================================================== */

/* Nav active-state pill under links */
.nav a { position: relative; }
.nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--brand-yellow);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t-std) var(--ease);
}
.nav a.is-active,
.nav a[aria-current] { color: var(--brand-black); }
.nav a.is-active::after,
.nav a[aria-current]::after { transform: scaleX(1); }

/* Section anchors need scroll-margin for sticky header offset */
section[id] { scroll-margin-top: 90px; }

/* ---------- Floating contact FAB stack ---------- */
.fab-stack {
    position: fixed;
    right: max(20px, env(safe-area-inset-right, 0));
    bottom: max(20px, env(safe-area-inset-bottom, 0));
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
}
.fab {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px 14px 16px;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    box-shadow: 0 10px 32px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.12);
    transition: transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
    min-height: 52px;
    line-height: 1;
    white-space: nowrap;
}
.fab svg { width: 20px; height: 20px; flex-shrink: 0; }
.fab:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,0.32), 0 3px 8px rgba(0,0,0,0.14); }
.fab:active { transform: translateY(0); }
.fab--call {
    background: var(--brand-yellow);
    color: var(--brand-black);
}
.fab--wa {
    background: #25D366;
    color: #ffffff;
}
.fab--chat {
    background: var(--brand-black);
    color: var(--white);
    padding: 14px 22px;
    border: 1px solid var(--brand-black);
}
.fab--chat:hover { background: #1f1f1f; }
.fab__lbl { display: inline-block; }
.fab__lbl--solo { display: inline-block !important; font-size: 14px; }
@media (max-width: 560px) {
    .fab-stack { right: 14px; bottom: 14px; gap: 8px; }
    .fab { padding: 14px; font-size: 0; gap: 0; min-width: 52px; justify-content: center; }
    .fab__lbl { display: none; }
    .fab svg { width: 22px; height: 22px; }
    /* Chat button: keep the text visible since it has no icon */
    .fab--chat { padding: 14px 18px; font-size: 14px; min-width: 52px; }
    .fab--chat .fab__lbl--solo { display: inline-block; font-size: 14px; }
}
/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
    .fab:hover { transform: none; }
}

/* ---------- AI Assistant placeholder ---------- */
.ai-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
    padding: 32px 40px;
    background: var(--surface-dark);
    border: 1px solid var(--n-800);
    border-radius: var(--r-lg);
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.ai-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% -10%, rgba(255,193,7,0.16), transparent 55%);
    pointer-events: none;
}
.ai-card__icon {
    position: relative;
    width: 64px;
    height: 64px;
    background: var(--brand-black);
    border: 1px solid var(--n-800);
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: var(--brand-yellow);
    flex-shrink: 0;
}
.ai-card__icon svg { width: 30px; height: 30px; }
.ai-card__body { position: relative; }
.ai-card__body .tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 8px;
    border-radius: 999px;
    background: rgba(255,193,7,0.14);
    color: var(--brand-yellow);
    font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 10px;
}
.ai-card__body .tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-yellow);
}
.ai-card__body h3 {
    color: var(--white);
    margin: 0 0 6px;
    font-size: clamp(20px, 2vw, 24px);
    letter-spacing: -0.015em;
}
.ai-card__body p {
    color: var(--n-400);
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    max-width: 60ch;
}
.ai-card__actions { display: flex; gap: 10px; flex-shrink: 0; position: relative; }
@media (max-width: 800px) {
    .ai-card { grid-template-columns: 1fr; padding: 28px; text-align: left; }
    .ai-card__actions { justify-content: flex-start; }
}

/* Hero-scoped tighter section spacing when it lives on the single page */
#home.hero { padding-top: clamp(40px, 5vw, 80px); }

/* Simplified footer contact — for consistency without email */
.footer-contact div a { color: inherit; }

/* ==========================================================
   REVISION additions — polish & premium feel
   ========================================================== */

/* --- Scroll progress rail under the sticky header --- */
.scroll-progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: transparent;
    pointer-events: none;
    z-index: 3;
}
.scroll-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--brand-yellow), #ffd749);
    transition: width 120ms linear;
}

/* --- Section counter + intro pattern --- */
.section-index {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 22px;
    line-height: 1;
}
.section-index__num {
    font-family: var(--font-sans);
    color: var(--brand-black);
    font-variant-numeric: tabular-nums;
    background: var(--brand-yellow);
    padding: 6px 10px;
    border-radius: var(--r-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.section--dark .section-index { color: var(--n-500); }
.section--dark .section-index__num { background: var(--brand-yellow); color: var(--brand-black); }
/* Decorative rule removed for cleaner alignment; keep the class hidden so
   any residual DOM remains harmless */
.section-index__rule { display: none; }

/* --- Alternating section flavor --- */
.section--tint {
    background:
      radial-gradient(1200px 400px at 100% -10%, rgba(255,193,7,0.06), transparent 60%),
      var(--white);
}
.section--stripe {
    background:
      repeating-linear-gradient(90deg, transparent 0 24px, rgba(0,0,0,0.02) 24px 25px),
      var(--n-50);
}

/* --- Section divider (asphalt lane markers) --- */
.lane-divider {
    display: block;
    width: 100%;
    height: 24px;
    background:
      linear-gradient(90deg,
        transparent 0, transparent 6px,
        var(--n-300) 6px, var(--n-300) 42px,
        transparent 42px, transparent 72px);
    background-size: 72px 2px;
    background-repeat: repeat-x;
    background-position: 0 50%;
    opacity: 0.6;
}
.section--dark .lane-divider {
    background:
      linear-gradient(90deg,
        transparent 0, transparent 6px,
        rgba(255,193,7,0.3) 6px, rgba(255,193,7,0.3) 42px,
        transparent 42px, transparent 72px);
    background-size: 72px 2px;
    background-repeat: repeat-x;
    background-position: 0 50%;
    opacity: 0.7;
}

/* --- Hero: live pulsing "available" indicator --- */
.hero__eyebrow .chip__dot {
    position: relative;
}
.hero__eyebrow .chip__dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
    0%   { transform: scale(0.6); opacity: 0.4; }
    80%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Hero background — very subtle lane markers on asphalt */
.hero {
    background:
      radial-gradient(900px 500px at 90% 10%, rgba(255,193,7,0.09), transparent 60%),
      var(--white);
}

/* --- Trust strip: extra polish --- */
.trust-strip {
    background:
      linear-gradient(90deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
}

/* --- Fleet strip: better image treatment --- */
.fleet-strip__media {
    position: relative;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25);
}
.fleet-strip__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,0.35));
    pointer-events: none;
}
.fleet-strip__media__caption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px;
    color: #fff;
    z-index: 2;
    font-size: 13px;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.fleet-strip__media__caption::before {
    content: "";
    width: 24px; height: 2px;
    background: var(--brand-yellow);
    flex-shrink: 0;
}

/* --- Service cards: subtle stroke on hover --- */
.service-card {
    position: relative;
}
.service-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: var(--brand-yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 350ms var(--ease-out);
}
.service-card:hover::after { transform: scaleX(1); }

/* --- Why us: brighter feature-card icon --- */
.feature { transition: transform 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease); }
.feature:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--n-300); }

/* --- Process on dark section: yellow step indicators --- */
.section--dark .process__step {
    background: linear-gradient(180deg, #181818, #141414);
}
.process__step {
    position: relative;
    overflow: hidden;
}
.process__step::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle at 100% 0, rgba(255,193,7,0.12), transparent 70%);
    pointer-events: none;
}

/* --- Coverage map: wrapper with stats overlay --- */
.coverage__map {
    background:
      radial-gradient(600px 400px at 30% 20%, rgba(255,193,7,0.06), transparent 60%),
      var(--surface-dark);
}
.coverage__stats {
    position: absolute;
    left: 20px;
    top: 20px;
    display: grid;
    gap: 8px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.02em;
    z-index: 2;
}
.coverage__stats strong { color: var(--brand-yellow); font-weight: 700; }
.coverage__legend {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: rgba(255,255,255,0.8);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    padding: 8px 12px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255,255,255,0.08);
    z-index: 2;
}
.coverage__legend::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-yellow);
    box-shadow: 0 0 0 4px rgba(255,193,7,0.15);
}

/* --- Reviews summary: dark variant on light bg --- */
.reviews-summary--dark {
    background: var(--brand-black);
    color: #fff;
    border: 0;
}
.reviews-summary--dark strong { color: #fff; }
.reviews-summary--dark span { color: var(--n-400); }
.reviews-summary--dark .reviews-summary__count { color: var(--n-400); }

/* --- FAQ: sidebar layout --- */
.faq-shell {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}
@media (max-width: 900px) { .faq-shell { grid-template-columns: 1fr; } }
.faq-aside {
    padding: 28px;
    background: var(--brand-black);
    color: #fff;
    border-radius: var(--r-lg);
    position: sticky;
    top: 96px;
    display: grid;
    gap: 18px;
}
.faq-aside h4 { color: #fff; margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.faq-aside p  { color: var(--n-400); margin: 0; font-size: 14.5px; line-height: 1.55; }
.faq-aside .btn { justify-content: center; }
@media (max-width: 900px) {
    .faq-aside { position: static; }
}

/* ==========================================================
   AI Assistant Section — premium reserved space
   ========================================================== */
.ai-section {
    background:
      radial-gradient(600px 400px at 15% 30%, rgba(255,193,7,0.10), transparent 60%),
      radial-gradient(700px 500px at 85% 70%, rgba(37,211,102,0.06), transparent 60%),
      var(--brand-black);
    color: #fff;
    padding: clamp(64px, 8vw, 120px) 0;
    position: relative;
    overflow: hidden;
}
.ai-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0;
    pointer-events: none;
    opacity: 0.7;
}
.ai-section .container { position: relative; z-index: 1; }
.ai-section h2 { color: #fff; }
.ai-section .lede { color: var(--n-400); }

.ai-shell {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 900px) { .ai-shell { grid-template-columns: 1fr; gap: 32px; } }

.ai-copy .tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background: rgba(255,193,7,0.14);
    color: var(--brand-yellow);
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 18px;
}
.ai-copy .tag::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-yellow);
    box-shadow: 0 0 0 4px rgba(255,193,7,0.2);
    animation: pulseRing 2.4s ease-out infinite;
}
.ai-copy h2 {
    font-size: clamp(32px, 3.6vw, 48px);
    letter-spacing: -0.025em;
    margin: 0 0 16px;
    line-height: 1.08;
}
.ai-copy p { color: var(--n-400); font-size: 17px; line-height: 1.6; margin: 0 0 22px; max-width: 44ch; }

.ai-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 480px) { .ai-features { grid-template-columns: 1fr; } }
.ai-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    border-radius: var(--r-md);
    min-height: 72px;
}
.ai-feature > div {
    flex: 1 1 auto;
    min-width: 0;
}
.ai-feature__ic {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,193,7,0.14);
    color: var(--brand-yellow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
}
.ai-feature__ic svg { width: 18px; height: 18px; display: block; }
.ai-feature strong { display: block; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 2px; }
.ai-feature span  { display: block; color: var(--n-500); font-size: 12.5px; line-height: 1.45; }

.ai-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding-top: 8px;
}
.ai-hint {
    margin-top: 16px;
    color: var(--n-500);
    font-size: 13px;
    display: inline-flex; align-items: center; gap: 8px;
}
.ai-hint::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-yellow);
}

/* AI chat window mock */
.ai-mock {
    background: linear-gradient(180deg, #1c1c1c 0%, #131313 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    padding: 6px 6px 6px 6px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,193,7,0.05);
    overflow: hidden;
}
.ai-mock__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ai-mock__dots {
    display: inline-flex; gap: 6px;
}
.ai-mock__dots span {
    width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.14);
}
.ai-mock__dots span:nth-child(1){ background: #FF5F57; }
.ai-mock__dots span:nth-child(2){ background: #FEBC2E; }
.ai-mock__dots span:nth-child(3){ background: #28C840; }
.ai-mock__title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--n-300);
    font-size: 13px;
    font-weight: 500;
}
.ai-mock__title::before {
    content: ""; width: 20px; height: 20px; border-radius: 6px;
    background: var(--brand-yellow); flex-shrink: 0;
    background-image: linear-gradient(135deg, #ffd749 0%, #FFC107 100%);
}
.ai-mock__title b { color: #fff; font-weight: 600; }
.ai-mock__badge {
    font-size: 10.5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(37,211,102,0.14);
    color: #34d97a;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-transform: uppercase;
}
.ai-mock__body {
    padding: 22px 20px 24px;
    display: grid;
    gap: 12px;
    min-height: 320px;
}
.ai-bubble {
    max-width: 82%;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.005em;
}
.ai-bubble--user {
    background: var(--brand-yellow);
    color: var(--brand-black);
    border-bottom-right-radius: 4px;
    margin-left: auto;
    font-weight: 500;
}
.ai-bubble--bot {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom-left-radius: 4px;
}
.ai-bubble--bot strong { color: var(--brand-yellow); font-weight: 600; }
.ai-bubble--bot ul { margin: 8px 0 0; padding-left: 16px; font-size: 13.5px; color: var(--n-300); }
.ai-bubble--bot li { margin-bottom: 2px; }
.ai-typing {
    display: inline-flex; gap: 4px; align-items: center;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}
.ai-typing i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--n-500);
    animation: aiDot 1.2s infinite ease-in-out;
}
.ai-typing i:nth-child(2){ animation-delay: 0.15s; }
.ai-typing i:nth-child(3){ animation-delay: 0.30s; }
@keyframes aiDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}
.ai-mock__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    color: var(--n-500);
    font-size: 13px;
}
.ai-mock__foot__inp {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 999px;
    color: var(--n-500);
    font-size: 13px;
}
.ai-mock__foot__inp::after { content: "|"; margin-left: 6px; opacity: 0.5; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-mock__foot .badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,193,7,0.12);
    color: var(--brand-yellow);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==========================================================
   Footer additions — cta banner, badges, drawer meta
   ========================================================== */
.footer-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 40px 40px;
    background: linear-gradient(135deg, #1a1a1a 0%, #232323 100%);
    border: 1px solid #2b2b2b;
    border-radius: var(--r-lg);
    margin-bottom: 56px;
    position: relative;
    overflow: hidden;
}
.footer-cta::before {
    content: "";
    position: absolute;
    top: -60%; right: -20%;
    width: 60%; height: 200%;
    background: radial-gradient(circle at center, rgba(255,193,7,0.12), transparent 60%);
    pointer-events: none;
}
.footer-cta h3 {
    color: #fff;
    font-size: clamp(22px, 2.4vw, 30px);
    margin: 10px 0 0;
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 22ch;
}
.footer-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; z-index: 1; }
@media (max-width: 800px) {
    .footer-cta { grid-template-columns: 1fr; padding: 32px 24px; }
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 24px 0 20px;
    border-top: 1px solid #2b2b2b;
    margin-top: 40px;
}
.footer-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #2b2b2b;
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.02);
    font-size: 12px;
    color: var(--n-400);
    letter-spacing: 0.02em;
}
.footer-badge em {
    font-style: normal;
    color: var(--brand-yellow);
    font-weight: 700;
    letter-spacing: -0.005em;
    font-size: 13px;
}

.drawer__meta {
    display: grid;
    gap: 6px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--n-200);
    font-size: 12.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}
.drawer__meta span { display: inline-flex; gap: 8px; align-items: center; }
.drawer__meta svg { width: 14px; height: 14px; color: var(--brand-black); opacity: 0.7; }

/* --- FAB call pulse ring --- */
.fab { position: relative; }
.fab__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(255,193,7,0.55);
    animation: fabPulse 2.4s ease-out infinite;
    pointer-events: none;
}
@keyframes fabPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,193,7,0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(255,193,7,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}
@media (prefers-reduced-motion: reduce) {
    .fab__pulse, .hero__eyebrow .chip__dot::after, .ai-copy .tag::before { animation: none; }
}

/* --- Contact card refinement --- */
.contact-cards {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 900px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-primary,
.contact-secondary {
    padding: 32px;
    border-radius: var(--r-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    background: #1a1a1a;
    color: #fff;
    text-decoration: none;
    transition: transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
    position: relative;
    overflow: hidden;
    border: 1px solid #2b2b2b;
}
.contact-primary {
    background:
        radial-gradient(120% 140% at 100% 50%,
            rgba(255,193,7,0.22) 0%,
            rgba(255,193,7,0.12) 22%,
            rgba(255,193,7,0.04) 45%,
            rgba(255,193,7,0.00) 62%),
        linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 55%, #1e1e1e 100%);
    border-color: rgba(255,193,7,0.28);
}
.contact-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 100% at 105% 50%,
            rgba(255,193,7,0.18) 0%,
            rgba(255,193,7,0.09) 30%,
            rgba(255,193,7,0.00) 65%);
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(1px);
}
.contact-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 90% at 110% 50%, rgba(255,193,7,0.08), transparent 70%);
    pointer-events: none;
}
.contact-primary:hover, .contact-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6);
}
.contact-card__eyebrow {
    font-size: 12px;
    color: var(--n-500);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 8px;
}
.contact-card__num {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--brand-yellow);
    letter-spacing: -0.02em;
    line-height: 1.05;
    display: block;
}
.contact-secondary .contact-card__num { color: #fff; font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); }
.contact-card__sub {
    color: #b0b0b0;
    font-size: 14px;
    margin-top: 10px;
    display: block;
    line-height: 1.5;
}
.contact-card__ico {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
    z-index: 1;
}
.contact-primary .contact-card__ico { background: var(--brand-yellow); color: var(--brand-black); }
.contact-secondary .contact-card__ico { background: #25D366; color: #fff; }
.contact-card__ico svg { width: 22px; height: 22px; }
.contact-card__tag {
    position: absolute;
    top: 24px;
    right: 24px;
    padding: 5px 10px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(255,193,7,0.14);
    color: var(--brand-yellow);
    border: 1px solid rgba(255,193,7,0.3);
    z-index: 1;
}
.contact-secondary .contact-card__tag {
    background: rgba(37,211,102,0.14);
    color: #34d97a;
    border-color: rgba(37,211,102,0.3);
}

.next-steps {
    padding: 32px;
    background: #1a1a1a;
    border: 1px solid #2b2b2b;
    border-radius: var(--r-lg);
}
.next-steps__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.next-steps h3 {
    color: #fff;
    font-size: 22px;
    margin: 0 0 20px;
    letter-spacing: -0.015em;
}
.next-steps__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}
.next-steps__list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
}
.next-steps__num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--brand-yellow);
    color: var(--brand-black);
    font-weight: 800; font-size: 13px;
    display: grid; place-items: center;
    margin-top: 2px;
}
.next-steps strong { color: #fff; display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.next-steps__list span { color: #b0b0b0; font-size: 14px; line-height: 1.5; }
.next-steps__foot {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #2b2b2b;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: #b0b0b0;
    font-size: 13.5px;
    line-height: 1.5;
}
.next-steps__foot svg {
    width: 20px; height: 20px;
    color: var(--brand-yellow);
    flex-shrink: 0;
    margin-top: 2px;
}
.contact-shell {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 900px) { .contact-shell { grid-template-columns: 1fr; } }
.contact-shell > .contact-cards { grid-template-columns: 1fr; }

/* --- Small screen tweaks --- */
@media (max-width: 700px) {
    .hero h1 { font-size: clamp(32px, 8vw, 40px); }
    .section { padding: clamp(48px, 10vw, 80px) 0; }
    .footer-cta { padding: 28px 20px; }
    .footer-cta h3 { font-size: 22px; }
    .footer-cta .chip { margin-bottom: 4px; }
    .fleet-strip__stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .fleet-strip__stat { padding: 16px; }
    .fleet-strip__stat strong { font-size: 26px; }
    .accordion__q { font-size: 16px; padding-right: 40px; }
    .contact-primary, .contact-secondary { padding: 24px; }
    .contact-card__tag { display: none; }
}



/* ===================================================================
   MOBILE OVERFLOW GUARDS
   Prevents any horizontal scroll caused by fixed-width elements,
   long unbroken strings, oversized images/tables, etc.
   =================================================================== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
body {
    -webkit-text-size-adjust: 100%;
}
/* Never let media, embeds or code blocks overflow their container */
img, svg, video, iframe, embed, object, canvas, picture {
    max-width: 100%;
    height: auto;
}
pre, code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
/* Long phone numbers, URLs and words wrap on mobile */
@media (max-width: 700px) {
    /* Allow long words and phone numbers to break rather than push the page wider */
    .hero__phone__num,
    .contact-card__num,
    .footer-contact strong,
    .phone-link__txt {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    /* Buttons should fill row on mobile so they never sit next to overflowing labels */
    .hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
    .hero__ctas .btn { width: 100%; min-width: 0; }
    .hero__ctas .btn--primary { min-width: 0; }

    /* Trust rows: allow wrap and prevent single number cells from pushing width */
    .hero__trust { flex-wrap: wrap; }
    .hero__trust__item { min-width: 0; }

    /* Any grid or flex row that might sum >100vw at small sizes */
    .services-grid, .feature-grid, .process, .contact-cards, .footer-badges,
    .reviews-grid, .fleet-strip, .pricing-grid, .regions-grid, .gallery, .blog-grid {
        min-width: 0;
    }
    .services-grid > *, .feature-grid > *, .process > *, .contact-cards > *,
    .reviews-grid > *, .fleet-strip > *, .pricing-grid > *, .regions-grid > *,
    .gallery > *, .blog-grid > *, .footer-badges > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Section containers get slightly tighter padding on very small viewports */
    .container, .container--wide, .container--narrow {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Alert bar can wrap instead of scrolling horizontally */
    .alert-bar { flex-wrap: wrap; gap: 8px 14px; }

    /* Section head + section index rows */
    .section-head { gap: 20px; }
    .section-index { flex-wrap: wrap; }

    /* Fleet strip stat card: prevent big numbers from overflowing */
    .fleet-strip__stat strong { word-break: break-word; }

    /* Ensure text inside cards wraps and never causes horizontal scroll */
    .contact-card__num,
    .footer-contact strong {
        font-size: clamp(20px, 5vw, 26px);
        line-height: 1.15;
    }

    /* Hero phone tile: content wraps and doesn't force width */
    .hero__phone { flex-wrap: wrap; }
    .hero__phone > div:last-child { min-width: 0; flex: 1 1 auto; }

    /* Any table content becomes horizontally scrollable in its own container,
       not the page */
    table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 380px) {
    .container, .container--wide, .container--narrow {
        padding-left: 14px;
        padding-right: 14px;
    }
    .hero__phone__num { font-size: 22px; }
    .contact-card__num { font-size: 20px; }
    .btn--lg { padding: 16px 20px; font-size: 15px; min-height: 52px; }
    .footer-badges { gap: 8px; }
    .footer-badge { padding: 10px 12px; font-size: 12px; }
}
/* Extra safety net: hide phone link chip in the header on ultra-narrow screens */
@media (max-width: 480px) {
    .header-actions .phone-link { display: none; }
}


/* ===================================================================
   SECTION RHYTHM REFINEMENT
   Purpose: make major-section transitions perceptible on mobile scroll
   without introducing new colours, boxes, or a new section system.
   Refines the existing .section--tint / .section--surface / .section-head
   / .lane-divider primitives.
   =================================================================== */

/* A. Warm .section--surface a touch (was flat --n-50 = #FAFAFA) so it
      reads as an intentionally different plane from pure-white sections.
      Kept extremely close to n-50 — desktop-imperceptible, mobile-legible. */
.section--surface {
    background: #F4F2EE;
}

/* A soft inset "shelf" at the top edge of surface sections — reads as
   the ground dropping one level when you scroll into it. 3px, ~4% black,
   never a visible line. */
.section--surface {
    box-shadow: inset 0 3px 0 rgba(17,17,17,0.03);
}

/* B. Hairline seam at the seam of any two light sections. We only draw
      it when a light section directly follows another light section —
      never after .section--dark (which already contrasts) and never after
      the hero. Uses ::before positioned at the very top edge. */
.section--surface + .section:not(.section--dark):not(.section--surface):not(.section--tint)::before,
.section:not(.section--dark):not(.section--surface):not(.section--tint) + .section--surface::before,
.section--tint + .section--surface::before,
.section--surface + .section--tint::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: rgba(17,17,17,0.06);
    pointer-events: none;
}
/* Give sections a positioning context so the ::before seam anchors correctly.
   Only applies to light-family sections — dark sections don't need it. */
.section--surface,
.section--tint,
.section:not(.section--dark) { position: relative; }

/* C. Mobile-only breathing room: a slightly stronger "pause" at the top
      of any section that follows another light section, so the eyebrow
      can announce "new section" cleanly rather than hugging the previous
      section's tail content. Desktop keeps its existing rhythm. */
@media (max-width: 700px) {
    .section--surface + .section:not(.section--dark),
    .section:not(.section--dark) + .section--surface,
    .section--tint + .section:not(.section--dark),
    .section:not(.section--dark) + .section--tint {
        padding-top: clamp(56px, 12vw, 88px);
    }
    /* And the eyebrow itself gets a hair more space beneath it so the
       H2 lands with a beat, not a bump. */
    .section-index { margin-bottom: 20px; }
}

/* D. Refine the existing .lane-divider so it works as a considered
      transition rather than a full-bleed stripe. Container-width, softer
      dash rhythm, quieter on mobile. Used sparingly in HTML — only where
      two same-tone light sections meet. */
.lane-divider {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    box-sizing: border-box;
    background:
      linear-gradient(90deg,
        transparent 0, transparent 6px,
        var(--n-300) 6px, var(--n-300) 42px,
        transparent 42px, transparent 72px) no-repeat;
    background-size: calc(100% - (var(--page-pad) * 2)) 2px;
    background-position: var(--page-pad) 50%;
    height: 16px;
    opacity: 0.5;
}
/* When placed between two sections it sits on the shared seam; give it
   a little vertical breathing space rather than adding it to the sections. */
.lane-divider { margin-top: -8px; margin-bottom: -8px; position: relative; z-index: 1; }
@media (max-width: 700px) {
    .lane-divider { opacity: 0.35; height: 12px; }
}
/* Where a lane-divider sits between a surface and a plain-light section,
   suppress the hairline ::before seam on the following section so we
   don't double-mark the transition. */
.lane-divider + .section::before,
.lane-divider + .section--surface::before,
.lane-divider + .section--tint::before { content: none !important; }

/* E. Dark sections are intentionally untouched — their contrast already
      provides ample separation. No changes to .section--dark. */