/* ANS shared styles.
     Motion and materials follow Apple's fluid-interface guidance translated for the web:
     feedback on press (not release), translucent chrome that content scrolls under,
     size-specific type tracking, and reduced-motion / reduced-transparency / high-contrast
     equivalents for every effect. Gesture-driven motion lives in site.js (springs, not CSS).

     Visual rules (design-taste pass, 2026-09-16): one accent, one radius scale (8px surfaces,
     6px controls), no decorative gradients, blobs, waves, dots or eyebrows; cards only where
     elevation means something (the contact form); icons are Phosphor (regular weight), inlined. */

  @font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  :root {
    --navy: #0F395C;
    --navy-deep: #0B2A44;
    --accent: #17698F;
    --ink: #211D1E;
    --muted: #46505A;
    --label: #5B6670;
    --tint: #F1F5F8;
    --tint-press: #E3EDF5;
    --border: #DCE3EA;
    --field-border: #C2CCD6;
    --error: #B3261E;
    --footer-text: #BCCEDD;
    --white: #FFFFFF;
    --page: #EAF2F8;               /* the page background: a soft light blue; white bands sit on it */
    --radius: 8px;
    --radius-control: 6px;
    --max: 1160px;
    --gutter: 24px;
    --header-h: 92px;
    /* One easing for every reversible CSS transition (mirrored on the way back automatically). */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    color-scheme: light;
  }
  * { box-sizing: border-box; }
  html {
    font-size: 100%;                /* respects the reader's text-size setting; type below is in rem */
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    margin: 0;
    font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    letter-spacing: 0;              /* body tracking stays at zero; only display sizes deviate */
    font-optical-sizing: auto;
    color: var(--ink);
    background: var(--page);
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--navy); }
  a:hover { color: var(--accent); }
  a, button { -webkit-tap-highlight-color: transparent; }   /* we draw our own press state */
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  /* Type scale: tracking tightens as size grows, leading loosens as size shrinks. */
  h1, h2, h3 { margin: 0; color: var(--navy); font-weight: 800; line-height: 1.12; text-wrap: balance; }
  h1 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.022em; }
  h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.1; letter-spacing: -0.018em; }
  h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.004em; }
  p { margin: 0; text-wrap: pretty; }
  .wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
  .lead { font-size: 1.125rem; line-height: 1.55; color: var(--muted); }
  .icon { width: 1em; height: 1em; flex-shrink: 0; }

  /* Buttons: highlight on pointer-down, instantly. Hover lifts gently; press settles back. */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; white-space: nowrap;
    font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
    border-radius: var(--radius-control); min-height: 3rem; padding: 0.75em 1.625em; border: 2px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease,
                transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
    will-change: transform;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.97); transition-duration: 80ms; }
  .btn-primary { background: var(--accent); color: var(--white); border-color: var(--accent); }
  .btn-primary:hover { background: var(--navy); border-color: var(--navy); color: var(--white); box-shadow: 0 8px 20px rgba(15, 57, 92, 0.22); }
  .btn-primary:active { background: var(--navy-deep); border-color: var(--navy-deep); box-shadow: 0 2px 6px rgba(15, 57, 92, 0.18); }
  .btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
  .btn-outline:hover { background: var(--tint); color: var(--navy); }
  .btn-outline:active { background: var(--tint-press); }
  .btn[disabled] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }

  section { scroll-margin-top: calc(var(--header-h) + 12px); }
  .section { padding-block: 96px; }
  .section-tint { background: var(--white); }   /* on the light-blue page, the alternate bands are white */
  .section-head { max-width: 62ch; margin-bottom: 48px; }
  .section-head p { margin-top: 1rem; }

  /* Header: a translucent material the page scrolls under. No hard divider at rest;
     a soft scroll-edge shadow appears only once content is actually beneath it. */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(234, 242, 248, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(15, 57, 92, 0);
    transition: box-shadow .35s var(--ease-out);
  }
  .site-header.is-stuck { box-shadow: 0 1px 0 rgba(15, 57, 92, 0.09), 0 12px 32px -16px rgba(15, 57, 92, 0.30); }
  .site-header.open { box-shadow: none; }     /* header and sheet read as one continuous material */
  .scroll-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
  .site-header .bar {
    max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h);
  }
  .brand { display: flex; align-items: center; text-decoration: none; border-radius: var(--radius-control); transition: opacity .15s ease; }
  .brand:active { opacity: .7; }
  .brand img { height: 84px; width: auto; }
  .nav { display: flex; align-items: center; gap: 4px; }
  .nav a {
    text-decoration: none; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.005em; color: var(--navy);
    padding: 0.6em 0.85em; border-radius: var(--radius-control); white-space: nowrap;
    transition: background-color .15s ease, transform .25s var(--ease-out);
  }
  .nav a:hover { background: var(--tint); color: var(--navy); }
  .nav a:active { background: var(--tint-press); transform: scale(0.96); transition-duration: 60ms; }
  .nav a[aria-current] { background: var(--tint); }
  .nav a[aria-current="location"] { color: var(--accent); }
  .nav .btn { margin-left: 12px; min-height: 3rem; padding: 0.625em 1.35em; font-size: 1.0625rem; }
  /* The nav link rules above would otherwise recolour the button; keep it a proper primary button. */
  .nav .btn-primary, .nav .btn-primary[aria-current], .mobile-nav .btn-primary, .mobile-nav .btn-primary[aria-current] { background: var(--accent); color: var(--white); }
  .nav .btn-primary:hover, .mobile-nav .btn-primary:hover { background: var(--navy); color: var(--white); }
  .nav .btn-primary:active, .mobile-nav .btn-primary:active { background: var(--navy-deep); color: var(--white); }
  .menu-toggle {
    display: none; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.6); cursor: pointer; color: var(--navy); padding: 0;
    align-items: center; justify-content: center;
    transition: background-color .15s ease, transform .25s var(--ease-out);
  }
  .menu-toggle:active { background: var(--tint-press); transform: scale(0.94); transition-duration: 60ms; }
  .menu-toggle svg { width: 26px; height: 26px; }
  .menu-toggle svg[hidden] { display: none; }

  /* Mobile menu: a sheet anchored to the header (enters and leaves along the same path, downward).
     Position, opacity and the scrim are driven per-frame by site.js from a spring, so the sheet can be
     grabbed mid-flight and thrown. The clip keeps the tucked-away sheet from showing through the header. */
  .menu-sheet { position: fixed; left: 0; right: 0; bottom: 0; top: var(--header-h); z-index: 90; overflow: hidden; }
  .menu-sheet[hidden] { display: none; }
  .sheet-scrim {
    position: absolute; inset: 0; background: rgba(11, 42, 68, 0.28); opacity: 0; touch-action: none;
  }
  .mobile-nav {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px var(--gutter) 6px;
    background: rgba(240, 245, 250, 0.9);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 24px 48px -12px rgba(15, 57, 92, 0.30);
    opacity: 0; touch-action: none; transform-origin: top center; will-change: transform, opacity;
    overscroll-behavior: contain;
  }
  .mobile-nav a {
    text-decoration: none; font-size: 1.0625rem; font-weight: 600; color: var(--navy);
    padding: 0.8em 0.5em; border-radius: var(--radius); transition: background-color .12s ease;
  }
  .mobile-nav a:hover { background: var(--tint); }
  .mobile-nav a:active { background: var(--tint-press); transition-duration: 0s; }
  .mobile-nav a[aria-current] { background: var(--tint); color: var(--accent); }
  .mobile-nav .btn { margin-top: 8px; }
  .grabber { display: block; width: 36px; height: 5px; border-radius: 3px; background: rgba(15, 57, 92, 0.22); margin: 10px auto 4px; }
  @media (max-width: 1240px) {
    .nav { gap: 0; }
    .nav a { font-size: 0.9375rem; padding: 0.625em 0.65em; }
    .nav .btn { margin-left: 6px; padding: 0.625em 1.05em; }
    .brand img { height: 72px; }
  }
  @media (max-width: 960px) {
    .nav { display: none; }
    .menu-toggle { display: inline-flex; }
  }
  @media (min-width: 961px) {
    .menu-sheet { display: none; }
  }

  /* Hero (About Us): headline and one sentence on the left, the two client photos on the right.
     No background texture; the photographs carry the section. */
  .hero { padding-block: 72px 88px; border-bottom: 1px solid var(--border); }
  .about-top {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
    gap: 64px; align-items: center;
  }
  .about-top h1 { max-width: 16ch; }
  .about-top .lead { margin-top: 1.5rem; max-width: 44ch; }
  .about-top .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.25rem; }
  /* Hero visual: the ANS mark rendered in 3D on a canvas by globe.js (spinning wireframe globe,
     the two bars orbiting it). The PNG of the mark shows only if the canvas never draws. */
  .hero-visual { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 500; margin-inline: auto; }
  .globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .globe-fallback { position: absolute; left: 50%; top: 50%; width: 62%; height: auto; transform: translate(-50%, -50%); }
  .hero-visual.has-canvas .globe-fallback { display: none; }

  /* Trusted by: a slow marquee of customer logos under the hero. Two identical tracks slide left
     by their own width, so the loop is seamless. Logos are navy silhouettes via mask-image. */
  .trusted { padding-block: 28px; border-bottom: 1px solid var(--border); }
  .trusted-row { display: flex; align-items: center; gap: 32px; }
  .trusted-label { flex-shrink: 0; font-size: 0.9375rem; font-weight: 600; color: var(--label); }
  .marquee {
    flex: 1 1 auto; min-width: 0; display: flex; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
  .marquee-track {
    list-style: none; margin: 0; padding: 0 0 0 72px; display: flex; align-items: center; gap: 72px; flex-shrink: 0;
    animation: marquee 48s linear infinite;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-track li { flex-shrink: 0; display: flex; align-items: center; }
  .logo {
    display: block; background-color: var(--navy); opacity: .82;
    -webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain;
  }
  .logo-usatoday { height: calc(24px * var(--ls, 1)); width: calc(228px * var(--ls, 1)); --logo: url("/assets/logos/usatoday.svg"); }
  .logo-hearst { height: calc(21px * var(--ls, 1)); width: calc(162px * var(--ls, 1)); --logo: url("/assets/logos/hearst.svg"); }
  .logo-dowjones { height: calc(24px * var(--ls, 1)); width: calc(121px * var(--ls, 1)); --logo: url("/assets/logos/dowjones.svg"); }
  .logo-nytco { height: calc(36px * var(--ls, 1)); width: calc(101px * var(--ls, 1)); --logo: url("/assets/logos/nytco.svg"); }
  .logo-chicagotribune { height: calc(30px * var(--ls, 1)); width: calc(197px * var(--ls, 1)); --logo: url("/assets/logos/chicagotribune.svg"); }
  .logo-orlandosentinel { height: calc(24px * var(--ls, 1)); width: calc(208px * var(--ls, 1)); --logo: url("/assets/logos/orlandosentinel.png"); }
  @keyframes marquee { to { transform: translateX(-100%); } }

  /* Benefits (still part of About Us): the client's four points, two across under the heading. */
  .benefits { padding-block: 88px 96px; }
  .benefits h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.014em; margin-bottom: 2rem; max-width: 22ch; }
  .benefit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; }
  .benefit-list li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
  .benefit-list .icon { width: 28px; height: 28px; color: var(--accent); margin-top: 1px; }
  .benefit-list p { font-weight: 600; color: var(--navy); font-size: 1.0625rem; line-height: 1.5; max-width: 40ch; }

  /* CarrierTrack: what the platform does, beside the app in hand. The photo is cropped to the phone
     and its bottom edge dissolves into the section, so the wrist does not end in a line. */
  .ct-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 64px; align-items: center; }
  .ct-label { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.75rem; }
  .ct-logo {
    display: block; width: 260px; height: calc(260px * 448 / 1176); margin-bottom: 1.25rem; background-color: var(--navy);
    -webkit-mask: url("/assets/ctt-logo-white.png") no-repeat left center / contain; mask: url("/assets/ctt-logo-white.png") no-repeat left center / contain;
  }
  .ct-grid h2 { max-width: 18ch; }
  .ct-grid .lead { margin-top: 1.25rem; max-width: 52ch; }
  .ct-features { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 22px; }
  .ct-features li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
  .ct-features .icon { width: 28px; height: 28px; color: var(--accent); margin-top: 1px; }
  .ct-features h3 { font-size: 1.0625rem; }
  .ct-features p { margin-top: 2px; color: var(--muted); font-size: 1rem; max-width: 46ch; }
  .ct-available { margin-top: 1.125rem; font-size: 0.9375rem; font-weight: 600; color: var(--navy); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .ct-available .plat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .ct-available .icon { width: 20px; height: 20px; color: var(--accent); }
  .ct-available .sep { color: var(--label); }
  .phone-figure { margin: 0; display: flex; justify-content: center; }
  .phone-figure img {
    width: 100%; max-width: 400px; height: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,0) 100%);
  }

  /* CARS: a fourth item under the features, with the full description behind a toggle.
     The detail opens by animating a grid row from 0fr to 1fr, so it slides rather than jumps. */
  .cars { margin-top: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
  .cars-toggle {
    display: grid; grid-template-columns: 28px 1fr 20px; gap: 16px; align-items: center; width: 100%; text-align: left;
    font: inherit; color: inherit; background: none; border: 0; padding: 16px 18px; cursor: pointer; border-radius: var(--radius);
  }
  .cars-toggle:hover { background: var(--tint); }
  .cars-toggle:active { background: var(--tint-press); }
  .cars-toggle > .icon { width: 28px; height: 28px; color: var(--accent); }
  .cars-tag { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
  .cars-title { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--navy); line-height: 1.3; }
  .cars-title span { font-weight: 600; color: var(--muted); }
  .cars-caret { width: 20px; height: 20px; color: var(--navy); transition: transform .3s var(--ease-out); }
  .cars-toggle[aria-expanded="true"] .cars-caret { transform: rotate(180deg); }
  .cars-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
  .cars-detail[hidden] { display: grid; }               /* hidden only means collapsed; the row height does the hiding */
  .cars-detail > div { overflow: hidden; }
  .cars-detail.is-open { grid-template-rows: 1fr; }
  .cars-detail p { color: var(--muted); font-size: 1rem; line-height: 1.6; padding-inline: 18px; max-width: 58ch; }
  .cars-detail p:first-child { padding-top: 2px; color: var(--ink); }
  .cars-detail p + p { margin-top: 0.875rem; }
  .cars-detail p:last-child { padding-bottom: 20px; }

  /* Services: six items in two columns, one rule above each. No boxes, no icons. */
  .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
  .service { border-top: 2px solid var(--navy); padding-top: 20px; }
  .service h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
  .service p { color: var(--muted); font-size: 1.0625rem; margin-top: 0.5rem; max-width: 42ch; }

  /* Delivery route strip: flat shapes in the brand palette, one 16s loop. The truck's keyframes
     were generated from the house positions (drive 2.0s, pause 1.1s at each mailbox). */
  .route-strip { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: 24px 0; overflow: hidden; }
  .route-scene { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
  .route-svg { display: block; width: 100%; height: auto; margin-inline: auto; }
  .route-svg--d { min-width: 760px; }
  .route-svg--m { display: none; }
  .route-svg .road { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; opacity: .28; }
  .house rect, .house path { fill: var(--white); stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
  .house .door { fill: var(--navy); stroke: none; }
  .house .win { fill: var(--tint); stroke: var(--navy); stroke-width: 1.5; }
  .house .post { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; }
  .house .box { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
  .house .flag { fill: var(--accent); stroke: none; transform-box: view-box; transform: rotate(90deg); animation: 16s linear infinite; }
  .truck rect, .truck path { fill: var(--navy); }
  .truck .glass { fill: var(--white); }
  .truck .stripe { fill: var(--accent); }
  .truck .wheel { fill: var(--navy-deep); }
  .truck .hub { fill: var(--white); }
  .truck { transform-box: view-box; transform: translate(-160px, 173px); animation: truck-route 16s linear infinite; }
  .house:nth-of-type(1) .flag { animation-name: flag-1; }
  .house:nth-of-type(2) .flag { animation-name: flag-2; }
  .house:nth-of-type(3) .flag { animation-name: flag-3; }
  .house:nth-of-type(4) .flag { animation-name: flag-4; }
  @keyframes truck-route {
    0.0% { transform: translate(-160px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    12.5% { transform: translate(78px, 173px); animation-timing-function: linear; }
    19.38% { transform: translate(78px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    31.87% { transform: translate(348px, 173px); animation-timing-function: linear; }
    38.75% { transform: translate(348px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    51.25% { transform: translate(618px, 173px); animation-timing-function: linear; }
    58.12% { transform: translate(618px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    70.62% { transform: translate(888px, 173px); animation-timing-function: linear; }
    77.5% { transform: translate(888px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    100.0% { transform: translate(1360px, 173px); animation-timing-function: linear; }
  }
  @keyframes flag-1 { 0%, 14.69% { transform: rotate(90deg); } 16.56%, 98.6% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
  @keyframes flag-2 { 0%, 34.06% { transform: rotate(90deg); } 35.94%, 98.6% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
  @keyframes flag-3 { 0%, 53.44% { transform: rotate(90deg); } 55.31%, 98.6% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
  @keyframes flag-4 { 0%, 72.81% { transform: rotate(90deg); } 74.69%, 98.6% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
  .route-svg--m .truck { animation-name: truck-route-m; animation-duration: 9.0s; }
  .route-svg--m .house:nth-of-type(1) .flag { animation-name: flag-m-1; animation-duration: 9.0s; }
  .route-svg--m .house:nth-of-type(2) .flag { animation-name: flag-m-2; animation-duration: 9.0s; }
  @keyframes truck-route-m {
    0.0% { transform: translate(-160px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    20.0% { transform: translate(-2px, 173px); animation-timing-function: linear; }
    31.11% { transform: translate(-2px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    51.11% { transform: translate(248px, 173px); animation-timing-function: linear; }
    62.22% { transform: translate(248px, 173px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    100.0% { transform: translate(720px, 173px); animation-timing-function: linear; }
  }
  @keyframes flag-m-1 { 0%, 23.33% { transform: rotate(90deg); } 26.67%, 98.6% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
  @keyframes flag-m-2 { 0%, 54.44% { transform: rotate(90deg); } 57.78%, 98.6% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }

  /* Contact: the page's one dark block, running straight into the footer. The team and the
     office in one place: round portraits with name, title, phone and email, then address and hours. */
  .section-contact { background: var(--navy); color: var(--footer-text); padding-block: 96px; }
  .section-contact h2 { color: var(--white); }
  .contact-head { max-width: 44ch; }
  .contact-head p { margin-top: 1rem; font-size: 1.125rem; color: var(--footer-text); }
  .members { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }
  .member img {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
    background: var(--white); box-shadow: 0 0 0 4px rgba(255,255,255,0.92), 0 10px 24px rgba(0, 0, 0, 0.28);
  }
  .member h3 { margin-top: 18px; font-size: 1.125rem; letter-spacing: -0.008em; color: var(--white); }
  .member .job { margin-top: 4px; font-size: 0.9375rem; color: var(--footer-text); line-height: 1.45; }
  .member .reach { margin-top: 10px; display: grid; gap: 4px; justify-items: start; }
  .member .reach a, .office a {
    text-decoration: none; color: var(--white); font-weight: 600; font-size: 0.9375rem; white-space: nowrap;
    border-bottom: 1px solid rgba(255,255,255,0.35); transition: border-color .15s ease;
  }
  .member .reach a:hover, .office a:hover { color: var(--white); border-bottom-color: var(--white); }
  .member .reach a:active, .office a:active { opacity: .7; }
  .office { margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.16); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 560px; }
  .office h3 { font-size: 0.9375rem; color: var(--footer-text); font-weight: 600; margin-bottom: 4px; }
  .office p { color: var(--white); font-size: 1.0625rem; line-height: 1.55; }
  .office a { font-size: 1.0625rem; }

  /* Footer */
  .site-footer { background: var(--navy-deep); color: var(--footer-text); border-top: 1px solid rgba(255,255,255,0.08); }
  .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; padding-block: 64px 40px; }
  .footer-grid img { width: 200px; height: auto; }
  .footer-grid p { font-size: 0.9375rem; line-height: 1.6; }
  .footer-tagline { margin-top: 16px; max-width: 34ch; }
  .footer-grid h3 { font-size: 0.9375rem; font-weight: 700; color: var(--white); margin-bottom: 0.875rem; }
  .footer-links { display: flex; flex-direction: column; gap: 10px; }
  .footer-links a, .footer-grid p a { color: var(--footer-text); text-decoration: none; font-size: 0.9375rem; transition: color .15s ease; }
  .footer-links a:hover, .footer-links a:active, .footer-grid p a:hover { color: var(--white); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.16); padding-block: 22px; font-size: 0.875rem; letter-spacing: 0.005em;
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  }
  .footer-bottom a { color: var(--footer-text); }

  /* Fade-in on scroll (Founder page; only when JS runs, resting state is visible). */
  .js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }

  /* Every multi-column layout collapses to one column below 860px. */
  @media (max-width: 860px) {
    .about-top, .ct-grid, .service-grid, .benefit-list { grid-template-columns: 1fr; }
    .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
    .about-top { gap: 44px; }
    .ct-grid { gap: 44px; }
    .hero-visual { max-width: 480px; }
  }
  @media (max-width: 640px) {
    .section { padding-block: 64px; }
    .trusted { padding-block: 22px; }
    .trusted-row { flex-direction: column; align-items: flex-start; gap: 14px; }
    .marquee { width: 100%; }
    .marquee-track { gap: 40px; padding-left: 40px; animation-duration: 36s; }
    .logo { --ls: .78; }
    .hero { padding-block: 40px 64px; }
    .benefits { padding-block: 56px 64px; }
    .benefit-list { gap: 22px; }
    .service-grid { gap: 32px; }
    .route-strip { padding-block: 16px 0; }
    .route-svg--d { display: none; }
    .route-svg--m { display: block; }
    .section-contact { padding-block: 64px; }
    /* ==================================================================================================
       PHONE DESIGN SYSTEM (everything below 640px; desktop is untouched).
       One language for every screen: 15px body with a fixed type scale; 40px section rhythm; each
       section opens with a compact header row (its image beside the header when it has one); content
       is presented as native-style grouped lists on rounded surfaces with hairline dividers; the
       surface colour is always the opposite of the band it sits on. Animations are unchanged.
       ================================================================================================== */
    :root { --header-h: 68px; --m-radius: 14px; --m-surface: var(--white); --m-line: rgba(15, 57, 92, 0.10); }
    .wrap { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
    .brand img { height: 50px; }
    body { font-size: 0.9375rem; line-height: 1.55; }
    h1 { font-size: 1.625rem; line-height: 1.1; }
    h2 { font-size: 1.375rem; line-height: 1.15; }
    h3 { font-size: 1rem; }
    .lead { font-size: 0.9375rem; line-height: 1.5; }
    .btn { min-height: 2.75rem; font-size: 0.9375rem; padding: 0.6em 1.1em; border-radius: 10px; }
    .section { padding-block: 40px; }
    .section-head { margin-bottom: 16px; }
    .section-head p { margin-top: 0.5rem; }

    /* Grouped list: the phone's core component. */
    .m-group { background: var(--m-surface); border-radius: var(--m-radius); padding: 4px 16px; }
    .m-group > li, .m-row { padding-block: 14px; border-top: 1px solid var(--m-line); }
    .m-group > li:first-child { border-top: 0; }

    /* Hero: headline with the globe beside it, one line of intro, two buttons. */
    .hero { padding-block: 20px 28px; border-bottom: 0; }
    .about-top { grid-template-columns: minmax(0, 1fr) 118px; gap: 8px 12px; align-items: center; }
    .about-top > div:first-child { display: contents; }
    .about-top h1 { order: 1; grid-column: 1; max-width: none; }
    .hero-visual { order: 2; grid-column: 2; aspect-ratio: 1 / 1; max-width: 118px; margin: 0; }
    .about-top .lead { order: 3; grid-column: 1 / -1; margin-top: 4px; }
    .about-top .actions { order: 4; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
    .about-top .actions .btn { padding-inline: 0.5em; }

    /* Trusted by: a single quiet line. */
    .trusted { padding-block: 14px; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); }
    .trusted-row { flex-direction: row; align-items: center; gap: 14px; }
    .trusted-label { font-size: 0.8125rem; }
    .logo { --ls: .6; }
    .marquee-track { gap: 30px; padding-left: 30px; animation-duration: 30s; }

    /* Benefits: heading, then the four points as a grouped list on a white surface. */
    .benefits { padding-block: 36px 40px; }
    .benefits h2 { font-size: 1.25rem; margin-bottom: 12px; max-width: none; }
    .benefit-list { display: block; background: var(--m-surface); border-radius: var(--m-radius); padding: 2px 16px; }
    .benefit-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-block: 13px; border-top: 1px solid var(--m-line); }
    .benefit-list li:first-child { border-top: 0; }
    .benefit-list .icon { width: 22px; height: 22px; margin-top: 0; }
    .benefit-list p { font-size: 0.9375rem; line-height: 1.45; max-width: none; }

    /* CarrierTrack (white band): logo, headline with the phone beside it, then the copy, then the
       features and the CARS toggle as one grouped list on a blue surface. */
    .ct-grid { grid-template-columns: minmax(0, 1fr) 112px; gap: 8px 12px; align-items: start; }
    .ct-grid > div { display: contents; }
    .ct-logo { order: 1; grid-column: 1 / -1; width: 148px; height: calc(148px * 448 / 1176); margin-bottom: 2px; }
    .ct-grid h2 { order: 2; grid-column: 1; max-width: none; }
    .phone-figure { order: 3; grid-column: 2; grid-row: span 2; margin: 0; padding: 0; align-self: center; background: none; }
    .phone-figure img { max-width: 112px; -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 62%, rgba(0,0,0,0) 100%); }
    .ct-available { order: 4; grid-column: 1; margin-top: 0; font-size: 0.8125rem; gap: 3px 6px; }
    .ct-available .icon { width: 16px; height: 16px; }
    .ct-grid .lead { order: 5; grid-column: 1 / -1; margin-top: 6px; }
    .ct-features { order: 6; grid-column: 1 / -1; margin-top: 12px; display: block; background: var(--page); border-radius: var(--m-radius) var(--m-radius) 0 0; padding: 2px 16px 0; }
    .ct-features li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-block: 13px; border-top: 1px solid var(--m-line); }
    .ct-features li:first-child { border-top: 0; }
    .ct-features .icon { width: 22px; height: 22px; margin-top: 1px; }
    .ct-features h3 { font-size: 0.9375rem; }
    .ct-features p { font-size: 0.875rem; margin-top: 1px; max-width: none; }
    .cars { order: 7; grid-column: 1 / -1; margin-top: 0; border: 0; border-top: 1px solid var(--m-line); border-radius: 0 0 var(--m-radius) var(--m-radius); background: var(--page); }
    .cars-toggle { padding: 13px 16px; gap: 12px; grid-template-columns: 22px 1fr 18px; border-radius: 0 0 var(--m-radius) var(--m-radius); }
    .cars-toggle:hover { background: transparent; }
    .cars-toggle > .icon { width: 22px; height: 22px; }
    .cars-tag { font-size: 0.75rem; }
    .cars-title { font-size: 0.9375rem; }
    .cars-detail p { font-size: 0.875rem; padding-inline: 16px; }

    /* Truck strip: as is, tighter. */
    .route-strip { padding-block: 12px 0; }

    /* Services: a horizontal shelf of white tiles you swipe. */
    .service-grid {
      display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      margin-inline: -20px; padding: 2px 20px 8px; scrollbar-width: none;
    }
    .service-grid::-webkit-scrollbar { display: none; }
    .service { flex: 0 0 70%; scroll-snap-align: start; border-top: 0; padding: 16px 16px 18px; background: var(--m-surface); border-radius: var(--m-radius); box-shadow: 0 1px 2px rgba(15,57,92,0.04), 0 8px 20px rgba(15,57,92,0.06); }
    .service h3 { font-size: 1rem; }
    .service p { font-size: 0.875rem; margin-top: 0.375rem; max-width: none; }

    /* Contact (navy): the team as a grouped list on a translucent surface, then the office. */
    .section-contact { padding-block: 40px; }
    .contact-head p { font-size: 0.9375rem; margin-top: 0.5rem; }
    .members { margin-top: 16px; gap: 0; background: rgba(255,255,255,0.06); border-radius: var(--m-radius); padding: 2px 14px; }
    .member { grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; padding-block: 13px; border-top: 1px solid rgba(255,255,255,0.12); }
    .member:first-child { border-top: 0; }
    .member img { width: 60px; height: 60px; box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 6px 14px rgba(0,0,0,0.25); }
    .member h3 { font-size: 0.9375rem; margin-top: 0; }
    .member .job { font-size: 0.8125rem; margin-top: 1px; }
    .member .reach { margin-top: 5px; }
    .member .reach a { font-size: 0.8125rem; }
    .office { margin-top: 20px; padding-top: 16px; }
    .office h3 { font-size: 0.8125rem; }
    .office p { font-size: 0.9375rem; }

    /* Footer: compact, two columns. */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px 16px; padding-block: 32px 20px; }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
    .footer-grid img { width: 140px; }
    .footer-grid p, .footer-links a { font-size: 0.875rem; }
    .footer-grid h3 { font-size: 0.875rem; margin-bottom: 0.5rem; }
    .footer-links { gap: 8px; }
    .footer-bottom { flex-direction: column; gap: 6px; font-size: 0.75rem; padding-block: 16px; }
    /* Phones: one person per row, portrait on the left, text on the right. */
    .members { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
    .member { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 0; align-items: start; }
    .member img { grid-column: 1; grid-row: 1 / span 3; width: 92px; height: 92px; box-shadow: 0 0 0 3px rgba(255,255,255,0.92), 0 8px 18px rgba(0, 0, 0, 0.28); }
    .member h3, .member .job, .member .reach { grid-column: 2; }
    .member h3 { margin-top: 2px; }
    .member .job { font-size: 0.875rem; }
    .member .reach { margin-top: 8px; }
    .member .reach a { font-size: 0.875rem; }
    .office { grid-template-columns: 1fr; }
  }

  /* Accessibility preferences. Reduced motion is a gentler equivalent, not the absence of feedback. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .cars-detail, .cars-caret { transition: none; }
    /* Reduced motion: the truck is parked at the second house with its flag up. */
    .truck { animation: none; transform: translate(348px, 173px); }
    .house .flag { animation: none; }
    .house:nth-of-type(1) .flag, .house:nth-of-type(2) .flag { transform: rotate(0deg); }
    /* Reduced motion: the logo row stands still, wrapped, one copy only. */
    .marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
    .marquee-track { animation: none; flex-wrap: wrap; flex-shrink: 1; width: 100%; gap: 24px 48px; padding-left: 0; }
    .marquee-track[aria-hidden] { display: none; }
    .btn, .nav a, .menu-toggle, .brand { transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease; }
    .btn:hover, .btn:active, .nav a:active, .menu-toggle:active { transform: none; }
    .btn:active, .nav a:active, .menu-toggle:active { opacity: .8; }
    .mobile-nav, .sheet-scrim { transition: opacity .2s ease; }
  }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-transparency: reduce) {
    .site-header, .mobile-nav { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .menu-toggle { background: var(--white); }
  }
  @media (prefers-contrast: more) {
    .site-header { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--navy); }
    .mobile-nav { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--navy); border-top: 0; }
  }