/* =========================================================================
   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; }
@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; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid #fff; transition: scale .45s var(--ease-out), opacity .3s; }
.cursor.is-link .cursor-ring { scale: 1.55; }
.cursor.is-water .cursor-ring { scale: 2.1; 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; }