:root {
    --navy: #202329;
    --navy-2: #2d3038;
    --navy-3: #16181c;
    --orange: #ff6a00;
    --orange-2: #ff8a3d;
    --blue: #1d5d8f;
    --blue-light: #2e7bb8;
    --bg: #f7f9fc;
    --bg-2: #eef2f6;
    --ink: #1e2a3b;
    --muted: #5a6b7f;
    --white: #ffffff;
    --green: #1e8e5a;
    --purple: #6c5ce7;
    --red: #e5484d;
    --line: rgba(32, 35, 41, 0.1);
    --line-soft: rgba(32, 35, 41, 0.06);
    --shadow: 0 16px 40px -18px rgba(32, 35, 41, 0.35);
    --shadow-lg: 0 30px 60px -20px rgba(32, 35, 41, 0.4);
    --radius: 16px;
    --radius-sm: 10px;
    --maxw: 1280px;
    --grad-cta: linear-gradient(120deg, var(--orange), var(--orange-2));
    --grad-navy: linear-gradient(135deg,
            var(--navy) 0%,
            var(--navy-2) 60%,
            #3a3f49 130%);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Inter", system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: "Manrope", system-ui, sans-serif;
    color: var(--navy);
    margin: 0;
    line-height: 1.16;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

:focus-visible {
    outline: 3px solid var(--blue-light);
    outline-offset: 3px;
}

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

/* ---------- Scroll reveal system (site-wide) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.3, 1),
        transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Hero entrance animation (always plays, above the fold) ---------- */
@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-eyebrow {
    animation: hero-in 0.6s ease 0.1s both;
}

.hero h1 {
    animation: hero-in 0.6s ease 0.2s both;
}

.hero p.sub {
    animation: hero-in 0.6s ease 0.3s both;
}

.hero-cta {
    animation: hero-in 0.6s ease 0.4s both;
}

.hero-dots {
    animation: hero-in 0.6s ease 0.5s both;
}

.hero-photo {
    animation: hero-in 0.7s ease 0.3s both;
}

.mini-quote {
    animation: hero-in 0.7s ease 0.55s both;
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--navy-3);
    color: #9fb0c2;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 24px;
    gap: 14px;
    flex-wrap: wrap;
}

.topbar-left {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.topbar-left a {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #c3d0dd;
}

.topbar-left a:hover {
    color: #fff;
}

.topbar-left i {
    color: var(--orange);
    width: 14px;
    text-align: center;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-social {
    display: flex;
    gap: 10px;
}

.topbar-social a {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3d0dd;
    font-size: 12px;
}

.topbar-social a:hover {
    background: var(--orange);
    color: #fff;
}

.topbar-cta {
    background: var(--orange);
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-cta:hover {
    background: var(--orange-2);
}

/* ---------- Header ---------- */
header.site {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow 0.25s ease;
}

header.site.scrolled {
    box-shadow: 0 8px 24px -16px rgba(32, 35, 41, 0.3);
}

.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1px 24px;
    gap: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    color: var(--navy);
    font-size: 18px;
    white-space: nowrap;
}

.logo-img {
    height: 38px;
    width: auto;
    display: block;
}

.mn-logo-mark {
    height: 26px;
    width: auto;
}

.logo .mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--grad-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--orange);
    font-size: 16px;
}

.logo small {
    display: block;
    font-family: "Inter";
    font-weight: 600;
    font-size: 10.5px;
    color: var(--blue);
    letter-spacing: 0.03em;
}

nav.primary {
    display: flex;
    gap: 8px;
    align-items: center;
}

nav.primary>a,
nav.primary>.has-dropdown>a {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    padding: 9px 14px;
    border-radius: 8px;
}

nav.primary>a:hover,
nav.primary>.has-dropdown>a:hover {
    background: var(--bg-2);
    color: var(--navy);
}

nav.primary a.current {
    color: var(--orange);
}

.qfc-dropdown-menu .qfc-dropdown-column .current {
    color: var(--ink);
}

.qfc-dropdown-menu .qfc-dropdown-column .current:hover {
    color: var(--orange);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14.5px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn-primary {
    background: var(--grad-cta);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(255, 107, 26, 0.55);
}

.btn-primary.pulse-cta {
    animation: cta-glow 2.6s ease-in-out infinite;
}

@keyframes cta-glow {

    0%,
    100% {
        box-shadow: 0 10px 24px -10px rgba(255, 107, 26, 0.55);
    }

    50% {
        box-shadow: 0 10px 30px -6px rgba(255, 107, 26, 0.85);
    }
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(255, 107, 26, 0.65);
}

.btn-ghost {
    background: transparent;
    color: var(--navy);
    border-color: var(--line);
}

.btn-ghost:hover {
    border-color: var(--navy);
    background: var(--bg-2);
}

.btn-light {
    background: #fff;
    color: var(--navy);
}

.btn-light:hover {
    background: #eef2f6;
}

.btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12);
}

.btn-tel {
    color: var(--navy);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 30px;
    background: var(--bg-2);
}

.btn-tel i {
    color: var(--orange);
}

.btn-tel:hover {
    background: #e4eaf1;
}

.btn-round {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
}

.btn-block {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    padding: 6px;
    font-size: 22px;
    color: var(--navy);
}

/* Mobile nav drawer */
#mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--navy);
    color: #fff;
    padding: 20px 24px 100px;
    overflow-y: auto;
}

#mobile-nav.open {
    display: block;
}

#mobile-nav .mn-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
}

#mobile-nav a {
    display: block;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e7edf3;
}

#mobile-nav a.current {
    color: var(--orange);
}

#mobile-nav .mn-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
}

#mobile-nav .mn-cta {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#mobile-nav .mn-contact {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #c3d0dd;
    font-size: 14px;
}

#mobile-nav .mn-contact i {
    color: var(--orange);
    width: 18px;
}

#mobile-nav .mn-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

#mobile-nav .mn-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Mobile sticky bar */
.mobile-sticky {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--navy);
    padding: 10px 14px;
    gap: 10px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.mobile-sticky a {
    flex: 1;
    text-align: center;
    padding: 13px 10px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mobile-sticky a.call {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.mobile-sticky a.quote {
    background: var(--grad-cta);
    color: #fff;
}

/* Floating action buttons */
.fab-stack {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 140;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: var(--shadow-lg);
    position: relative;
    transition: transform 0.18s ease;
}

.fab:hover {
    transform: scale(1.08);
}

.fab.whatsapp {
    background: #25d366;
}

.fab.call {
    background: var(--grad-cta);
}

.fab.call::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--orange);
    animation: fab-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

.fab.top {
    background: var(--navy-2);
    border: 1.5px solid rgba(255, 255, 255, .22);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 12px;
    transition: opacity .25s ease, visibility .25s ease, translate .25s ease, transform .18s ease;
}

.fab.top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
}

.fab.top:hover {
    background: var(--grad-cta);
    border-color: var(--grad-cta);
}

@keyframes fab-pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.fab-label {
    position: absolute;
    right: 66px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--navy);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.fab:hover .fab-label {
    opacity: 1;
}

@media (max-width: 720px) {
    .fab-stack {
        right: 14px;
        bottom: 88px;
    }

    .fab {
        width: 50px;
        height: 50px;
        font-size: 19px;
    }
}

/* ---------- Section shell ---------- */
section {
    padding: 90px 0;
}

section.tight {
    padding: 64px 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 14px;
    letter-spacing: 0.02em;
    background: rgba(29, 93, 143, 0.08);
    padding: 6px 14px;
    border-radius: 20px;
}

.eyebrow.on-dark {
    color: #8fc2ea;
    background: rgba(255, 255, 255, 0.08);
}

.section-head {
    max-width: 660px;
    margin-bottom: 44px;
}

.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head h2 {
    font-size: clamp(27px, 3.4vw, 38px);
}

.section-head p.lede {
    margin-top: 16px;
    font-size: 16.5px;
    color: var(--muted);
}

.section-alt {
    background: var(--bg-2);
}

.section-dark {
    background: var(--grad-navy);
    color: #cfd9e4;
}

.section-dark h2,
.section-dark h3 {
    color: #fff;
}

/* =========================================================
        HERO — contained card on light background (Profast-style),
        with a compact quick-quote bar (form requirement kept)
         ========================================================= */
.hero {
    background: var(--bg);
    padding: 26px 0 0;
}

.hero-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--shadow);
    padding: 52px;
    position: relative;
    overflow: hidden;
}

.hero-card::before {
    content: "";
    position: absolute;
    right: -60px;
    top: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 26, 0.08), transparent 70%);
}

.hero-top {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 44px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.hero-eyebrow .line {
    width: 26px;
    height: 2px;
    background: var(--orange);
}

.hero-eyebrow span {
    font-weight: 700;
    font-size: 13px;
    color: var(--blue);
    letter-spacing: 0.02em;
}

.hero h1 {
    font-size: clamp(28px, 3.4vw, 42px);
    max-width: 14ch;
}

.hero h1 .hl {
    color: var(--orange);
}

.hero p.sub {
    margin-top: 16px;
    font-size: 16px;
    color: var(--muted);
    max-width: 46ch;
}

.hero-cta {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

.hero-cta .btn {
    padding: 14px 24px;
}

/* Full-width quote bar, 4 fields + button */
.mini-quote {
    margin-top: 34px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    position: relative;
    z-index: 1;
}

.mini-quote .field label {
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    display: block;
    margin-bottom: 5px;
}

.mini-quote .field {
    position: relative;
}

.mini-quote .field i {
    position: absolute;
    left: 11px;
    top: 35px;
    color: var(--blue);
    font-size: 12px;
    z-index: 1;
}

.mini-quote input,
.mini-quote select {
    width: 100%;
    padding: 10px 12px 10px 30px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    appearance: none;
}

.mini-quote .field br {
    display: none;
}

.mini-quote .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.mini-quote input:focus,
.mini-quote select:focus {
    border-color: var(--blue);
}

.mini-quote .btn-primary {
    padding: 12px 22px;
    white-space: nowrap;
}

.hero-dots {
    display: flex;
    gap: 6px;
    margin-top: 22px;
    position: relative;
    z-index: 1;
}

.hero-dots span {
    width: 20px;
    height: 4px;
    border-radius: 3px;
    background: var(--line);
}

.hero-dots span.active {
    background: var(--orange);
    width: 30px;
}

/* Hero photo slider */
.hero-photo {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    min-height: 340px;
    box-shadow: var(--shadow);
}

.hero-photo .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-photo .slide.active {
    opacity: 1;
}

.hero-photo .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 30%;
}

.hero-photo .pill {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(32, 35, 41, 0.85);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.hero-photo .pill i {
    color: #3ddc84;
    font-size: 8px;
}

.hero-photo .badge-float {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.hero-photo .badge-float .ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--grad-cta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
}

.hero-photo .badge-float strong {
    display: block;
    font-size: 12.5px;
    color: var(--navy);
}

.hero-photo .badge-float small {
    color: var(--muted);
    font-size: 10.5px;
}

.hero-photo .slide-dots {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.hero-photo .slide-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
}

.hero-photo .slide-dots button.active {
    background: #fff;
    width: 20px;
    border-radius: 4px;
}

.hero-photo .slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(32, 35, 41, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: none;
    cursor: pointer;
    font-size: 13px;
}

.hero-photo .slide-nav:hover {
    background: rgba(32, 35, 41, 0.8);
}

.hero-photo .slide-nav.prev {
    left: 14px;
}

.hero-photo .slide-nav.next {
    right: 14px;
}

/* ---------- Trust / stat strip (icon badges) ---------- */
.trust-strip {
    padding: 44px 0 0;
}

.trust-strip .wrap {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 28px 24px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.trust-block {
    text-align: center;
    padding: 8px 6px;
    border-right: 1px solid var(--line-soft);
}

.trust-block:last-child {
    border-right: none;
}

.trust-block .badge {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 18px;
    color: #fff;
}

.trust-block span {
    display: block;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--navy);
}

/* =========================================================
         PROCESS DIAGRAM — connected staggered nodes (Dorex-style)
           ========================================================= */
.process {
    position: relative;
    padding-top: 20px;
}

.process-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.process-row::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 34px;
    height: 0;
    border-top: 2px dashed var(--line);
    z-index: 0;
}

.p-node {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 10px;
    transition: transform 0.18s ease;
}

.p-node:hover {
    transform: translateY(-4px);
}

.p-node:nth-child(odd) {
    margin-top: 0;
}

.p-node:nth-child(even) {
    margin-top: 56px;
}

.p-node .circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #fff;
    font-size: 24px;
    box-shadow: var(--shadow);
    transition: transform 0.18s ease;
}

.p-node:hover .circle {
    transform: scale(1.08);
}

.p-node h3 {
    font-size: 15px;
}

.p-node p {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--muted);
}

/* =========================================================
        WHY US — dark section, bordered highlight card (Dorex-style)
        ========================================================= */
.why-dark {
    background: var(--navy);
}

.why-dark .section-head h2 {
    color: #fff;
}

.why-dark .section-head p.lede {
    color: #aebdcd;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.why-card:hover {
    transform: translateY(-4px);
}

.why-card.highlight {
    border-color: var(--blue-light);
    background: rgba(46, 123, 184, 0.08);
}

.why-card .icon-round {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 19px;
    color: #fff;
}

.why-card h3 {
    color: #fff;
    font-size: 18px;
}

.why-card p {
    color: #a9bccc;
    margin-top: 10px;
    font-size: 14px;
}

.why-card .learn-circle {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13.5px;
    color: #fff;
}

.why-card .learn-circle .circ {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background 0.15s ease;
}

.why-card.highlight .learn-circle .circ {
    background: var(--grad-cta);
}

.why-card:hover .learn-circle .circ {
    background: var(--grad-cta);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

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

.icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: #fff;
}

.card h3 {
    font-size: 17.5px;
}

.card p {
    margin-top: 9px;
    font-size: 14.5px;
    color: var(--muted);
}

.card .learn {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 14px;
    color: var(--orange);
}

.card .learn i {
    font-size: 12px;
    transition: transform 0.15s ease;
}

.card:hover .learn i {
    transform: translateX(3px);
}

.bg-orange {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
}

.bg-blue {
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
}

.bg-navy {
    background: var(--grad-navy);
}

.bg-green {
    background: linear-gradient(135deg, #1e8e5a, #2cb37a);
}

.bg-purple {
    background: linear-gradient(135deg, #6c5ce7, #8e7bf0);
}

.bg-red {
    background: linear-gradient(135deg, #e5484d, #f16a6e);
}

.bg-cadetblue {
    background: cadetblue;
}

.bg-limegreen {
    background: limegreen;
}

.bg-chocolate {
    background: chocolate;
}

.bg-darkgoldenrod{
    background: darkgoldenrod;
}

.bg-gray{
    background: gray;
}

.bg-blueviolet{
    background: blueviolet;
}

/* =========================================================
           SERVICES — dark section, one highlighted accent card
           ========================================================= */
.services-dark {
    background: var(--navy);
    border-radius: 28px;
    padding: 56px;
    position: relative;
    overflow: hidden;
}

.services-dark::after {
    content: "";
    position: absolute;
    left: -80px;
    bottom: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 93, 143, 0.35), transparent 70%);
}

.services-dark .section-head {
    position: relative;
    z-index: 1;
}

.services-dark .section-head h2 {
    color: #fff;
}

.services-dark .section-head p.lede {
    color: #b9c7d6;
}

.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.svc-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 26px;
    transition: transform 0.18s ease, background 0.18s ease;
}

.svc-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.09);
}

.svc-card.hot:hover {
    background: var(--grad-cta);
}

.svc-card.hot {
    background: var(--grad-cta);
    border-color: transparent;
}

.svc-card .icon-badge {
    background: rgba(255, 255, 255, 0.1);
}

.svc-card.hot .icon-badge {
    background: rgba(255, 255, 255, 0.22);
}

.svc-card h3 {
    color: #fff;
    font-size: 16.5px;
}

.svc-card p {
    color: #aebdcd;
    margin-top: 8px;
    font-size: 13.5px;
}

.svc-card.hot p {
    color: rgba(255, 255, 255, 0.9);
}

.svc-card .learn {
    color: #ffb98a;
}

.svc-card.hot .learn {
    color: #fff;
}

/* ---------- Speed tiers ---------- */
.tiers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.tier {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 18px;
    text-align: left;
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tier:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.tier.featured {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange), var(--shadow);
}

.tier .tier-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    margin-bottom: 14px;
}

.tier .tier-name {
    font-family: "Manrope";
    font-weight: 800;
    font-size: 16px;
    color: var(--navy);
}

.tier p {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--muted);
}

.tier .tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--orange);
    background: rgba(255, 107, 26, 0.1);
    padding: 3px 9px;
    border-radius: 20px;
}

/* =========================================================
           FEATURE ROWS — alternating image / text (Profast-style)
           ========================================================= */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
}

.feature-row+.feature-row {
    margin-top: 56px;
}

.feature-row.reverse .f-media {
    order: 2;
}

.feature-row.reverse .f-text {
    order: 1;
}

.f-media {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    height: 280px;
}

.f-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.f-text .icon-badge {
    margin-bottom: 16px;
}

.f-text h3 {
    font-size: 22px;
}

.f-text p {
    margin-top: 12px;
    font-size: 15px;
    color: var(--muted);
    max-width: 44ch;
}

/* ---------- Deliver categories (chips) ---------- */
.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.chip:hover {
    transform: translateY(-3px);
    border-color: var(--blue);
}

.chip i {
    color: var(--blue);
    font-size: 15px;
    width: 16px;
    text-align: center;
}

.disclaimer {
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--muted);
    background: var(--bg-2);
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.disclaimer i {
    color: var(--blue);
    margin-top: 2px;
}

/* ---------- Vehicles ---------- */
.veh-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.veh-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.veh-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.veh-card .veh-art {
    height: 130px;
    background: var(--grad-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.veh-card .veh-art i {
    font-size: 40px;
    color: var(--orange);
    transition: transform 0.18s ease;
}

.veh-card:hover .veh-art i {
    transform: scale(1.15) rotate(-4deg);
}

.veh-card .veh-body {
    padding: 18px 20px 22px;
}

.veh-card h3 {
    font-size: 16px;
}

.veh-card p {
    margin-top: 7px;
    font-size: 13.5px;
    color: var(--muted);
}

/* ---------- Gallery ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 150px);
    gap: 14px;
}

.gallery-grid a {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: block;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-grid a:hover img {
    transform: scale(1.06);
}

.gallery-grid a.big {
    grid-row: span 2;
}

.gallery-grid a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(32, 35, 41, 0.35), transparent 50%);
}

/* ---------- Gallery Hover Icon ---------- */

.gallery-grid a .gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.15);

    opacity: 0;

    transition: opacity 0.3s ease;

    pointer-events: none;
}

.gallery-grid a .gallery-overlay i {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);
    color: #202329;

    font-size: 18px;

    transform: scale(0.8);

    transition: transform 0.3s ease;
}

.gallery-grid a:hover .gallery-overlay {
    opacity: 1;
}

.gallery-grid a:hover .gallery-overlay i {
    transform: scale(1);
}

/* =========================================================
   GALLERY LIGHTBOX
========================================================= */

.qfc-lightbox {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.qfc-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.qfc-lightbox-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(15, 17, 20, 0.94);
}

.qfc-lightbox-content {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.qfc-lightbox-image-wrap {
    width: calc(100% - 160px);
    height: calc(100% - 80px);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.qfc-lightbox-image-wrap img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    user-select: none;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

    transition: opacity 0.2s ease;
}

/* ---------- Lightbox Buttons ---------- */

.qfc-lightbox-close,
.qfc-lightbox-prev,
.qfc-lightbox-next {
    position: absolute;
    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;

    background: #fff;
    color: #202329;

    cursor: pointer;

    transition: transform 0.25s ease, background 0.25s ease;
}

.qfc-lightbox-close:hover,
.qfc-lightbox-prev:hover,
.qfc-lightbox-next:hover {
    background: #f2f2f2;
    transform: scale(1.08);
}

.qfc-lightbox-close {
    top: 24px;
    right: 24px;

    width: 46px;
    height: 46px;

    font-size: 18px;
}

.qfc-lightbox-prev {
    left: 24px;

    width: 50px;
    height: 50px;

    font-size: 18px;
}

.qfc-lightbox-next {
    right: 24px;

    width: 50px;
    height: 50px;

    font-size: 18px;
}

/* ---------- Counter / Caption ---------- */

.qfc-lightbox-footer {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #fff;
}

.qfc-lightbox-counter {
    padding: 7px 12px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.12);

    font-size: 13px;
    line-height: 1;
}

.qfc-lightbox-caption {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

body.qfc-lightbox-open {
    overflow: hidden;
}

/* =========================================================
           DARK CTA BANNER — with dashed route accent
           ========================================================= */
.cta-dark {
    background: var(--grad-navy);
    border-radius: 24px;
    padding: 50px 56px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 30px;
    align-items: center;
}

.cta-dark::before {
    content: "";
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    width: 44%;
    height: 2px;
    border-top: 2px dashed rgba(255, 255, 255, 0.25);
}

.cta-dark .decor-icon {
    position: absolute;
    right: -30px;
    bottom: -40px;
    font-size: 190px;
    color: rgba(255, 255, 255, 0.05);
    z-index: 0;
    animation: float-slow 7s ease-in-out infinite;
}

.cta-dark .live-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #8fe0af;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.cta-dark .live-line .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3ddc84;
    position: relative;
    flex: none;
}

.cta-dark .live-line .dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid #3ddc84;
    animation: pulse-ring 1.8s ease-out infinite;
}

.cta-dark h2 {
    color: #fff;
    font-size: clamp(22px, 2.8vw, 30px);
    max-width: 16ch;
    position: relative;
    z-index: 1;
}

.cta-dark p {
    margin-top: 12px;
    color: #b9c7d6;
    font-size: 15px;
    max-width: 42ch;
    position: relative;
    z-index: 1;
}

.cta-dark .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

@keyframes float-slow {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-16px) rotate(-4deg);
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.final-cta-section {
    background: var(--grad-navy);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 76px 0;
}

.final-cta-section::before {
    content: "";
    position: absolute;
    left: 8%;
    top: -180px;
    width: 560px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.22), transparent 70%);
    animation: pulse-glow 5s ease-in-out infinite;
}

.final-cta-section::after {
    content: "";
    position: absolute;
    right: -120px;
    bottom: -160px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.08),
            transparent 70%);
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.12);
    }
}

.final-top-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.final-top {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 56px;
    align-items: center;
}

.final-top-text h2 {
    color: #fff;
    font-size: clamp(30px, 4vw, 44px);
    max-width: 14ch;
}

.final-top-text p {
    margin-top: 16px;
    color: #c3cfdc;
    font-size: 16.5px;
    max-width: 46ch;
}

.final-top-text .hero-cta {
    margin-top: 28px;
}

.final-visual {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    padding: 28px;
}

.final-visual-label {
    font-size: 12.5px;
    font-weight: 700;
    color: #8fc2ea;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.final-visual-row {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 11.5px;
    color: #9fb0c2;
    font-weight: 600;
}

.route-track {
    position: relative;
    height: 26px;
    width: 100%;
}

.route-track .line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.28);
}

.route-track .van {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--orange);
    animation: drive 4.5s linear infinite;
}

@keyframes drive {
    0% {
        left: 0%;
    }

    100% {
        left: calc(100% - 18px);
    }
}

.route-track .pin {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #8fc2ea;
}

.route-track .pin.start {
    left: 0;
}

.route-track .pin.end {
    right: 0;
}

.final-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: #dbe6f0;
    margin-bottom: 6px;
    animation: float-slow 6s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

.final-badge i {
    color: var(--orange);
}

/* =========================================================
           BUSINESS SECTION — full redesign
           ========================================================= */
.biz-section {
    background: #fff;
}

.biz-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
}

.biz-live {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(30, 142, 90, 0.08);
    border: 1px solid rgba(30, 142, 90, 0.22);
    color: var(--green);
    font-weight: 700;
    font-size: 12.5px;
    padding: 7px 15px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.biz-live .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    position: relative;
    flex: none;
}

.biz-live .dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--green);
    animation: pulse-ring 1.8s ease-out infinite;
}

.biz-grid h2 {
    font-size: clamp(24px, 3vw, 34px);
    max-width: 15ch;
}

.biz-grid>div:first-child>p.lede {
    margin-top: 14px;
}

.biz-for-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    margin: 26px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.biz-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    margin-top: 8px;
}

.biz-checklist li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--ink);
}

.biz-checklist i {
    color: var(--green);
    margin-top: 4px;
    flex: none;
    font-size: 13px;
}

.biz-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.biz-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 32px;
    border: 1px solid var(--line);
    position: relative;
}

.biz-card::before {
    content: "Business Accounts";
    position: absolute;
    top: -14px;
    right: 28px;
    background: var(--grad-cta);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 20px;
    box-shadow: 0 8px 18px -8px rgba(255, 107, 26, 0.5);
}

.biz-card h3 {
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.biz-card h3 i {
    color: var(--orange);
}

.biz-card ul {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.biz-card ul li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.biz-card ul li .ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: 14px;
    flex: none;
    transition: transform 0.18s ease;
}

.biz-card ul li:hover .ic {
    transform: scale(1.1);
    background: var(--blue);
    color: #fff;
}

.biz-card ul li div strong {
    display: block;
    font-size: 14px;
    color: var(--navy);
}

.biz-card ul li div small {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.biz-card .btn {
    width: 100%;
    margin-top: 24px;
}

.biz-card .note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted);
    text-align: center;
}

/* ---------- Reviews ---------- */
.review-placeholder {
    border: 1.5px dashed var(--line);
    background: #fff;
    border-radius: var(--radius);
    padding: 36px;
    text-align: center;
    color: var(--muted);
    font-size: 14.5px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: var(--shadow);
}

.review-placeholder i {
    font-size: 26px;
    color: var(--blue);
    margin-bottom: 12px;
}

.review-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
}

.review-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line);
}

.review-dots span.active {
    background: var(--orange);
    width: 20px;
    border-radius: 4px;
}

/* ---------- FAQ ---------- */
.faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-item.open {
    border-color: var(--orange);
}

.faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 19px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-family: "Manrope";
    font-weight: 700;
    font-size: 15.5px;
    color: var(--navy);
}

.faq-q i {
    flex: none;
    transition: transform 0.18s ease;
    color: var(--blue);
    font-size: 13px;
}

.faq-item.open .faq-q i {
    transform: rotate(180deg);
    color: var(--orange);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}

.faq-a p {
    padding: 0 20px 19px;
    font-size: 14.5px;
    color: var(--muted);
    max-width: 70ch;
}

/* ---------- Footer ---------- */
footer {
    background: #16181c;
    color: #93a3b5;
    padding: 0 0 26px;
    position: relative;
    overflow: hidden;
}

.foot-watermark {
    position: absolute;
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    font-size: clamp(64px, 12vw, 170px);
    line-height: 1;
    color: rgba(255, 255, 255, 0.035);
    white-space: nowrap;
    letter-spacing: 2px;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.foot-inner {
    position: relative;
    z-index: 1;
}

.foot-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 34px 0;
    margin-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.foot-cta-title {
    color: #fff;
    font-size: 19px;
}

.foot-cta-sub {
    margin-top: 5px;
    font-size: 13.5px;
    color: #93a3b5;
}

.foot-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.foot-hours {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #dbe6f0;
}

.foot-hours i {
    color: var(--orange);
}

.foot-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
    gap: 32px;
}

.foot-grid-6 {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1.1fr;
}

.foot-grid h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
    font-family: "Manrope";
}

.foot-grid li {
    padding: 6px 0;
    font-size: 13.5px;
}

.foot-grid li a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.foot-grid li a:hover,
.foot-grid li.current-menu-item>a {
    color: #fff;
}


.foot-grid li i {
    color: var(--orange);
    width: 14px;
    font-size: 12px;
}

.foot-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.foot-logo-chip img {
    height: 55px;
    width: auto;
    display: block;
}

.foot-desc {
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 34ch;
}

.foot-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.foot-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3d0dd;
    font-size: 13px;
}

.foot-social a:hover {
    background: var(--orange);
    color: #fff;
}

.foot-bottom {
    margin-top: 46px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12.5px;
}

.foot-bottom .legal-links {
    display: flex;
    gap: 18px;
}

.foot-bottom .legal-links a:hover {
    color: #fff;
}

/* =========================================================
             NEW ADDITIONS (referencing bestwaycourier.com) — additive only
           ========================================================= */
.has-dropdown {
    position: relative;
}

.has-dropdown>a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.has-dropdown>a i.caret {
    font-size: 9px;
    transition: transform 0.15s ease;
}

.has-dropdown:hover>a i.caret {
    transform: rotate(180deg);
}

.qfc-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 22px;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    width: 440px;
    border: 1px solid var(--line);
    margin-top: 8px;
    z-index: 50;
}

.has-dropdown:hover .qfc-dropdown-menu {
    display: grid;
}

.qfc-dropdown-menu h5 {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.qfc-dropdown-menu a {
    display: block;
    padding: 6px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.qfc-dropdown-menu a:hover {
    color: var(--orange);
}

.cta-strip {
    background: var(--grad-navy);
    border-radius: 22px;
    padding: 40px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    color: #fff;
}

.cta-strip h2 {
    color: #fff;
    font-size: clamp(22px, 2.6vw, 28px);
}

.cta-strip p {
    margin-top: 8px;
    color: #b9c7d6;
    font-size: 14.5px;
}

.cta-strip .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.area-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.area-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.area-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.area-col {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.area-col:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.area-col h3 {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.area-col .icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    flex: none;
    margin-bottom: 0;
}

.area-col .cities {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.9;
}

.area-col ul {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
}

.area-col ul li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--ink);
}

.area-col ul li i {
    color: var(--orange);
    font-size: 6px;
    flex: none;
}

.area-col-statewide ul {
    grid-template-columns: 1fr;
}

.area-col .more {
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
}

.area-note {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
}

.section-foot {
    margin-top: 32px;
    text-align: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Blog / resources cards — editorial, image-bleed design */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blog-post {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-8px);
    box-shadow: 0 36px 60px -22px rgba(11, 31, 51, 0.5);
}

.blog-post img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
    z-index: 0;
}

.blog-post:hover img {
    transform: scale(1.09);
}

.blog-post::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(0deg,
            rgba(22, 24, 28, 0.94) 0%,
            rgba(22, 24, 28, 0.62) 44%,
            rgba(22, 24, 28, 0.08) 72%);
}

.blog-post-num {
    position: absolute;
    top: 20px;
    right: 22px;
    font-family: "Manrope";
    font-weight: 800;
    font-size: 54px;
    color: rgba(255, 255, 255, 0.16);
    z-index: 2;
    line-height: 1;
}

.blog-post-top {
    position: relative;
    z-index: 2;
    padding: 22px 24px 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

.blog-post-tag {
    background: var(--orange);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.blog-post-time {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-post-body {
    position: relative;
    z-index: 2;
    padding: 28px 24px 26px;
}

.blog-post-body h3 {
    color: #fff;
    font-size: 19px;
    line-height: 1.32;
}

.blog-post-body p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    margin-top: 10px;
    line-height: 1.55;
}

.blog-post-link {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    border-bottom: 1.5px solid var(--orange);
    padding-bottom: 3px;
}

.blog-post-link i {
    transition: transform 0.2s ease;
}

.blog-post:hover .blog-post-link i {
    transform: translateX(4px);
}

.faq-contact {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.faq-contact a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    display: block;
}

.faq-contact a i {
    font-size: 17px;
    color: var(--orange);
    margin-bottom: 9px;
    display: block;
}

.faq-contact a strong {
    display: block;
    font-size: 13.5px;
    color: var(--navy);
}

.faq-contact a small {
    color: var(--muted);
    font-size: 11.5px;
}

.final-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
    padding-top: 44px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    z-index: 1;
    align-items: stretch;
}

.final-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 22px;
    transition: transform 0.18s ease, background 0.18s ease,
        border-color 0.18s ease;
    display: flex;
    flex-direction: column;
}

.final-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.3);
}

.final-card i {
    font-size: 20px;
    color: var(--orange);
    margin-bottom: 12px;
    display: block;
    transition: transform 0.18s ease;
}

.final-card i.fa-solid.fa-arrow-right {
    margin-bottom: 0px;
    font-size: 15px;
}

.final-card:hover i {
    transform: scale(1.15);
}

.final-card h3 {
    color: #fff;
    font-size: 15px;
}

.final-card p {
    color: #b9c7d6;
    margin-top: 7px;
    font-size: 12.5px;
    flex-grow: 1;
}

.final-card a.act {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 12.5px;
    color: #ffb98a;
    align-self: flex-start;
}

/* =========================================================
           OPTIMIZATION + NEW SECTIONS (round 2)
           ========================================================= */
.cta-dark-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.cta-dark-body li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13.5px;
    color: #c8d3df;
}

.cta-dark-body i {
    color: var(--orange);
    margin-top: 3px;
    flex: none;
    font-size: 12px;
}

/* Stay Informed / visibility */
.track-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: center;
}

.track-status {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 24px;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.status-row:last-child {
    border-bottom: none;
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--blue);
    flex: none;
}

.status-dot.done {
    background: var(--green);
}

.status-dot.active {
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.22);
}

.status-row span {
    font-weight: 600;
    font-size: 14px;
    color: #e7edf3;
}

.status-row small {
    margin-left: auto;
    color: #8ea3b8;
    font-size: 12px;
}

/* About teaser */
.about-teaser {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px;
    align-items: center;
}

.about-teaser img {
    border-radius: 18px;
    box-shadow: var(--shadow);
    width: 100%;
    height: 340px;
    object-fit: cover;
}

.about-teaser .check-list {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.about-teaser .check-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--ink);
}

.about-teaser .check-list i {
    color: var(--green);
    margin-top: 4px;
    flex: none;
}

/* Newsletter / stay updated bar */
.newsletter {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 36px 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    overflow: unset;
}

.newsletter .wpcf7 form.sent .wpcf7-response-output {
    position: absolute;
    top: 110px;
}

.newsletter .nl-text {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 320px;
    min-width: 280px;
}

.newsletter .nl-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--grad-cta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    flex: none;
    transition: transform 0.2s ease;
}

.newsletter:hover .nl-icon {
    transform: rotate(-8deg) scale(1.06);
}

.newsletter h3 {
    font-size: 18px;
}

.newsletter p {
    margin-top: 5px;
    font-size: 13.5px;
    color: var(--muted);
}

.newsletter form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 1 420px;
}

.newsletter form input {
    flex: 1;
    width: 273px;
    padding: 13px 18px;
    border-radius: 30px;
    border: 1px solid var(--line);
    font-family: inherit;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.newsletter form input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(29, 93, 143, 0.12);
}

.newsletter form .btn {
    flex: none;
}

.fa-chevron-right-icon li a::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    font-size: 10px;
    color: #ff6a00;
}

h2.pb-1 {
    padding-bottom: 15px;
}

p.visiblity_para {
    margin-top: 16px;
    font-size: 16px;
    color: #b9c7d6;
    max-width: 48ch;
}

p.review_placeholder_description {
    font-weight: 700;
    color: var(--navy);
    font-size: 15.5px;
}

p.review_placeholder_text {
    margin-top: 8px;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    background: #202329 !important;
    box-shadow: #202329 0 1px 3px 0 inset !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #ff6a00 !important;
}

/* ========================= Services Page ========================= */


/* ---------- PAGE HERO ---------- */
.svc-hero {
    background: var(--grad-navy);
    padding: 60px 0 70px;
    position: relative;
    overflow: hidden;
}

.svc-hero::before {
    content: "";
    position: absolute;
    right: -8%;
    top: -30%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 106, 0, .16), transparent 65%);
}

.svc-hero .wrap {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: center;
}

.svc-hero h1 {
    color: #fff;
    font-size: clamp(28px, 3.8vw, 44px);
    max-width: 16ch;
}

.svc-hero p.sub {
    margin-top: 18px;
    font-size: 16px;
    color: #c3d1de;
    max-width: 52ch;
}

.svc-hero .hero-cta {
    margin-top: 28px;
}

.svc-hero .hero-chips {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

.svc-hero-photo {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 380px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}

.svc-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 30%;
}

.svc-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(22, 24, 28, .5), transparent 45%);
}

.svc-hero-photo .pill {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(22, 24, 28, .85);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.svc-hero-photo .pill i {
    color: #3ddc84;
    font-size: 8px;
}

.svc-hero-photo .badge-float {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.svc-hero-photo .badge-float .ic {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--grad-cta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex: none;
}

.svc-hero-photo .badge-float strong {
    display: block;
    font-size: 12.5px;
    color: var(--navy);
}

.svc-hero-photo .badge-float small {
    color: var(--muted);
    font-size: 10.5px;
}


/* ---------- FIND YOUR SERVICE ---------- */
.finder-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    padding: 36px;
    margin-top: -46px;
    position: relative;
    z-index: 5;
}

.finder-panel h3 {
    font-size: 19px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.finder-panel h3 i {
    color: var(--orange);
}

.finder-panel p.sub {
    color: var(--muted);
    font-size: 13.5px;
    margin-top: 6px;
}

.finder-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 22px;
}

.finder-btn {
    background: var(--bg-2);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 18px 10px;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
    font-family: inherit;
}

.finder-btn:hover {
    transform: translateY(-4px);
    border-color: var(--orange);
    background: #fff;
}

.finder-btn i {
    font-size: 22px;
    color: var(--orange);
    display: block;
    margin-bottom: 10px;
}

.finder-btn span {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    display: block;
}


/* ---------- QUICK NAV ---------- */
.quicknav-wrap {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 80px;
    z-index: 60;
}

.quicknav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 24px;
    max-width: var(--maxw);
    margin: 0 auto;
    scrollbar-width: none;
}

.quicknav::-webkit-scrollbar {
    display: none;
}

.quicknav a {
    flex: none;
    padding: 9px 16px;
    border-radius: 20px;
    background: var(--bg-2);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
}

.quicknav a:hover {
    background: var(--orange);
    color: #fff;
}

.quicknav a.get-quote {
    background: var(--grad-cta);
    color: #fff;
}


/* ---------- SAME-DAY (deep dive) ---------- */
.svc-detail {
    scroll-margin-top: 130px;
}

.svc-detail-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 52px;
    align-items: start;
}

.svc-detail-tagline {
    font-size: 16px;
    color: var(--muted);
    margin-top: 8px;
    max-width: 56ch;
}

.svc-detail-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 26px;
}

.svc-detail-badge {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}

.svc-detail-badge strong {
    display: block;
    font-family: 'Manrope';
    font-weight: 800;
    color: var(--orange);
    font-size: 15px;
}

.svc-detail-badge span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

.svc-detail-side h2 {
    font-size: clamp(22px, 2.6vw, 28px);
}

.svc-detail-side p {
    margin-top: 14px;
    font-size: 15px;
    color: var(--muted);
}

.svc-detail-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.svc-feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
}

.svc-feature h4 {
    font-size: 14.5px;
    color: var(--navy);
    font-family: 'Manrope';
    font-weight: 700;
}

.svc-feature p {
    margin-top: 7px;
    font-size: 13px;
    color: var(--muted);
}

.svc-detail-cta {
    display: flex;
    gap: 12px;
    margin-top: 26px;
    flex-wrap: wrap;
}

/* Flash highlight when jumped to from the finder (class added by JS) */
.flash-highlight {
    animation: flash-bg 1.6s ease;
}

@keyframes flash-bg {
    0% {
        box-shadow: inset 0 0 0 3px var(--orange);
    }

    100% {
        box-shadow: inset 0 0 0 0px transparent;
    }
}

/* ---------- ALL SERVICES (master grid) ---------- */

/* Section shell + heading (shared classes used by this section) */
.section-alt {
    background: var(--bg-2);
}

.section-head {
    max-width: 660px;
    margin-bottom: 44px;
}

.section-head.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head h2 {
    font-size: clamp(27px, 3.4vw, 38px);
}

.section-head p.lede {
    margin-top: 16px;
    font-size: 16.5px;
    color: var(--muted);
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    max-width: 680px;
    /* keeps it in the left column, away from the image */
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-chips span i {
    font-size: 13px;
    color: #ff7a1a;
    /* swap for your brand orange variable */
}

.hero-chips span:hover {
    background: rgba(255, 122, 26, 0.14);
    border-color: rgba(255, 122, 26, 0.55);
    transform: translateY(-1px);
}

/* Icon badge + color variants */
.icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: #fff;
}

.bg-orange {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
}

.bg-blue {
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
}

.bg-navy {
    background: var(--grad-navy);
}

.bg-green {
    background: linear-gradient(135deg, #1E8E5A, #2CB37A);
}

.bg-purple {
    background: linear-gradient(135deg, #6C5CE7, #8E7BF0);
}

.bg-red {
    background: linear-gradient(135deg, #E5484D, #F16A6E);
}

/* Grid + cards */
.all-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.as-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.as-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.as-card .icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 18px;
}

.as-card h3 {
    font-size: 16.5px;
}

.as-card p {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--muted);
}

/* ---------- WHY CHOOSE US (photo + checklist) ---------- */
.why-photo-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 52px;
    align-items: center;
}

.why-photo {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 420px;
    box-shadow: var(--shadow-lg);
}

.why-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why-photo .badge-float {
    position: absolute;
    bottom: 18px;
    left: 18px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}

.why-photo .badge-float .ic {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--grad-cta);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    flex: none;
}

.why-photo .badge-float strong {
    display: block;
    font-size: 14px;
    color: var(--navy);
}

.why-photo .badge-float small {
    color: var(--muted);
    font-size: 11.5px;
}

.why-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
    margin-top: 26px;
}

.why-list-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.why-list-item .ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #fff;
    flex: none;
}

.why-list-item h4 {
    font-size: 15px;
    color: var(--navy);
    font-family: 'Manrope';
    font-weight: 700;
}

.why-list-item p {
    margin-top: 5px;
    font-size: 13px;
    color: var(--muted);
}


/* ---------- HOW IT WORKS (photo steps) ---------- */
.photo-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.photo-step {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.photo-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.photo-step-media {
    position: relative;
    height: 140px;
}

.photo-step-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-step-num {
    position: absolute;
    bottom: -18px;
    left: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--grad-cta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope';
    font-weight: 800;
    font-size: 16px;
    box-shadow: 0 8px 16px -6px rgba(255, 106, 0, .5);
    border: 3px solid #fff;
}

.photo-step-body {
    padding: 28px 20px 22px;
}

.photo-step-body h3 {
    font-size: 15.5px;
}

.photo-step-body p {
    margin-top: 7px;
    font-size: 13px;
    color: var(--muted);
}

/* ---------- SERVICE TIERS ---------- */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.tier-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.tier-card.featured {
    border-color: var(--orange);
    box-shadow: var(--shadow-lg);
    position: relative;
    transform: scale(1.03);
}

.tier-card.featured::before {
    content: "Most Requested";
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad-cta);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.tier-card h3 {
    font-size: 19px;
}

.tier-card .tier-tag {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}

.tier-card ul {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.tier-card ul li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--ink);
}

.tier-card ul li i {
    color: var(--green);
    margin-top: 3px;
    flex: none;
}

.tier-card .btn {
    margin-top: 26px;
    width: 100%;
}

/* ---------- GET A QUOTE (full section) ---------- */
.quote-full {
    background: var(--grad-navy);
    border-radius: 28px;
    padding: 52px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.quote-full::before {
    content: "";
    position: absolute;
    left: -10%;
    top: -30%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 106, 0, .18), transparent 65%);
}

.quote-full-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Left panel (photo + contact lines) */
.quote-full-panel {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 32px;
    isolation: isolate;
}

.quote-full-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.quote-full-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(22, 24, 28, .93), rgba(22, 24, 28, .75));
    z-index: -1;
}

.quote-full-panel h2 {
    color: #fff;
    font-size: clamp(24px, 3vw, 32px);
    max-width: 14ch;
}

.quote-full-panel p {
    margin-top: 14px;
    color: #c3d1de;
    font-size: 15px;
}

.quote-full-panel .contact-lines {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quote-full-panel .contact-lines a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
}

.quote-full-panel .contact-lines i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    flex: none;
}

/* Right panel (form card) */
.quote-full-form {
    background: #fff;
    border-radius: 18px;
    padding: 30px;
    color: var(--ink);
}

/* Form field styling */
.qform {
    display: grid;
    gap: 15px;
}

.qform .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.qform label {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    display: block;
    margin-bottom: 6px;
}

.qform .field {
    position: relative;
}

.qform .field i {
    position: absolute;
    left: 13px;
    top: 40px;
    color: var(--blue);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.qform input,
.qform select {
    width: 100%;
    padding: 12px 14px 12px 36px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    appearance: none;
}

.qform input:focus,
.qform select:focus {
    background: #fff;
    border-color: var(--blue);
    outline: none;
}

.qform input::placeholder {
    color: #9aa7b5;
}

.qform select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6B7F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}

.qform .btn-primary {
    width: 100%;
    margin-top: 4px;
    padding: 14px;
    font-size: 15px;
}

.qform .microcopy {
    font-size: 12px;
    color: var(--muted);
    margin-top: 12px;
    text-align: center;
}

.qform .field br,
.qform button.btn br,
.qform .microcopy br {
    display: none;
}

/* Single Service Css */

/* ============ 3. PAGE HERO ============ */
.svc-hero {
    background: var(--grad-navy);
    padding: 60px 0 70px;
    position: relative;
    overflow: hidden;
}

.svc-hero::before {
    content: "";
    position: absolute;
    right: -8%;
    top: -30%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 106, 0, .16), transparent 65%);
}

.svc-hero .wrap {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: center;
}

.breadcrumb {
    font-size: 13px;
    color: #9fb0c2;
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.breadcrumb a:hover {
    color: #fff;
}

.svc-hero h1 {
    color: #fff;
    font-size: clamp(28px, 3.8vw, 44px);
    max-width: 16ch;
}

.svc-hero h1 .hl {
    color: var(--orange);
}

.svc-hero p.sub {
    margin-top: 18px;
    font-size: 16px;
    color: #c3d1de;
    max-width: 52ch;
}

.svc-hero .hero-cta {
    margin-top: 28px;
}

/* Hero card (right side) */
.svc-hero-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}

.svc-hero-card .shc-media {
    position: relative;
    height: 150px;
}

.svc-hero-card .shc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-hero-card .shc-media .pill {
    position: absolute;
    left: 14px;
    bottom: 14px;
    background: rgba(22, 24, 28, .85);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.svc-hero-card .shc-media .pill i {
    color: #3ddc84;
    font-size: 8px;
}

.svc-hero-card .shc-body {
    padding: 22px 24px 26px;
}

.svc-hero-card .shc-label {
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
    margin-bottom: 14px;
}

.svc-hero-card .shc-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.shc-item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.shc-item .ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    font-size: 14px;
    flex: none;
}

.shc-item strong {
    display: block;
    font-size: 13.5px;
    color: var(--navy);
    font-family: 'Manrope';
    font-weight: 700;
}

.shc-item span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}

/* ============ 4. CAPABILITY BAR ============ */
.capability-bar {
    background: var(--navy);
}

.capability-bar .wrap {
    display: flex;
    flex-wrap: wrap;
}

.cap-bar-item {
    flex: 1;
    min-width: 220px;
    padding: 24px 26px;
    display: flex;
    gap: 14px;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.cap-bar-item:last-child {
    border-right: none;
}

.cap-bar-item i {
    font-size: 21px;
    color: var(--orange);
    flex: none;
}

.cap-bar-item strong {
    display: block;
    color: #fff;
    font-size: 13.5px;
    font-family: 'Manrope';
}

.cap-bar-item small {
    display: block;
    color: #9fb0c2;
    font-size: 11px;
    margin-top: 3px;
    line-height: 1.4;
}

/* Sticky page nav */
.page-nav-wrap {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 82px;
    z-index: 80;
    box-shadow: 0 2px 8px -4px rgba(11, 31, 51, .06);
}

.page-nav-inner {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
    justify-content: center;
}

.page-nav-inner::-webkit-scrollbar {
    display: none;
}

.pnav-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-family: 'Manrope';
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    padding: 14px 16px;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}

.pnav-item:hover {
    color: var(--orange);
    border-bottom-color: rgba(255, 106, 0, .35);
}

.pnav-item.active {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.pnav-item.quote-link {
    color: var(--orange);
}

/* AEO direct-answer block */
.aeo-block {
    background: #fff;
    border: 2px solid var(--orange);
    border-radius: 16px;
    padding: 30px 34px;
    box-shadow: var(--shadow);
}

.aeo-block .aeo-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--orange);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 12px;
}

.aeo-block h2 {
    font-size: clamp(21px, 2.4vw, 26px);
}

.aeo-block p.answer {
    margin-top: 14px;
    font-size: 16.5px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.55;
}

.aeo-block p.more {
    margin-top: 14px;
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.6;
}

/* Intro split (text + photo w/ floating badge) */
.intro-split {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 52px;
    align-items: center;
}

.intro-split .copy p {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    margin-top: 14px;
}

.intro-split .copy p:first-of-type {
    margin-top: 18px;
}

.intro-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 360px;
    box-shadow: var(--shadow-lg);
}

.intro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.intro-media .clock-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--navy);
    color: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    text-align: center;
    box-shadow: var(--shadow);
    width: 104px;
}

.intro-media .clock-badge i {
    font-size: 22px;
    color: var(--orange);
}

.intro-media .clock-badge strong {
    display: block;
    font-size: 13px;
    margin-top: 8px;
    font-family: 'Manrope';
}

.intro-media .clock-badge small {
    display: block;
    font-size: 9.5px;
    color: #9fb0c2;
    margin-top: 2px;
}

.intro-media .pill {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(22, 24, 28, .85);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.intro-media .pill i {
    color: #3ddc84;
    font-size: 8px;
}

/* ================= SAME-DAY DELIVERY SPEED TIERS ================= */

/* Speed tier pricing-style cards (4-up) */
.speed4-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.speed4-card {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 18px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.speed4-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.speed4-card.featured {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange);
    position: relative;
}

.speed4-card.featured::before {
    content: "Fastest";
    position: absolute;
    top: -12px;
    left: 22px;
    background: var(--grad-cta);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 20px;
}

.speed4-card h3 {
    font-size: 16px;
}

.speed4-card .speed4-desc {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;
    min-height: 32px;
}

.speed4-card ul {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;
}

.speed4-card ul li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--ink);
}

.speed4-card ul li i {
    color: var(--green);
    margin-top: 3px;
    flex: none;
    font-size: 11px;
}

.speed4-card .btn {
    margin-top: 18px;
    width: 100%;
}


/* Bottom CTA strip */
.cta-strip {
    background: var(--grad-navy);
    border-radius: 22px;
    padding: 40px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    color: #fff;
}

.cta-strip h2 {
    color: #fff;
    font-size: clamp(22px, 2.6vw, 28px);
}

.cta-strip p {
    margin-top: 8px;
    color: #b9c7d6;
    font-size: 14.5px;
}

.cta-strip .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* "What fits in our vehicle" category list + side panel */

.fits-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 40px;
    align-items: start;
}

.fits-list {
    display: flex;
    flex-direction: column;
}

.fits-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.fits-item:first-child {
    padding-top: 0;
}

.fits-item h4 {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.fits-item h4 i {
    color: var(--orange);
    font-size: 17px;
    width: 22px;
    text-align: center;
}

.fits-item .fits-tags {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 33px;
}

.fits-item .fits-tags span {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.fits-side {
    background: var(--navy);
    border-radius: 18px;
    padding: 28px;
    color: #fff;
    position: sticky;
    top: 150px;
}

.fits-side h4 {
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.fits-side h4 i {
    color: var(--orange);
}

.fits-side ul {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fits-side ul li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    color: #c3d1de;
}

.fits-side ul li i {
    color: var(--orange);
    margin-top: 3px;
    flex: none;
    font-size: 11px;
}

.fits-side .btn {
    margin-top: 20px;
    width: 100%;
}

/* Mid CTA */
.cta-strip {
    background: var(--grad-navy);
    border-radius: 22px;
    padding: 40px 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    color: #fff;
}

.cta-strip h2 {
    color: #fff;
    font-size: clamp(22px, 2.6vw, 28px);
}

.cta-strip p {
    margin-top: 8px;
    color: #b9c7d6;
    font-size: 14.5px;
}

.cta-strip .actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Why Us — photo with stat overlay */

.whyus-split {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 52px;
    align-items: center;
}

.whyus-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 420px;
    box-shadow: var(--shadow-lg);
}

.whyus-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.whyus-stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(22, 24, 28, .88);
    backdrop-filter: blur(4px);
}

.whyus-stats div {
    flex: 1;
    text-align: center;
    padding: 16px 8px;
    border-right: 1px solid rgba(255, 255, 255, .15);
}

.whyus-stats div:last-child {
    border-right: none;
}

.whyus-stats strong {
    display: block;
    color: var(--orange);
    font-family: 'Manrope';
    font-weight: 800;
    font-size: 15px;
}

.whyus-stats span {
    display: block;
    color: #dbe6f0;
    font-size: 10px;
    margin-top: 3px;
}

.whyus-copy .why-reason {
    display: flex;
    gap: 14px;
    margin-top: 22px;
}

.whyus-copy .why-reason:first-of-type {
    margin-top: 20px;
}

.whyus-copy .why-reason .num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-2);
    color: var(--orange);
    font-family: 'Manrope';
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.whyus-copy .why-reason h4 {
    font-size: 15px;
    color: var(--navy);
}

.whyus-copy .why-reason p {
    margin-top: 5px;
    font-size: 13.5px;
    color: var(--muted);
}

/* Why-section top-left floating card */

.whyus-media {
    position: relative;
}

.wfc-card {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 11px;
    z-index: 2;
}

.wfc-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--grad-cta);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex: none;
}

.wfc-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
}

.wfc-sub {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 1px;
}

/* 4-step process with micro-badges */

.process4-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.process4-row::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--line);
}

.process4-item {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 14px;
}

.process4-item .num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--grad-navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope';
    font-weight: 800;
    font-size: 20px;
    margin: 0 auto 18px;
    box-shadow: var(--shadow);
}

.process4-item h4 {
    font-size: 15.5px;
}

.process4-item p {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--muted);
}

.process4-item .microbadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    background: var(--bg-2);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
}

/* Upgraded area cards with navy header */

.area-card-v2 {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.area-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.area-card-v2 .area-header-v2 {
    background: var(--grad-navy);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.area-card-v2 .area-header-v2 i {
    color: var(--orange);
    font-size: 15px;
}

.area-card-v2 .area-header-v2 .area-name-v2 {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    font-family: 'Manrope';
    flex: 1;
}

.area-card-v2 .area-header-v2 .area-badge-v2 {
    background: rgba(255, 106, 0, .2);
    color: #ffb98a;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.area-card-v2 .area-body-v2 {
    padding: 20px;
}

.area-card-v2 .area-cities-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.area-card-v2 .area-cities-v2 span {
    background: var(--bg-2);
    border-radius: 20px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}

.area-card-v2 .area-note-v2 {
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: transform .15s ease, box-shadow .15s ease;
}

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

.icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: #fff;
}

.card h3 {
    font-size: 17.5px;
}

.card p {
    margin-top: 9px;
    font-size: 14.5px;
    color: var(--muted);
}

.bg-orange {
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
}

.bg-blue {
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
}

.bg-navy {
    background: var(--grad-navy);
}

.bg-green {
    background: linear-gradient(135deg, #1E8E5A, #2CB37A);
}

.bg-purple {
    background: linear-gradient(135deg, #6C5CE7, #8E7BF0);
}

.bg-red {
    background: linear-gradient(135deg, #E5484D, #F16A6E);
}

/* Industry pain-point hook */
.industry-hook {
    font-style: italic;
    font-size: 12.5px;
    color: var(--orange);
    margin-top: 6px;
    font-weight: 600;
}

/* Full quote section on services page */

.quote-full {
    background: var(--grad-navy);
    border-radius: 28px;
    padding: 52px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.quote-full::before {
    content: "";
    position: absolute;
    left: -10%;
    top: -30%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 106, 0, .18),
            transparent 65%);
}

.quote-full-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.quote-full-panel {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding: 32px;
    isolation: isolate;
}

.quote-full-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.quote-full-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(22, 24, 28, .93),
            rgba(22, 24, 28, .75));
    z-index: -1;
}

.quote-full-panel h2 {
    color: #fff;
    font-size: clamp(24px, 3vw, 32px);
    max-width: 14ch;
}

.quote-full-panel p {
    margin-top: 14px;
    color: #c3d1de;
    font-size: 15px;
}

.quote-full-panel .contact-lines {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quote-full-panel .contact-lines a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
}

.quote-full-panel .contact-lines i {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    flex: none;
}

.quote-full-form {
    background: #fff;
    border-radius: 18px;
    padding: 34px 30px 30px;
    color: var(--ink);
    position: relative;
    overflow: hidden;
}

.quote-full-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--grad-cta);
}

/* Quote form field styling */

.qform {
    display: grid;
    gap: 15px;
}

.qform .row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.qform label {
    font-size: 12px;
    font-weight: 700;
    color: var(--navy);
    display: block;
    margin-bottom: 6px;
}

.qform .field {
    position: relative;
}

.qform .field i {
    position: absolute;
    left: 13px;
    top: 38px;
    color: var(--blue);
    font-size: 13px;
    pointer-events: none;
}

.qform input,
.qform select {
    width: 100%;
    padding: 12px 14px 12px 36px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    appearance: none;
}

.qform input:focus,
.qform select:focus {
    background: #fff;
    border-color: var(--blue);
    outline: none;
}

.qform input::placeholder {
    color: #9aa7b5;
}

.qform select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6B7F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 34px;
}

.qform .btn-primary {
    width: 100%;
    margin-top: 4px;
    padding: 14px;
    font-size: 15px;
}

.qform .microcopy {
    font-size: 12px;
    color: var(--muted);
    margin-top: 12px;
    text-align: center;
}

/* Full-bleed image strip break */

.img-strip {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.img-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
            rgba(22, 24, 28, .9),
            rgba(22, 24, 28, .55));
}

.img-strip-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    z-index: 1;
}

.img-strip-content h3 {
    color: #fff;
    font-size: clamp(22px, 2.8vw, 30px);
    max-width: 20ch;
}

.img-strip-content p {
    color: #c3d1de;
    margin-top: 12px;
    font-size: 14.5px;
    max-width: 52ch;
}

/* Dedicated trust band */

.trust-band {
    background: var(--navy);
}

.trust-band-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 44px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.trust-band-item {
    text-align: center;
}

.trust-band-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: var(--orange);
    font-size: 19px;
}

.trust-band-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Manrope';
}

.trust-band-text {
    color: #9fb0c2;
    font-size: 11.5px;
    margin-top: 4px;
}

/* Related services cross-links */

.related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.related-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: var(--orange);
}

.related-card i {
    font-size: 24px;
    color: var(--orange);
    margin-bottom: 10px;
    display: block;
}

.related-card h4 {
    font-size: 14px;
    color: var(--navy);
}

.related-card span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--orange);
    font-weight: 700;
}


/* Related card upgrade (desc + hover underline) */

.related-card {
    text-align: left;
    position: relative;
    overflow: hidden;
}

.related-card .related-desc-v2 {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.5;
}

.related-card span.related-link-v2 {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--orange);
    font-weight: 700;
    font-size: 13px;
}

.related-card span.related-link-v2 i {
    font-size: 11px;
    display: inline;
    margin: 0;
    color: inherit;
}

.related-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--grad-cta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.related-card:hover::after {
    transform: scaleX(1);
}

/* Final trust row (simple chips) */

.final-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    margin-top: 32px;
    position: relative;
    z-index: 1;
}

.final-trust-row span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #dbe6f0;
}

.final-trust-row i {
    color: #3ddc84;
}

/* Success toast */
.success-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--navy);
    color: #fff;
    border-radius: 14px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 500;
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
}

.success-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.success-toast .toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.success-toast .toast-title {
    font-weight: 700;
    font-size: 13.5px;
}

.success-toast .toast-sub {
    font-size: 12px;
    color: #c3d1de;
    margin-top: 2px;
}

p#whyus_copy_para {
    margin-top: 12px;
    font-size: 15px;
    color: var(--muted);
}

.wpcf7-response-output {
    display: none !important;
}

.wpcf7-not-valid-tip {
    font-size: 0.8em;
}

/* Hidden extra images */
.gallery-grid .gallery-extra {
    display: none;
}

.gallery-grid.is-expanded .gallery-extra {
    display: block;
    animation: qfcGalleryFade 0.4s ease;
}

@keyframes qfcGalleryFade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* View More button */
.gallery-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.gallery-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: linear-gradient(135deg, #ff6a00 0%, #ff8a1f 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(255, 106, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.gallery-more-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 14px 30px rgba(255, 106, 0, 0.45);
}

.gallery-more-btn:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(255, 106, 0, 0.35);
}

.gallery-more-btn:focus-visible {
    outline: 3px solid rgba(255, 106, 0, 0.4);
    outline-offset: 3px;
}

.gallery-more-btn i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.gallery-more-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Show only the first 6 services until expanded */
.all-services-grid:not(.is-expanded) .as-card:nth-child(n+12) {
    display: none;
}

.all-services-grid.is-expanded .as-card:nth-child(n+12) {
    animation: qfcGalleryFade 0.4s ease;
}

/* About page css */

.ab-sec{padding:110px 0;position:relative;}
.ab-wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.ab-kicker{display:inline-flex;align-items:center;gap:10px;font:800 12.5px 'Manrope',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:18px;}
.ab-kicker::before{content:"";width:34px;height:2px;background:var(--orange);display:block;}
.ab-kicker.light{color:var(--orange-2);}
.ab-h2{font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-.035em;font-weight:800;}
.ab-h2 em{font-style:normal;color:var(--orange);}
.ab-lead{font-size:17.5px;color:var(--muted);max-width:560px;}
.ab-btn{display:inline-flex;align-items:center;gap:10px;font:700 15px 'Manrope',sans-serif;padding:15px 28px;border-radius:14px;border:1.5px solid transparent;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;cursor:pointer;}
.ab-btn.fill{background:var(--grad-cta);color:#fff;box-shadow:0 14px 30px -12px rgba(255,106,0,.7);}
.ab-btn.fill:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(255,106,0,.85);}
.ab-btn.line{color:#fff;border-color:rgba(255,255,255,.28);}
.ab-btn.line:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.ab-btn.dark{background:var(--navy);color:#fff;}
.ab-btn.dark:hover{background:var(--navy-2);transform:translateY(-2px);}
.ab-btn i{font-size:13px;}

/* ---------- HERO ---------- */
.ab-hero{background:var(--navy-3);color:#fff;padding:0;overflow:hidden;isolation:isolate;}
.ab-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(900px 500px at 85% -10%,rgba(255,106,0,.28),transparent 60%),
  radial-gradient(700px 500px at -10% 110%,rgba(46,123,184,.22),transparent 60%),
  var(--navy-3);}
.ab-hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);}
.ab-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding:84px 0 96px;}
.ab-hero h1{color:#fff;font-size:clamp(44px,6.6vw,92px);line-height:.98;letter-spacing:-.045em;font-weight:800;}
.ab-hero h1 .ol{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.55);}
.ab-hero h1 .or{background:var(--grad-cta);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ab-hero .sub{font-size:18px;color:#aeb9c7;max-width:560px;margin:30px 0 38px;}
.ab-hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

/* dispatch ticket */
.ab-ticket{position:relative;background:linear-gradient(160deg,#2b2f37,#1d2025);border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:30px 30px 26px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);transform:rotate(1.6deg);}
.ab-ticket::before,.ab-ticket::after{content:"";position:absolute;top:156px;width:26px;height:26px;border-radius:50%;background:var(--navy-3);}
.ab-ticket::before{left:-13px;}
.ab-ticket::after{right:-13px;}
.ab-tk-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.ab-tk-live{display:inline-flex;align-items:center;gap:8px;font:700 12px 'Manrope';letter-spacing:.1em;text-transform:uppercase;color:#7ee2a8;}
.ab-tk-live::before{content:"";width:9px;height:9px;border-radius:50%;background:#34d27b;box-shadow:0 0 0 0 rgba(52,210,123,.6);animation:ab-ping 2s infinite;}
@keyframes ab-ping{70%{box-shadow:0 0 0 10px rgba(52,210,123,0);}100%{box-shadow:0 0 0 0 rgba(52,210,123,0);}}
.ab-tk-id{font:600 12px 'Inter';color:#7d8a9b;letter-spacing:.08em;}
.ab-ticket h3{color:#fff;font-size:22px;margin-bottom:18px;letter-spacing:-.02em;}
.ab-tk-route{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:26px;padding-bottom:26px;border-bottom:2px dashed rgba(255,255,255,.14);}
.ab-tk-pt{font:700 13px 'Manrope';color:#dbe4ee;}
.ab-tk-pt small{display:block;font:500 11px 'Inter';color:#7d8a9b;letter-spacing:.06em;text-transform:uppercase;}
.ab-tk-line{position:relative;height:2px;background:rgba(255,255,255,.14);border-radius:2px;}
.ab-tk-line i{position:absolute;top:50%;left:0;transform:translateY(-50%);color:var(--orange);font-size:18px;background:#25292f;padding:0 6px;animation:ab-drive 4.2s ease-in-out infinite;}
@keyframes ab-drive{0%{left:0;}100%{left:calc(100% - 30px);}}
.ab-tk-rows{display:grid;gap:13px;}
.ab-tk-row{display:flex;justify-content:space-between;font-size:14px;}
.ab-tk-row span{color:#7d8a9b;}
.ab-tk-row b{color:#fff;font-weight:600;}
.ab-tk-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.ab-tk-tags span{font:600 12px 'Manrope';padding:6px 13px;border-radius:30px;background:rgba(255,106,0,.14);color:var(--orange-2);border:1px solid rgba(255,106,0,.28);}

/* ---------- MARQUEE ---------- */
.ab-marquee{background:var(--orange);color:#fff;overflow:hidden;white-space:nowrap;padding:17px 0;margin:0;position:relative;z-index:3;}
.ab-mq-track{display:inline-flex;gap:0;animation:ab-mq 34s linear infinite;}
.ab-mq-track span{font:800 17px 'Manrope';letter-spacing:.04em;text-transform:uppercase;padding:0 26px;display:inline-flex;align-items:center;gap:52px;}
.ab-mq-track span::after{content:"✦";font-size:14px;opacity:.8;}
@keyframes ab-mq{to{transform:translateX(-50%);}}

/* ---------- STATS ---------- */
.ab-stats{padding:92px 0 20px;}
.ab-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--navy);}
.ab-stat{padding:30px 26px 6px 0;position:relative;}
.ab-stat + .ab-stat{padding-left:26px;border-left:1px solid var(--line);}
.ab-stat strong{display:block;font:800 clamp(44px,5.4vw,76px)/1 'Manrope';letter-spacing:-.05em;color:var(--navy);}
.ab-stat strong sup{font-size:.4em;color:var(--orange);vertical-align:top;margin-left:2px;letter-spacing:0;}
.ab-stat span{display:block;margin-top:10px;font-size:14.5px;color:var(--muted);max-width:200px;}

/* ---------- STORY ---------- */
.ab-story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start;}
.ab-story-left{position:sticky;top:120px;}
.ab-story-img{position:relative;margin-top:38px;}
.ab-story-img img{width:100%;aspect-ratio:4/4.3;object-fit:cover;border-radius:30px 30px 160px 30px;box-shadow:var(--shadow-lg);}
.ab-story-img .badge{position:absolute;right:-18px;bottom:46px;background:var(--navy);color:#fff;border-radius:18px;padding:16px 20px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow-lg);}
.ab-story-img .badge i{width:44px;height:44px;border-radius:12px;background:var(--grad-cta);display:grid;place-items:center;font-size:18px;}
.ab-story-img .badge b{display:block;font:800 15px 'Manrope';}
.ab-story-img .badge small{font-size:12px;color:#9eabba;}
.ab-chap{display:grid;grid-template-columns:76px 1fr;gap:22px;padding:34px 0;border-bottom:1px solid var(--line);}
.ab-chap:first-child{padding-top:0;}
.ab-chap-n{font:800 54px/1 'Manrope';letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--orange);}
.ab-chap h3{font-size:22px;margin-bottom:10px;letter-spacing:-.02em;}
.ab-chap p{color:var(--muted);font-size:16.5px;}
.ab-pull{margin-top:34px;background:var(--navy);color:#fff;border-radius:24px;padding:34px 36px;position:relative;overflow:hidden;}
.ab-pull::before{content:"“";position:absolute;right:26px;top:-6px;font:800 140px/1 'Manrope';color:rgba(255,106,0,.28);}
.ab-pull p{font:700 21px/1.4 'Manrope';letter-spacing:-.015em;position:relative;max-width:90%;}
.ab-pull p em{font-style:normal;color:var(--orange-2);}

/* ---------- MISSION / VISION / VALUES ---------- */
.ab-values{background:var(--bg-2);}
.ab-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:54px;flex-wrap:wrap;}
.ab-sec-head .ab-lead{margin:0;}
.ab-mv{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-bottom:20px;}
.ab-mv-card{border-radius:30px;padding:46px;position:relative;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:space-evenly;}
.ab-mv-card.m{background:var(--grad-cta);color:#fff;}
.ab-mv-card.v{background:var(--navy);color:#fff;}
.ab-mv-card .big{position:absolute;right:-14px;top:-24px;font-size:190px;opacity:.14;}
.ab-mv-card .tag{font:800 12px 'Manrope';letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin-bottom:14px;}
.ab-mv-card h3{color:#fff;font-size:30px;letter-spacing:-.03em;margin-bottom:14px;max-width:460px;}
.ab-mv-card p{font-size:16px;opacity:.92;max-width:520px;}
.ab-val-row{display:flex;gap:14px;height:340px;}
.ab-val{flex:1;border-radius:26px;background:#fff;border:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;transition:flex .55s cubic-bezier(.2,.7,.2,1),background .35s,color .35s,border-color .35s;cursor:default;}
.ab-val:hover,.ab-val:focus-within{flex:2.3;background:var(--navy);color:#fff;border-color:var(--navy);}
.ab-val .no{font:800 14px 'Manrope';letter-spacing:.1em;color:var(--orange);}
.ab-val .ic{width:54px;height:54px;border-radius:16px;background:rgba(255,106,0,.12);color:var(--orange);display:grid;place-items:center;font-size:22px;transition:.35s;}
.ab-val:hover .ic{background:var(--orange);color:#fff;}
.ab-val h3{font-size:24px;letter-spacing:-.03em;margin-bottom:8px;transition:color .35s;}
.ab-val:hover h3{color:#fff;}
.ab-val p{font-size:14.5px;color:var(--muted);transition:color .35s;max-width:280px;}
.ab-val:hover p{color:#b5c0cd;}

/* ---------- TEAM ---------- */
.ab-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.ab-tcard{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:3/4.3;color:#fff;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.ab-tcard:nth-child(even){margin-top:46px;}
.ab-tcard:hover{transform:translateY(-8px);}
.ab-tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s;}
.ab-tcard:hover img{transform:scale(1.07);}
.ab-tcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(16,18,22,.96) 8%,rgba(16,18,22,.45) 52%,rgba(16,18,22,.05));}
.ab-tcard .num{position:absolute;top:20px;left:24px;font:800 13px 'Manrope';letter-spacing:.12em;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);padding:6px 12px;border-radius:30px;}
.ab-tcard .ico{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:14px;background:var(--grad-cta);display:grid;place-items:center;font-size:18px;box-shadow:0 10px 24px -8px rgba(255,106,0,.8);}
.ab-tcard h4{color:#fff;font-size:21px;letter-spacing:-.025em;margin-bottom:4px;}
.ab-tcard .role{font:700 12px 'Manrope';letter-spacing:.1em;text-transform:uppercase;color:var(--orange-2);margin-bottom:10px;}
.ab-tcard p{font-size:14px;color:#cbd5e1;line-height:1.55;}

/* ---------- PROCESS (dark) ---------- */
.ab-process{background:var(--navy);color:#fff;overflow:hidden;border-radius:44px;margin:0 18px;}
.ab-process::before{content:"";position:absolute;right:-180px;top:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.25),transparent 68%);}
.ab-process .ab-h2{color:#fff;}
.ab-process .ab-lead{color:#a9b5c3;}
.ab-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:70px;position:relative;}
.ab-steps::before{content:"";position:absolute;left:6%;right:6%;top:34px;border-top:2px dashed rgba(255,255,255,.2);}
.ab-step{position:relative;}
.ab-step .dot{width:68px;height:68px;border-radius:50%;background:var(--navy-3);border:2px solid var(--orange);color:var(--orange);display:grid;place-items:center;font:800 22px 'Manrope';margin-bottom:26px;position:relative;box-shadow:0 0 0 8px var(--navy);transition:.3s;}
.ab-step:hover .dot{background:var(--orange);color:#fff;transform:scale(1.08);}
.ab-step h3{color:#fff;font-size:21px;margin-bottom:10px;letter-spacing:-.02em;}
.ab-step p{font-size:14.5px;color:#a9b5c3;max-width:250px;}

/* ---------- WHY US (bento) ---------- */
.ab-bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(210px,auto);gap:18px;}
.ab-b{border-radius:28px;padding:30px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s,box-shadow .3s;}
.ab-b:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.ab-b .ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:21px;background:rgba(255,106,0,.12);color:var(--orange);margin-bottom:26px;}
.ab-b h4{font-size:21px;letter-spacing:-.025em;margin-bottom:8px;}
.ab-b p{font-size:14.5px;color:var(--muted);}
.ab-b.s2{grid-column:span 2;}
.ab-b.s3{grid-column:span 3;}
.ab-b.s4{grid-column:span 4;}
.ab-b.dark{background:var(--navy);border-color:var(--navy);color:#fff;}
.ab-b.dark h4{color:#fff;}
.ab-b.dark p{color:#aab6c4;}
.ab-b.dark .ic{background:rgba(255,255,255,.1);color:var(--orange-2);}
.ab-b.or{background:var(--grad-cta);border-color:transparent;color:#fff;}
.ab-b.or h4{color:#fff;}
.ab-b.or p{color:rgba(255,255,255,.92);}
.ab-b.or .ic{background:rgba(255,255,255,.22);color:#fff;}
.ab-b.photo{padding:0;color:#fff;border:0;justify-content:flex-end;}
.ab-b.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.ab-b.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(16,18,22,.92),rgba(16,18,22,.1) 70%);}
.ab-b.photo .in{position:relative;z-index:2;padding:30px;}
.ab-b.photo h4{color:#fff;}
.ab-b.photo p{color:#d3dbe5;}
.ab-b .watermark{position:absolute;right:20px;bottom:-26px;font:800 150px/1 'Manrope';letter-spacing:-.06em;color:rgba(255,255,255,.07);}

/* ---------- BANNER ---------- */
.ab-banner{position:relative;margin:0 18px;border-radius:44px;overflow:hidden;min-height:480px;display:flex;align-items:center;color:#fff;isolation:isolate;}
.ab-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;}
.ab-banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(95deg,rgba(22,24,28,.95) 15%,rgba(22,24,28,.55) 60%,rgba(255,106,0,.18));}
.ab-banner h2{color:#fff;font-size:clamp(30px,4.4vw,58px);letter-spacing:-.04em;line-height:1.05;max-width:700px;}
.ab-banner h2 em{font-style:normal;color:var(--orange);}
.ab-banner p{margin-top:20px;color:#cdd6e0;font-size:18px;max-width:520px;}
.ab-banner .ab-wrap{padding-top:70px;padding-bottom:70px;}
 
/* ---------- QUOTE ---------- */
section#get-quote{padding-top: 0px;}
.ab-quote-card{display:grid;grid-template-columns:.9fr 1.1fr;background:#fff;border-radius:36px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);}
.ab-q-left{background:var(--grad-navy);color:#fff;padding:56px 46px;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.ab-q-left::after{content:"";position:absolute;left:-90px;bottom:-110px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.4),transparent 70%);}
.ab-q-left > *{position:relative;z-index:1;}
.ab-q-left h2{color:#fff;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.035em;margin-bottom:16px;}
.ab-q-left > p{color:#b2bdca;margin-bottom:34px;}
.ab-q-lines{display:grid;gap:12px;margin-top:0;}
.ab-q-lines a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-weight:600;font-size:14.5px;transition:.25s;}
.ab-q-lines a:hover{background:rgba(255,255,255,.14);border-color:var(--orange);transform:translateX(4px);}
.ab-q-lines i{width:38px;height:38px;border-radius:11px;background:var(--grad-cta);display:grid;place-items:center;font-size:15px;flex:none;}
.ab-q-right{padding:56px 50px;}
.ab-q-right h3{font-size:26px;letter-spacing:-.03em;margin-bottom:6px;}
.ab-q-right > p{color:var(--muted);font-size:14.5px;margin-bottom:28px;}
.ab-form{display:grid;gap:16px;}
.ab-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ab-field label{display:block;font:700 12.5px 'Manrope';letter-spacing:.04em;text-transform:uppercase;color:var(--navy);margin-bottom:8px;}
.ab-field{position:relative;}
.ab-field i{position:absolute;left:16px;bottom:17px;color:#98a5b5;font-size:14px;pointer-events:none;transition:color .2s;}
.ab-field input{width:100%;font:500 15px 'Inter';padding:15px 16px 15px 42px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);transition:.2s;}
.ab-field input:focus{outline:none;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px rgba(255,106,0,.12);}
.ab-field:focus-within i{color:var(--orange);}
.ab-form .ab-btn{justify-content:center;width:100%;margin-top:6px;border:0;}
.ab-micro{text-align:center;font-size:12.5px;color:var(--muted);}
 
/* ---------- FINAL CTA ---------- */
.ab-final{padding:0 0 110px;}
.ab-final-box{background:var(--navy);border-radius:44px;padding:76px 60px;color:#fff;position:relative;overflow:hidden;text-align:center;}
.ab-final-box::before{content:"";position:absolute;left:50%;top:-260px;transform:translateX(-50%);width:760px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.35),transparent 68%);}
.ab-final-box > *{position:relative;}
.ab-final-box .pill{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:600 13px 'Manrope';color:#dbe4ee;margin-bottom:26px;}
.ab-final-box .pill i{color:#34d27b;}
.ab-final-box h2{color:#fff;font-size:clamp(34px,5vw,68px);letter-spacing:-.045em;line-height:1;max-width:820px;margin:0 auto 20px;}
.ab-final-box h2 em{font-style:normal;color:var(--orange);}
.ab-final-box > p{color:#aab6c4;font-size:17.5px;max-width:560px;margin:0 auto 34px;}
.ab-final-box .ab-hero-cta{justify-content:center;}
.ab-contact-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:56px;text-align:left;}
.ab-contact-row a{padding:22px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:.25s;display:block;}
.ab-contact-row a:hover{background:rgba(255,255,255,.12);border-color:var(--orange);transform:translateY(-4px);}
.ab-contact-row i{color:var(--orange);font-size:20px;margin-bottom:14px;display:block;}
.ab-contact-row b{display:block;font:700 15.5px 'Manrope';color:#fff;margin-bottom:4px;}
.ab-contact-row span{font-size:13px;color:#93a3b5;}

 /* ---------- reveal ---------- */
.ab-rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);}
.ab-rv.in{opacity:1;transform:none;}
.ab-tcard.ab-rv.in:nth-child(even){transform:none;}
.align-items-center {align-items: center;}

/* =========================================================
   COVERAGE PAGE HERO  (scoped: .hero-coverage)
   ========================================================= */

/* missing in main.css */
.btn-lg{padding:15px 28px;font-size:15.5px;}

/* section shell (overrides home .hero) */
.hero.hero-coverage{position:relative;overflow:hidden;background:var(--grad-navy);padding:36px 0 56px;isolation:isolate;}
.hero-coverage::before{content:"";position:absolute;inset:0;z-index:-2;background:url("https://images.pexels.com/photos/6169582/pexels-photo-6169582.jpeg?auto=compress&cs=tinysrgb&w=1600") center/cover;opacity:.16;}
.hero-coverage::after{content:"";position:absolute;right:-10%;top:-35%;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,0,.22),transparent 66%);z-index:-1;}
.hero-coverage .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;}

/* breadcrumb + live pill */
.hero-coverage .breadcrumb{margin-bottom:14px;}
.hero-coverage .breadcrumb i{font-size:9px;}
.hero-coverage .live{display:inline-flex;align-items:center;gap:8px;background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.35);color:#9af0c0;font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:20px;margin-bottom:16px;}
.hero-coverage .live i{font-size:7px;color:#3ddc84;}

/* heading + sub (override home .hero h1 / p.sub) */
.hero.hero-coverage h1{color:#fff;font-size:clamp(30px,3.9vw,46px);letter-spacing:-.02em;max-width:none;}
.hero.hero-coverage h1 .hl{color:var(--orange-2);}
.hero.hero-coverage p.sub{margin-top:18px;font-size:17px;color:#cdd9e5;max-width:54ch;}

/* points */
.hero-coverage .hero-points{margin-top:18px;display:grid;gap:10px;}
.hero-coverage .hero-points li{display:flex;gap:12px;align-items:flex-start;color:#e8eef5;font-size:15.5px;font-weight:500;}
.hero-coverage .hero-points i{color:#3ddc84;margin-top:5px;font-size:14px;flex:none;}

/* CTA buttons (beats .hero-cta .btn) */
.hero-coverage .hero-cta{margin-top:24px;}
.hero-coverage .hero-cta .btn-lg{padding:15px 28px;font-size:15.5px;}

/* stats */
.hero-coverage .hero-stats{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.hero-coverage .stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 14px;}
.hero-coverage .stat strong{display:block;white-space:nowrap;font-family:'Manrope',sans-serif;font-size:24px;line-height:1.1;color:#fff;}
.hero-coverage .stat span{display:block;margin-top:4px;font-size:12.5px;color:#aebfd0;line-height:1.35;}

/* quote card (overrides home .hero-card) */
.hero-coverage .hero-card{background:#fff;border-radius:22px;padding:30px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);}
.hero-coverage .hero-card::before{display:none;}
.hero-coverage .hero-card .tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange);}
.hero-coverage .hero-card h2{font-size:24px;margin-top:8px;}
.hero-coverage .hc-sub{margin-top:6px;font-size:14px;color:var(--muted);}
.hero-coverage .hero-card form{margin-top:20px;display:grid;gap:14px;}

/* form fields */
.hero-coverage .field label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:6px;}
.hero-coverage .input{position:relative;}
.hero-coverage .input i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:13px;pointer-events:none; z-index: 1;}
.hero-coverage .input input,
.hero-coverage .input select{width:100%;height:48px;padding:0 14px 0 38px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font-family:inherit;font-size:14.5px;color:var(--ink);appearance:none;-webkit-appearance:none;}
.hero-coverage .input select{background-image:linear-gradient(45deg,transparent 50%,#5A6B7F 50%),linear-gradient(135deg,#5A6B7F 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px;}
.hero-coverage .input input:focus,
.hero-coverage .input select:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(29,93,143,.15);}
#hero-form form br { display: none;}
#hero-form form .wpcf7-spinner{position: absolute;top: 92%;right: 20%;}

/* or / call / note */
.hero-coverage .hc-or{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);}
.hero-coverage .hc-or::before,
.hero-coverage .hc-or::after{content:"";flex:1;height:1px;background:var(--line);}
.hero-coverage .hc-call{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;border-radius:12px;background:var(--bg-2);font-weight:800;color:var(--navy);}
.hero-coverage .hc-call i{color:var(--orange);}
.hero-coverage .hc-note{margin-top:2px;text-align:center;font-size:12px;color:var(--muted);}

/* =========================================================
   AT A GLANCE (coverage page) — .answer
   ========================================================= */
.answer{background:#fff;border-bottom:1px solid var(--line);padding:0;}
.answer-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.answer-item{display:flex;gap:14px;align-items:center;padding:24px 22px;border-right:1px solid var(--line);}
.answer-item:last-child{border-right:none;}

/* icon (overrides global .icon-badge margin) */
.answer-item .icon-badge{display:flex;width:42px;height:42px;font-size:16px;border-radius:12px;margin:0;flex:none;}

/* text (scoped so it doesn't hit the icon span) */
.answer-item > div > strong{display:block;font-family:'Manrope',sans-serif;font-size:15px;color:var(--navy);line-height:1.25;}
.answer-item > div > span{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px;}

/* ---- shared ---- */
.learn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;color:var(--orange);}
.as-card .learn{margin-top:14px;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.chips a,.chips span{font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:20px;background:var(--bg-2);color:var(--navy);}
.chips a:hover{background:var(--orange);color:#fff;}
.chips.blue a{background:rgba(29,93,143,.09);}
.chips.green a{background:rgba(30,142,90,.10);}
.chips.blue a:hover,.chips.green a:hover{background:var(--orange);}

/* ---- Overview: map + counties ---- */
.overview{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;}
.map-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow);}
.map-card svg{width:100%;height:auto;display:block;}
.map-label{font:600 13px 'Inter',sans-serif;fill:var(--ink);}
.map-legend{display:flex;gap:18px;justify-content:center;margin-top:12px;font-size:13px;font-weight:600;color:var(--navy);}
.map-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;}
.map-note{text-align:center;font-size:12px;color:var(--muted);margin-top:6px;}
.overview h2{font-size:clamp(26px,3.2vw,36px);}
.overview .lede{margin-top:14px;font-size:16.5px;color:var(--muted);}
.county-box{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;}
.county-box h3{display:flex;align-items:center;gap:10px;font-size:16px;}
.county-box h3 i{width:10px;height:10px;border-radius:50%;flex:none;}
.county-box h3 small{margin-left:auto;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:12.5px;color:var(--muted);}
.nearby{margin-top:16px;font-size:13.5px;color:var(--muted);}
.nearby strong{color:var(--navy);}

/* ---- City cards ---- */
.county-head{display:flex;align-items:center;gap:14px;margin:0 0 20px;}
.county-head h3{font-size:22px;}
.county-head .count{font-size:13px;font-weight:700;padding:5px 12px;border-radius:20px;color:#fff;}
.county-head .line{flex:1;height:1px;background:var(--line);}
.county-block+.county-block{margin-top:48px;}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.loc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s ease,box-shadow .15s ease;}
.loc-card:hover{border-color:rgba(255,106,0,.5);box-shadow:var(--shadow);}
.loc-top{display:flex;gap:12px;align-items:center;}
.loc-top .icon-badge{width:40px;height:40px;font-size:15px;border-radius:11px;margin:0;flex:none;}
.loc-top h3{font-size:17px;}
.loc-top small{color:var(--muted);font-size:12.5px;}
.loc-card p{font-size:14px;color:var(--muted);flex:1;}
.loc-tags{display:flex;flex-wrap:wrap;gap:6px;}
.loc-tags li{font-size:12px;font-weight:600;padding:4px 10px;border-radius:14px;background:var(--bg-2);color:var(--navy);}
.loc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:13px;}
.loc-foot span{color:var(--muted);font-weight:600;display:flex;align-items:center;gap:7px;}
.loc-foot span i{color:var(--blue);}
#cities .area-note{margin-top:30px;font-size:14.5px;font-style:normal;}

/* ---- Delivery speeds ---- */
.speed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.speed-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;position:relative;}
.speed-card .icon-badge{margin-bottom:16px;}
.speed-card h3{font-size:18px;}
.speed-card .when{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:800;color:var(--orange);letter-spacing:.03em;text-transform:uppercase;}
.speed-card p{margin-top:10px;font-size:14px;color:var(--muted);}
.speed-card.feat{border:2px solid var(--orange);}
.speed-card .flag{position:absolute;top:-13px;left:22px;background:var(--grad-cta);color:#fff;font-size:11.5px;font-weight:800;padding:4px 12px;border-radius:14px;}
.fine{margin-top:22px;text-align:center;font-size:13.5px;color:var(--muted);}

/* ---- Industries row ---- */
.industry-row{margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.industry-row h3{font-size:16px;flex:none;}
.industry-row .chips{margin:0;}
.industry-row .chips i{color:var(--orange);margin-right:7px;}

/* ---- Fleet ---- */
.fleet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.fleet-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center;}
.fleet-card .big{width:64px;height:64px;border-radius:18px;background:var(--bg-2);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;}
.fleet-card h3{font-size:17px;}
.fleet-card p{margin-top:8px;font-size:14px;color:var(--muted);}

/* ---- Routes (dark) — scoped to #routes ---- */
#routes .svc-grid{grid-template-columns:repeat(4,1fr);gap:16px;}
#routes .svc-card{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:14px;}
#routes .svc-card .icon-badge{background:rgba(255,106,0,.18);color:var(--orange-2);width:40px;height:40px;font-size:16px;margin:0;}
#routes .svc-card.hot .icon-badge{background:rgba(255,255,255,.22);color:#fff;}
#routes .svc-card h3{font-size:16px;line-height:1.3;}
#routes .svc-card p{flex:1;margin-top:0;}

/* ---- How it works: cards version (needs .process-cards) ---- */
.process-row.process-cards{gap:20px;}
.process-row.process-cards::before{display:none;}
.process-cards .p-node,
.process-cards .p-node:nth-child(even){margin-top:0;}
.process-cards .p-node{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:left;}
.process-cards .p-node .num{position:absolute;top:18px;right:20px;font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:34px;color:var(--bg-2);line-height:1;}
.process-cards .p-node .icon-badge{margin-bottom:16px;border-radius:50%;}
.process-cards .p-node h3{font-size:17px;}
.process-cards .p-node p{margin-top:8px;font-size:14px;color:var(--muted);}

.proof-grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.proof{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;}
.proof i{color:var(--green);font-size:20px;margin-top:3px;}
.proof strong{display:block;font-family:'Manrope',system-ui,sans-serif;font-size:15.5px;color:var(--navy);}
.proof span{display:block;font-size:13.5px;color:var(--muted);margin-top:3px;}

/* ---- Pricing ---- */
.price-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.price-wrap h2{font-size:clamp(26px,3.2vw,36px);}
.price-wrap .lede{margin-top:14px;font-size:16.5px;color:var(--muted);}
.price-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.price-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;}
.price-item i{color:var(--orange);font-size:20px;margin-bottom:10px;display:block;}
.price-item strong{display:block;font-family:'Manrope',system-ui,sans-serif;font-size:15px;color:var(--navy);}
.price-item span{display:block;font-size:13px;color:var(--muted);margin-top:3px;}

/* ---- CTA strip: orange version (needs .cta-strip-orange) ---- */
.cta-strip.cta-strip-orange{background:var(--grad-cta);border-radius:24px;padding:40px 44px;gap:28px;}
.cta-strip-orange .eyebrow{background:rgba(255,255,255,.2);color:#fff;}
.cta-strip-orange h2{font-size:clamp(24px,3vw,32px);}
.cta-strip-orange p{font-size:16px;color:#fff3e8;}
.cta-strip-orange .btn-call{background:#fff;color:var(--navy);}

/* ---- FAQ (native <details>) — scoped to .faq-list ---- */
.faq-list{display:grid;gap:12px;}
.faq-list .faq-item{margin-bottom:0;}
.faq-list .faq-item[open]{border-color:rgba(255,106,0,.45);}
.faq-list .faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-family:'Manrope',system-ui,sans-serif;font-weight:700;font-size:16px;color:var(--navy);}
.faq-list .faq-item summary::-webkit-details-marker{display:none;}
.faq-list .faq-item summary i{color:var(--orange);font-size:13px;flex:none;}
.faq-list .faq-item[open] summary i{transform:rotate(180deg);}
.faq-list .faq-a{max-height:none;overflow:visible;padding:0 22px 20px;color:var(--muted);font-size:15px;}
.faq-list .faq-a p{padding:0;max-width:none;font-size:inherit;color:inherit;}

/* card shell */
#service_area .quote-full{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-lg);overflow:hidden;padding:0;color:var(--ink);}
#service_area .quote-full::before{display:none;}
#service_area .quote-full-grid{grid-template-columns:.85fr 1.15fr;gap:0;}

/* left panel */
#service_area .quote-full-panel{background:var(--grad-navy);color:#cfd9e4;padding:44px 38px;display:flex;flex-direction:column;gap:16px;border-radius:0;overflow:visible;}
#service_area .quote-full-panel::after{display:none;}
#service_area .quote-full-panel img{position:static;inset:auto;z-index:auto;width:100%;height:170px;border-radius:14px;object-fit:cover;}
#service_area .quote-full-panel h2{color:#fff;font-size:28px;max-width:none;}
#service_area .quote-full-panel p{margin-top:0;color:inherit;font-size:inherit;}

#service_area .quote-full-panel .contact-lines{display:grid;gap:12px;margin-top:6px;}
#service_area .quote-full-panel .contact-lines a{display:flex;gap:12px;align-items:center;color:#e8eef5;font-weight:600;font-size:14.5px;word-break:break-word;}
#service_area .quote-full-panel .contact-lines i{width:18px;height:auto;background:none;border-radius:0;display:block;text-align:center;color:var(--orange);flex:none;}

/* right form */
#service_area .quote-full-form{padding:44px 38px;border-radius:0;overflow:visible;}
#service_area .quote-full-form::before{display:none;}
#service_area .qform{gap:16px;}
#service_area .qform .row2{gap:16px;}
#service_area .qform label{font-size:12.5px;}

/* inputs */
#service_area .input{position:relative;}
#service_area .input i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--blue);font-size:13px;pointer-events:none;z-index:1;}
#service_area .input input,
#service_area .input select{width:100%;height:48px;padding:0 14px 0 38px;border-radius:12px;border:1px solid var(--line);background-color:var(--bg);font-family:inherit;font-size:14.5px;color:var(--ink);appearance:none;-webkit-appearance:none;}
#service_area .input select{background-image:linear-gradient(45deg,transparent 50%,#5A6B7F 50%),linear-gradient(135deg,#5A6B7F 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px;}
#service_area .input input:focus,
#service_area .input select:focus{outline:none;border-color:var(--blue);background-color:#fff;box-shadow:0 0 0 3px rgba(29,93,143,.15);}

/* button + microcopy */
#service_area .qform .btn-primary{margin-top:0;padding:15px 28px;font-size:15.5px;}
#service_area .qform .microcopy{margin-top:0;font-size:12.5px;}

/* =========================================================
   INDUSTRIES PAGE
   ========================================================= */
.ind-sec{scroll-margin-top:130px;}
/* main.css has section#get-quote{padding-top:0} for About page — restore here */
section#get-quote.ind-sec{padding-top:90px;}

/* industry tiles */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ind-tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;color:inherit;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.ind-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--orange);}
.ind-tile h3{font-size:17px;margin-top:14px;}
.ind-tile p{font-size:13.5px;color:var(--muted);margin-top:6px;}
.ind-tile .industry-hook{margin-top:10px;}
.ind-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;font-size:13px;color:var(--blue);}
.ind-tile:hover .ind-go{color:var(--orange);}

/* industry sections: copy + panel */
.ind-split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;}
.ind-split.rev .ind-panel{order:-1;}
.ind-copy h2{margin-top:6px;}
.ind-copy p{margin-top:14px;color:var(--muted);font-size:15.5px;}
.ind-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.ind-links a{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);font-family:'Manrope';font-weight:700;font-size:13px;color:var(--navy);transition:border-color .15s ease,color .15s ease,transform .15s ease;}
.ind-links a i{color:var(--orange);font-size:12px;}
.ind-links a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);}
.ind-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);}
.ind-panel h4{font-family:'Manrope';font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;}
.ind-panel ul{display:grid;gap:12px;}
.ind-panel li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink);}
.ind-panel li i{color:var(--orange);margin-top:4px;font-size:12.5px;flex:none;}
.ind-note{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--muted);}
.ind-note strong{color:var(--navy);}
.ind-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
.ind-sub .svc-feature{scroll-margin-top:130px;}

/* quick reference table */
.ind-table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.ind-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:760px;}
.ind-table th{background:var(--navy);color:#fff;text-align:left;padding:15px 20px;font-family:'Manrope';font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;}
.ind-table td{padding:15px 20px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink);}
.ind-table tbody tr:nth-child(even) td{background:var(--bg);}
.ind-table td:first-child{font-weight:700;color:var(--navy);}
.ind-table td a{color:var(--blue);font-weight:700;white-space:nowrap;}
.ind-table td a:hover{color:var(--orange);}
.ind-table td .sep{color:var(--muted);margin:0 6px;}

/* coverage cards */
.cov-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}