/* Site CSS: the things inline styles cannot express. Media queries, scroll-driven
   animation, pseudo-states, and the reduced-motion contract. */

/* ——— interaction states ——— */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-neutral-400); border: 4px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-600); }
.btn {
  white-space: nowrap;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
a[data-nav] { transition: color 160ms ease; }
[data-card] { transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), border-color 180ms ease; }

@media (hover: hover) and (pointer: fine) {
  a[data-nav]:hover { color: var(--color-accent-700); }
  [data-card]:hover { transform: translateY(-3px); border-color: var(--color-accent); }
  [data-cell]:hover { background: var(--color-neutral-100); }
}

/* ——— touch: larger hit targets, and 16px inputs so iOS never zooms the form ——— */
@media (pointer: coarse) {
  .btn { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .btn-ghost { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .btn-icon { min-height: 36px; padding: 0 !important; }
  .input { min-height: 44px; font-size: 16px; }
}

/* ——— scroll-driven photo parallax: runs off the main thread, no listeners ——— */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes nw-drift {
      from { transform: translate3d(0, -4%, 0) scale(1.06); }
      to   { transform: translate3d(0, 4%, 0) scale(1.06); }
    }
    [data-parallax] {
      animation: nw-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ——— reduced motion: keep opacity, drop movement ——— */
@media (prefers-reduced-motion: reduce) {
  [data-wall] > div,
  [data-marquee] { animation: none !important; }
  [data-parallax] { transform: none !important; }
  .btn:active { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* Responsive overrides. Selectors match the inline grid declarations.
   Three tiers: keep every layout alive as long as it reads, collapse only when
   the screen physically cannot hold two columns, then re-balance the rows. */

/* ——— tier 1 · tablets and small laptops: relax the widest rows, keep pairs ——— */
@media (max-width: 1120px) {
  div[style*="grid-template-columns: minmax(0, 1.2fr) repeat(3"],
  footer div[style*="grid-template-columns: minmax(0, 1.2fr) repeat(3"],
  footer > div:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  div[style*="repeat(6, minmax(0, 1fr))"],
  section[data-screen-label="Coverage teaser"] > div:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  section[data-screen-label="Clients"] div[style*="repeat(5"],
  section[data-screen-label="Clients"] > div > div[data-reveal] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  section[data-screen-label="Clients"] div[style*="repeat(5"] > div:last-child { grid-column: span 2 !important; }
  [data-parallax-wrap] { min-height: 380px !important; }
  section[data-screen-label="Map"] iframe { height: 560px !important; }
}

/* ——— tier 1.5 · landscape phones and portrait tablets (≤960): an image and text
       never share a row. Sections collapse to one column and the divider that ran
       down the middle re-draws across the top of the stacked block. ——— */
@media (max-width: 960px) {
  section[data-screen-label="Intro"] > div,
  section[data-screen-label="About"] > div,
  section[data-screen-label="Why choose us"] > div,
  section[data-screen-label="Track shipment"] > div,
  section[data-screen-label="Closing banner"] > div,
  section[data-screen-label="Services intro"] > div,
  section[data-screen-label="Road freight"] > div,
  section[data-screen-label="Air freight"] > div,
  section[data-screen-label="Clearance hero"] > div,
  section[data-screen-label="Documents checklist"] > div,
  section[data-screen-label="International reach"] > div,
  section[data-screen-label="Team hero"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-screen-label="Intro"] > div > div:first-child,
  section[data-screen-label="About"] > div > div:first-child,
  section[data-screen-label="Track shipment"] > div > div:first-child,
  section[data-screen-label="Services intro"] > div > div:first-child,
  section[data-screen-label="Road freight"] > div > div:first-child,
  section[data-screen-label="Air freight"] > div > div:first-child,
  section[data-screen-label="Clearance hero"] > div > div:first-child,
  section[data-screen-label="Documents checklist"] > div > div:first-child,
  section[data-screen-label="International reach"] > div > div:first-child,
  section[data-screen-label="Team hero"] > div > div:first-child {
    border-right: 0 !important;
    border-bottom: 2px solid var(--color-divider) !important;
  }
  section[data-screen-label="Intro"] > div > div:first-child,
  section[data-screen-label="About"] > div > div:first-child,
  section[data-screen-label="Track shipment"] > div > div:first-child,
  section[data-screen-label="Services intro"] > div > div:first-child,
  section[data-screen-label="Air freight"] > div > div:first-child,
  section[data-screen-label="Clearance hero"] > div > div:first-child,
  section[data-screen-label="Documents checklist"] > div > div:first-child,
  section[data-screen-label="International reach"] > div > div:first-child,
  section[data-screen-label="Team hero"] > div > div:first-child {
    padding: 56px 24px 56px !important;
  }
  /* header: the logo and the full link row no longer share a line on tablets */
  header > div { flex-wrap: wrap !important; gap: 12px 16px !important; padding: 12px 16px !important; }
  header nav { margin-left: 0 !important; width: 100% !important; gap: 10px 16px !important; row-gap: 8px !important; }
}

/* ——— tier 2 · phones (≤680): only the pairs that cannot hold two columns stack.
       When they do, the border re-draws across the section, not down the middle ——— */
@media (max-width: 680px) {
  div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"],
  div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr)"],
  div[style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr)"],
  div[style*="grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr)"],
  div[style*="grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr)"],
  div[style*="grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr)"],
  div[style*="grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr)"],
  div[style*="grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr)"],
  div[style*="grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="border-right: 2px solid var(--color-divider)"] {
    border-right: 0 !important;
    border-bottom: 2px solid var(--color-divider) !important;
  }
  [data-parallax-wrap][style*="border-right"] { border-right: 0 !important; }
  /* hero text columns: trim the big asymmetric paddings to the 16px gutter */
  section > div > div[style*="padding: 4"],
  section > div > div[style*="padding: 5"],
  section > div > div[style*="padding: 6"],
  section > div > div[style*="padding: 7"],
  section > div > div[style*="padding: 8"] {
    padding: 40px 16px !important;
  }
  section[data-screen-label="Brand"] > div > div { padding: 40px 16px 40px !important; }
  /* hero call-to-actions: full-width stacked buttons, nothing squeezed */
  [data-cta-group] { display: grid !important; gap: 12px !important; }
  [data-cta-group] .btn { width: 100% !important; min-height: 48px !important; }
  /* cards and cells: let tracks shrink and never let a word spill past the box */
  [data-card], [data-cell] { min-width: 0 !important; }
  [data-card] *, [data-cell] * { overflow-wrap: anywhere; }
  /* services bento cards: photo goes above the text, never beside it */
  section[data-screen-label="Services"] > div:last-child > a[style*="132px minmax(0, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-screen-label="Services"] > div:last-child > a[style*="132px minmax(0, 1fr)"] > div:first-child {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    background-size: cover !important;
  }
}

/* ——— tier 3 · phones (≤760): balance the cell grids, no orphan columns ———
       Balances repeat(3/4/6) into clean pairs; odd counts get a deliberate span. */
@media (max-width: 760px) {
  div[style*="repeat(4, minmax(0, 1fr))"],
  div[style*="repeat(3, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  div[style*="repeat(6, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Coverage cells: 11 items in two columns orphan the last one — give it a deliberate full-width end */
  section[data-screen-label="Coverage teaser"] div[data-cell]:last-child { grid-column: span 2 !important; }
  div[style*="border-right: 2px solid rgba(245,245,246,0.25)"] {
    border-right: 0 !important;
    border-bottom: 2px solid rgba(245,245,246,0.25) !important;
  }
  section[data-screen-label="Stats"] > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  section[data-screen-label="Stats"] > div > div:not(:last-child) {
    border-right: 0 !important;
    border-bottom: 2px solid rgba(245,245,246,0.25) !important;
  }
  section[data-screen-label="Services"] > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  section[data-screen-label="Services"] > div:last-child > a:first-child { grid-column: span 2 !important; }
  h1 { font-size: clamp(30px, 8.5vw, 42px) !important; }
  h2 { font-size: clamp(24px, 6.6vw, 34px) !important; }
  header > div { gap: 10px 16px !important; padding: 10px 16px !important; }
  header nav { gap: 6px 16px !important; }
  header nav a[data-nav] { font-size: 12px !important; padding: 4px 0 !important; line-height: 1.2 !important; }
  header nav .btn { padding: 8px 14px !important; font-size: 12px !important; }
  header img { height: 34px !important; }
  section > div { padding-left: 16px !important; padding-right: 16px !important; }
  /* Services bento: road spans the full width, air and sea sit side by side */
  section[data-screen-label="Services"] > div[style*="grid-template-columns: minmax(0, 1.4fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  section[data-screen-label="Services"] div[style*="grid-row: span 2"] { grid-column: span 2 !important; }
  /* Sea freight detail: no half-empty rows — stack cleanly */
  section[data-screen-label="Sea freight"] > div { grid-template-columns: minmax(0, 1fr) !important; }
  section[data-screen-label="Sea freight"] div[style*="grid-column: span 2"] { grid-column: 1 / -1 !important; }
  section[data-screen-label="Sea freight"] div[style*="height: 300px"] { height: 220px !important; }
  /* Credentials line: 3 items balance to 2 + a deliberate full-width end */
  section[data-screen-label="Clients"] div[style*="margin-top: 32px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  section[data-screen-label="Clients"] div[style*="margin-top: 32px"] > div:last-child { grid-column: span 2 !important; }
  [data-parallax-wrap] { min-height: 280px !important; }
  [data-wall] { display: none !important; }
  section[data-screen-label="Map"] iframe { height: 420px !important; }
  table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
}

/* ——— airports strip: keep the 5-up row until narrow, then pair with a balanced end ——— */
@media (max-width: 820px) {
  section[data-screen-label="Airports"] div[style*="repeat(5"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  section[data-screen-label="Airports"] div[style*="repeat(5"] > div:last-child { grid-column: span 2 !important; }
}

/* ——— narrow phones (≤560): collapse the last wide rows and the footer stacks ——— */
@media (max-width: 560px) {
  section[data-screen-label="Services"] > div[style*="grid-template-columns: minmax(0, 1.4fr"],
  section[data-screen-label="Services"] > div:last-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  footer div[style*="grid-template-columns: minmax(0, 1.2fr) repeat(3"],
  footer div[style*="grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr)"],
  footer > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-screen-label="Footer CTA"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-screen-label="Footer CTA"] > div .btn { width: 100% !important; }
  header nav { flex-wrap: wrap !important; justify-content: space-between !important; gap: 10px 6px !important; width: 100% !important; overflow: visible !important; }
  header nav a[data-nav] { flex: 0 0 auto !important; white-space: nowrap !important; font-size: 11px !important; letter-spacing: 0.02em !important; padding: 2px 0 !important; }
  header nav .btn { order: 9 !important; flex: 0 0 100% !important; width: 100% !important; justify-content: flex-start !important; }
  /* narrow phones: profile cards become a swipe rail instead of one stretched column;
     scroll hides its scrollbar and each card snaps into view */
  section[data-screen-label="People"] > div:last-child {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: min(78vw, 300px) !important;
    gap: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 6px !important;
  }
  section[data-screen-label="People"] > div:last-child > [data-card] { scroll-snap-align: start !important; }
  section[data-screen-label="People"] > div:last-child::-webkit-scrollbar { display: none !important; }
  /* quote form: the two-field row stacks so inputs stay comfortably tall and tappable */
  section[data-screen-label="Quote form"] div[style*="repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* small tile grids stay in pairs — a one-column stat or credential block reads as stretched */
  /* the border-station names stack into one tidy list */
  section[data-screen-label="Documents checklist"] div[style*="repeat(2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ——— services bento on phones: one card per row. The road card keeps its inline
       two-row span on wide screens, which on a narrow grid pushed air and sea into a
       squeezed stack beside it — clear the span and run all three full width. ——— */
@media (max-width: 760px) {
  section[data-screen-label="Services"] > div[style*="1.4fr"]:last-child {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 16px !important;
  }
  section[data-screen-label="Services"] > div:last-child > a[href$="#road"] {
    grid-row: auto !important;
    grid-column: auto !important;
  }
  section[data-screen-label="Services"] > div:last-child > a[href$="#road"] > div:first-child {
    min-height: 200px !important;
  }
  section[data-screen-label="Services"] > div:last-child > a[style*="132px minmax(0, 1fr)"] {
    grid-template-columns: 132px minmax(0, 1fr) !important;
  }
  section[data-screen-label="Services"] > div:last-child > a[style*="132px minmax(0, 1fr)"] > div:first-child {
    aspect-ratio: auto !important;
    min-height: 140px !important;
  }
}

/* ——— clearance process: static step rows ——— */
@media (max-width: 900px) {
  [data-step-row] { grid-template-columns: 72px minmax(0, 1fr) !important; gap: 20px !important; padding: 28px 0 !important; }
  [data-step-row] > div:last-child { grid-column: 1 / -1 !important; height: 200px !important; }
  [data-step-row] > div:first-child { font-size: 32px !important; }
}
@media (max-width: 560px) {
  [data-step-row] { grid-template-columns: 56px minmax(0, 1fr) !important; }
  [data-step-row] > div:last-child { height: 170px !important; }
}

/* ——— capability strip and clearance regimes read as a list on phones ——— */
@media (max-width: 760px) {
  section[data-screen-label="Capability strip"] > div,
  section[data-screen-label="Clearance regimes"] > div[data-regime-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-screen-label="Capability strip"] > div > [data-cell] {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 16px 4px !important;
  }
  section[data-screen-label="Capability strip"] [data-cell] > div { margin-top: 0 !important; font-size: 16px !important; }
  section[data-screen-label="Clearance regimes"] > [data-regime-grid] > div {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 6px 14px !important;
    padding: 20px 4px !important;
  }
  section[data-screen-label="Clearance regimes"] > [data-regime-grid] > div > svg,
  section[data-screen-label="Clearance regimes"] > [data-regime-grid] > div > i { grid-row: 1 !important; }
  section[data-screen-label="Clearance regimes"] > [data-regime-grid] > div > h3 { grid-column: 2 !important; margin: 0 !important; font-size: 18px !important; }
  section[data-screen-label="Clearance regimes"] > [data-regime-grid] > div > p { grid-column: 2 !important; }
}

/* ——— legal pages (Terms, Privacy): the sticky contents rail folds into a
       horizontal chip row above the prose once there is no room beside it ——— */
@media (max-width: 900px) {
  section[data-screen-label="Terms body"] > div,
  section[data-screen-label="Privacy body"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  [data-toc-wrap] {
    border-right: 0 !important;
    border-bottom: 2px solid var(--color-divider) !important;
    padding: 28px 0 24px !important;
  }
  [data-toc-wrap] > div { position: static !important; padding-right: 0 !important; }
  [data-toc] {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  [data-toc]::-webkit-scrollbar { display: none !important; }
  [data-toc] a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    border: 2px solid var(--color-divider) !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  section[data-screen-label="Terms body"] [data-legal],
  section[data-screen-label="Privacy body"] [data-legal] { padding: 8px 0 56px !important; }
}
@media (max-width: 680px) {
  [data-legal] > section { padding: 26px 0 !important; }
  [data-legal] p, [data-legal] li { font-size: 15px !important; }
  section[data-screen-label="Terms hero"] > div,
  section[data-screen-label="Privacy hero"] > div { padding: 44px 16px 40px !important; }
}

/* ——— 404: the link list drops below the number block ——— */
@media (max-width: 860px) {
  section[data-screen-label="404"] > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
    padding: 56px 24px 64px !important;
  }
}
@media (max-width: 560px) {
  section[data-screen-label="404"] > div { padding: 40px 16px 52px !important; }
  section[data-screen-label="404"] .btn { width: 100% !important; justify-content: flex-start !important; }
  section[data-screen-label="404"] > div > div:first-child > div:last-child { display: grid !important; gap: 10px !important; }
}

/* ——— hero video plate ———
       The slogan sits over footage, so the plate has to stay tall enough for the type
       while the truck keeps its framing. Each step trades aspect for height and pulls
       the crop further right, where the trailer and cab are. ——— */
[data-hero-video] { background: var(--color-neutral-900); }

@media (max-width: 1120px) {
  section[data-screen-label="Brand"] > [data-logo-reveal] {
    aspect-ratio: 4 / 3 !important;
    max-height: 78vh !important;
  }
}
@media (max-width: 860px) {
  section[data-screen-label="Brand"] > [data-logo-reveal] {
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    min-height: 480px !important;
  }
  section[data-screen-label="Brand"] [data-hero-video] { object-position: 46% 50% !important; }
  /* the left-to-right scrim cannot carry a one-column layout — go bottom-up */
  section[data-screen-label="Brand"] > [data-logo-reveal] > div[aria-hidden]:first-of-type {
    background: linear-gradient(180deg, rgba(26,25,24,0.42) 0%, rgba(26,25,24,0) 34%) !important;
  }
  section[data-screen-label="Brand"] > [data-logo-reveal] > div[aria-hidden]:nth-of-type(2) {
    background: linear-gradient(0deg, rgba(26,25,24,0.9) 0%, rgba(26,25,24,0.62) 34%, rgba(26,25,24,0) 66%) !important;
  }
  section[data-screen-label="Brand"] [data-hero-line] { max-width: 34ch !important; }
  section[data-screen-label="Brand"] .btn { flex: 0 0 auto !important; justify-content: flex-start !important; }
}
@media (max-width: 680px) {
  section[data-screen-label="Brand"] > [data-logo-reveal] {
    aspect-ratio: 4 / 5 !important;
    min-height: 520px !important;
  }
  section[data-screen-label="Brand"] [data-hero-video] { object-position: 52% 50% !important; }
  section[data-screen-label="Brand"] [data-hero-kicker] { font-size: 11px !important; margin-bottom: 14px !important; }
  section[data-screen-label="Brand"] h1 { font-size: clamp(32px, 9.6vw, 46px) !important; max-width: 14ch !important; }
  section[data-screen-label="Brand"] p { font-size: 15px !important; margin-top: 16px !important; max-width: none !important; }
  section[data-screen-label="Brand"] [data-hero-line] { max-width: none !important; }
}
@media (max-width: 420px) {
  section[data-screen-label="Brand"] > [data-logo-reveal] {
    aspect-ratio: 3 / 4 !important;
    min-height: 540px !important;
  }
  section[data-screen-label="Brand"] h1 { font-size: clamp(30px, 10.4vw, 40px) !important; }
  section[data-screen-label="Brand"] p { font-size: 14px !important; }
}
/* short landscape phones: never let the plate outgrow the viewport */
@media (max-height: 520px) and (orientation: landscape) {
  section[data-screen-label="Brand"] > [data-logo-reveal] {
    aspect-ratio: auto !important;
    height: 100svh !important;
    min-height: 0 !important;
  }
  section[data-screen-label="Brand"] h1 { font-size: clamp(26px, 5.4vw, 38px) !important; }
  section[data-screen-label="Brand"] p { display: none !important; }
}
/* where the browser refuses autoplay, the composited still stays visible behind it */
@media (prefers-reduced-motion: reduce) {
  [data-hero-video] { display: none !important; }
}

/* ——— divisions read as a list on phones ——— */
@media (max-width: 760px) {
  section[data-screen-label="Divisions"] > div > div[data-division-grid] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  section[data-screen-label="Divisions"] > div > [data-division-grid] > div {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 4px 14px !important;
    padding: 18px 4px !important;
  }
  section[data-screen-label="Divisions"] > div > [data-division-grid] > div > svg,
  section[data-screen-label="Divisions"] > div > [data-division-grid] > div > i { grid-row: 1 !important; }
  section[data-screen-label="Divisions"] > div > [data-division-grid] > div > h4 { grid-column: 2 !important; margin: 0 !important; }
  section[data-screen-label="Divisions"] > div > [data-division-grid] > div > p { grid-column: 2 !important; }
}

/* ——— request a quote: fields stack early, the rail breathes ——— */
@media (max-width: 760px) {
  section[data-screen-label="Quote form"] > div { grid-template-columns: minmax(0, 1fr) !important; }
  section[data-screen-label="Quote form"] form[data-quote] { grid-template-columns: minmax(0, 1fr) !important; }
  section[data-screen-label="Quote form"] > div > div:first-child {
    padding: 36px 16px 40px !important;
    border-right: 0 !important;
    border-bottom: 2px solid var(--color-divider) !important;
  }
  section[data-screen-label="Quote form"] > div > div:last-child > div { padding-left: 16px !important; padding-right: 16px !important; }
  section[data-screen-label="Quote form"] .input { width: 100% !important; box-sizing: border-box !important; }
  section[data-screen-label="Quote form"] .btn[type="submit"] { width: 100% !important; }
  section[data-screen-label="Quote form"] iframe { min-height: 240px !important; height: 240px !important; }
  section[data-screen-label="Contact hero"] > div { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; padding: 40px 16px 32px !important; }
}