/* =========================================================================
   Jampac · Tonight site, take 3: "Golden Hour" (Oct 26, 2026 · Opus 5.5)
   Layout concept: sunlit yard photographs, full bleed, seen through
   reefer-white paper. Every surface that carries type is the trailer's
   white skin: header tabs, the hero tab, stage tabs, transition slats
   (cut like trailer panels) and the die-cut "Just Call Paul."
   ========================================================================= */

@font-face {
  font-family: 'Mona';
  src: url('fonts/mona-sans-latin-standard-normal.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour: the brief's greens and yellow on the trailer's white */
  --white: #F3F4F0;          /* reefer white: page, tabs, slats */
  --white-2: #E3E5DF;        /* panel seams */
  --rule: rgba(12, 14, 13, .14);
  --ink: #0C0E0D;
  --ink-2: #474C48;          /* secondary text, 8.4:1 on white */
  --green: #14A101;          /* Jampac green: large type only on white */
  --sign: #0F8700;           /* sign green for small green text */
  --yellow: #FEF201;         /* Request capacity, nothing else */
  --night: #050607;

  /* type: one grotesk, heavy for display, expanded for labels */
  --display: 'Mona', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* motion: two house curves */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  /* space */
  --gx: max(clamp(18px, 3vw, 48px), env(safe-area-inset-left, 0px));
  --gxr: max(clamp(18px, 3vw, 48px), env(safe-area-inset-right, 0px));
  --notch: 26px;             /* radius of every paper tab corner */
  --cab: #0F5A27;            /* the cab's paint, sampled from the truck photos: the logo's door plate */

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--white); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 440;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
html.is-loading body { overflow: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--yellow); color: var(--ink); }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.label {
  font-size: 11.5px;
  font-weight: 640;
  font-stretch: 120%;
  letter-spacing: .085em;
  text-transform: uppercase;
  line-height: 1.3;
}
.dim { opacity: .6; }
.g { color: var(--green); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* split-text pieces */
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 24px; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 620; letter-spacing: -.005em; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(12, 14, 13, .16); }
.btn-yellow:hover { background: #fff64a; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--white); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: #262a28; }
.btn-paper { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(12, 14, 13, .07); color: var(--ink);
  font-size: 11px; font-weight: 640; font-stretch: 120%; letter-spacing: .08em; text-transform: uppercase;
}
.chip-light { background: rgba(243, 244, 240, .88); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }

/* ---------------- header: two paper tabs ---------------- */
.head {
  position: fixed; z-index: 40; left: 0; right: 0; top: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) var(--gxr) 0 var(--gx);
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.tab-pill {
  pointer-events: auto;
  background: rgba(243, 244, 240, .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-radius: 999px;
  box-shadow: 0 10px 30px -14px rgba(12, 14, 13, .35);
}
/* ---------------- the logo (v3.1, brand.js picks the option) ---------------- */
.brand { pointer-events: auto; position: relative; display: flex; align-items: center; text-decoration: none; }
.brand .lg { display: block; height: 30px; width: auto; max-width: none; }
.brand .lg[hidden] { display: none; }
/* Current: the v3 white pill, kept for comparison */
html[data-logo="current"] .brand {
  height: 54px; padding: 0 20px; border-radius: 999px;
  background: rgba(243, 244, 240, .9); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px -14px rgba(12, 14, 13, .35);
}
/* Door plate: the door-decal colours on a cab-green tab hanging from the top-left corner.
   Square into the page edges, the house notch where it meets the page (the hero tab, mirrored). */
html[data-logo="plate"] .brand, html[data-logo="door"] .brand {
  margin: calc(-14px - env(safe-area-inset-top, 0px)) 0 0 calc(-1 * var(--gx));
  padding: calc(env(safe-area-inset-top, 0px) + 26px) 30px 18px var(--gx);
  background: var(--cab);
  border-bottom-right-radius: var(--notch);
}
html[data-logo="plate"] .brand::before, html[data-logo="plate"] .brand::after,
html[data-logo="door"] .brand::before, html[data-logo="door"] .brand::after {
  content: ""; position: absolute; width: var(--notch); height: var(--notch); pointer-events: none;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--notch) - .5px), var(--cab) var(--notch));
}
html[data-logo="plate"] .brand::before, html[data-logo="door"] .brand::before { left: 100%; top: 0; }
html[data-logo="plate"] .brand::after, html[data-logo="door"] .brand::after { left: 0; top: 100%; }
html[data-logo="door"] .brand { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); padding-bottom: 14px; padding-right: 26px; }
html[data-logo="door"] .brand .lg { height: 62px; }
/* No container: white/yellow over photos, ink/green over paper (brand.js reads what's under the logo) */
html[data-logo="free"] .brand, html[data-logo="word"] .brand { height: 54px; padding: 0 2px; }
html[data-logo="word"] .brand .lg { height: 27px; }
.brand .lg-alt { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); }
html[data-logo="free"] .brand .lg, html[data-logo="word"] .brand .lg { transition: opacity .35s var(--ease-out); }
html[data-logo-tone="light"] .brand .lg-main { opacity: 0; }
html:not([data-logo-tone="light"]) .brand .lg-alt { opacity: 0; }
html[data-logo-tone="dark"] .brand .lg-main { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)) drop-shadow(0 3px 14px rgba(0, 0, 0, .28)); }
/* Just Call Paul: the logo steps aside while the white paper is under it (brand.js sets .logo-quiet; Current stays).
   It moves on 'top' (.brand is position: relative): GSAP owns transform and clears 'translate' inline for the intro. */
html:not([data-logo="current"]) .brand { top: 0; transition: opacity .45s var(--ease-out), top .6s var(--ease-out); }
html.logo-quiet:not([data-logo="current"]) .brand { opacity: 0; top: -10px; pointer-events: none; }
html.logo-quiet[data-logo="plate"] .brand, html.logo-quiet[data-logo="door"] .brand { opacity: 1; top: calc(-150px - env(safe-area-inset-top, 0px)); }
html.logo-quiet .brand:focus-visible { opacity: 1; top: 0; }
/* the logo switcher (?logos), bottom right */
.logo-switch {
  position: fixed; z-index: 80; right: var(--gxr); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; max-width: calc(100vw - 36px);
  border-radius: 26px; background: rgba(243, 244, 240, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--rule), 0 12px 30px -14px rgba(12, 14, 13, .45);
}
.logo-switch .label { margin-right: 4px; }
.logo-switch .chip { height: 28px; padding: 0 11px; }
.logo-switch .bg-x { width: 28px; padding: 0; justify-content: center; font-size: 15px; }
/* the logo in the footers */
.foot-brand { display: inline-flex; align-items: center; gap: 14px; }
.foot-brand img { height: 18px; width: auto; max-width: none; }
.head-right { display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 7px 0 24px; }
.nav { display: flex; gap: 24px; margin-right: 18px; }
.nav a { font-size: 14px; font-weight: 580; text-decoration: none; position: relative; white-space: nowrap; }
/* narrow laptops: the logo plate is wider than the old pill, so the nav tightens up rather than wrapping */
@media (min-width: 761px) and (max-width: 1140px) { .nav { gap: 16px; margin-right: 10px; } .head-right { padding-left: 18px; } }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.link-btn { background: none; border: 0; padding: 0 14px; height: 40px; cursor: pointer; font-size: 14px; font-weight: 600; }
.roll-label { display: inline-grid; height: 1.25em; overflow: hidden; line-height: 1.25; }
.roll-label > span { grid-area: 1 / 1; text-align: right; transition: transform .5s var(--ease-out); }
.roll-label > span + span { transform: translateY(105%); }
.link-btn:hover .roll-label > span:first-child, .link-btn:focus-visible .roll-label > span:first-child { transform: translateY(-105%); }
.link-btn:hover .roll-label > span + span, .link-btn:focus-visible .roll-label > span + span { transform: none; }
.head-request { height: 40px; padding: 0 18px; max-width: 220px; overflow: hidden; font-size: 14px; transition: opacity .35s var(--ease-out), max-width .6s var(--ease-out), padding .6s var(--ease-out), background-color .3s; }
.in-paul .head-request { opacity: 0; max-width: 0; padding: 0; pointer-events: none; }

.dispatch {
  position: absolute; right: var(--gxr); top: calc(env(safe-area-inset-top, 0px) + 76px);
  pointer-events: auto; width: 280px; padding: 18px 20px;
  background: var(--white); border-radius: 20px;
  box-shadow: 0 20px 50px -18px rgba(12, 14, 13, .45);
  display: grid; gap: 8px;
}
.dispatch-num { font-size: 28px; font-weight: 780; letter-spacing: -.03em; text-decoration: none; }
.dispatch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------------- intro: the contact strip ---------------- */
.intro { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: none; }
.is-loading .intro { display: block; }
.intro-top {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 28px); left: var(--gx); right: var(--gxr);
  display: flex; justify-content: space-between; gap: 16px;
}
.strip { position: absolute; left: 50%; top: 50%; display: flex; gap: clamp(10px, 1.1vw, 18px); transform: translate(-50%, -50%); }
.tile {
  margin: 0; flex: none;
  width: clamp(118px, 12.4vw, 232px); aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 6px; background: var(--white-2);
  clip-path: inset(100% 0 0 0 round 6px);
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-hero { visibility: hidden; }
.intro-count { position: absolute; left: var(--gx); right: var(--gxr); bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); display: flex; align-items: flex-end; justify-content: space-between; }
.intro-num { font-size: clamp(96px, 15vw, 260px); font-weight: 840; letter-spacing: -.065em; line-height: .76; }
.intro-of { padding-bottom: 6px; }

/* ---------------- 1 · hero ---------------- */
.hero { position: relative; z-index: 3; }
.hero-stage { position: relative; height: var(--vh, 100svh); overflow: hidden; background: var(--white); }
.hero-media { position: absolute; inset: 0; background: #c9b79a; }
.is-loading .hero-media { clip-path: inset(50% 50% 50% 50%); }
.hero-img, .hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 55% 50%; }
.hero-gl { opacity: 0; }
.gl-on .hero-gl { opacity: 1; }
.gl-on .hero-img { visibility: hidden; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 6, 7, .5), rgba(5, 6, 7, 0) 30%),
    linear-gradient(to bottom, rgba(5, 6, 7, .2), rgba(5, 6, 7, 0) 22%);
}

/* the type layer: scrolls away as one piece */
.hero-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-ui > * { pointer-events: auto; }

/* the paper tab: square into the page edge, notched where it meets the photo */
.hero-tab {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: min(1180px, 64vw);
  padding: clamp(24px, 3.8vh, 34px) clamp(26px, 3vw, 48px) clamp(26px, 4.2vh, 38px) var(--gx);
  background: var(--white);
  border-top-right-radius: var(--notch);
}
.hero-tab::before, .hero-tab::after, .panel-tab::before, .panel-tab::after {
  content: ""; position: absolute; width: var(--notch); height: var(--notch);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--notch) - .5px), var(--white) var(--notch));
}
.hero-tab::before, .panel-tab::before { left: 0; bottom: 100%; }
.hero-tab::after, .panel-tab::after { left: 100%; bottom: 0; }
.is-loading .hero-tab { transform: translateY(102%); }
.is-loading [data-intro] { opacity: 0; }

.hero-title {
  font-size: clamp(50px, min(7.3vw, 12.5vh), 132px);
  font-weight: 830; line-height: .87; letter-spacing: -.052em;
  margin: clamp(10px, 1.8vh, 16px) 0 clamp(16px, 2.9vh, 26px);
}
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.hero-sub { max-width: 37ch; font-size: clamp(15px, 1.08vw, 19px); line-height: 1.45; color: var(--ink-2); }
.hero-actions { display: flex; gap: 10px; flex: none; }

.hero-proof {
  position: absolute; z-index: 2; right: var(--gxr); bottom: 24px;
  max-width: calc(100vw - min(1180px, 64vw) - var(--gxr) - 28px);
  color: #fff; display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .4);
}
.hero-proof ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }

.hero-ctrl { display: flex; align-items: center; gap: 14px; }
.hint { display: inline-flex; align-items: center; gap: 8px; }
.hint i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: ping 2.4s var(--ease-out) infinite; }
.hint-touch { display: none; }
@media (hover: none) { .hint-desk { display: none; } .hint-touch { display: inline; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
.water-paused .hint i { animation: none; }

/* ---------------- slats (trailer panels) ---------------- */
.slats { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.slat { position: absolute; top: 0; bottom: 0; overflow: hidden; background: var(--white); will-change: clip-path; }
.slat img { position: absolute; max-width: none; object-fit: cover; }
.slat::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(12, 14, 13, .08); }

/* ---------------- sticky halves (2 and 4) ---------------- */
.split { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--white); }
.split-media { position: sticky; top: 0; align-self: start; height: var(--vh, 100svh); overflow: hidden; background: var(--white-2); grid-row: 1; }
.split-l .split-media { grid-column: 1; }
.split-l .split-text { grid-column: 2; }
.split-r .split-media { grid-column: 2; }
.split-r .split-text { grid-column: 1; }
.split-text { grid-row: 1; min-width: 0; padding: 0 clamp(26px, 5.4vw, 104px); }

.is-motion .haul { margin-top: calc(-1 * var(--vh, 100svh)); z-index: 1; }

.pic { position: absolute; inset: 0; overflow: hidden; }
.pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pic > img { object-position: var(--fx, 50%) 50%; }
.pic .slat::after { display: none; }
.pic-cap {
  position: absolute; z-index: 4; left: var(--gx); bottom: 24px; color: #fff;
  display: flex; gap: 8px; align-items: center; text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.split-r .pic-cap { left: auto; right: var(--gxr); }
.cap-roll { display: inline-block; height: 1.3em; overflow: hidden; }
.cap-roll span { display: block; transform: translateY(calc(var(--i, 0) * -100%)); transition: transform .8s var(--ease-out); }

.split-intro { height: 170vh; }
.split-intro-in { position: sticky; top: 0; height: var(--vh, 100svh); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.statement {
  font-size: clamp(40px, 5vw, 90px);
  font-weight: 810; line-height: .93; letter-spacing: -.047em;
  text-wrap: balance; max-width: 12ch;
}
.item { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.item:last-child { padding-bottom: 6vh; }
.item-rule { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 14px; }
.item-word { font-size: clamp(54px, 7.2vw, 132px); font-weight: 830; line-height: .86; letter-spacing: -.058em; }
.item-line { font-size: clamp(18px, 1.55vw, 24px); line-height: 1.35; max-width: 27ch; color: var(--ink-2); font-weight: 470; }

/* ---------------- 3 · how a load moves: horizontal run ---------------- */
.how { position: relative; background: var(--white); z-index: 2; }
.how-pin { position: relative; height: var(--vh, 100svh); overflow: hidden; }
.track { display: flex; gap: 10px; height: 100%; will-change: transform; }
.panel { position: relative; flex: 0 0 100vw; height: 100%; overflow: hidden; }
.panel-intro { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 0 var(--gxr) 0 var(--gx); background: var(--white); }
.how-title { font-size: clamp(50px, 8.4vw, 160px); font-weight: 830; line-height: .86; letter-spacing: -.058em; max-width: 10.5ch; text-wrap: balance; }
.how-hint { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.how-hint i { width: 72px; height: 1.5px; background: var(--ink); position: relative; }
.how-hint i::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); transform: rotate(45deg); }
/* the frame behind each picture is a muted mid-tone, and the picture bleeds 1px past it, so a rendering
   seam (Safari draws this wide strip in tiles) can never show as a white line */
.panel-img { background: #8C9396; }
.panel-media { position: absolute; inset: -1px; overflow: hidden; }
.panel-media img { position: absolute; top: -1px; left: -12%; width: 124%; max-width: none; height: calc(100% + 2px); object-fit: cover; object-position: var(--fx, 50%) 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.is-webkit .track { will-change: auto; }
.panel-tab {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: min(600px, 46vw);
  padding: 30px clamp(26px, 2.8vw, 44px) 32px var(--gx);
  background: var(--white); border-top-right-radius: var(--notch);
}
.stage-num { display: block; font-size: clamp(60px, 6.6vw, 118px); font-weight: 840; letter-spacing: -.065em; line-height: .78; color: var(--green); }
.stage-title { font-size: clamp(26px, 2.5vw, 42px); font-weight: 790; letter-spacing: -.038em; line-height: 1; margin: 18px 0 12px; text-wrap: balance; }
.stage-text { font-size: 16.5px; line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
.how-bar {
  position: absolute; z-index: 3; right: var(--gxr); bottom: 30px;
  width: min(300px, 26vw); height: 2px; background: rgba(255, 255, 255, .38);
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .2); opacity: 0;
}
.how-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.how-bar span { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(.6); transition: transform .4s var(--ease-out); }
.how-bar span.on { transform: scale(1.15); }

/* ---------------- on the road: pinned image-sequence scrub ---------------- */
.road { position: relative; z-index: 2; background: var(--white); }
.road-stage { position: relative; height: var(--vh, 100svh); overflow: hidden; overflow: clip; background: #b9c4cc; }
.road-frame { position: absolute; inset: 0; }
.road-media { position: absolute; inset: 0; overflow: hidden; background: #b9c4cc url(assets/road/001.webp) 52% 50% / cover no-repeat; }
.road-canvas { visibility: hidden; }
.road-canvas.is-drawn { visibility: visible; }
.road-canvas, .road-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.road-still { object-fit: cover; object-position: 52% 50%; display: none; }
.road-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 6, 7, .32), rgba(5, 6, 7, 0) 30%),
    linear-gradient(to bottom, rgba(5, 6, 7, .2), rgba(5, 6, 7, 0) 22%);
}
.road-covers { position: absolute; inset: 0; z-index: 3; display: flex; pointer-events: none; }
/* the exit: the same trailer panels close back over the road behind the lanes, so the scene ends on paper
   and Broker setup follows on the same page (no photo-on-photo seam). A paper halo closes sub-pixel gaps. */
.road-shut { position: absolute; inset: 0; z-index: 1; display: flex; pointer-events: none; }
.road-shut i { flex: 1 1 0; height: 100%; background: var(--white); box-shadow: 0 0 0 1px var(--white); transform: scaleY(0); will-change: transform; }
.road-covers i { flex: 1 1 0; height: 100%; background: var(--white); box-shadow: 1px 0 0 rgba(12, 14, 13, .06); will-change: transform; }
.road-tab {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: min(1100px, 68vw);
  padding: clamp(24px, 3.8vh, 34px) clamp(26px, 3vw, 48px) clamp(26px, 4.2vh, 38px) var(--gx);
  background: var(--white); border-top-right-radius: var(--notch);
}
.road-tab::before, .road-tab::after {
  content: ""; position: absolute; width: var(--notch); height: var(--notch);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--notch) - .5px), var(--white) var(--notch));
}
.road-tab::before { left: 0; bottom: 100%; }
.road-tab::after { left: 100%; bottom: 0; }
.is-motion .road-tab { transform: translateY(105%); }
.is-motion .road-tab-b { visibility: hidden; }
.road-title { font-size: clamp(44px, min(5.6vw, 10.5vh), 112px); font-weight: 830; line-height: .88; letter-spacing: -.052em; margin-top: clamp(10px, 1.6vh, 14px); }
.road-l1, .road-l2 { display: block; }
/* lanes tab: its text starts on the same line as the Broker setup column below it */
/* (it sizes to its widest lane, so a long lane never runs past the tab on big screens) */
.road-tab-b { width: auto; min-width: min(640px, 50vw); padding-left: clamp(26px, 5.4vw, 104px); padding-right: clamp(32px, 3.6vw, 64px); }
.road-lanes { list-style: none; margin: clamp(10px, 1.6vh, 14px) 0 clamp(18px, 2.6vh, 24px); padding: 0; }
.road-lanes li { display: flex; align-items: baseline; gap: .26em; font-size: clamp(38px, min(5vw, 9.4vh), 96px); font-weight: 830; letter-spacing: -.052em; line-height: .96; }
.road-lanes i { font-style: normal; font-weight: 420; color: var(--green); transform: translateY(-.04em); }
.road-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.road-note { color: var(--ink-2); font-size: clamp(15px, 1.08vw, 18px); max-width: 36ch; }
/* until its first photo unfolds, the Broker setup picture is paper, not a grey box */
.close .split-media { background: var(--white); }

/* ---------------- page-to-page veil: trailer-panel slats ---------------- */
.veil { position: fixed; inset: 0; z-index: 95; display: flex; pointer-events: none; }
.veil i {
  flex: 1 1 0; height: 100%; background: var(--white);
  transform: scaleY(0); transform-origin: 50% 0%;
  transition: transform .5s var(--ease-io) calc(var(--k) * 32ms);
}
.veil i:nth-child(even) { transform-origin: 50% 100%; }
html.is-leaving .veil { pointer-events: auto; }
html.is-leaving .veil i { transform: scaleY(1); transform-origin: 50% 100%; }
html.is-leaving .veil i:nth-child(even) { transform-origin: 50% 0%; }
html.is-arriving .veil i { transform: scaleY(1); transition: none; animation: veil-failsafe .5s var(--ease-io) 2.5s forwards; }
/* v3.11 · back on a page you'd scrolled: shut until main.js has put you back on your spot */
html.is-returning .veil i { transform: scaleY(1); transition: none; animation: veil-failsafe .5s var(--ease-io) 2.5s forwards; }
@keyframes veil-failsafe { to { transform: scaleY(0); } }   /* if transition.js never runs, the page still opens */
.veil i::after { content: ""; display: block; height: 100%; width: 1px; margin-left: auto; background: rgba(12, 14, 13, .07); }

/* ---------------- 4 · broker setup + drivers ---------------- */
.close { z-index: 2; }
.block { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 14vh 0; }
.setup-list { list-style: none; padding: 0; margin: 14px 0 10px; width: 100%; max-width: 560px; border-top: 1px solid var(--rule); }
.setup-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.row-act { text-decoration: none; color: var(--sign); }
.row-act:hover { text-decoration: underline; }
button.row-act { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 640; font-stretch: 120%; letter-spacing: .085em; text-transform: uppercase; color: var(--sign); }
.block-line { font-size: clamp(18px, 1.55vw, 24px); line-height: 1.35; max-width: 28ch; color: var(--ink-2); }

/* ---------------- just call paul ---------------- */
.paul { position: relative; z-index: 2; height: 360vh; background: var(--white); }
.paul-stage { position: sticky; top: 0; height: var(--vh, 100svh); overflow: hidden; background: var(--white); }
.paul-media { position: absolute; inset: 0; background: var(--night); }
.paul-media video { width: 100%; height: 100%; object-fit: cover; }
.paul-dim { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, rgba(5, 6, 7, .82), rgba(5, 6, 7, .25) 60%, rgba(5, 6, 7, .1)); }
.paul-cut { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.paul-paper { fill: var(--white); }
.cut-text { font-family: var(--display); font-weight: 860; letter-spacing: -.05em; }
.paul-kicker {
  position: absolute; z-index: 2; left: 0; right: 0; top: 21vh;
  padding: 0 var(--gxr) 0 var(--gx);
  text-align: center; font-size: clamp(18px, 1.7vw, 26px); font-weight: 560; letter-spacing: -.012em;
}
.is-motion .paul-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.paul-act { position: absolute; z-index: 2; left: 0; right: 0; bottom: 15vh; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 var(--gxr) 0 var(--gx); }
.paul-num { display: flex; align-items: center; gap: 10px; }
.paul-num[hidden] { display: none; }
.paul-num a { font-size: clamp(24px, 2.4vw, 34px); font-weight: 780; letter-spacing: -.03em; text-decoration: none; }

.foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 var(--gxr) calc(env(safe-area-inset-bottom, 0px) + 22px) var(--gx); color: #fff; }
.is-motion .foot { visibility: hidden; }
.foot-line { font-size: clamp(42px, 6.4vw, 116px); font-weight: 830; letter-spacing: -.055em; line-height: .88; margin-bottom: 30px; }
.foot-items { list-style: none; margin: 0; padding: 18px 0; display: flex; flex-wrap: wrap; gap: 10px 32px; border-top: 1px solid rgba(255, 255, 255, .32); font-size: 15px; font-weight: 520; }
.foot-items li { display: flex; gap: 10px; align-items: baseline; }
.foot-items a { text-decoration: none; }
.foot-items a:hover { text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); }
.film-ctrl { position: absolute; z-index: 4; right: var(--gxr); top: calc(env(safe-area-inset-top, 0px) + 84px); display: flex; gap: 8px; }
.film-ctrl .chip { box-shadow: 0 0 0 1px var(--rule), 0 6px 18px -10px rgba(12, 14, 13, .5); }

/* ---------------- phone dock, sheet, toast, cursor ---------------- */
.dock {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; display: none; gap: 8px;
  padding: 10px var(--gxr) calc(env(safe-area-inset-bottom, 0px) + 10px) var(--gx);
  background: rgba(243, 244, 240, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 -10px 30px -18px rgba(12, 14, 13, .4);
  transform: translateY(calc(100% + 40px)); transition: transform .5s var(--ease-out);
}
.dock .btn { flex: 1; height: 48px; padding: 0 12px; }
.show-dock .dock { transform: none; }
.in-paul .dock, .sheet-open .dock { transform: translateY(calc(100% + 40px)); }

.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(5, 6, 7, .45); }
.sheet-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--white); padding: calc(env(safe-area-inset-top, 0px) + 28px) var(--gxr) calc(env(safe-area-inset-bottom, 0px) + 28px) 32px;
  overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
}
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sheet-top h2 { font-size: 40px; font-weight: 810; letter-spacing: -.045em; line-height: .95; }
.sheet-help { color: var(--ink-2); max-width: 46ch; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.fields .wide { grid-column: 1 / -1; }
.fields input, .fields textarea {
  width: 100%; font: inherit; font-size: 16px; font-weight: 450; color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px;
}
.fields input:focus, .fields textarea:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: transparent; }
.sheet-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sheet-note { color: var(--ink-2); max-width: 32ch; }

.toast {
  position: fixed; z-index: 70; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--white); padding: 12px 16px; border-radius: 999px;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; mix-blend-mode: difference; display: none; opacity: 0; }
.has-cursor .cursor { display: block; }
.cursor i { position: absolute; left: 0; top: 0; border-radius: 50%; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
/* v3.10: the ring grows by size, not 'scale'. GSAP cleared 'scale' on the homepage (the ring never grew), and on the
   Services page 'scale' also multiplied the ring's position, so it flew off over every link. */
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #fff; transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), opacity .3s; }
.cursor.is-link .cursor-ring { width: 59px; height: 59px; margin: -29.5px 0 0 -29.5px; }
.cursor.is-water .cursor-ring { width: 80px; height: 80px; margin: -40px 0 0 -40px; opacity: .7; }

/* ---------------- phone ---------------- */
@media (max-width: 760px) {
  :root { --notch: 20px; }
  .brand .lg { height: 18px; }
  html[data-logo="current"] .brand { height: 46px; padding: 0 15px; }
  html[data-logo="current"] .brand .lg { height: 24px; }
  html[data-logo="plate"] .brand { padding: calc(env(safe-area-inset-top, 0px) + 28px) 18px 16px var(--gx); }
  html[data-logo="door"] .brand { padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px var(--gx); }
  html[data-logo="door"] .brand .lg { height: 48px; }
  html[data-logo="free"] .brand, html[data-logo="word"] .brand { height: 46px; }
  html[data-logo="word"] .brand .lg { height: 19px; }
  /* the plate hangs lower than the old pill: give what sits under it some air */
  html[data-logo="plate"] .hero-proof, html[data-logo="door"] .hero-proof { top: calc(env(safe-area-inset-top, 0px) + 90px); }
  html[data-logo="plate"] .how-bar { top: calc(env(safe-area-inset-top, 0px) + 92px); }
  html[data-logo="door"] .how-bar { top: calc(env(safe-area-inset-top, 0px) + 104px); }
  html[data-logo="door"] .hero-proof { top: calc(env(safe-area-inset-top, 0px) + 102px); }
  .logo-switch { bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); left: 12px; right: 12px; padding: 5px; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .logo-switch .chip { height: 26px; padding: 0 9px; font-size: 10px; flex: none; }
  .logo-switch .label { display: none; }
  .head-right { height: 46px; padding: 0 4px; }
  .nav, .head-request { display: none; }
  .link-btn { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .dispatch { top: calc(env(safe-area-inset-top, 0px) + 68px); width: min(300px, calc(100vw - 32px)); }
  .dock { display: flex; }

  .tile { width: 31vw; }

  .hero-media { bottom: calc(var(--tabh, 46%) - 24px); }
  .hero-img { object-position: 76% 50%; }
  .hero-shade { background: linear-gradient(to bottom, rgba(5, 6, 7, .62), rgba(5, 6, 7, .2) 26%, rgba(5, 6, 7, 0) 40%); }
  .hero-tab { width: 100%; padding: 24px var(--gxr) 26px var(--gx); border-top-left-radius: var(--notch); }
  .hero-tab::before, .hero-tab::after { display: none; }
  .hero-title { font-size: clamp(46px, 14.2vw, 64px); margin: 12px 0 16px; }
  .hero-row { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-sub { font-size: 15px; }
  .hero-actions .btn { flex: 1; padding: 0 12px; height: 50px; }
  .hero-proof { top: calc(env(safe-area-inset-top, 0px) + 74px); bottom: auto; left: var(--gx); right: var(--gxr); max-width: none; align-items: flex-start; gap: 10px; font-size: 10.5px; }
  .hero-proof ul { justify-content: flex-start; gap: 4px 14px; }

  .split { display: flex; flex-direction: column; }
  .split-media { height: calc(var(--vh, 100svh) * .46); z-index: 2; order: -1; flex: none; align-self: stretch; }
  .split-text { position: relative; z-index: 1; padding: 0 var(--gxr) 0 var(--gx); }
  .split-intro { height: 150svh; }
  .split-intro-in { top: calc(var(--vh, 100svh) * .46); height: calc(var(--vh, 100svh) * .54); }
  .statement { font-size: clamp(36px, 10.4vw, 52px); }
  .item { min-height: 72svh; gap: 14px; }
  .item-word { font-size: clamp(50px, 15vw, 72px); }
  .block { min-height: 0; padding: 9svh 0; }
  .pic-cap { bottom: 14px; }

  .how-title { font-size: clamp(46px, 13.6vw, 66px); }
  .panel-tab { width: 100%; padding: 22px var(--gxr) calc(env(safe-area-inset-bottom, 0px) + 84px) var(--gx); border-top-left-radius: var(--notch); }
  .panel-tab::before, .panel-tab::after { display: none; }
  .stage-num { font-size: 54px; }
  .stage-title { font-size: 26px; margin: 12px 0 8px; }
  .stage-text { font-size: 15px; }
  .how-bar { top: calc(env(safe-area-inset-top, 0px) + 76px); bottom: auto; left: var(--gx); right: var(--gxr); width: auto; }

  .road-tab, .road-tab-b { width: 100%; padding: 22px var(--gxr) calc(env(safe-area-inset-bottom, 0px) + 84px) var(--gx); border-top-left-radius: var(--notch); }
  .road-tab::before, .road-tab::after { display: none; }
  .road-title { font-size: clamp(34px, 10.2vw, 58px); }
  .road-lanes li { font-size: clamp(28px, 8.2vw, 50px); }
  .road-foot .btn { display: none; } /* the phone dock already carries Request capacity */
  .veil i:nth-child(n + 7) { display: none; }

  .paul-kicker { top: 18svh; }
  .paul-act { bottom: 12svh; }
  .foot-line { margin-bottom: 20px; }
  .foot-items { gap: 8px 22px; font-size: 14px; }
  .foot-base { font-size: 10px; }
  .fields { grid-template-columns: 1fr; }
  .sheet-panel { padding-left: var(--gx); }
}

/* ---------------- static: reduced motion or ?static ---------------- */
.is-static .slats, .is-static .hint, .is-static #waterBtn { display: none; }
.is-static .hero-gl { display: none; }
.is-static .how-pin { height: auto; overflow: visible; }
.is-static .track { flex-direction: column; gap: 10px; }
.is-static .panel { flex: none; width: 100%; height: 92vh; height: 92svh; }
.is-static .panel-intro { height: auto; padding-top: 22vh; padding-bottom: 14vh; }
.is-static .panel-media img { left: 0; width: 100%; }
.is-static .how-bar { display: none; }
.is-static .paul { height: auto; }
.is-static .paul-stage { position: relative; height: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 22vh 0 0; overflow: visible; }
.is-static .paul-cut { display: none; }
.is-static .paul-kicker, .is-static .paul-act { position: static; }
.is-static .paul-title { font-size: clamp(64px, 13vw, 240px); font-weight: 860; letter-spacing: -.06em; line-height: .86; text-align: center; padding: 0 var(--gx); }
.is-static .paul-media { position: relative; inset: auto; width: 100%; height: 100vh; height: 100svh; margin-top: 8vh; }
.is-static .paul-dim { opacity: 1; }
.is-static .paul-kicker { order: 1; }
.is-static .paul-title { order: 2; }
.is-static .paul-act { order: 3; }
.is-static .paul-media { order: 4; }
.is-static .foot { position: absolute; order: 5; }
.is-static .film-ctrl { top: auto; bottom: calc(100vh - 84px); }
.is-static .road-stage { height: auto; overflow: visible; background: var(--white); }
.is-static .road-frame { position: relative; height: 92vh; height: 92svh; }
.is-static .road-canvas, .is-static .road-covers, .is-static .road-shut { display: none; }
.is-static .road-still { display: block; }
.is-static .road-tab-b { position: relative; width: auto; border-radius: 0; padding-top: 8vh; padding-bottom: 12vh; }
.is-static .road-tab-b::before, .is-static .road-tab-b::after { display: none; }
.is-static .veil { display: none; }
.is-static .road-tab-b { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* =========================================================================
   BACKDROPS (backdrop.js): Original paper · Satin · Palms · Satin + palms
   Original = the page exactly as before. The others paint a .bgfx layer
   behind the text on the paper areas only; photos and tabs are untouched.
   ========================================================================= */
.bgfx { display: none; pointer-events: none; overflow: hidden; isolation: isolate; background: var(--white); }
html[data-bg="satin"] .bgfx, html[data-bg="palms"] .bgfx, html[data-bg="satin-palms"] .bgfx, html[data-bg="fit"] .company > .bgfx { display: block; }

/* Satin: the measured Finix-style gradient (see The Loop Loader's satin-background.html) */
:root {
  --satin-grad: linear-gradient(40deg,
    #fefefe 0%, #fdfdfd 20%, #fafafa 22.5%, #f6f6f7 24.2%, #f0f0f2 25.8%, #eaeaec 27.5%,
    #e5e5e9 29.2%, #e2e2e6 31%, #dfe0e4 33.5%, #e1e2e5 36%, #e5e5e8 38%, #ebebee 40.8%,
    #eeedf0 44%, #efeff1 47%, #eeedf0 49.5%, #ebebee 51%, #e7e7ea 52.5%, #e2e2e6 54%,
    #dedfe3 56%, #dbdde1 58.5%, #dcdee2 61%, #e0e0e4 62.5%, #e4e4e8 64%, #e9e9eb 66%,
    #efeef0 67.5%, #f3f2f4 69%, #f5f5f7 71%, #f4f4f6 72.5%, #f0f0f2 74%, #ebeaed 76%,
    #e5e4e8 77.5%, #e0e0e4 79%, #dddee2 81%, #dadce0 83%, #d9dbdf 85%, #d9dbdf 100%);
  --satin-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the same grain, pre-faded, for layers that can't take a blended overlay */
  --satin-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
html[data-bg^="satin"] .bgfx, html[data-bg="fit"] .company > .bgfx { background: #e9e9ec; }
html[data-bg^="satin"] .bgfx::before, html[data-bg="fit"] .company > .bgfx::before {
  content: ""; position: absolute; inset: -6%; z-index: -1;
  background: var(--satin-grad);
  animation: satin-drift 40s ease-in-out infinite alternate;
}
html[data-bg^="satin"] .bgfx::after, html[data-bg="fit"] .company > .bgfx::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .045; mix-blend-mode: multiply;
  background-size: 180px 180px;
  background-image: var(--satin-noise);
}
@keyframes satin-drift { from { transform: translate3d(-2.5%, 2.5%, 0); } to { transform: translate3d(2.5%, -2.5%, 0); } }
html[data-bg^="satin"] .slat { background: #ebebee; }

/* Satin, placed (?bg=fit): satin only where it owns the whole screen, so it never sits next to flat paper.
   1 · the Services/Team page: one fixed layer behind everything (rules above)
   2 · the homepage loading screen: the contact strip and the count sit on satin; the hero photo opens over all of it
   3 · the page-change panels: they close as one satin sheet (each panel shows its own slice of one screen-sized gradient) */
html[data-bg="fit"].is-loading .hero-stage { background: var(--satin-grain) 0 0 / 180px 180px, var(--satin-grad); background-color: #e9e9ec; }
html[data-bg="fit"] .veil i {
  background: var(--satin-grain) 0 0 / 180px 180px, var(--satin-grad) calc(var(--k) * -10vw) 0 / 100vw 100% no-repeat;
  background-color: #e9e9ec;
}

/* Palms: two small canvases, scaled up soft */
.bgfx canvas { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); will-change: transform; }
.bgfx .palm-near { opacity: .17; }
.bgfx .palm-far { opacity: .08; }

/* Homepage: one backdrop per sticky half, in the text column, behind the text */
.split > .bgfx { position: sticky; top: 0; grid-row: 1; align-self: start; height: var(--vh, 100svh); z-index: 0; }
.split-l > .bgfx { grid-column: 2; }
.split-r > .bgfx { grid-column: 1; }
html:not([data-bg="paper"]) .split-text { position: relative; z-index: 1; }
.panel-intro { position: relative; }
.panel-intro > .bgfx { position: absolute; inset: 0; z-index: 0; }
.panel-intro > :not(.bgfx) { position: relative; z-index: 1; }

/* Company page: one fixed backdrop behind everything */
.company > .bgfx { position: fixed; inset: 0; z-index: -1; }
html:not([data-bg="paper"]) body.company { background: transparent; }

/* The compare switcher (?compare) */
.bg-switch {
  position: fixed; z-index: 80; left: var(--gx); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; max-width: calc(100vw - 36px);
  border-radius: 26px; background: rgba(243, 244, 240, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--rule), 0 12px 30px -14px rgba(12, 14, 13, .45);
}
.bg-switch .label { margin-right: 4px; }
.bg-switch .chip { height: 28px; padding: 0 11px; }
.bg-switch .bg-x { width: 28px; padding: 0; justify-content: center; font-size: 15px; }

@media (max-width: 760px) {
  .split > .bgfx { order: -2; flex: none; align-self: stretch; height: var(--vh, 100svh); margin-bottom: calc(-1 * var(--vh, 100svh)); }
  .bg-switch { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); left: 12px; right: 12px; padding: 5px; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .bg-switch .chip { height: 26px; padding: 0 9px; font-size: 10px; flex: none; }
  .bg-switch .label { display: none; }
  html[data-bg="fit"] .veil i { background-position: 0 0, calc(var(--k) * -100vw / 6) 0; }   /* phones show 6 panels */
}
@media (prefers-reduced-motion: reduce) { html[data-bg^="satin"] .bgfx::before, html[data-bg="fit"] .company > .bgfx::before { animation: none; } }

/* Oct 27, 4:40 a.m.: no Pause buttons [Craig]. Reduced-motion visitors still get the still version. */
#waterBtn, #filmBtn { display: none !important; }

/* Pictures can't be dragged out of the page or long-pressed to save */
img, video, canvas, .pic, .panel-media, .c-pic, .tile {
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* =========================================================================
   v3.7 PHONE PASS (Oct 29). html.is-calm = phones (index.html / company.html decide);
   html.how-stack = phones at load (main.js). Desktop never gets either class.
   ========================================================================= */
/* Solid bars: frosted glass re-blurs the page under it on every scrolled frame */
html.is-calm .tab-pill,
html.is-calm[data-logo="current"] .brand,
html.is-calm .dock { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--white); }

/* One button bar: once the dock is up, the header's Call dispatch steps aside (the dock has it).
   It comes back while the dock is away (Just Call Paul, the request sheet). */
@media (max-width: 760px) {
  html.is-calm .head-right { transition: opacity .35s var(--ease-out), visibility .35s; }
  html.is-calm.show-dock:not(.in-paul):not(.sheet-open) .head-right { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* How a load moves, stacked: each stage is a picture with its paper tab, one after another */
html.how-stack .how-pin { height: auto; overflow: visible; }
html.how-stack .track { flex-direction: column; gap: 0; height: auto; will-change: auto; }
html.how-stack .panel { flex: none; width: 100%; height: auto; overflow: visible; }
html.how-stack .panel-intro { padding-top: 16svh; padding-bottom: 8svh; }
html.how-stack .how-hint, html.how-stack .how-bar { display: none; }
html.how-stack .panel-img { background: none; padding-bottom: 6svh; }
html.how-stack .panel-media { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; background: #8C9396; }
html.how-stack .panel-media img { top: 0; left: 0; width: 100%; height: 100%; }
html.how-stack .panel-tab {
  position: relative; left: auto; bottom: auto; width: auto;
  margin-top: calc(-1 * var(--notch)); padding: 24px var(--gxr) 4px var(--gx);
  border-top-left-radius: var(--notch); border-top-right-radius: 0;
}
html.how-stack .stage-num { font-size: 48px; }

/* =========================================================================
   v3.9 (Oct 31): Proud partners · freight facts · How a load moves dockets · the film cue
   ========================================================================= */

/* ---- What we haul: each freight type carries its real details, so the column isn't empty paper ---- */
.item { min-height: 80vh; min-height: 80svh; }
.item-facts { list-style: none; padding: 0; margin: 12px 0 0; width: 100%; max-width: 560px; border-top: 1px solid var(--rule); }
.item-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.item-facts li .label { flex: none; color: var(--ink-2); }
.item-facts li > :last-child { text-align: right; }
.item-facts a { color: var(--sign); font-weight: 620; text-decoration: none; }
.item-facts a:hover { text-decoration: underline; }

/* ---- How a load moves: a kicker beside the number, and a docket of what gets checked ---- */
.stage-top { display: flex; align-items: flex-end; gap: 16px; }
.stage-kicker { color: var(--sign); padding-bottom: .35em; }
.stage-text { font-size: 17px; max-width: 44ch; color: var(--ink-2); text-wrap: pretty; }
.stage-docket { list-style: none; display: flex; flex-wrap: wrap; margin: 20px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule); }
.stage-docket li {
  display: inline-flex; align-items: center; gap: 8px; padding: 2px 16px 2px 0; margin-right: 16px;
  font-size: 11.5px; font-weight: 640; font-stretch: 120%; letter-spacing: .085em; text-transform: uppercase; line-height: 1.3;
  border-right: 1px solid var(--rule);
}
.stage-docket li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.stage-docket li::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23F3F4F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transform: scale(var(--tick, 1));
}
/* the bar along the bottom names its stops, so it reads as the route */
.how-bar { width: min(470px, 34vw); bottom: 34px; }
.how-bar em {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-style: normal; white-space: nowrap; color: #fff; opacity: .62;
  font-size: 10.5px; font-weight: 660; font-stretch: 120%; letter-spacing: .09em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55); transition: opacity .4s var(--ease-out);
}
.how-bar span:first-of-type em { left: 0; transform: none; }
.how-bar span:last-of-type em { left: auto; right: 0; transform: none; }
.how-bar span.now em { opacity: 1; }
/* the dot grows, not its label: the scale moves to a pseudo-element */
.how-bar span { transform: none !important; background: none; }
.how-bar span::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; transform: scale(.6); transition: transform .4s var(--ease-out); }
.how-bar span.on::before { transform: scale(1.15); }

/* ---- Proud partners: three lanes of logos on hairlines; each logo inks in as its lane arrives ---- */
.partners { position: relative; z-index: 2; background: var(--white); padding: clamp(72px, 12vh, 140px) 0 clamp(80px, 14vh, 150px); }
.partners-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  padding: 0 var(--gxr) 0 clamp(26px, 5.4vw, 104px); margin-bottom: clamp(36px, 6.5vh, 68px);
}
.partners-head .label { margin-bottom: 18px; }
.partners-head .statement { max-width: none; }
.partners-key { display: flex; gap: 10px; color: var(--ink-2); margin: 0 0 6px; }
.partners-key span + span::before { content: "·"; margin-right: 10px; opacity: .6; }
.prows { margin: 0 var(--gxr) 0 var(--gx); border-top: 1px solid var(--rule); }
.prow { position: relative; display: grid; grid-template-columns: minmax(170px, 21%) 1fr; }
.prow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; transform: scaleX(var(--draw, 1)); }
.prow-label { display: flex; gap: 14px; align-items: baseline; padding: 24px 16px 0 calc(clamp(26px, 5.4vw, 104px) - var(--gx)); color: var(--ink); }
.prow-label span:first-child { color: var(--sign); }
.prow-cells { list-style: none; margin: 0; padding: 0; display: flex; }
.pcell {
  position: relative; flex: 1 1 0; min-width: 0; height: clamp(160px, 21vh, 210px);
  display: grid; place-items: center; border-left: 1px solid var(--rule); overflow: hidden;
}
.pcell::before { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .55s var(--ease-out); }
.pmark { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.plogo {
  position: relative; height: var(--h); width: auto; max-width: 74%; object-fit: contain;
  transition: filter 1.3s var(--ease-out), opacity 1.3s var(--ease-out), transform .7s var(--ease-out);
}
/* motion versions start each logo as a pale grey proof; it inks into full colour when its lane arrives */
.is-motion .pcell:not(.is-lit) .plogo { filter: grayscale(1) contrast(.85) brightness(1.12); opacity: .42; }
.is-motion .pcell.is-lit .plogo { filter: grayscale(0) contrast(1) brightness(1); opacity: 1; }
.pname {
  position: absolute; left: 16px; bottom: 13px; color: var(--ink-2);
  opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pcell:hover::before { opacity: .72; }
  .pcell:hover .plogo { transform: scale(1.06); }
  .pcell:hover .pname { opacity: 1; transform: none; }
}

/* ---- Just Call Paul: a quiet cue that the film is still to come ---- */
.paul-more {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 4.5vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--ink-2); opacity: 0; pointer-events: none;
}
.paul-more i { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: rgba(12, 14, 13, .16); }
.paul-more i::after {
  content: ""; position: absolute; left: 0; top: -16px; width: 1px; height: 16px; background: var(--ink);
  animation: paul-more 1.9s var(--ease-io) infinite;
}
@keyframes paul-more { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(56px); } }
.is-static .paul-more { display: none; }

@media (max-width: 760px) {
  .item { min-height: 72svh; }
  .item-facts li { flex-direction: column; gap: 4px; padding: 11px 0; font-size: 15px; }
  .item-facts li > :last-child { text-align: left; }

  .stage-top { gap: 12px; }
  .stage-text { font-size: 15px; }
  .stage-docket { margin-top: 16px; padding-top: 12px; row-gap: 8px; }
  .stage-docket li { font-size: 10.5px; padding-right: 0; margin-right: 16px; border-right: 0; }

  .partners { padding: 12svh 0 10svh; }
  .partners-head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 var(--gxr) 0 var(--gx); }
  .partners-head .label { margin-bottom: 14px; }
  .partners-key { display: none; }
  .prows { margin: 0; }
  .prow { grid-template-columns: 1fr; }
  .prow-label { padding: 20px var(--gxr) 14px var(--gx); }
  .prow-cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
  .pcell { height: 118px; border-left: 0; }
  .pcell:nth-child(even) { border-left: 1px solid var(--rule); }
  .pcell:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .pcell:last-child:nth-child(odd) { grid-column: span 2; }
  .plogo { height: calc(var(--h) * .72); max-width: 72%; }

  .paul-more { bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5svh); }
}

/* =========================================================================
   v3.11 (Nov 2): drivers apply from the first screen · forms that really send
   ========================================================================= */

/* ---- "Now hiring" tag on the hero: a paper tag hanging under the nav (desktop), above the hero tab (phone) ---- */
.hire-tag {
  position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 82px); right: var(--gxr);
  display: inline-flex; align-items: center; gap: 11px; height: 44px; padding: 0 6px 0 16px;
  color: var(--ink); text-decoration: none; border-radius: 999px;
  background: rgba(243, 244, 240, .92); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 10px 30px -14px rgba(12, 14, 13, .45);
  transition: background-color .3s var(--ease-out), box-shadow .4s var(--ease-out);
}
.hire-t { font-size: 11.5px; font-weight: 640; font-stretch: 120%; letter-spacing: .085em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.hire-go {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 15px; border-radius: 999px;
  background: var(--ink); color: var(--white); font-size: 13.5px; font-weight: 640; line-height: 1;
  transition: background-color .3s var(--ease-out);
}
.hire-go svg { width: 15px; height: 15px; transition: transform .45s var(--ease-out); }
.hire-tag:hover { background: var(--white); box-shadow: 0 14px 34px -14px rgba(12, 14, 13, .55); }
.hire-tag:hover .hire-go { background: var(--sign); }
.hire-tag:hover .hire-go svg { transform: translateX(3px); }
.hire-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(20, 161, 1, .55); animation: hire-ping 2.4s var(--ease-out) infinite;
}
@keyframes hire-ping { 0% { box-shadow: 0 0 0 0 rgba(20, 161, 1, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(20, 161, 1, 0); } }
.nav-dot { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--green); vertical-align: 2px; }
.is-static .hire-dot { animation: none; }
html.is-calm .hire-tag { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--white); }
@media (max-width: 760px) {
  .hire-tag { top: auto; right: auto; left: var(--gx); bottom: calc(var(--tabh, 46%) + 12px); height: 42px; padding-left: 14px; gap: 10px; }
  .hire-t { font-size: 10.5px; }
  .hire-go { height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .hire-dot { animation: none; } }

/* ---- spam trap: a field people never see ---- */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Request capacity sheet: field errors, sending, sent ---- */
.f-err:empty { display: none; }
.f-err { color: #B3261E; font-size: 12.5px; font-weight: 560; }
.fields label.is-bad input, .fields label.is-bad textarea { border-color: #B3261E; box-shadow: 0 0 0 1px #B3261E; }
.sheet-note.is-bad { color: #B3261E; }
.sheet-alt { display: inline-block; margin-top: 8px; color: var(--ink); font-weight: 700; }
#requestForm.is-sending .sheet-foot .btn { opacity: .75; cursor: progress; }
#requestForm.is-sent .sheet-help, #requestForm.is-sent .fields, #requestForm.is-sent .sheet-foot, #requestForm.is-sent #sheet-title { visibility: hidden; }
#requestForm.is-sent .sheet-help, #requestForm.is-sent .fields, #requestForm.is-sent .sheet-foot { display: none; }
.sheet-sent { display: grid; gap: 16px; padding-top: 6px; outline: none; }
.sheet-sent-k { display: inline-flex; align-items: center; gap: 10px; color: var(--sign); }
.sheet-sent h3 { font-size: clamp(34px, 3.4vw, 48px); font-weight: 810; letter-spacing: -.045em; line-height: .95; }
.sheet-sent p:not(.label) { color: var(--ink-2); max-width: 40ch; font-size: 17px; }
.sheet-sent p a { color: var(--ink); font-weight: 700; }
.sheet-sent-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
/* the green tick (same as the How a load moves docket) */
.ap-tick {
  display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.4 8.3l2.3 2.3 4.9-5' fill='none' stroke='%23F3F4F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}