.landing-page {
    background: #f8f9fa;
}

/* ---------- landing-page header ----------
   The landing pages carry the shared site navigation and hamburger; only the
   call and quote actions differ (plain links to the campaign line and #quote). */
.landing-page .nav-actions .phone-btn {
    gap: 6px;
    border-color: var(--primary);
    color: var(--primary);
    transition: background-color var(--transition-fast);
}

.landing-page .nav-actions .phone-btn:hover {
    background-color: rgba(223, 115, 47, 0.08);
}

.landing-page .nav-actions .quote-btn {
    text-decoration: none;
}

/* The hero clears the fixed top bar + 72px header. The bar is 70px on desktop
   (see .landing-hero), one phone pill over a wrapped address line up to
   1024px, and the pill alone below 768px once the address is hidden. */
@media (max-width: 1024px) {
    .landing-page .landing-hero {
        margin-top: 162px;
    }
}

@media (max-width: 768px) {
    .landing-page .landing-hero {
        margin-top: 130px;
    }

    /* address and licence repeat in the trust strip right under the hero;
       dropping them here brings the first CTA back above the fold */
    .landing-page .location-info {
        display: none;
    }
}

.landing-hero {
    min-height: calc(100vh - 142px);
    margin-top: 142px;
    padding: 72px 0 84px;
    background:
        linear-gradient(120deg, rgba(31, 31, 31, 0.92), rgba(31, 31, 31, 0.72)),
        url('../img/home_banner/jm-team-fleet-1600.webp') center / cover;
    color: #fff;
}


.landing-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    gap: clamp(40px, 7vw, 96px);
    align-items: center;
}

.landing-copy {
    min-width: 0;
    max-width: 650px;
}

.landing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.landing-title {
    margin-bottom: 24px;
    color: #fff;
    /* !important: the Sienna accessibility widget writes the computed size of
       every heading back as an inline px value when it initialises, which
       froze the hero title at whatever the first viewport happened to be. */
    font-size: clamp(1.5rem, 2.5vw, 2.25rem) !important;
    font-weight: 500;
    line-height: 1.3;
}

.landing-title em,
.landing-title b {
    display: inline-block;
    font-size: 1.78em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.1;
}

.landing-title em {
    color: var(--primary);
}

/* English runs much longer than Chinese: ease the emphasis size so the
   hero headline holds two tidy lines instead of four ragged ones. */
html[lang="en"] .landing-title em,
html[lang="en"] .landing-title b {
    font-size: 1.62em;
}

.landing-lead {
    max-width: 620px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.15rem;
    line-height: 1.8;
}

.landing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.landing-split-copy .landing-actions {
    margin-top: 36px;
    margin-bottom: 0;
}

.landing-actions .btn-secondary {
    border-color: rgba(255, 255, 255, 0.58);
    color: #fff;
}

.landing-actions .btn-secondary:hover {
    border-color: #fff;
}

.landing-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 620px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 22px;
}

.landing-proof-item {
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.landing-proof-item:not(:first-child) {
    padding-left: 16px;
}

.landing-proof-item:last-child {
    border-right: 0;
}

.landing-proof-number {
    display: block;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
}

.landing-proof-label {
    display: block;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.75rem;
}

.step-form-card {
    min-width: 0;
    padding: clamp(24px, 4vw, 36px);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
}

.step-form-card h2 {
    margin-bottom: 8px;
    font-size: 1.8rem;
    font-weight: 500;
}

.step-form-intro {
    margin-bottom: 24px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.step-progress {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 26px;
}

.step-progress span {
    height: 4px;
    border-radius: 999px;
    background: #e8eaed;
}

.step-progress span.active {
    background: var(--primary);
}

.step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.step-fields {
    display: grid;
    gap: 16px;
}

.step-fields.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.step-field {
    display: grid;
    gap: 6px;
}

.step-field label {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

.step-field input,
.step-field select,
.step-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #d9dfe5;
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95rem;
}

.step-field textarea {
    /* only the notes field grows, and only vertically */
    min-height: 84px;
    line-height: 1.55;
    resize: vertical;
}

.step-field input:focus,
.step-field select:focus,
.step-field textarea:focus {
    outline: 3px solid rgba(223, 115, 47, 0.16);
    border-color: var(--primary);
}

.step-form-actions {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.step-form-actions .btn-primary {
    width: 100%;
}

.step-back {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
}

.step-back:hover {
    color: var(--primary);
}

.step-form-note {
    margin: 18px 0 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}

.step-form-phone {
    display: block;
    margin-top: 8px;
    color: var(--primary);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.landing-success {
    padding: 24px;
    border: 1px solid #b9e4cc;
    border-radius: 10px;
    background: #eefaf3;
    color: #176b3b;
    text-align: center;
}

.landing-success .material-symbols-outlined {
    display: block;
    margin-bottom: 8px;
    font-size: 36px;
}

.landing-section {
    padding: 88px 0;
    background: #fff;
}

.landing-section.soft {
    background: #f8f9fa;
}


.landing-section-header {
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.landing-section-header h2 {
    margin-bottom: 14px;
    font-weight: 500;
}

.landing-section-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.05rem;
}

.landing-trust-strip {
    padding: 22px 0;
    border-bottom: 1px solid #e8eaed;
    background: #fff;
}

.landing-trust-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(18px, 4vw, 40px);
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-trust-strip li {
    display: inline-flex;
    gap: 8px;
    /* first-line alignment, so the icon stays put if a long item does wrap */
    align-items: flex-start;
    color: var(--text-primary);
    /* The licence string (CAL-T · USDOT · MC) is the longest item by far and
       wrapped to two lines on phones. Scaling the whole strip together keeps
       every item on one line from ~340px up without mismatched type sizes. */
    font-size: clamp(0.7rem, 3.3vw, 0.9rem);
    font-weight: 500;
    line-height: 1.45;
}

.landing-trust-strip li .material-symbols-outlined {
    /* nudge the icon onto the text's optical baseline under flex-start */
    margin-top: 1px;
}

/* 320px is the one width where the licence string cannot fit at a readable
   size, so buy back the container gutter there rather than shrink the type */
@media (max-width: 340px) {
    .landing-page .landing-trust-strip .container {
        padding-right: 12px;
        padding-left: 12px;
    }
}

.landing-trust-strip .material-symbols-outlined {
    color: var(--primary);
    font-size: 20px;
}

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

.landing-quote-card {
    padding: 28px;
    border: 1px solid #e8eaed;
    border-radius: 14px;
    background: #fff;
}

.landing-quote-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
}

.landing-quote-stars .material-symbols-outlined {
    color: var(--primary);
    /* The bundled Material Symbols subset is static, so the FILL axis is
       ignored and the rating stars rendered hollow. Material Icons ships a
       solid `star` glyph, so use that face here. */
    font-family: 'Material Icons', 'Material Symbols Outlined', sans-serif;
    font-size: 20px;
    font-variation-settings: 'FILL' 1;
}

.landing-quote-card blockquote {
    margin: 0 0 16px;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.75;
}

.landing-quote-card cite {
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 600;
}

.landing-center-cta {
    flex-wrap: wrap;
}

.landing-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.landing-card {
    height: 100%;
    padding: 28px;
    border: 1px solid #e8eaed;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(32, 33, 36, 0.06);
}

.landing-card.accent {
    border-top: 4px solid var(--primary);
}

.landing-card-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: var(--surface-tint);
    color: var(--primary);
}

.landing-card h3 {
    margin-bottom: 10px;
    font-size: 1.25rem;
    font-weight: 500;
}

.landing-card p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.landing-card .card-answer {
    margin-top: 18px;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
}

#moving-pain-points .landing-card-answer {
    margin-top: 18px;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.landing-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 7vw, 96px);
    align-items: center;
}

.landing-split-image {
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--elevation-3);
}

.landing-split-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.landing-route-video {
    min-width: 0;
}

.landing-route-video .video-container {
    border-radius: 18px;
}

.landing-route-video .video-thumbnail {
    aspect-ratio: 4 / 3;
}

.landing-route-video .video-thumbnail:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

#routeVideo {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
}

.landing-service-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-standard);
}

.landing-service-card:hover .landing-service-bg {
    transform: scale(1.06);
}

.landing-service-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    color: #fff;
    text-align: center;
}

.landing-service-content .material-symbols-outlined {
    color: var(--primary);
}



.landing-split-copy h2 {
    margin-bottom: 16px;
    font-weight: 500;
}

.landing-split-copy > p {
    color: var(--text-secondary);
    line-height: 1.8;
}

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

.landing-price-features {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    list-style: none;
}

.landing-price-features li::before {
    content: "✓";
    margin-right: 8px;
    color: var(--primary);
    font-weight: 700;
}

.landing-price-card {
    position: relative;
    padding: 32px;
    border: 1px solid rgba(223, 115, 47, 0.22);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(32, 33, 36, 0.07);
}

.landing-price-card.featured {
    border: 2px solid var(--primary);
    background: linear-gradient(145deg, #fffaf4, #fff);
}

.landing-price-label {
    display: block;
    margin: 0 0 16px;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 600;
}

.landing-price {
    display: block;
    margin-bottom: 48px;
    color: var(--primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1;
}

.landing-price-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7;
}

.landing-price-note {
    max-width: 760px;
    margin: 28px auto 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.7;
    text-align: center;
}

.landing-price-note strong {
    color: var(--text-primary);
}

.landing-feature-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

.landing-feature-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.landing-feature-item .material-symbols-outlined {
    color: var(--primary);
}

.landing-feature-item strong,
.landing-feature-item span:last-child {
    display: block;
}

.landing-route-map {
    margin: 0 auto;
}

.route-map-card {
    position: relative;
    overflow: hidden;
    padding: clamp(12px, 1.8vw, 20px);
    border: 1px solid rgba(223, 115, 47, 0.16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 20%, rgba(246, 173, 45, 0.18), transparent 32%),
        linear-gradient(145deg, #fffaf3 0%, #f4f7f8 100%);
    box-shadow: 0 18px 50px rgba(32, 33, 36, 0.1);
}

.route-map-card::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(223, 115, 47, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(223, 115, 47, 0.045) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
    pointer-events: none;
}

.route-map-svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    font-family: inherit;
}

.route-map-wide {
    display: none;
}

@media (min-width: 901px) {
    .route-map-wide {
        display: block;
    }

    .route-map-tall {
        display: none;
    }
}


/* --- map paint --- */
.rm-land {
    fill: #fff;
    stroke: rgba(223, 115, 47, 0.34);
    stroke-linejoin: round;
    stroke-width: 2;
    filter: drop-shadow(0 12px 16px rgba(32, 33, 36, 0.07));
}




.rm-water {
    fill: #e1eaf2;
    stroke: rgba(112, 146, 174, 0.5);
    stroke-width: 1;
}

.rm-route {
    fill: none;
    stroke: var(--primary);
    stroke-dasharray: 3 12;
    stroke-linecap: round;
    stroke-width: 5;
}

.rm-route-back {
    fill: none;
    stroke: rgba(223, 115, 47, 0.16);
    stroke-linecap: round;
    stroke-width: 13;
}



.rm-leader {
    fill: none;
    stroke: rgba(31, 31, 31, 0.3);
    stroke-width: 1.2;
}

.rm-dot {
    fill: var(--primary);
    stroke: #fff;
    stroke-width: 2;
}


.rm-label,
.rm-label-sm {
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-linejoin: round;
}

.rm-label {
    fill: var(--text-primary);
    font-size: 17px;
    font-weight: 600;
    stroke-width: 4.5px;
}

.rm-label-sm {
    fill: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    stroke-width: 4.5px;
}


/* --- legend + a11y list --- */
.route-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    justify-content: center;
    margin: 18px 0 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    list-style: none;
}

.route-map-legend li {
    display: inline-flex;
    gap: 9px;
    align-items: center;
}

.route-map-legend i {
    flex: 0 0 auto;
}

.rm-key-route {
    width: 26px;
    border-top: 3px dotted var(--primary);
}

.rm-key-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px #fff;
}

.rm-key-zone {
    width: 13px;
    height: 13px;
    border: 2px dashed var(--primary);
    border-radius: 50%;
    background: rgba(246, 173, 45, 0.18);
}

.route-city-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.map-frequency {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 8px 22px rgba(223, 115, 47, 0.24);
    color: #fff;
    font-size: 0.74rem;
}

.map-frequency .material-symbols-outlined {
    font-size: 18px;
}

.landing-process-tagline {
    margin: 34px 0 0;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 600;
    text-align: center;
}

.landing-process-tagline + .landing-center-cta {
    margin-top: 16px;
}

.landing-center-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
}

.landing-center-cta .btn-primary,
.landing-center-cta .btn-secondary {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    max-width: 100%;
    text-align: left;
}

.landing-center-cta .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 20px;
}

.landing-feature-item strong {
    margin-bottom: 2px;
    font-weight: 500;
}

.landing-feature-item span:last-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

.landing-service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(300px, 26vw, 380px);
    overflow: hidden;
    padding: 0;
    border-radius: 14px;
    background: #1f1f1f;
}

.landing-service-card::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(31, 31, 31, 0.74);
    content: "";
    pointer-events: none;
    transition: background var(--transition-standard);
}

.landing-service-card:hover::after {
    background: rgba(31, 31, 31, 0.64);
}

.landing-service-card .material-symbols-outlined {
    flex: 0 0 auto;
    font-size: 38px;
}

.landing-service-card h3 {
    margin-bottom: 8px;
    color: #fff;
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.landing-service-card p {
    max-width: 34ch;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
    line-height: 1.65;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

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

.landing-process-item {
    position: relative;
    padding-top: 0;
}

.landing-process-number {
    display: block;
    margin-bottom: 10px;
    color: var(--primary); /* match btn-primary orange */
    font-size: clamp(3rem, 5vw, 4.6rem);
    font-weight: 700;
    line-height: 0.95;
}

.landing-process-item h3 {
    margin-bottom: 10px;
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.3;
}

.landing-process-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.landing-faq {
    max-width: 860px;
    margin: 0 auto;
}

.landing-faq details {
    margin-bottom: 12px;
    padding: 0 20px;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    background: #fff;
}

.landing-faq summary {
    padding: 18px 26px 18px 0;
    cursor: pointer;
    font-weight: 500;
}

.landing-faq p {
    margin: 0 0 18px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.landing-final-cta {
    padding: 76px 0;
    background: linear-gradient(125deg, var(--primary-dark), var(--primary));
    color: #fff;
    text-align: center;
}

.landing-final-cta h2 {
    margin-bottom: 12px;
    color: #fff;
    font-weight: 500;
}

.landing-final-cta p {
    max-width: 650px;
    margin: 0 auto 26px;
    color: rgba(255, 255, 255, 0.88);
}

.landing-final-cta .btn-primary {
    background: #fff;
    color: var(--primary);
}

.landing-final-cta .btn-primary:hover {
    background: #fff;
    color: var(--primary-dark);
}

.landing-final-cta .btn-secondary {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

@media (min-width: 901px) {
    #moving-pain-points .services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

    .landing-pricing,
    .landing-proof-grid {
        grid-template-columns: 1fr;
    }

    .landing-card-grid {
        grid-template-columns: 1fr;
    }

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

    .landing-process-item:last-child {
        grid-column: 1 / -1;
    }

}

@media (max-width: 600px) {
    .landing-section {
        padding: 64px 0;
    }

    .landing-service-grid,
    .landing-process,
    .landing-split,
    .landing-pricing {
        grid-template-columns: 1fr;
    }

    .landing-process-item:last-child {
        grid-column: auto;
    }

}

@media (max-width: 900px) {
    /* The fleet lineup is a 1.9:1 photo — `cover` on a narrow screen crops it
       down to two or three crew members. On mobile the photo runs full width
       as a band at the top of the hero instead, so the whole line-up is
       visible, and the copy sits below it on solid dark. */
    .landing-hero {
        min-height: 0;
        padding: calc(52.5vw + 32px) 0 64px;
        background:
            linear-gradient(rgba(31, 31, 31, 0.18), rgba(31, 31, 31, 0.18)),
            url('../img/home_banner/jm-team-fleet-1200.webp') top center / 100% auto no-repeat,
            #1f1f1f;
    }

    .landing-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .landing-copy {
        max-width: 720px;
    }
}

@media (max-width: 520px) {
    .landing-page .container {
        padding-right: 24px;
        padding-left: 24px;
    }

    .landing-hero {
        min-height: 0;
        padding: calc(52.5vw + 24px) 0 48px;
    }

    .landing-page .top-bar-content,
    .landing-page .location-info {
        flex-wrap: wrap;
        justify-content: center;
    }

    .landing-page .location-info {
        line-height: 1.5;
        text-align: center;
    }

    .landing-page .top-bar-container {
        padding-right: 12px;
        padding-left: 12px;
    }

    .landing-page .location,
    .landing-page .license {
        font-size: 0.6rem;
    }

    .landing-page .landing-kicker {
        max-width: 100%;
        white-space: normal;
    }

    .landing-title {
        /* Scale with the viewport below ~380px. The Chinese headline is the
           tight case — line two is ~14.5 characters wide once the emphasis
           is scaled — so a fixed 1.4rem orphaned its trailing full stop. */
        font-size: min(1.4rem, 5.9vw) !important;
        /* break-word, not break-all: the latter split English mid-word
           ("Pay only for the spa / ce you use"). This only breaks a word
           that genuinely cannot fit on its own line. */
        overflow-wrap: break-word;
        white-space: normal;
    }

    /* the html[lang="en"] rule above is more specific, so English keeps 1.62 */
    .landing-title em,
    .landing-title b {
        overflow-wrap: break-word;
        font-size: 1.5em;
    }

    .landing-lead {
        font-size: 1rem;
    }

    .landing-proof {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 0;
    }

    .landing-proof-item:nth-child(2) {
        border-right: 0;
    }

    .landing-proof-item:nth-child(3) {
        padding-left: 0;
    }

    .step-fields.two-columns {
        grid-template-columns: 1fr;
    }
}

/* ---------- small-screen refinements ---------- */
@media (max-width: 700px) {
    /* three pain-point cards were sitting 2-up, leaving an orphan third card */
    #moving-pain-points .services-grid {
        grid-template-columns: 1fr;
    }

    .landing-center-cta .btn-primary,
    .landing-center-cta .btn-secondary {
        padding: 14px 20px;
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .landing-service-card {
        min-height: 260px;
    }

    .landing-price-note {
        font-size: 0.88rem;
        line-height: 1.7;
    }
}

/* form-handler status messages */
#messageSuccess,
#messageError {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.6;
}

#messageSuccess {
    background: #e8f5ec;
    color: #1b7a3e;
}

#messageError {
    background: #fdecec;
    color: #c0392b;
}

/* ---------- sticky call / quote bar (phones only) ---------- */
.mobile-cta-bar {
    display: none;
}

@media (max-width: 900px) {
    .mobile-cta-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 900;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        /* left inset clears the fixed accessibility widget in the corner */
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 66px;
        border-top: 1px solid #e8eaed;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -6px 20px rgba(32, 33, 36, 0.14);
        backdrop-filter: blur(10px);
    }

    .mobile-cta-bar a {
        display: inline-flex;
        gap: 6px;
        align-items: center;
        justify-content: center;
        padding: 13px 8px;
        border-radius: 50px;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .mobile-cta-call {
        border: 2px solid var(--primary);
        background: #fff;
        color: var(--primary);
    }

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

    .mobile-cta-bar .material-symbols-outlined {
        font-size: 20px;
    }

    /* keep the bar from covering the end of the page or the back-to-top button */
    .footer {
        padding-bottom: 96px;
    }

    .back-to-top {
        bottom: 92px;
    }
}

/* explanatory line under the route map (copy: "Not on the map? …") */
.landing-map-note {
    max-width: 760px;
    margin: 20px auto 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
    text-align: center;
}

/* licence / coverage line under the closing CTA buttons */
.landing-final-licence {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.74rem, 2.6vw, 0.85rem);
    line-height: 1.7;
    text-align: center;
}

/* inline field errors, per the client copy's form spec */
.step-field-err {
    display: none;
    margin: 6px 0 0;
    color: #c0122b;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
}

.step-field :is(input, select):user-invalid,
.step-field :is(input, select).invalid-fb {
    border-color: #c0122b;
    background: #fef2f3;
}

.step-field :is(input, select):user-invalid ~ .step-field-err,
.step-field :is(input, select).invalid-fb ~ .step-field-err {
    display: block;
}

/* closing CTA: copy pairs the pitch with a "two steps" card */
.landing-final-grid {
    display: grid;
    gap: 28px;
}

.landing-final-actions {
    justify-content: center;
    margin-bottom: 0;
}

.landing-final-card {
    padding: 26px 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(32, 33, 36, 0.18);
    color: var(--text-primary);
    text-align: center;
}

.landing-final-card h3 {
    margin: 0 0 6px;
    color: var(--text-primary);
    font-size: 1.22rem;
    font-weight: 600;
}

/* .landing-final-cta p paints text white for the band, so the card's own
   paragraphs need the section-scoped selector to win it back */
.landing-final-cta .landing-final-card-sub {
    max-width: none;
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.65;
}

.landing-final-card .btn-primary {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    background: var(--primary);
    color: #fff;
}

.landing-final-card .btn-primary:hover {
    background: var(--primary-dark);
    color: #fff;
}

.landing-final-cta .landing-final-card-or {
    max-width: none;
    margin: 16px 0 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.landing-final-card-tel {
    display: block;
    padding: 12px;
    border: 2px solid #e8eaed;
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.landing-final-card-tel:hover {
    border-color: var(--text-primary);
}

@media (min-width: 901px) {
    .landing-final-grid {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 44px;
        align-items: center;
    }

    .landing-final-copy {
        text-align: left;
    }

    .landing-final-copy p {
        margin-inline: 0;
    }

    .landing-final-actions {
        justify-content: flex-start;
    }

    .landing-final-licence {
        text-align: left;
    }
}

/* City + Zip sit on one row inside each of the "from" / "to" fields */
.step-row2 {
    display: grid;
    /* the from/to fields sit side by side on desktop, so the zip column is
       tightest there — 「郵遞區號」needs 56px of the two */
    grid-template-columns: 1.15fr 1fr;
    gap: 10px;
}

@media (max-width: 460px) {
    .step-row2 {
        gap: 8px;
    }

    .step-row2 input {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* The from/to inputs are nested in .step-row2, so the sibling selector below
   cannot reach the message; :has() covers the wrapped case. */
.step-field:has(:is(input, select):user-invalid) .step-field-err,
.step-field:has(:is(input, select).invalid-fb) .step-field-err {
    display: block;
}

/* The site's shared .section-header has no max-width, so this long headline
   ran the full container width. Scoped to the landing page's pain-points
   section so other pages using .section-header are untouched; 720px matches
   .landing-section-header's measure. */
#moving-pain-points .section-header {
    max-width: 720px;
    margin-inline: auto;
}