/* Mobile-only finishing pass. Desktop layouts remain unchanged. */
.hero-cta-mobile,
.hero-note-mobile,
.hero-intro-mobile,
.mobile-hero-panel,
.mobile-after-stats,
.mobile-swipe-hint,
.proof-address-mobile,
.footer-follow-title {
  display: none;
}

@media (max-width: 700px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-header .container {
    width: min(calc(100% - 20px), 1180px);
  }

  .site-header .nav {
    min-height: 62px;
    gap: 10px;
    padding-inline: 13px 9px;
  }

  .site-header .brand {
    min-width: 0;
    gap: 8px;
  }

  .site-header .brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }

  .site-header .brand-text {
    display: block;
    min-width: 0;
    font-size: 13px;
    line-height: 1.05;
  }

  .site-header .brand-text small {
    margin-top: 3px;
    font-size: 7px;
    letter-spacing: .14em;
  }

  .site-header .menu-btn {
    flex: 0 0 auto;
  }

  .menu-btn {
    position: relative;
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    font-size: 0 !important;
  }

  .menu-btn::before {
    content: "";
    width: 22px;
    height: 16px;
    background:
      linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
      linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
  }

  .header {
    inset: 16px 0 auto;
  }

  .header .container {
    width: min(calc(100% - 24px), 1180px);
  }

  .header .nav {
    min-height: 62px;
    gap: 10px;
    padding: 8px 10px 8px 14px;
  }

  .header .brand {
    min-width: 0;
    gap: 8px;
  }

  .header .brand-mark {
    width: 31px;
    height: 31px;
  }

  .header .brand-text {
    font-size: 13px;
  }

  .header .menu-btn {
    display: grid;
    place-items: center;
    margin-left: auto;
  }

  .header .nav.open {
    border-radius: 22px;
  }

  .header .nav.open .nav-links {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-height: calc(100svh - 104px);
    overflow-y: auto;
  }

  .hero {
    min-height: auto;
    background:
      linear-gradient(180deg, rgba(2, 17, 20, .55), rgba(2, 17, 20, .7)),
      url("/port-vehicle-terminal.png") 64% center / cover no-repeat;
  }

  .hero::before {
    opacity: .2;
    background: linear-gradient(180deg, rgba(2, 17, 20, .08), rgba(2, 17, 20, .62));
    mask-image: none;
  }

  .hero-inner {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 112px;
    padding-bottom: 28px;
  }

  .hero-copy {
    width: 100%;
    display: block;
    text-align: center;
  }

  .hero h1 {
    grid-column: 1 / -1;
    margin: 0;
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.04;
    letter-spacing: -.045em;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap;
    text-shadow: 0 3px 22px rgba(0, 0, 0, .62);
  }

  .hero h1 span {
    display: block;
    white-space: nowrap;
  }

  .hero-intro-mobile {
    display: block;
    max-width: 350px;
    margin: 15px auto 0;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    line-height: 1.48;
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .62);
  }

  .hero-lead,
  .hero-actions,
  .hero-note,
  .hero-note .faces,
  .hero-note-desktop,
  .hero-visual {
    display: none;
  }

  .hero-cta-full {
    display: none;
  }

  .hero-cta-mobile {
    display: inline;
  }

  .stats {
    display: none;
  }

  .mobile-hero-panel {
    width: 100%;
    display: grid;
    gap: 14px;
    margin-top: 15px;
    text-align: center;
  }

  .mobile-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    border: 0;
    background: transparent;
    color: var(--white);
    box-shadow: none;
    backdrop-filter: none;
  }

  .mobile-hero-stats .stat {
    min-height: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 3px 6px;
    text-align: center;
  }

  .mobile-hero-stats .stat:nth-child(odd) {
    border-right: 0;
  }

  .mobile-hero-stats .stat:nth-child(-n+2) {
    border-bottom: 0;
  }

  .mobile-hero-stats .stat-icon {
    width: 28px;
    height: 28px;
    color: var(--copper-light);
  }

  .mobile-hero-stats .stat strong {
    display: block;
    margin-top: 6px;
    color: var(--white);
    font-size: 27px;
    line-height: 1;
  }

  .mobile-hero-stats .stat span {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, .78);
    font-size: 8px;
    line-height: 1.3;
    letter-spacing: .11em;
    text-transform: uppercase;
  }

  .mobile-service {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .mobile-service .faces {
    display: flex;
    padding-left: 5px;
  }

  .mobile-service .face {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    margin-left: -5px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
    background: #123d42;
    color: #fff;
    font-size: 9px;
    font-weight: 850;
  }

  .mobile-service > span {
    color: rgba(255, 255, 255, .9);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .62);
  }

  .mobile-hero-quote {
    width: min(292px, 88%);
    min-height: 52px;
    justify-self: center;
    justify-content: center;
    padding: 0 14px 0 22px;
    font-size: 13px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .brand-showcase {
    padding: 52px 0 34px;
  }

  .brand-showcase-head {
    margin-bottom: 22px;
  }

  .brand-showcase .section-title {
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: -.05em;
    white-space: nowrap;
  }

  .brand-showcase-copy {
    max-width: 310px;
    margin: 13px auto 0;
    font-size: 14px;
    line-height: 1.42;
  }

  .brand-more {
    margin-top: 17px;
  }

  .proof-section {
    padding-top: 26px;
    padding-bottom: 32px;
  }

  .proof-section .section-head,
  .deliveries-section .section-head {
    margin-bottom: 18px;
  }

  .proof-section .section-copy,
  .deliveries-section .section-copy {
    margin-top: 17px;
    font-size: 16px;
    line-height: 1.48;
    text-align: justify;
    text-align-last: left;
  }

  .deliveries-section {
    padding-top: 26px;
  }

  .mobile-swipe-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 11px;
    color: var(--copper);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .mobile-swipe-hint span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(231, 131, 53, .5);
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
  }

  .proof-grid,
  .delivery-grid {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: -14px;
    padding: 0 14px 12px 0;
    -webkit-overflow-scrolling: touch;
  }

  .proof-grid::-webkit-scrollbar,
  .delivery-grid::-webkit-scrollbar {
    display: none;
  }

  .proof-card,
  .delivery-card {
    flex: 0 0 calc(100% - 34px);
    scroll-snap-align: start;
  }

  .proof-grid .proof-card,
  .proof-grid .proof-card:first-child {
    grid-column: auto;
    grid-row: auto;
    height: 390px;
  }

  .proof-body {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .proof-body h3 {
    font-size: 25px;
  }

  .proof-body p {
    font-size: 12px;
    line-height: 1.48;
  }

  .proof-address-full {
    display: none;
  }

  .proof-address-mobile {
    display: inline;
  }

  .delivery-card {
    min-height: 0;
  }

  .delivery-image {
    height: 210px;
  }

  .delivery-body {
    padding: 19px;
  }

  .delivery-review {
    min-height: 0;
  }

  .why-choose {
    min-height: auto;
    padding: 52px 0 44px;
  }

  .why-choose::before {
    top: 16px;
    font-size: 50px;
    letter-spacing: -.06em;
  }

  .why-choose-head {
    display: flex;
    flex-direction: column;
  }

  .why-choose-title {
    order: 1;
    font-size: 50px;
  }

  .why-license-note {
    order: 2;
    margin: 13px 0 0;
    gap: 4px 8px;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .08em;
  }

  .why-choose-intro {
    display: none;
  }

  .why-license-statement {
    order: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 310px);
    margin: 17px auto 0;
    color: rgba(255, 255, 255, .78);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    text-align: center;
    white-space: normal;
  }

  .why-license-statement::before,
  .why-license-statement::after {
    content: "";
    flex: 1 0 18px;
    height: 1px;
    background: var(--copper-light);
  }

  .document-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 25px;
  }

  .document-card {
    grid-column: span 2;
  }

  .document-card:nth-child(4) {
    grid-column: 1 / span 3;
  }

  .document-card:nth-child(5) {
    grid-column: 4 / span 3;
  }

  .document-card {
    min-width: 0;
    padding: 5px;
    border-radius: 12px;
  }

  .document-thumb {
    height: auto;
    aspect-ratio: 1 / 1.08;
    border-radius: 8px;
  }

  .document-thumb img {
    object-fit: cover;
    object-position: top center;
  }

  .document-thumb-label {
    display: none;
  }

  .document-view {
    display: none;
  }

  .document-caption {
    height: 52px;
    min-height: 52px;
    margin-top: 6px;
    padding: 7px 6px;
    display: flex;
    align-items: center;
    border-left: 2px solid var(--copper-light);
    border-radius: 0 7px 7px 0;
    background: rgba(255, 173, 102, .1);
    color: var(--copper-light);
    font-size: 9px;
    line-height: 1.2;
  }

  .document-caption span {
    display: none;
    margin-bottom: 3px;
    color: var(--copper-light);
    font-size: 6px;
    letter-spacing: .07em;
  }

  .team {
    padding-top: 52px;
    padding-bottom: 28px;
  }

  .team .section-head {
    margin-bottom: 22px;
  }

  .team .section-title {
    max-width: 330px;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.05em;
  }

  .team .section-copy {
    display: none;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .team-card {
    min-height: 250px;
    border-radius: 14px;
  }

  .team-card img {
    transform: scale(1.06);
  }

  .team-body {
    left: 12px;
    right: 12px;
    bottom: 11px;
  }

  .team-role {
    font-size: 7px;
    letter-spacing: .08em;
  }

  .team-body h3 {
    margin: 4px 0 0;
    font-size: 20px;
  }

  .team-body p,
  .team-chat {
    display: none;
  }

  .quote {
    position: relative;
    overflow: hidden;
    padding-bottom: 30px;
  }

  .quote::after {
    content: "RevoPanda";
    position: absolute;
    z-index: 0;
    top: 22px;
    left: 50%;
    color: rgba(255, 255, 255, .045);
    font-size: 52px;
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
  }

  .quote-layout {
    position: relative;
    z-index: 1;
  }

  .footer {
    padding: 20px 0 20px !important;
  }

  .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px !important;
    padding-bottom: 24px;
  }

  .footer-top > :not(.footer-brand):not(.footer-legal) {
    display: none;
  }

  .footer-brand-head {
    display: block;
    margin: 0;
  }

  .footer-logo-link {
    display: none;
  }

  .footer-follow-title {
    display: block;
    color: rgba(255, 255, 255, .86);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: none;
  }

  .footer-brand .footer-follow-title {
    margin: 0 0 18px;
  }

  .footer-socials {
    gap: 9px;
  }

  .footer-socials a {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .footer-contact-details {
    gap: 8px;
    margin-top: 18px;
  }

  .footer-contact-details a {
    font-size: 12px;
  }

  .footer-legal h4 {
    display: none;
  }

  .footer-legal .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 15px;
  }

  .footer-legal .footer-links a {
    font-size: 11px;
  }

  .footer-company {
    padding-top: 18px;
    font-size: 10px;
  }

  .site-header .nav.open .nav-links {
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .trust-hero,
  .team-hero {
    min-height: auto;
    padding-block: 44px 52px;
  }

  .team-hero .section-head {
    gap: 22px;
    margin-bottom: 32px;
  }

  .team-hero .section-head p {
    font-size: 16px;
    line-height: 1.55;
  }

  .team-hero .team-grid {
    gap: 14px;
  }

  .document-thumb {
    height: 280px;
  }

  .quote-layout {
    gap: 32px;
  }

  .quote h2 {
    font-size: 46px;
  }

  .quote-copy {
    font-size: 16px;
    line-height: 1.55;
  }

  .quote-form {
    padding: 20px;
    border-radius: 22px;
  }

  .footer {
    padding: 38px 0 22px !important;
  }

  .footer-top,
  .footer-grid {
    gap: 24px !important;
  }

  .footer-links {
    gap: 7px;
  }

  .footer-company {
    padding-top: 14px;
    line-height: 1.5;
  }

  .footer-company::after {
    margin-top: 8px;
    overflow-wrap: anywhere;
  }

  .wa-float {
    width: 52px;
    height: 52px;
    right: 12px !important;
    bottom: 12px !important;
    justify-content: center;
    padding: 8px !important;
  }

  .wa-float > :not(.wa-icon) {
    display: none;
  }

  .wa-float .wa-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
}

@media (max-width: 380px) {
  .site-header .brand-text {
    font-size: 12px;
  }

  .site-header .menu-btn {
    width: 38px;
    height: 38px;
  }

  .hero h1 {
    font-size: 28px;
  }
}

/* How it works: compact mobile process, inspection cards, and shared quote forms. */
@media (max-width: 700px) {
  .process-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; margin-top: 30px; }
  .process-flow::before { display: none; }
  .process-step { display: flex; grid-template-columns: none; flex-direction: column; align-items: center; min-height: 98px; padding: 0 2px; text-align: center; }
  .process-step:nth-child(n) { grid-column: auto; grid-row: auto; }
  .process-step:nth-child(4) { grid-column: 3; grid-row: 2; }
  .process-step:nth-child(5) { grid-column: 2; grid-row: 2; }
  .process-step:nth-child(6) { grid-column: 1; grid-row: 2; }
  .process-step:nth-child(7) { grid-column: 1; grid-row: 3; }
  .process-step:nth-child(8) { grid-column: 2; grid-row: 3; }
  .process-step:nth-child(9) { grid-column: 3; grid-row: 3; }
  .process-step::before { display: none; }
  .process-step::after { display: block; top: 10px; z-index: 5; width: auto; height: auto; background: none; color: var(--copper-light); font-size: 16px; font-weight: 800; line-height: 1; opacity: 1; }
  .process-step:nth-child(1)::after, .process-step:nth-child(2)::after, .process-step:nth-child(7)::after, .process-step:nth-child(8)::after { content: "\2192"; right: -8px; }
  .process-step:nth-child(4)::after, .process-step:nth-child(5)::after { content: "\2190"; left: -8px; }
  .process-step:nth-child(3)::after, .process-step:nth-child(6)::after, .process-step:nth-child(9)::after { display: none; }
  .process-node { width: 36px; height: 36px; margin: 0 auto 6px; box-shadow: 0 0 0 4px var(--ink); font-size: 9px; }
  .process-flow .process-step .process-node::after { display: none; }
  .process-phase-mobile, .process-step p { display: none; }
  .process-step h3 { display: block; min-height: 0; margin: 0; font-size: 11px; line-height: 1.15; letter-spacing: -.03em; }
  .process-output { min-height: 17px; margin-top: 5px; padding: 1px 5px; font-size: 5.5px; line-height: 1.12; letter-spacing: .02em; white-space: normal; }
  .inspection-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
  .inspection-card { display: flex; min-height: 232px; border-radius: 17px; }
  .inspection-visual { height: 72px; min-height: 72px; }
  .inspection-visual svg { width: 46px; height: 46px; }
  .inspection-card-body { padding: 14px 12px 16px; }
  .inspection-index { font-size: 7px; }
  .inspection-card h3 { margin: 8px 0 7px; font-size: 16px; line-height: 1.08; }
  .inspection-card p { font-size: 10px; line-height: 1.45; }
  .checklist-title { max-width: 100%; padding-bottom: 7px; font-size: clamp(22px, 6.6vw, 25px); letter-spacing: -.055em; white-space: nowrap; }
  .faq-title { font-size: clamp(25px, 7.5vw, 29px); letter-spacing: -.06em; white-space: nowrap; }
  .quote-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin-top: 18px; }
  .quote-form .field { gap: 5px; }
  .quote-form .field label { font-size: 8px; letter-spacing: .045em; }
  .quote-form .field input, .quote-form .field select { height: 44px; min-width: 0; padding: 0 10px; border-radius: 11px; font-size: 12px; }
  .quote-form .form-submit { min-height: 46px; margin-top: 16px; }
}

/* Single, uninterrupted S-curve behind the compact mobile buying flow. */
@media (max-width: 700px) {
  .process-flow { min-height: 330px; }
  .process-flow::before { display: block; z-index: 1; inset: 0; width: auto; height: auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' preserveAspectRatio='none'%3E%3Cpath d='M30 18H270C300 18 300 137 270 137H30C0 137 0 256 30 256H270' fill='none' stroke='%23c78141' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; opacity: .82; }
  .process-step { z-index: 2; }
  .process-step:nth-child(n)::before { display: none; }
  .process-step::after, .process-step:nth-child(5)::after { border: 0; border-radius: 0; background: none; width: auto; height: auto; }
  .process-step:nth-child(1)::after, .process-step:nth-child(2)::after, .process-step:nth-child(7)::after, .process-step:nth-child(8)::after { content: "\2192"; top: 9px; right: -7px; left: auto; }
  .process-step:nth-child(4)::after, .process-step:nth-child(5)::after { content: "\2190"; top: 9px; left: -7px; right: auto; }
  .process-step:nth-child(9)::after { display: none; }
}
  .wa-float .wa-icon {
    display: block;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
@media (min-width: 1021px) {
  .nav-links > a,
  .nav-item > a {
    font-size: 16px !important;
    font-weight: 800 !important;
  }
}