/* 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: 104px;
    /* 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; }
  #services .section-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 56px; align-items: end; }
  #services .section-head p { margin-top: 0; max-width: 56ch; }
  @media (max-width: 900px) { #services .section-head { grid-template-columns: 1fr; } #services .section-head p { margin-top: .5rem; } }

  /* 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.94);
    -webkit-backdrop-filter: blur(20px) saturate(110%);
    backdrop-filter: blur(20px) saturate(110%);
    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); }
  /* While the CarrierTrack stage is pinned under it (ct-scene.js sets the class) the header is solid:
     a backdrop blur sampling a live WebGL canvas every frame is a compositing hazard, and the stage
     fades to the page colour under the header anyway, so nothing visible changes. */
  body.ct-pinned .site-header { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .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: 96px; 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: 82px; }
  }
  @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: 88px 96px; border-bottom: 1px solid var(--border); }
  .about-top {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(300px, 1.15fr);
    gap: 72px; 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: the ANS lockup. The globe (globe.js, spinning, with the bands) sits directly left of
     the lettering, in the logo file's proportions: mark and wordmark share one height (--lk), the mark
     box is 1.06x that so the bands clear, with a hair of space between. The wordmark is the logo's
     lettering used as a mask over a dark gradient, with a light edge above and a soft shadow below,
     so it reads as a bevelled solid rather than flat ink. */
  .hero-lockup { --lk: clamp(112px, 9.2vw, 158px); display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; max-width: 100%; margin-inline: auto; padding-block: 24px; }
  .lockup-mark { position: relative; flex: 0 0 auto; width: calc(var(--lk) * 1.42); height: calc(var(--lk) * 1.42); margin-right: calc(var(--lk) * -0.02); }
  .globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .globe-fallback { position: absolute; left: 50%; top: 50%; width: 92%; height: auto; transform: translate(-50%, -50%); }
  .lockup-mark.has-canvas .globe-fallback { display: none; }
  .lockup-word-wrap { display: block; flex: 0 0 auto; margin-top: calc(var(--lk) * 0.16); filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.55)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10)) drop-shadow(0 4px 6px rgba(11, 42, 68, 0.28)); }
  .lockup-word {
    display: block; height: var(--lk); width: calc(var(--lk) * 2000 / 693);
    background: linear-gradient(180deg, #3a3d44 0%, #1c1e23 38%, #0b0c0f 62%, #15171b 100%);
    -webkit-mask: url("/assets/ans-wordmark-hd.png") center / contain no-repeat; mask: url("/assets/ans-wordmark-hd.png") center / contain no-repeat;
  }

  /* 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 shown in their own brand colours (the
     client asked for no recolouring), sized to roughly equal visual area. */
  .trusted { padding-block: 32px; 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 92s 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: var(--logo) no-repeat center / contain; }
  .logo-hearst { height: calc(32px * var(--ls, 1)); width: calc(250px * var(--ls, 1)); --logo: url("/assets/logos/hearst.svg"); }
  .logo-usatoday { height: calc(29px * var(--ls, 1)); width: calc(275px * var(--ls, 1)); --logo: url("/assets/logos/usatoday.svg"); }
  .logo-dowjones { height: calc(29px * var(--ls, 1)); width: calc(245px * var(--ls, 1)); --logo: url("/assets/logos/dowjones-wordmark.svg"); }
  .logo-nytco { height: calc(44px * var(--ls, 1)); width: calc(204px * var(--ls, 1)); --logo: url("/assets/logos/nytco-lockup.svg"); }
  .logo-tribunepublishing { height: calc(50px * var(--ls, 1)); width: calc(170px * var(--ls, 1)); --logo: url("/assets/logos/tribunepublishing.svg"); }
  .logo-unionleader { height: calc(34px * var(--ls, 1)); width: calc(236px * var(--ls, 1)); --logo: url("/assets/logos/unionleader.svg"); }
  .logo-mcclatchy { height: calc(33px * var(--ls, 1)); width: calc(238px * var(--ls, 1)); --logo: url("/assets/logos/mcclatchy.svg"); }
  .logo-newscorp { height: calc(46px * var(--ls, 1)); width: calc(185px * var(--ls, 1)); --logo: url("/assets/logos/newscorp.svg"); }
  .logo-advancelocal { height: calc(25px * var(--ls, 1)); width: calc(293px * var(--ls, 1)); --logo: url("/assets/logos/advancelocal.png"); }
  .logo-coxenterprises { height: calc(56px * var(--ls, 1)); width: calc(120px * var(--ls, 1)); --logo: url("/assets/logos/coxenterprises.svg"); }
  @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(3, minmax(0, 1fr)); gap: 28px 40px; }
  .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: 30ch; }
  /* Benefits with charts: chart, one big word, then the original sentence. The finished state is the
     default; .anim (added by site.js when motion is allowed) sets the start state and .in plays it. */
  .benefit-charts li { display: flex; flex-direction: column; gap: 0; padding: 26px 26px 24px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 40px -30px rgba(15, 57, 92, 0.35); }
  .benefit-charts p { font-weight: 500; color: var(--muted); font-size: 1rem; max-width: none; margin-top: 10px; }
  .bword { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--navy); margin-top: 22px; }
  .bchart { display: block; width: 100%; max-width: 240px; height: auto; overflow: visible; }
  .bc-grid { stroke: var(--border); stroke-width: 1.5; }
  .bc-cost { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .bc-end { fill: var(--accent); }
  .bchart-bars rect { fill: var(--accent); opacity: .85; transform-box: fill-box; transform-origin: 50% 100%; }
  .bc-fixed { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .45; }
  .bchart-week circle { fill: var(--accent); }
  .bchart-week path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .bchart-week text { font-family: inherit; font-size: 11px; font-weight: 700; fill: var(--label); text-anchor: middle; }
  /* start state */
  .benefit-charts.anim .bc-cost { stroke-dashoffset: 1; }
  .benefit-charts.anim .bc-end { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
  .benefit-charts.anim .bchart-bars rect { transform: scaleY(var(--f)); }
  .benefit-charts.anim .bc-fixed { opacity: 0; }
  .benefit-charts.anim .bchart-week circle { fill: transparent; stroke: var(--field-border); stroke-width: 1.5; }
  .benefit-charts.anim .bchart-week path { stroke-dashoffset: 1; }
  /* play */
  .benefit-charts.in .bc-cost { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-out) .15s; }
  .benefit-charts.in .bc-end { opacity: 1; transform: none; transition: opacity .3s ease 1.5s, transform .4s var(--ease-out) 1.5s; }
  .benefit-charts.in .bchart-bars rect { transform: scaleY(1); transition: transform 1s var(--ease-out) calc(.35s + var(--i) * 70ms); }
  .benefit-charts.in .bc-fixed { opacity: .45; transition: opacity .5s ease 1.3s; }
  .benefit-charts.in .bchart-week circle { fill: var(--accent); stroke: var(--accent); transition: fill .25s ease calc(.4s + var(--i) * 160ms), stroke .25s ease calc(.4s + var(--i) * 160ms); }
  .benefit-charts.in .bchart-week path { stroke-dashoffset: 0; transition: stroke-dashoffset .3s var(--ease-out) calc(.5s + var(--i) * 160ms); }

  /* 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-blurb { display: block; margin-top: 5px; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--muted); max-width: 62ch; }
  .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; }
  .service-more { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
  .service-more span { color: var(--muted); font-size: 1rem; }

  /* Delivery route strip: flat shapes in the brand palette. Houses stand on a ground line, the road
     is a second line in front of them, and each garage has a driveway down to the road. A car pulls
     up short of each driveway and tosses a rolled newspaper onto it. Everything below the
     "route:gen" marker is generated by gen-route.py from the house positions and timings. */
  .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 .ground { stroke: var(--navy); stroke-width: 2; stroke-linecap: round; opacity: .16; }
  .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 .drive { fill: var(--tint-press); stroke: none; }
  .house .gdoor { fill: var(--tint); stroke-width: 1.5; }
  .house .slat { fill: none; stroke-width: 1.5; opacity: .45; }
  .house .door { fill: var(--navy); stroke: none; }
  .house .win { fill: var(--tint); stroke: var(--navy); stroke-width: 1.5; }
  .house .roll { fill: var(--white); stroke: var(--navy); stroke-width: 1.5; }
  .house .band { fill: var(--accent); stroke: none; }
  .house .ink { fill: none; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
  .paper-x, .paper-y, .car, .car-body { transform-box: view-box; transform-origin: 0 0; }
  .paper-x { opacity: 0; }
  .paper-y { transform: translate(0px, 179px) rotate(352deg); }
  .car { transform: translate(-160px, 199px); }
  .car .shell { fill: var(--accent); }
  .car .glass { fill: var(--white); }
  .car .arch { fill: var(--white); }   /* solid wheel arches: nothing behind the car shows through the gap */
  .car .lamp { fill: var(--white); }
  .car .handle { fill: var(--navy-deep); opacity: .55; }
  .car .wheel { fill: var(--navy-deep); }
  .car .hub { fill: var(--white); }
  /* route:gen start */
  .car { animation: car-route 16s linear infinite; }
  .car-body { animation: car-dip 16s ease-in-out infinite; }
  .paper-x, .paper-y { animation-duration: 16s; animation-timing-function: linear; animation-iteration-count: infinite; }
  @keyframes car-route {
    0% { transform: translate(-160px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    12.5% { transform: translate(74px, 199px); animation-timing-function: linear; }
    19.38% { transform: translate(74px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    31.87% { transform: translate(344px, 199px); animation-timing-function: linear; }
    38.75% { transform: translate(344px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    51.25% { transform: translate(614px, 199px); animation-timing-function: linear; }
    58.12% { transform: translate(614px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    70.62% { transform: translate(884px, 199px); animation-timing-function: linear; }
    77.5% { transform: translate(884px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    100% { transform: translate(1360px, 199px); }
  }
  @keyframes car-dip { 0.0%, 11.75%, 14.62%, 31.12%, 34.0%, 50.5%, 53.37%, 69.88%, 72.75%, 100% { transform: translateY(0px); } 13.0%, 32.38%, 51.75%, 71.12% { transform: translateY(2.2px); } }
  @keyframes paper-x-1 { 0%, 13.87% { transform: translate(136px, 0px); opacity: 0; } 13.88% { transform: translate(136px, 0px); opacity: 1; animation-timing-function: linear; } 17.62% { transform: translate(201px, 0px); opacity: 1; animation-timing-function: ease-out; } 19.19%, 98.6% { transform: translate(205px, 0px); opacity: 1; } 99.5%, 100% { transform: translate(205px, 0px); opacity: 0; } }
  @keyframes paper-y-1 { 0%, 13.88% { transform: translate(0px, 157px) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 15.45% { transform: translate(0px, 131px) rotate(150deg); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.55); } 17.62% { transform: translate(0px, 179px) rotate(352deg); animation-timing-function: ease-out; } 18.33% { transform: translate(0px, 173.5px) rotate(358deg); animation-timing-function: ease-in; } 19.19%, 100% { transform: translate(0px, 179px) rotate(352deg); } }
  .house:nth-of-type(1) .paper-x { animation-name: paper-x-1; }
  .house:nth-of-type(1) .paper-y { animation-name: paper-y-1; }
  @keyframes paper-x-2 { 0%, 33.24% { transform: translate(406px, 0px); opacity: 0; } 33.25% { transform: translate(406px, 0px); opacity: 1; animation-timing-function: linear; } 37.0% { transform: translate(471px, 0px); opacity: 1; animation-timing-function: ease-out; } 38.56%, 98.6% { transform: translate(475px, 0px); opacity: 1; } 99.5%, 100% { transform: translate(475px, 0px); opacity: 0; } }
  @keyframes paper-y-2 { 0%, 33.25% { transform: translate(0px, 157px) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 34.82% { transform: translate(0px, 131px) rotate(150deg); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.55); } 37.0% { transform: translate(0px, 179px) rotate(352deg); animation-timing-function: ease-out; } 37.7% { transform: translate(0px, 173.5px) rotate(358deg); animation-timing-function: ease-in; } 38.56%, 100% { transform: translate(0px, 179px) rotate(352deg); } }
  .house:nth-of-type(2) .paper-x { animation-name: paper-x-2; }
  .house:nth-of-type(2) .paper-y { animation-name: paper-y-2; }
  @keyframes paper-x-3 { 0%, 52.61% { transform: translate(676px, 0px); opacity: 0; } 52.62% { transform: translate(676px, 0px); opacity: 1; animation-timing-function: linear; } 56.38% { transform: translate(741px, 0px); opacity: 1; animation-timing-function: ease-out; } 57.94%, 98.6% { transform: translate(745px, 0px); opacity: 1; } 99.5%, 100% { transform: translate(745px, 0px); opacity: 0; } }
  @keyframes paper-y-3 { 0%, 52.62% { transform: translate(0px, 157px) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 54.2% { transform: translate(0px, 131px) rotate(150deg); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.55); } 56.38% { transform: translate(0px, 179px) rotate(352deg); animation-timing-function: ease-out; } 57.08% { transform: translate(0px, 173.5px) rotate(358deg); animation-timing-function: ease-in; } 57.94%, 100% { transform: translate(0px, 179px) rotate(352deg); } }
  .house:nth-of-type(3) .paper-x { animation-name: paper-x-3; }
  .house:nth-of-type(3) .paper-y { animation-name: paper-y-3; }
  @keyframes paper-x-4 { 0%, 71.99% { transform: translate(946px, 0px); opacity: 0; } 72.0% { transform: translate(946px, 0px); opacity: 1; animation-timing-function: linear; } 75.75% { transform: translate(1011px, 0px); opacity: 1; animation-timing-function: ease-out; } 77.31%, 98.6% { transform: translate(1015px, 0px); opacity: 1; } 99.5%, 100% { transform: translate(1015px, 0px); opacity: 0; } }
  @keyframes paper-y-4 { 0%, 72.0% { transform: translate(0px, 157px) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 73.58% { transform: translate(0px, 131px) rotate(150deg); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.55); } 75.75% { transform: translate(0px, 179px) rotate(352deg); animation-timing-function: ease-out; } 76.45% { transform: translate(0px, 173.5px) rotate(358deg); animation-timing-function: ease-in; } 77.31%, 100% { transform: translate(0px, 179px) rotate(352deg); } }
  .house:nth-of-type(4) .paper-x { animation-name: paper-x-4; }
  .house:nth-of-type(4) .paper-y { animation-name: paper-y-4; }
  .route-svg--m .car { animation-name: car-route-m; animation-duration: 9s; }
  .route-svg--m .car-body { animation-name: car-dip-m; animation-duration: 9s; }
  .route-svg--m .paper-x, .route-svg--m .paper-y { animation-duration: 9s; }
  @keyframes car-route-m {
    0% { transform: translate(-160px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    20.0% { transform: translate(6px, 199px); animation-timing-function: linear; }
    31.11% { transform: translate(6px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    51.11% { transform: translate(242px, 199px); animation-timing-function: linear; }
    62.22% { transform: translate(242px, 199px); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
    100% { transform: translate(636px, 199px); }
  }
  @keyframes car-dip-m { 0.0%, 18.67%, 23.78%, 49.78%, 54.89%, 100% { transform: translateY(0px); } 20.89%, 52.0% { transform: translateY(2.2px); } }
  @keyframes paper-x-m-1 { 0%, 22.43% { transform: translate(68px, 0px); opacity: 0; } 22.44% { transform: translate(68px, 0px); opacity: 1; animation-timing-function: linear; } 29.11% { transform: translate(133px, 0px); opacity: 1; animation-timing-function: ease-out; } 31.89%, 98.6% { transform: translate(137px, 0px); opacity: 1; } 99.5%, 100% { transform: translate(137px, 0px); opacity: 0; } }
  @keyframes paper-y-m-1 { 0%, 22.44% { transform: translate(0px, 157px) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 25.24% { transform: translate(0px, 131px) rotate(150deg); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.55); } 29.11% { transform: translate(0px, 179px) rotate(352deg); animation-timing-function: ease-out; } 30.36% { transform: translate(0px, 173.5px) rotate(358deg); animation-timing-function: ease-in; } 31.89%, 100% { transform: translate(0px, 179px) rotate(352deg); } }
  .route-svg--m .house:nth-of-type(1) .paper-x { animation-name: paper-x-m-1; }
  .route-svg--m .house:nth-of-type(1) .paper-y { animation-name: paper-y-m-1; }
  @keyframes paper-x-m-2 { 0%, 53.55% { transform: translate(304px, 0px); opacity: 0; } 53.56% { transform: translate(304px, 0px); opacity: 1; animation-timing-function: linear; } 60.22% { transform: translate(369px, 0px); opacity: 1; animation-timing-function: ease-out; } 63.0%, 98.6% { transform: translate(373px, 0px); opacity: 1; } 99.5%, 100% { transform: translate(373px, 0px); opacity: 0; } }
  @keyframes paper-y-m-2 { 0%, 53.56% { transform: translate(0px, 157px) rotate(0deg); animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); } 56.36% { transform: translate(0px, 131px) rotate(150deg); animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.55); } 60.22% { transform: translate(0px, 179px) rotate(352deg); animation-timing-function: ease-out; } 61.47% { transform: translate(0px, 173.5px) rotate(358deg); animation-timing-function: ease-in; } 63.0%, 100% { transform: translate(0px, 179px) rotate(352deg); } }
  .route-svg--m .house:nth-of-type(2) .paper-x { animation-name: paper-x-m-2; }
  .route-svg--m .house:nth-of-type(2) .paper-y { animation-name: paper-y-m-2; }
  /* route:gen end */

  /* 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: 164px; height: auto; margin-top: 4px; }
  .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-links span, .footer-grid p a { color: var(--footer-text); text-decoration: none; font-size: 0.9375rem; line-height: 1.5; 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-lockup { --lk: clamp(72px, 11.5vw, 108px); max-width: none; justify-content: flex-start; padding-block: 8px; }
  }
  @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: 70s; }
    .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: 56px; }
    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: 1fr; gap: 8px 12px; align-items: center; }
    .about-top > div:first-child { display: contents; }
    .about-top h1 { order: 1; grid-column: 1 / -1; max-width: none; }
    .hero-lockup { order: 0; grid-column: 1 / -1; --lk: 46px; justify-content: flex-start; padding: 0 0 6px; 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: .7; }
    .marquee-track { gap: 30px; padding-left: 30px; animation-duration: 58s; }

    /* 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; }
    .benefit-list.benefit-charts { display: grid; gap: 12px; background: none; padding: 0; }
    .benefit-charts li, .benefit-charts li:first-child { display: flex; padding: 20px 18px 22px; border: 1px solid var(--border); border-radius: var(--m-radius); }
    .benefit-charts .bchart { max-width: 200px; }
    .bword { font-size: 1.9rem; margin-top: 16px; }

    /* 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 { width: 148px; height: calc(148px * 448 / 1176); }
    .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 { margin-top: 0; font-size: 0.875rem; 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-blurb { font-size: 0.8125rem; margin-top: 4px; }
    .cars-detail p { font-size: 0.875rem; padding-inline: 16px; }

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

    /* Services: white tiles two across, all visible (was a swipe shelf that cut the next tile off). */
    .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .service { scroll-snap-align: none; 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; }
    .service-more { margin-top: 16px; padding-top: 0; border-top: 0; display: grid; gap: 8px; }
    .service-more .btn { width: 100%; }
    .service-more span { font-size: 0.875rem; }

    /* 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: 116px; }
    .footer-grid p, .footer-links a, .footer-links span { 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 car is parked at the second house, papers already on the first two driveways. */
    .car { transform: translate(344px, 199px); }
    .route-svg--m .car { transform: translate(242px, 199px); }
    .route-svg .car, .route-svg .car-body, .route-svg .paper-x, .route-svg .paper-y { animation: none !important; }
    .house:nth-of-type(1) .paper-x, .house:nth-of-type(2) .paper-x { opacity: 1; }
    /* 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; }
  }

  /* ---- 3D delivery route (prototype, 2026-09-22) ----
     The band reserves its height with aspect-ratio before any script runs, so nothing shifts when the
     canvas appears. The placeholder gradient is a rough sky-over-ground so the empty box does not read
     as a hole. The 2D SVG scene inside is only shown when WebGL is unavailable (.is-fallback). */
  .route-strip { padding-block: 0; }
  .route3d {
    position: relative; width: 100%; aspect-ratio: 2.5 / 1; max-height: 520px; overflow: hidden;
    background: linear-gradient(to bottom, #a9c7e6 0%, #d7e5f0 56%, #a7b58f 56.5%, #8fa07a 100%);
  }
  .route3d canvas {
    position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important;
    opacity: 0; transition: opacity .7s ease;
  }
  .route-strip.is-3d .route3d canvas { opacity: 1; }
  /* Grade: a little less saturation and a touch more contrast, plus fine film grain, so the render
     reads as footage rather than a diagram. */
  .route3d canvas { filter: saturate(0.86) contrast(1.07); }
  .route3d::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.07; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
  }
  .route3d .route-scene { display: none; }
  .route-strip.is-fallback .route3d { aspect-ratio: auto; max-height: none; background: var(--white); padding-top: 24px; }
  .route-strip.is-fallback .route3d canvas { display: none; }
  .route-strip.is-fallback .route3d .route-scene { display: block; }
  @media (max-width: 640px) {
    .route3d { aspect-ratio: 5 / 4; max-height: 440px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .route3d canvas { transition: none; }
  }
  .route3d::after {   /* faint vignette so the band reads as a framed shot rather than a flat texture */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(115% 90% at 50% 45%, rgba(11, 42, 68, 0) 52%, rgba(11, 42, 68, 0.26) 100%);
  }

  /* ---- CarrierTrack scroll scene (prototype, 2026-09-22) ----
     .ct-scroll is tall on desktop so the sticky .ct-stage inside it stays put while the visitor
     scrolls; ct-scene.js turns that scroll distance into the sequence. On phones the stage is a
     normal block about 70% of the screen tall and the sequence plays by itself. */
  .ct-head { padding-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 24px 56px; align-items: end; }
  .ct-head .ct-logo { margin-bottom: 1.25rem; }
  .ct-head h2 { max-width: 21ch; margin: 0; }
  .ct-head-right { padding-bottom: 6px; }
  .ct-head .ct-available { margin-top: 0; }
  .ct-head .lead { margin-top: 1rem; max-width: 48ch; }
  .ct-scroll { position: relative; height: 340vh; margin-top: 28px; }
  .ct-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--page); }
  /* No CSS filter, blend mode or backdrop-filter may touch the canvas: each one makes the compositor
     re-process the live WebGL surface every frame, which is where stale-frame flicker comes from. The
     colour grade the canvas used to get from a filter now runs inside the scene's shaders. */
  .ct-canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .7s ease; }
  #carriertrack.is-3d .ct-canvas { opacity: 1; }
  .ct-poster { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .7s ease; }
  .ct-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #carriertrack.is-3d .ct-poster { opacity: 0; }
  .ct-stage::before {   /* fine grain: a black noise at low opacity, normal blending (multiply forced a canvas readback) */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
  }
  .ct-stage::after {    /* soft edges so the scene dissolves into the page instead of ending at a line */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to bottom, var(--page) 0, var(--page) calc(var(--header-h) * 0.85), rgba(234,242,248,0) calc(var(--header-h) + 40px)),
                radial-gradient(115% 90% at 50% 45%, rgba(11, 42, 68, 0) 55%, rgba(11, 42, 68, 0.22) 100%);
  }
  .ct-controls {
    position: absolute; right: 24px; bottom: 24px; z-index: 3;
    display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(220,227,234,0.9); box-shadow: 0 8px 24px rgba(11,42,68,0.10); white-space: nowrap;
    opacity: 0; transition: opacity .5s ease;
  }
  #carriertrack.is-3d .ct-controls { opacity: 1; }
  #carriertrack.is-still .ct-controls, #carriertrack.is-fallback .ct-controls { display: none; }
  /* Play (step mode, before the route starts): a large target in the middle of the idle map */
  .ct-play {
    display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    flex-direction: column; align-items: center; gap: 12px; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 1rem; color: var(--navy);
  }
  .ct-play-ring {
    width: 92px; height: 92px; border-radius: 50%; background: var(--navy); color: var(--white);
    display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 40px rgba(11, 42, 68, 0.28);
    transition: transform .2s var(--ease-out), background-color .15s ease;
  }
  .ct-play-ring svg { width: 40px; height: 40px; margin-left: 6px; }
  .ct-play-label { background: rgba(255,255,255,0.94); border: 1px solid rgba(220,227,234,0.9); border-radius: 999px; padding: 8px 16px; }
  .ct-play:active .ct-play-ring { transform: scale(0.96); }
  .ct-play:focus-visible .ct-play-ring { outline: 3px solid var(--accent); outline-offset: 3px; }
  #carriertrack.is-step:not(.is-playing) .ct-play { display: inline-flex; }
  #carriertrack.is-step:not(.is-playing) .ct-controls { display: none; }   /* Next / Previous / Skip appear once Play is pressed */
  #carriertrack.is-still .ct-play, #carriertrack.is-fallback .ct-play { display: none; }
  /* Phones, while the route plays: the page is locked to the stage until Skip */
  html.ct-locked, html.ct-locked body { overflow: hidden; overscroll-behavior: none; }
  html.ct-locked body { touch-action: none; }
  .ct-cue-text { display: none; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; color: var(--navy); font-size: 0.9375rem; font-weight: 600; }
  .ct-cue-text svg { width: 16px; height: 16px; animation: ct-cue-bob 1.6s ease-in-out infinite; }
  #carriertrack[data-cue="on"] .ct-cue-text { display: inline-flex; }
  @keyframes ct-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  .ct-controls button {
    font: inherit; font-size: 0.9375rem; font-weight: 600; color: var(--navy); background: var(--tint); border: 1px solid var(--border);
    border-radius: 999px; padding: 8px 14px; min-height: 2.5rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: background-color .15s ease, transform .2s var(--ease-out);
  }
  .ct-controls button svg { width: 16px; height: 16px; }
  .ct-controls button[hidden] { display: none; }   /* Previous stop is hidden on the map */
  .ct-controls .ct-next { background: var(--navy); color: var(--white); border-color: var(--navy); }
  .ct-controls button:hover { background: var(--tint-press); }
  .ct-controls .ct-next:hover { background: var(--navy-deep); }
  .ct-controls button:active { transform: scale(0.97); }
  .ct-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* Feature cards, bottom-left (the emptiest part of the scene): the demo clip is one tall box, large
     enough to read, and its caption a smaller box to its right, bottom-aligned; the same surface, a small
     gap, and they fade in together. The pill sits bottom-right; the cards' width is capped so the two
     never meet at any size. */
  .ct-beats { position: absolute; z-index: 2; left: 24px; bottom: 24px; width: min(640px, calc(100% - 48px - 440px)); pointer-events: none; }
  .ct-beat {
    position: absolute; left: 0; bottom: 0; width: 100%;
    display: flex; align-items: flex-end; gap: 12px;
    opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); pointer-events: none;
  }
  .ct-beat.is-on { opacity: 1; transform: none; }
  .ct-beat-text {
    flex: 0 1 auto; min-width: 0; max-width: 320px; padding: 16px 18px 18px;
    background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(220, 227, 234, 0.9); border-radius: 14px; box-shadow: 0 14px 40px rgba(11, 42, 68, 0.14);
  }
  .ct-beat-text .icon { width: 26px; height: 26px; color: var(--accent); display: block; margin-bottom: 8px; }
  .ct-beat h3 { font-size: 1.1875rem; line-height: 1.25; }
  .ct-beat p { margin-top: 5px; color: var(--ink); font-size: 1rem; line-height: 1.45; }
  /* The demo clip: the poster is a real image underneath and the video only shows once it is playing.
     Safari lays out a video whose metadata has not loaded (or whose WebM it cannot decode) at 300 x 150,
     and object-fit: cover then crops its poster to a zoomed patch of the screen. Sized by height so it
     reads on a laptop without reaching the car; the width follows the clip's aspect. */
  .ct-clip {
    position: relative; order: -1; flex: 0 0 auto; height: min(46vh, 470px, 30vw); width: auto; aspect-ratio: 540 / 1055; border-radius: 14px;   /* order: the clip sits left of its caption whatever the markup order */
    background: var(--tint); display: block; overflow: hidden;
    border: 1px solid rgba(220, 227, 234, 0.9); box-shadow: 0 14px 40px rgba(11, 42, 68, 0.14);
  }
  .ct-clip img, .ct-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .ct-clip video { opacity: 0; }
  .ct-clip.is-playing video { opacity: 1; }
  /* summary below the scene */
  .ct-summary-title { font-size: 1rem; font-weight: 700; color: var(--accent); margin: 0 0 18px; }
  .ct-summary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .ct-summary li { background: var(--tint); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; align-content: start; }
  .ct-summary img { width: 100%; aspect-ratio: 540 / 640; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--border); background: var(--white); display: block; }
  .ct-summary .icon { width: 26px; height: 26px; color: var(--accent); display: block; margin-bottom: 8px; }
  .ct-summary h4 { font-size: 1.0625rem; line-height: 1.3; }
  .ct-summary h4 span { font-weight: 600; color: var(--muted); font-size: 0.875rem; }
  .ct-summary p { margin-top: 4px; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
  .ct-summary-report { background: var(--white); }
  .ct-after { padding-top: 40px; }
  .ct-features--after { margin-top: 0; }
  .ct-after .cars { margin-top: 22px; }
  #carriertrack.is-fallback .ct-scroll, #carriertrack.is-still .ct-scroll { height: auto; }
  #carriertrack.is-still .ct-stage { position: relative; height: 72vh; min-height: 420px; }
  #carriertrack.is-fallback .ct-stage { position: relative; height: 62vh; min-height: 380px; }
  #carriertrack.is-fallback .ct-beats, #carriertrack.is-still .ct-beats { display: none; }
  @media (max-width: 900px) {
    .ct-head { grid-template-columns: 1fr; gap: 14px; padding-bottom: 4px; }
    .ct-head .ct-logo { margin-bottom: 1rem; }
    .ct-head h2 { max-width: none; }
    .ct-head-right { padding-bottom: 0; }
    .ct-head .lead { margin-top: 0.75rem; max-width: none; }
    /* Phones: the same pinned, scroll-driven scene as desktop. The stage fills the screen (dvh so it
       tracks Safari's toolbar), the cards sit over the foreground road at the bottom and the pill in
       the top-right corner under the header, so nothing covers the car or the pins. No backdrop-filter
       here: blur over a WebGL canvas makes iOS Safari flash the canvas. */
    /* Phones: not pinned and not scroll-driven. The stage is one screen the visitor can scroll straight
       past; Play locks the page to it and the buttons (pill top-right, under the header) drive the car. */
    .ct-scroll { height: auto; margin-top: 20px; }
    .ct-stage { position: relative; height: 100vh; height: 100dvh; }
    .ct-controls {
      left: auto; right: 12px; bottom: auto; top: calc(var(--header-h) + 12px); transform: none; padding: 5px; gap: 5px;
      background: rgba(255,255,255,0.94); -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    .ct-controls button { font-size: 0.875rem; padding: 7px 12px; min-height: 2.25rem; }
    .ct-controls .ct-prev { padding: 7px 9px; }
    .ct-controls .ct-prev-label { display: none; }   /* icon only on phones: three worded buttons do not fit */
    .ct-cue-text { display: none !important; }
    .ct-controls .ct-next[data-state="start"] { padding-inline: 16px; }
    .ct-controls .ct-next[data-state="end"] svg { transform: rotate(90deg); }
    .ct-beats { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .ct-beat { gap: 8px; transform: translateY(8px); }
    .ct-beat.is-on { transform: none; }
    .ct-beat-text { flex: 1 1 auto; max-width: none; padding: 12px 14px 13px; border-radius: 12px; }
    .ct-beat-text .icon { width: 22px; height: 22px; margin-bottom: 6px; }
    .ct-beat h3 { font-size: 1rem; }
    .ct-beat p { font-size: 0.875rem; margin-top: 4px; line-height: 1.4; }
    .ct-clip { height: min(34vh, 300px); border-radius: 12px; }
    .ct-play-ring { width: 84px; height: 84px; }
    .ct-play-label { font-size: 0.9375rem; }
    .ct-summary { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ct-summary li { padding: 14px; }
    .ct-after { padding-top: 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ct-canvas, .ct-poster, .ct-beat, .ct-controls { transition: none; }
    .ct-cue-text svg { animation: none; }
  }


  /* ---- Large displays ----
     Above about 1600px the page kept its laptop measure and sat small in a wide canvas. Type scales
     gently with the viewport (rem-based), the content measure widens, and the CarrierTrack scene's
     cards and controls grow with the stage. Nothing below 1600px changes. */
  @media (min-width: 1600px) {
    html { font-size: clamp(100%, 0.62rem + 0.42vw, 121%); }
    :root { --max: 1320px; --gutter: 32px; }
    .site-header .bar { max-width: 1420px; }
    .brand img { height: 104px; }
    .hero { padding-block: 104px 112px; }
    .about-top { gap: 96px; }
    .hero-lockup { --lk: clamp(158px, 6.7vw, 195px); }
    .section { padding-block: 112px; }
    .ct-beats { left: 34px; bottom: 34px; width: min(820px, calc(100% - 68px - 540px)); }
    .ct-beat { gap: 16px; }
    .ct-beat-text { max-width: 400px; padding: 22px 24px 24px; border-radius: 16px; }
    .ct-beat-text .icon { width: 32px; height: 32px; margin-bottom: 10px; }
    .ct-beat h3 { font-size: 1.5rem; }
    .ct-beat p { font-size: 1.1875rem; margin-top: 8px; }
    .ct-clip { height: min(50vh, 580px, 30vw); border-radius: 16px; }
    .ct-controls { right: 34px; bottom: 34px; padding: 8px; gap: 8px; }
    .ct-controls button { font-size: 1.125rem; padding: 11px 20px; min-height: 3rem; }
    .ct-controls button svg { width: 19px; height: 19px; }
    .ct-cue-text { font-size: 1.125rem; padding: 8px 12px 8px 16px; }
    .ct-summary { gap: 28px; }
  }
  @media (min-width: 2200px) {
    :root { --max: 1480px; }
    .site-header .bar { max-width: 1600px; }
    .ct-beats { left: 40px; bottom: 40px; width: min(960px, calc(100% - 80px - 600px)); }
    .ct-beat-text { max-width: 460px; }
    .ct-beat h3 { font-size: 1.75rem; }
    .ct-beat p { font-size: 1.3125rem; }
    .ct-clip { height: min(54vh, 680px, 30vw); }
    .ct-controls { right: 40px; bottom: 40px; }
  }

  /* ==================================================================================================
     2026-09-28 preview pass: hero photo, the buyer's problems, a centred CarrierTrack header, the
     CarrierTrack video slot, the banner out to carriertracktechnologies.com, and what ANS delivers
     beside Services. The 3D scene rules above are unused on the homepage (ct-scene.js not loaded).
     ================================================================================================== */
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .btn-light { background: var(--white); color: var(--navy); border-color: var(--white); }
  .btn-light:hover { background: var(--tint); border-color: var(--tint); color: var(--navy); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
  .btn-light:active { background: var(--tint-press); border-color: var(--tint-press); }
  .btn .icon { width: 1.1em; height: 1.1em; }

  /* Hero: two equal columns, headline left and the 3D lockup (dark bevelled lettering, as in the
     logo) centred in the right column, so the band is balanced rather than weighted left. */
  .hero--split .about-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; min-height: 0; }
  .hero--split h1 { max-width: none; font-size: clamp(2.5rem, 4vw, 3.375rem); }
  .hero--split .lead { max-width: 46ch; }
  .hero--split .hero-lockup { --lk: clamp(88px, 9vw, 134px); justify-content: center; padding: 0; }
  @media (min-width: 1600px) { .hero--split .hero-lockup { --lk: 156px; } }

  /* The buyer's problems (redo): a clean navy band with no photo. Heading row spans the width
     (headline left, intro right, like the CarrierTrack header); the three problems are equal cards
     whose answers sit at the bottom so they line up. Hard edges against the bands around it, no fades. */
  .problems-v2 { position: relative; isolation: isolate; background: linear-gradient(160deg, #06182A 0%, #081F35 55%, #0B2A44 100%); color: var(--footer-text); padding-block: 120px 128px; }
  .pv-head { text-align: left; margin-bottom: 48px; }
  .pv-head h2 { color: var(--white); }
  .pv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  /* Subgrid: the four parts of each card (top row, headline, problem, answer) share rows across the
     three cards, so every headline, problem and answer starts at the same height. */
  .pv-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 30px 28px 28px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.6); }
  .pv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
  .pv-num { font-size: 0.9375rem; font-weight: 800; color: #8EC3E0; font-variant-numeric: tabular-nums; }
  .pv-icon { width: 34px; height: 34px; color: #8EC3E0; }
  .pv-card h3 { color: var(--white); font-size: 1.25rem; letter-spacing: -0.01em; }
  .pv-pain { margin-top: 10px; color: #C3D3E2; font-size: 1rem; line-height: 1.55; }
  .pv-fix { padding-top: 22px; }
  .pv-fix::before { content: ""; display: block; height: 1px; background: rgba(255, 255, 255, 0.14); margin: 4px 0 18px; }
  .pv-fix-label { display: block; font-size: 0.8125rem; font-weight: 700; color: #8EC3E0; margin-bottom: 6px; }
  .pv-fix p { color: #EEF3F8; font-size: 0.9875rem; line-height: 1.55; }
  @media (max-width: 960px) {
    .pv-grid { grid-template-columns: 1fr; gap: 16px; }
    .pv-card { grid-row: auto; grid-template-rows: none; }
    .problems-v2 { padding-block: 96px 104px; }
  }
  @media (max-width: 640px) {
    .problems-v2 { padding-block: 64px 72px; }
    .pv-head { margin-bottom: 20px; }
    .pv-card { padding: 20px 18px; border-radius: var(--m-radius); }
    .pv-top { margin-bottom: 12px; }
    .pv-icon { width: 28px; height: 28px; }
    .pv-card h3 { font-size: 1.0625rem; }
    .pv-pain, .pv-fix p { font-size: 0.875rem; }
    .pv-fix { padding-top: 14px; }
    .pv-fix::before { margin: 0 0 12px; }
  }

  /* CarrierTrack header: stacked and centred, but using the full content width (same edges as the
     video): logo, a large headline that runs across the page, the platforms line, then the
     paragraph set wide. */
  #carriertrack .ct-head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; padding-bottom: 0; }
  #carriertrack .ct-head-left, #carriertrack .ct-head-right { display: contents; }
  #carriertrack .ct-head .ct-logo { margin-bottom: 1.5rem; }
  #carriertrack .ct-head h2 { max-width: none; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.022em; }
  #carriertrack .ct-head .ct-available { margin-top: 1.25rem; justify-content: flex-start; }
  #carriertrack .ct-head .lead { margin-top: 1rem; max-width: 66ch; font-size: 1.125rem; }
  #carriertrack .ct-after { padding-top: 32px; }
  @media (max-width: 900px) { #carriertrack .br-wide { display: none; } }
  @media (max-width: 640px) {
    #carriertrack .ct-head h2 { font-size: 1.5rem; }
    #carriertrack .ct-head .ct-logo { margin-bottom: 1rem; }
    #carriertrack .ct-head .ct-available { margin-top: 1rem; }
    #carriertrack .ct-head .lead { font-size: 0.9375rem; margin-top: 0.625rem; }
  }

  /* CarrierTrack video slot: obviously reserved, not broken. */
  .video-slot { position: relative; margin: 44px 0 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--navy-deep); box-shadow: 0 30px 60px -30px rgba(11, 42, 68, 0.55); }
  .video-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .video-slot::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(11, 42, 68, 0.55) 0%, rgba(11, 42, 68, 0.72) 100%); }
  .video-slot::after { content: ""; position: absolute; z-index: 2; inset: 16px; border: 2px dashed rgba(255, 255, 255, 0.38); border-radius: 8px; pointer-events: none; }
  .video-slot-tag { position: absolute; z-index: 3; top: 32px; left: 32px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: var(--white); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
  .video-slot-center { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--white); }
  .video-slot-play { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.7); margin-bottom: 20px; }
  .video-slot-play svg { width: 38px; height: 38px; margin-left: 5px; }
  .video-slot-title { font-size: clamp(1.25rem, 2.4vw, 1.875rem); font-weight: 800; letter-spacing: -0.015em; }
  .video-slot-note { margin-top: 6px; font-size: 1rem; color: var(--footer-text); }
  .video-slot-bar { position: absolute; z-index: 3; left: 36px; right: 36px; bottom: 32px; display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, 0.75); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .video-slot-bar i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
  .ct-video { display: block; width: 100%; height: auto; margin-top: 44px; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -30px rgba(11, 42, 68, 0.55); border-radius: 14px; background: var(--navy-deep); }

  /* Banner out to carriertracktechnologies.com, after the 21-branded-hero image: dawn route photo,
     navy fade from the left, logo, large white headline, the app upright on the right and cropped
     by the bottom edge. */
  .ct-cta { position: relative; margin-top: 48px; min-height: 540px; display: flex; align-items: center; border-radius: 14px; overflow: hidden; background: var(--navy-deep); color: var(--footer-text); isolation: isolate; }
  .ct-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
  .ct-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 42, 68, 0.96) 0%, rgba(11, 42, 68, 0.88) 38%, rgba(11, 42, 68, 0.35) 70%, rgba(11, 42, 68, 0.15) 100%); }
  .ct-cta-text { position: relative; padding: 56px 0 56px 64px; max-width: 560px; }
  .ct-cta-logo { width: 150px; height: auto; margin-bottom: 26px; }
  .ct-video-wrap { position: relative; }
  .reel-play { position: absolute; left: 7.9%; top: 64%; display: inline-flex; white-space: nowrap; line-height: 1; align-items: center; gap: 14px; padding: 10px 22px 10px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--navy); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.55); transition: transform .25s var(--ease-out), background .2s ease; }
  .reel-play:hover { transform: scale(1.04); background: #fff; }
  .reel-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .reel-play[hidden] { display: none; }
  .reel-play-disc { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; }
  .reel-play-disc svg { width: 22px; height: 22px; margin-left: 3px; }
  .reel-play-label span { font-weight: 500; color: var(--muted); margin-left: 6px; }
  @media (max-width: 640px) { .reel-play { left: 50%; top: auto; bottom: 10%; transform: translateX(-50%); gap: 10px; padding: 6px 16px 6px 6px; font-size: .875rem; } .reel-play-disc { width: 36px; height: 36px; } .reel-play-disc svg { width: 16px; height: 16px; } }

  .ct-cta h3 { color: var(--white); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.04; letter-spacing: -0.024em; }
  .ct-cta p { margin-top: 16px; font-size: 1.125rem; line-height: 1.55; color: #D5E2EE; max-width: 40ch; }
  .ct-cta .btn { margin-top: 30px; }
  .ct-cta-phone { position: absolute; right: 8%; top: 50%; width: 232px; height: auto; filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.5)); transform: translateY(-50%) rotate(4deg); }
  /* Full-bleed like the services banner: edge to edge, text and phone kept on the content column. */
  .ct-cta { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; min-height: clamp(480px, 40vw, 620px); }
  .ct-cta-text { margin-left: max(var(--gutter), calc(50vw - var(--max) / 2 + var(--gutter))); padding-left: 0; }
  .ct-cta-phone { right: calc(max(var(--gutter), calc(50vw - var(--max) / 2 + var(--gutter))) + 6%); }
  #carriertrack { padding-bottom: 0; }     /* the banner closes the section, edge to edge */

  /* Services banner: the carrier's car, branded like the ANS banner set. Navy fade over the dark
     left of the photo carries the white logo and one line; the CarrierTrack chip sits bottom right. */
  .svc-banner { position: relative; margin: 0 0 56px; aspect-ratio: 21 / 9; border-radius: 14px; overflow: hidden; isolation: isolate; background: var(--navy-deep); box-shadow: 0 30px 60px -32px rgba(11, 42, 68, 0.55); }
  .svc-banner-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; }
  .svc-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 42, 68, 0.94) 0%, rgba(11, 42, 68, 0.78) 30%, rgba(11, 42, 68, 0.1) 58%, rgba(11, 42, 68, 0) 100%); }
  .svc-banner-text { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); max-width: 360px; color: #D2DFEB; }
  .svc-banner-logo { width: 150px; height: auto; margin-bottom: 22px; }
  .svc-banner-text strong { display: block; text-wrap: balance; color: var(--white); font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.12; letter-spacing: -0.018em; }
  .svc-banner-text span { display: block; margin-top: 12px; font-size: 1rem; line-height: 1.55; }
  .svc-banner-chip { position: absolute; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.94); color: var(--navy); font-size: 0.875rem; font-weight: 700; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
  .svc-banner-chip svg { width: 22px; height: 22px; color: #1E8A55; }
  /* Full-bleed: the banner breaks out of the content column to the edges of the window; its text and
     chip stay lined up with the column. overflow-x: clip on body stops 100vw adding a sideways scroll
     where the scrollbar takes up width (clip, unlike hidden, keeps the sticky header working). */
  body { overflow-x: clip; }
  .svc-banner { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; box-shadow: none; aspect-ratio: auto; height: clamp(440px, 40vw, 640px); }
  .svc-banner-text { left: max(var(--gutter), calc(50vw - var(--max) / 2 + var(--gutter))); max-width: 400px; }
  .svc-banner-chip { right: max(var(--gutter), calc(50vw - var(--max) / 2 + var(--gutter))); }

  @media (max-width: 960px) {
    .ct-cta-phone { right: 4%; width: 200px; }
    .ct-cta-text { padding-left: 0; max-width: 460px; }
  }
  @media (max-width: 860px) {
    .hero--split .about-top { grid-template-columns: 1fr; gap: 40px; }
    .hero--split .hero-lockup { --lk: clamp(76px, 14vw, 116px); justify-content: center; }
    /* Banner: text over the photo on top, the phone rising from the bottom edge beneath it. */
    .ct-cta { display: block; min-height: 0; padding-bottom: 40px; }
    .ct-cta::before { background: linear-gradient(180deg, rgba(11, 42, 68, 0.95) 0%, rgba(11, 42, 68, 0.82) 55%, rgba(11, 42, 68, 0.4) 100%); }
    .ct-cta-text { margin-left: 0; padding: 40px var(--gutter) 0; max-width: none; }
    .ct-cta-phone { position: relative; top: auto; right: auto; display: block; width: 210px; margin: 36px auto 0; transform: rotate(4deg); }
  }
  @media (max-width: 640px) {
    .hero--split .about-top { gap: 8px 12px; }
    .hero--split .hero-lockup { display: none; }
    .hero--split h1 { font-size: 1.625rem; }
    .video-slot { margin-top: 20px; border-radius: var(--m-radius); }
    .video-slot::after { inset: 10px; }
    .video-slot-tag { top: 18px; left: 18px; font-size: 0.6875rem; padding: 4px 9px; }
    .video-slot-play { width: 56px; height: 56px; margin-bottom: 10px; }
    .video-slot-play svg { width: 24px; height: 24px; margin-left: 3px; }
    .video-slot-note { font-size: 0.8125rem; margin-top: 2px; }
    .video-slot-bar { left: 22px; right: 22px; bottom: 18px; font-size: 0.6875rem; gap: 8px; }
    .ct-video { margin-top: 20px; border-radius: var(--m-radius); }
    .ct-cta { margin-top: 24px; border-radius: 0; padding-bottom: 28px; }
    .ct-cta-text { margin-left: 0; padding: 28px var(--gutter) 0; }
    .ct-cta-logo { width: 116px; margin-bottom: 16px; }
    .ct-cta h3 { font-size: 1.75rem; }
    .ct-cta p { font-size: 0.9375rem; }
    .ct-cta .btn { width: 100%; margin-top: 20px; }
    .ct-cta-phone { width: 176px; margin-top: 28px; }
  }

  /* Contact, compact: navy gradient with the faint globe. Left: logo, headline, one line. Right: the
     four people as small rounded portraits with their details beside them (2 x 2). */
  .section-contact { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #0B2A44 0%, #0F395C 55%, #17557F 100%); padding-block: 80px 88px; }
  .section-contact::before { content: ""; position: absolute; z-index: -1; left: -12%; top: 50%; width: 640px; height: 604px; transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.05); -webkit-mask: url("/assets/ans-globe.png") center / contain no-repeat; mask: url("/assets/ans-globe.png") center / contain no-repeat; }
  .contact-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
  .section-contact .contact-head { max-width: none; }
  .contact-logo { width: 120px; height: auto; margin-bottom: 20px; }
  .section-contact .contact-head h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); letter-spacing: -0.02em; }
  .section-contact .contact-head p { margin-top: 6px; font-size: 1.0625rem; color: #D2DFEB; }
  .section-contact .members { margin: 0; padding: 0; background: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; }
  .section-contact .member { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 0; border: 0; }
  .section-contact .member img { grid-column: 1; grid-row: auto; width: 72px; height: 90px; aspect-ratio: auto; object-fit: cover; object-position: 50% 20%; border-radius: 10px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.55); }
  .section-contact .member > div { grid-column: 2; min-width: 0; }
  .section-contact .member h3 { margin-top: 2px; font-size: 1rem; color: var(--white); }
  .section-contact .member .job { margin-top: 1px; font-size: 0.8125rem; color: var(--footer-text); line-height: 1.4; }
  .section-contact .member .reach { margin-top: 8px; display: grid; gap: 3px; justify-items: start; }
  .section-contact .member .reach a { font-size: 0.8125rem; overflow-wrap: anywhere; }

  @media (max-width: 960px) {
    .contact-layout { grid-template-columns: 1fr; gap: 36px; }
    .section-contact::before { left: auto; right: -30%; top: 0; transform: none; }
  }
  @media (max-width: 640px) {
    .section-contact { padding-block: 44px 52px; }
    .contact-logo { width: 100px; margin-bottom: 14px; }
    .section-contact .contact-head h2 { font-size: 1.625rem; }
    .section-contact .contact-head p { font-size: 0.9375rem; }
    .section-contact::before { width: 400px; height: 380px; right: -45%; }
    .section-contact .members { grid-template-columns: 1fr; gap: 18px; margin-top: 0; }
    .section-contact .member { grid-template-columns: 60px minmax(0, 1fr); padding: 0; border: 0; }
    .section-contact .member img { width: 60px; height: 75px; }
  }

  /* Services banner on tablets and phones: the photo stands taller, the navy fade runs top-down, and
     the text sits at the top with the CarrierTrack chip at the bottom. */
  @media (max-width: 860px) {
    .svc-banner { aspect-ratio: auto; min-height: 460px; height: auto; }
    .svc-banner-photo { object-position: 72% 60%; }
    .svc-banner::before { background: linear-gradient(180deg, rgba(11, 42, 68, 0.92) 0%, rgba(11, 42, 68, 0.7) 42%, rgba(11, 42, 68, 0) 75%); }
    .svc-banner-text { left: 28px; right: 28px; top: 32px; transform: none; max-width: 440px; }
  }
  @media (max-width: 640px) {
    .svc-banner { margin-bottom: 24px; min-height: 440px; height: auto; border-radius: 0; }
    .svc-banner-text { left: 20px; right: 20px; top: 24px; }
    .svc-banner-logo { width: 110px; margin-bottom: 14px; }
    .svc-banner-text strong { font-size: 1.375rem; }
    .svc-banner-text span { font-size: 0.875rem; margin-top: 8px; }
    .svc-banner-chip { left: 14px; right: auto; bottom: 14px; font-size: 0.75rem; padding: 8px 12px 8px 10px; }
  }