/* OLADAY V3 — homepage styles.
   Extracted verbatim from the approved prototype. */

      /* ============================================================
         OLADAY LOGISTICS — V3
         Standalone. No backend, no submissions, no pricing logic.
         Brand tokens inherited from the approved design lab.
         ============================================================ */

      :root {
        --ink: #0e0e0f;
        --ink-2: #17171a;
        --ink-3: #212127;
        --paper: #f5f2e9;
        --paper-2: #ebe6da;
        --white: #fffef9;
        --orange: #ff8a00;
        --orange-deep: #f07000;
        --gold: #e6b43a;
        --gold-2: #ffd879;
        --green: #27c984;
        --blue: #54a7ff;
        --muted: #706d65;
        --muted-dark: rgba(255, 253, 248, 0.62);
        --line: rgba(17, 17, 15, 0.13);
        --line-dark: rgba(255, 253, 248, 0.14);
        --shadow: 0 24px 70px rgba(21, 17, 8, 0.12);
        --shadow-lift: 0 34px 90px rgba(21, 17, 8, 0.18);
        --radius-xl: 38px;
        --radius-lg: 28px;
        --radius-md: 20px;
        --radius-sm: 14px;
        --shell: min(1280px, calc(100% - 40px));
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
        --header-h: 84px;
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        scroll-padding-top: 120px;
        -webkit-text-size-adjust: 100%;
        /* Transformed vehicle artwork may temporarily extend beyond a section
           during carousel transitions. Clip at the document root so that
           decorative motion can never create horizontal page movement or drag
           the fixed navbar at phone, tablet, or desktop widths. */
        overflow-x: hidden;
      }
      @supports (overflow: clip) {
        html {
          overflow-x: clip;
        }
      }
      body {
        margin: 0;
        color: var(--ink);
        background:
          radial-gradient(
            circle at 80% 6%,
            rgba(255, 174, 48, 0.13),
            transparent 26rem
          ),
          var(--paper);
        font-family:
          Inter,
          ui-sans-serif,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        line-height: 1.55;
        overflow-x: hidden;
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
        color: inherit;
      }
      button,
      a {
        -webkit-tap-highlight-color: transparent;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      img {
        max-width: 100%;
        /* width/height attributes are presentational hints and would otherwise
           win wherever CSS only sets a width — this keeps every ratio honest
           while the attributes still reserve space and prevent layout shift. */
        height: auto;
        display: block;
      }
      h1,
      h2,
      h3,
      h4 {
        margin: 0;
        line-height: 1.04;
        letter-spacing: -0.03em;
        font-weight: 800;
      }
      p {
        margin: 0;
      }
      :focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 3px;
        border-radius: 6px;
      }

      .shell {
        width: var(--shell);
        margin-inline: auto;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* ---------- shared atoms ---------- */

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--orange-deep);
        margin-bottom: 18px;
      }
      .eyebrow::before {
        content: "";
        width: 28px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--orange), var(--gold-2));
      }
      .on-dark .eyebrow,
      .eyebrow.on-dark {
        color: var(--gold-2);
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 0 0 rgba(39, 201, 132, 0.55);
        animation: pulse 2.4s infinite;
        flex: none;
      }
      @keyframes pulse {
        70% {
          box-shadow: 0 0 0 9px rgba(39, 201, 132, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(39, 201, 132, 0);
        }
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        padding: 0 26px;
        border: 0;
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition:
          transform 0.25s var(--ease),
          box-shadow 0.25s var(--ease),
          background 0.25s var(--ease);
      }
      .button .arrow {
        transition: transform 0.25s var(--ease);
      }
      .button:hover .arrow {
        transform: translateX(4px);
      }
      .button-gold {
        background: linear-gradient(120deg, var(--gold-2), var(--orange));
        color: #221a06;
        box-shadow: 0 14px 34px rgba(255, 138, 0, 0.32);
      }
      .button-gold:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 44px rgba(255, 138, 0, 0.4);
      }
      .button-dark {
        background: var(--ink);
        color: var(--white);
      }
      .button-dark:hover {
        transform: translateY(-2px);
      }
      .button-ghost {
        background: rgba(255, 253, 248, 0.06);
        color: var(--white);
        border: 1px solid var(--line-dark);
        backdrop-filter: blur(8px);
      }
      .button-ghost:hover {
        background: rgba(255, 253, 248, 0.12);
      }
      .button-outline {
        background: transparent;
        color: var(--ink);
        border: 1.5px solid rgba(17, 17, 15, 0.22);
      }
      .button-outline:hover {
        border-color: var(--ink);
      }

      .pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        border-radius: 999px;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .pill-web {
        background: rgba(39, 201, 132, 0.14);
        color: #0f7a4d;
        border: 1px solid rgba(39, 201, 132, 0.3);
      }
      .pill-app {
        background: rgba(84, 167, 255, 0.14);
        color: #1d63ad;
        border: 1px solid rgba(84, 167, 255, 0.3);
      }
      .pill-soon {
        background: rgba(255, 138, 0, 0.14);
        color: #a35400;
        border: 1px solid rgba(255, 138, 0, 0.32);
      }
      .pill-partner {
        background: rgba(17, 17, 15, 0.07);
        color: var(--muted);
        border: 1px solid var(--line);
      }

      .section-head {
        display: flex;
        gap: 40px;
        align-items: end;
        justify-content: space-between;
        margin-bottom: 46px;
      }
      .section-head h2 {
        font-size: clamp(2.1rem, 4.4vw, 3.5rem);
        max-width: 16ch;
      }
      .section-head > p {
        max-width: 40ch;
        color: var(--muted);
        font-size: 1rem;
        padding-bottom: 8px;
      }
      .on-dark .section-head > p {
        color: var(--muted-dark);
      }

      /* ---------- reveal / stagger motion ---------- */

      .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition:
          opacity 0.7s var(--ease),
          transform 0.7s var(--ease);
      }
      .reveal.is-visible {
        opacity: 1;
        transform: none;
      }
      .stagger > * {
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.6s var(--ease),
          transform 0.6s var(--ease);
      }
      .stagger.is-visible > * {
        opacity: 1;
        transform: none;
      }
      .stagger.is-visible > *:nth-child(1) {
        transition-delay: 0.05s;
      }
      .stagger.is-visible > *:nth-child(2) {
        transition-delay: 0.13s;
      }
      .stagger.is-visible > *:nth-child(3) {
        transition-delay: 0.21s;
      }
      .stagger.is-visible > *:nth-child(4) {
        transition-delay: 0.29s;
      }
      .stagger.is-visible > *:nth-child(5) {
        transition-delay: 0.37s;
      }
      .stagger.is-visible > *:nth-child(6) {
        transition-delay: 0.45s;
      }

      /* Headline wipe — the line resolves as you reach it, which slows the eye
         down just enough to actually read it. */
      .wipe {
        display: block;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.9s var(--ease);
      }
      .is-visible .wipe,
      .wipe.is-visible {
        clip-path: inset(0 0 0 0);
      }
      .wipe:nth-child(2) {
        transition-delay: 0.12s;
      }
      .wipe:nth-child(3) {
        transition-delay: 0.24s;
      }

      /* ============================================================
         HEADER — emblem and label sit inside the nav pill only.
         Nothing hangs or overlaps below it.
         ============================================================ */

      .site-header {
        position: fixed;
        top: 16px;
        left: 0;
        right: 0;
        z-index: 90;
        pointer-events: none;
      }
      .nav-stack {
        position: relative;
        width: var(--shell);
        margin-inline: auto;
        pointer-events: auto;
      }
      /* The bar is cut into three. The shell is now a transparent
         3-column grid — 1fr / auto / 1fr — so the middle segment is
         centred on the viewport itself, not merely between its
         neighbours. Otherwise it would drift every time the brand or
         the Services segment changed width. */
      .nav-shell {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 14px;
        min-height: var(--header-h);
      }
      /* each segment carries what used to be the single bar's skin */
      .nav-seg {
        display: flex;
        align-items: center;
        min-height: var(--header-h);
        border-radius: 26px;
        background: rgba(14, 14, 15, 0.9);
        border: 1px solid rgba(255, 253, 248, 0.09);
        backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 0 18px 50px rgba(10, 8, 3, 0.3);
        transition:
          background 0.3s var(--ease),
          box-shadow 0.3s var(--ease);
      }
      .nav-seg--brand {
        justify-self: start;
        gap: 18px;
        padding: 10px 22px 10px 18px;
      }
      .nav-seg--app {
        justify-self: center;
        gap: 10px;
        padding: 10px 14px;
      }
      .nav-seg--app-mobile {
        display: none;
      }
      .nav-seg--actions {
        justify-self: end;
        gap: 10px;
        padding: 10px 10px 10px 16px;
      }
      /* ---- centre pill: rotating service marketing --------------------
         Every message is stacked in ONE grid cell, so the container sizes
         itself to the widest message and never changes width as messages
         swap. A width that changed per message would shove the pills either
         side of it on every tick. */
      .nav-rot-link {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
      }
      /* justify-items must be START, not center. Centring each message inside
         the fixed-width box makes short messages sit ~50px right of long ones,
         so the text visibly slides left and right on every tick even though
         the pill itself never changes size. */
      .nav-rotator {
        display: grid;
        align-items: center;
        justify-items: start;
      }
      .nav-rot-item {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--white);
        opacity: 0;
        transform: translateY(6px);
        transition:
          opacity 0.45s var(--ease),
          transform 0.45s var(--ease);
      }
      /* First item carries is-active in the HTML, so the bar reads correctly
         with no JavaScript at all. */
      .nav-rot-item.is-active {
        opacity: 1;
        transform: none;
      }
      /* The arrow is a sibling of .nav-rotator, not a child of an item.
         Keep it visible and non-shrinking at every navbar breakpoint. */
      .nav-rot-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-width: 0.9em;
        font-size: 0.9rem;
        line-height: 1;
        color: var(--gold-2);
      }
      /* short labels are the tablet variant — hidden on desktop */
      .nav-rot-sm,
      .nav-book-sm {
        display: none;
      }
      /* Scrolled state deepens each PILL, never the shell. The shell is the
         transparent 3-column grid — painting it fills the gaps between the
         segments with a full-width square slab that blocks the design. */
      .site-header.is-scrolled .nav-seg {
        background: rgba(14, 14, 15, 0.97);
        box-shadow: 0 20px 60px rgba(10, 8, 3, 0.42);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: none;
      }
      .brand-mark {
        width: 62px;
        height: 44px;
        display: grid;
        place-items: center;
        flex: none;
      }
      .brand-mark img {
        width: 62px;
      }
      .brand-copy {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        color: var(--white);
      }
      .brand-copy strong {
        font-size: 0.94rem;
        font-weight: 800;
        letter-spacing: 0.14em;
      }
      .brand-copy small {
        font-size: 0.6rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--muted-dark);
      }
      .desktop-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
      }
      .nav-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        white-space: nowrap;
        padding: 10px 15px;
        border: 0;
        background: transparent;
        cursor: pointer;
        border-radius: 999px;
        font-size: 0.86rem;
        font-weight: 600;
        color: rgba(255, 253, 248, 0.76);
        transition:
          color 0.2s var(--ease),
          background 0.2s var(--ease);
      }
      .nav-link:hover,
      .nav-link.is-active {
        color: var(--white);
        background: rgba(255, 253, 248, 0.08);
      }
      .nav-link .caret {
        width: 7px;
        height: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.25s var(--ease);
      }
      .nav-item.is-open .nav-link .caret {
        transform: translateY(1px) rotate(-135deg);
      }
      .nav-item {
        position: relative;
      }
      /* The store marks keep their own brand colour; the orange and gold
         live in a ring around each rather than as a fill behind them,
         which would have muddied the multicolour Play icon. */
      .store-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        padding: 3px;
        background: rgba(255, 253, 248, 0.06);
        border: 1.5px solid transparent;
        transition:
          transform 0.2s var(--ease),
          box-shadow 0.2s var(--ease),
          border-color 0.2s var(--ease);
      }
      .store-badge img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        display: block;
      }
      .store-badge--apple {
        border-color: rgba(255, 138, 0, 0.55);
      }
      .store-badge--play {
        border-color: rgba(255, 216, 121, 0.6);
      }
      .store-badge--apple:hover {
        border-color: var(--orange);
        box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.16);
        transform: translateY(-1px);
      }
      .store-badge--play:hover {
        border-color: var(--gold-2);
        box-shadow: 0 0 0 3px rgba(255, 216, 121, 0.18);
        transform: translateY(-1px);
      }

      .nav-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: none;
      }
      .track-chip {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        white-space: nowrap;
        padding: 12px 18px;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--white);
        background: rgba(255, 253, 248, 0.07);
        border: 1px solid var(--line-dark);
        transition: background 0.2s var(--ease);
      }
      .track-chip:hover {
        background: rgba(255, 253, 248, 0.14);
      }
      .nav-book {
        min-height: 48px;
        padding: 0 22px;
        font-size: 0.88rem;
        white-space: nowrap;
      }

      .menu-trigger {
        display: none;
        width: 50px;
        height: 50px;
        border-radius: 16px;
        border: 1px solid var(--line-dark);
        background: rgba(255, 253, 248, 0.07);
        cursor: pointer;
        position: relative;
      }
      .menu-trigger span,
      .menu-trigger span::before,
      .menu-trigger span::after {
        position: absolute;
        left: 50%;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--white);
        transition:
          transform 0.3s var(--ease),
          opacity 0.2s var(--ease);
      }
      .menu-trigger span {
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .menu-trigger span::before,
      .menu-trigger span::after {
        content: "";
        left: 0;
        transform-origin: center;
      }
      .menu-trigger span::before {
        top: -7px;
      }
      .menu-trigger span::after {
        top: 7px;
      }
      body.menu-open .menu-trigger span {
        background: transparent;
      }
      body.menu-open .menu-trigger span::before {
        transform: translateY(7px) rotate(45deg);
      }
      body.menu-open .menu-trigger span::after {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ---------- services mega panel ---------- */

      .mega-panel {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: min(760px, calc(100vw - 48px));
        padding: 22px;
        border-radius: var(--radius-lg);
        background: rgba(20, 20, 22, 0.97);
        border: 1px solid var(--line-dark);
        backdrop-filter: blur(20px);
        box-shadow: 0 30px 80px rgba(8, 6, 2, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition:
          opacity 0.25s var(--ease),
          transform 0.25s var(--ease),
          visibility 0.25s;
      }
      .nav-item.is-open .mega-panel {
        opacity: 1;
        visibility: visible;
        transform: none;
      }
      .mega-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      .mega-card {
        display: grid;
        grid-template-columns: 74px 1fr;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        transition:
          background 0.2s var(--ease),
          border-color 0.2s var(--ease),
          transform 0.2s var(--ease);
      }
      .mega-card:hover {
        background: rgba(255, 253, 248, 0.06);
        border-color: var(--line-dark);
        transform: translateX(3px);
      }
      .mega-card img {
        width: 74px;
        height: 46px;
        object-fit: contain;
      }
      .mega-card strong {
        display: block;
        font-size: 0.88rem;
        color: var(--white);
        font-weight: 700;
      }
      .mega-card small {
        display: block;
        font-size: 0.72rem;
        color: var(--muted-dark);
        line-height: 1.35;
      }
      .mega-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--line-dark);
        color: var(--muted-dark);
        font-size: 0.78rem;
      }
      .mega-foot a {
        color: var(--gold-2);
        font-weight: 700;
      }

      /* ---------- compact tablet / mobile navigation ------------------
         The previous drawer painted the whole viewport and removed the page
         from view. This panel stays anchored below the hamburger, preserves
         the surrounding context and gives touch users a short, organised set
         of choices instead of a wall of oversized links. */

      .menu-scrim {
        position: fixed;
        inset: 0;
        z-index: 89;
        border: 0;
        background: rgba(10, 8, 4, 0.16);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.25s var(--ease),
          visibility 0.25s;
      }
      .menu-scrim.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .mobile-menu {
        position: fixed;
        top: calc(env(safe-area-inset-top) + 104px);
        right: max(12px, calc((100vw - var(--shell)) / 2));
        z-index: 96;
        width: min(280px, calc(100vw - 24px));
        max-height: calc(100dvh - 124px);
        padding: 18px;
        border-radius: 26px;
        color: var(--white);
        background:
          radial-gradient(
            circle at 100% 0,
            rgba(255, 138, 0, 0.2),
            transparent 19rem
          ),
          rgba(12, 12, 13, 0.97);
        border: 1px solid rgba(255, 253, 248, 0.13);
        box-shadow: 0 34px 90px rgba(6, 5, 2, 0.48);
        backdrop-filter: blur(24px) saturate(145%);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.97);
        transform-origin: top right;
        transition:
          opacity 0.25s var(--ease),
          transform 0.3s var(--ease),
          visibility 0.25s;
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
      }
      /* Single-column drawer for every non-desktop width. The bar swaps to
         the hamburger at 1024px, so this panel is the tablet and phone nav:
         eyebrow, page links, the two actions, then the store badges —
         each group stacked under the last. */
      .mobile-menu-intro {
        padding: 2px 4px 12px;
      }
      .mobile-menu-intro small {
        display: block;
        color: var(--gold-2);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }
      /* Pages read as a quiet vertical run of text links — no pills, so the
         only emphasis in the column is the gold booking button below. */
      .mobile-menu-pages {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .mobile-menu-pages a {
        padding: 11px 4px;
        color: rgba(255, 253, 248, 0.72);
        font-size: 0.92rem;
        font-weight: 600;
        transition: color 0.2s var(--ease);
      }
      .mobile-menu-pages a:hover {
        color: var(--white);
      }
      /* Hairline between each group keeps the single column readable. */
      .mobile-menu-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 253, 248, 0.1);
      }
      .mobile-menu-actions .button {
        min-height: 48px;
        width: 100%;
        padding-inline: 16px;
        font-size: 0.8rem;
      }
      .mobile-store-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 253, 248, 0.1);
      }
      .mobile-store-row .store-button {
        min-height: 54px;
        padding: 8px 14px;
      }

      /* ============================================================
         HERO
         ============================================================ */

      .hero-wrap {
        position: relative;
        padding-top: 160px;
        background:
          radial-gradient(
            circle at 78% 22%,
            rgba(255, 138, 0, 0.22),
            transparent 30rem
          ),
          radial-gradient(
            circle at 12% 82%,
            rgba(230, 180, 58, 0.1),
            transparent 26rem
          ),
          var(--ink);
        color: var(--white);
        overflow: hidden;
      }
      .hero {
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
        gap: 50px;
        align-items: center;
        padding-bottom: 70px;
      }
      .hero h1 {
        font-size: clamp(3rem, 6.6vw, 6rem);
        letter-spacing: -0.045em;
        margin-bottom: 24px;
      }
      /* Each line is its own phrase ("Move anything." / "See everything.")
         and must never break mid-phrase onto a third/fourth line — the font
         size clamps down with viewport width instead. */
      .hero h1 .wipe {
        white-space: nowrap;
      }
      .hero h1 em {
        font-style: normal;
        background: linear-gradient(100deg, var(--gold-2), var(--orange) 65%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .hero-lead {
        max-width: 46ch;
        font-size: clamp(1rem, 1.35vw, 1.12rem);
        color: rgba(255, 253, 248, 0.74);
        margin-bottom: 32px;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 44px;
      }
      .hero-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 34px;
        padding-top: 28px;
        border-top: 1px solid var(--line-dark);
      }
      .hero-proof div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 110px;
      }
      .hero-proof strong {
        font-size: 1.7rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--gold-2);
      }
      .hero-proof span {
        font-size: 0.74rem;
        letter-spacing: 0.06em;
        color: var(--muted-dark);
      }

      /* ---------- strategic app-discovery placements ---------- */
      .app-promo {
        position: relative;
      }
      .app-promo--hero,
      .app-promo--tablet,
      .app-promo--mobile {
        display: none;
      }
      .app-promo__eyebrow {
        display: flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 8px;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .app-promo__eyebrow::before {
        content: "";
        width: 28px;
        height: 2px;
        flex: 0 0 auto;
        background: linear-gradient(90deg, var(--gold), var(--orange));
      }
      .app-promo h2 {
        margin-bottom: 8px;
        font-size: clamp(1.35rem, 2.1vw, 2rem);
        letter-spacing: -0.035em;
      }
      .app-promo__copy {
        max-width: 58ch;
        margin-bottom: 16px;
        font-size: 0.84rem;
        line-height: 1.65;
      }
      .app-promo__stores {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .app-promo__store {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        width: 168px;
        min-height: 56px;
        padding: 8px 14px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        background: #0d0d0f;
        color: #fff;
        box-shadow: 0 14px 30px rgba(10, 8, 3, 0.16);
        transition:
          transform 0.22s var(--ease),
          box-shadow 0.22s var(--ease);
      }
      .app-promo__store:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(10, 8, 3, 0.24);
      }
      .app-promo__store svg {
        width: 25px;
        height: 25px;
        flex: 0 0 auto;
        fill: currentColor;
      }
      .network-section
        .app-promo__store[aria-label="Download the OLADAY app on the App Store"]
        svg {
        width: 32px;
        height: 32px;
      }
      .app-promo__store small,
      .app-promo__store strong {
        display: block;
      }
      .app-promo__store small {
        margin-bottom: 1px;
        color: rgba(255, 255, 255, 0.66);
        font-size: 0.58rem;
        letter-spacing: 0.045em;
      }
      .app-promo__store strong {
        font-size: 0.92rem;
        line-height: 1.15;
        white-space: nowrap;
      }
      .explorer-intro {
        display: block;
      }

      @media (min-width: 1025px) {
        .hero {
          row-gap: 28px;
        }
        .hero-copy {
          grid-column: 1;
          grid-row: 1;
        }
        .hero-stage {
          grid-column: 2;
          grid-row: 1 / span 2;
        }
        .app-promo--hero {
          display: block;
          grid-column: 1;
          grid-row: 2;
          align-self: start;
          max-width: 600px;
          padding-top: 22px;
          border-top: 1px solid var(--line-dark);
        }
        .app-promo--hero .app-promo__eyebrow {
          color: var(--gold-2);
        }
        .app-promo--hero .app-promo__copy {
          color: var(--muted-dark);
        }
      }

      /* --- auto-advancing fleet stage --- */

      .hero-stage {
        position: relative;
        min-height: 460px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hero-glow {
        position: absolute;
        inset: 8% 4% 18%;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 138, 0, 0.26),
          transparent 66%
        );
        filter: blur(18px);
      }
      .hero-ring {
        position: absolute;
        width: min(480px, 96%);
        aspect-ratio: 1;
        border-radius: 50%;
        border: 1px dashed rgba(255, 216, 121, 0.24);
      }
      .hero-ring.inner {
        width: min(340px, 72%);
        border-style: solid;
        border-color: rgba(255, 216, 121, 0.13);
      }
      .hero-vehicle-slot {
        position: relative;
        width: min(560px, 100%);
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hero-vehicle {
        position: absolute;
        max-width: 100%;
        max-height: 300px;
        object-fit: contain;
        filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.5));
        opacity: 0;
        /* enters travelling in the direction the vehicle faces, then settles */
        transform: translateX(56px) scale(0.96);
        transition:
          opacity 0.5s var(--ease),
          transform 0.75s var(--ease);
      }
      .hero-vehicle.is-active {
        opacity: 1;
        transform: none;
      }
      .hero-vehicle.is-leaving {
        opacity: 0;
        transform: translateX(-46px) scale(0.97);
      }

      .fleet-rail {
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 3;
      }
      .rail-node {
        position: relative;
        width: 62px;
        height: 62px;
        padding: 8px;
        border-radius: 20px;
        border: 1px solid var(--line-dark);
        background: rgba(255, 253, 248, 0.05);
        cursor: pointer;
        transition:
          background 0.25s var(--ease),
          transform 0.25s var(--ease),
          border-color 0.25s var(--ease);
      }
      .rail-node img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.55;
        transition: opacity 0.25s var(--ease);
      }
      .rail-node:hover {
        transform: translateX(3px);
        background: rgba(255, 253, 248, 0.1);
      }
      .rail-node.is-active {
        background: linear-gradient(
          140deg,
          rgba(255, 216, 121, 0.22),
          rgba(255, 138, 0, 0.16)
        );
        border-color: rgba(255, 216, 121, 0.5);
      }
      .rail-node.is-active img {
        opacity: 1;
      }
      /* the progress ring that shows how long this slide holds */
      .rail-node svg {
        position: absolute;
        inset: -3px;
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        transform: rotate(-90deg);
        pointer-events: none;
      }
      .rail-node svg rect {
        fill: none;
        stroke: var(--gold-2);
        stroke-width: 2;
        rx: 22;
        stroke-dasharray: var(--dash, 260);
        stroke-dashoffset: var(--dash, 260);
      }
      .rail-node.is-active svg rect {
        animation: railProgress var(--dwell, 6500ms) linear forwards;
      }
      .hero-stage.is-paused .rail-node.is-active svg rect {
        animation-play-state: paused;
      }
      @keyframes railProgress {
        to {
          stroke-dashoffset: 0;
        }
      }

      .hero-ticker {
        border-top: 1px solid var(--line-dark);
        border-bottom: 1px solid var(--line-dark);
        overflow: hidden;
        background: rgba(255, 253, 248, 0.02);
      }
      .ticker-track {
        display: flex;
        gap: 46px;
        padding: 15px 0;
        width: max-content;
        animation: tickerRun 34s linear infinite;
      }
      .ticker-track span {
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: rgba(255, 253, 248, 0.4);
        white-space: nowrap;
      }
      .ticker-track span::after {
        content: "•";
        margin-left: 46px;
        color: var(--orange);
      }
      @keyframes tickerRun {
        to {
          transform: translateX(-50%);
        }
      }

      /* ============================================================
         SERVICE EXPLORER — user-controlled + four-second carousel
         This is a normal document section: visitors can scroll straight past
         it while the prepared service cards rotate independently.
         ============================================================ */

      .network-section {
        padding-block: 0;
      }
      .explorer-track {
        position: relative;
        height: auto;
      }
      .explorer-pin {
        position: relative;
        top: auto;
        height: auto;
        display: flex;
        align-items: flex-start;
        overflow: hidden;
        padding-block: 56px 34px;
      }
      .explorer-pin > .shell {
        width: var(--shell);
        margin-inline: auto;
      }
      /* the heading is part of the pinned panel, so it must not add
         the usual large section spacing */
      .explorer-pin .section-head {
        margin-bottom: 22px;
      }
      .fleet-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 30px;
      }
      .fleet-tab {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 50px;
        padding: 0 20px;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        background: var(--white);
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        overflow: hidden;
        transition:
          border-color 0.25s var(--ease),
          color 0.25s var(--ease),
          background 0.25s var(--ease);
      }
      .fleet-tab span.idx {
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: var(--muted);
        transition: color 0.25s var(--ease);
      }
      .fleet-tab:hover {
        border-color: rgba(17, 17, 15, 0.3);
      }
      .fleet-tab.is-active {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--white);
      }
      .fleet-tab.is-active span.idx {
        color: var(--gold-2);
      }
      .fleet-deck {
        position: relative;
        display: grid;
      }
      .fleet-deck > .fleet-panel {
        grid-area: 1 / 1;
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 12px, 0) scale(0.995);
        transition:
          opacity 0.28s var(--ease),
          transform 0.32s var(--ease),
          visibility 0s linear 0.32s;
        will-change: opacity, transform;
      }
      .fleet-deck > .fleet-panel.is-active {
        z-index: 2;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition-delay: 0s;
      }
      /* Panels are prepared before scrolling. The deck itself crossfades, so
         replaying every inner animation would only add work and visual drag. */
      .fleet-deck .fleet-visual img,
      .fleet-deck .fleet-details .anim {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .fleet-showcase {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
        gap: 30px;
        align-items: center;
        min-height: 520px;
        padding: 42px;
        border-radius: var(--radius-xl);
        background:
          radial-gradient(
            circle at 22% 30%,
            rgba(255, 138, 0, 0.1),
            transparent 55%
          ),
          var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .fleet-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 330px;
      }
      .fleet-visual::before {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(255, 138, 0, 0.14),
          transparent 68%
        );
      }
      .fleet-visual img {
        position: relative;
        max-width: 100%;
        max-height: 320px;
        object-fit: contain;
        filter: drop-shadow(0 26px 34px rgba(21, 17, 8, 0.22));
        opacity: 0;
        transform: translateX(44px) scale(0.97);
        transition:
          opacity 0.45s var(--ease),
          transform 0.7s var(--ease);
      }
      .fleet-visual img.is-in {
        opacity: 1;
        transform: none;
      }
      .fleet-badge {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: var(--paper);
        border: 1px solid var(--line);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      /* the display above would otherwise beat the UA [hidden] rule */
      .fleet-badge[hidden] {
        display: none;
      }

      .fleet-details {
        position: relative;
      }
      .fleet-number {
        display: inline-block;
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--orange-deep);
        margin-bottom: 14px;
      }
      .fleet-details h3 {
        font-size: clamp(2rem, 3.6vw, 3rem);
        margin-bottom: 14px;
      }
      .fleet-details > p {
        font-size: 0.98rem;
        color: var(--muted);
        max-width: 42ch;
        margin-bottom: 26px;
      }
      .fleet-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 26px;
        padding: 20px 0;
        margin-bottom: 22px;
        border-block: 1px solid var(--line);
      }
      .fleet-metric strong {
        display: block;
        font-size: 1.7rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        margin-bottom: 5px;
      }
      .fleet-metric strong .unit {
        font-size: 0.9rem;
        color: var(--orange-deep);
      }
      .fleet-metric small {
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .fleet-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 26px;
      }
      .fleet-fact {
        padding: 11px 16px;
        border-radius: var(--radius-sm);
        background: var(--paper);
        border: 1px solid var(--line);
      }
      .fleet-fact small {
        display: block;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 3px;
      }
      .fleet-fact strong {
        font-size: 0.86rem;
        font-weight: 700;
      }
      /* Staggered entrance — this is what makes the eye follow the copy
         instead of snapshotting the whole card and moving on. */
      .fleet-details .anim {
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.5s var(--ease),
          transform 0.5s var(--ease);
      }
      .fleet-details.is-in .anim {
        opacity: 1;
        transform: none;
      }
      .fleet-details.is-in .anim:nth-child(1) {
        transition-delay: 0.04s;
      }
      .fleet-details.is-in .anim:nth-child(2) {
        transition-delay: 0.12s;
      }
      .fleet-details.is-in .anim:nth-child(3) {
        transition-delay: 0.2s;
      }
      .fleet-details.is-in .anim:nth-child(4) {
        transition-delay: 0.3s;
      }
      .fleet-details.is-in .anim:nth-child(5) {
        transition-delay: 0.4s;
      }
      .fleet-details.is-in .anim:nth-child(6) {
        transition-delay: 0.5s;
      }

      /* ============================================================
         TRACKING — scroll-scrubbed journey line
         ============================================================ */

      .journey-section {
        position: relative;
        padding-block: 100px;
        background:
          radial-gradient(
            circle at 15% 20%,
            rgba(255, 138, 0, 0.18),
            transparent 34rem
          ),
          var(--ink);
        color: var(--white);
        overflow: hidden;
      }
      .journey-head {
        max-width: 640px;
        margin-bottom: 54px;
      }
      .journey-head h2 {
        font-size: clamp(2.1rem, 4.4vw, 3.5rem);
        margin-bottom: 18px;
      }
      .journey-head p {
        color: rgba(255, 253, 248, 0.7);
        font-size: 1rem;
      }
      .journey-track {
        position: relative;
        padding: 46px 0 30px;
      }
      .journey-svg {
        width: 100%;
        height: 130px;
        overflow: visible;
      }
      .journey-svg .rail {
        fill: none;
        stroke: rgba(255, 253, 248, 0.14);
        stroke-width: 3;
        stroke-linecap: round;
      }
      .journey-svg .progress {
        fill: none;
        stroke: url(#journeyGrad);
        stroke-width: 4;
        stroke-linecap: round;
        stroke-dasharray: var(--len, 1000);
        stroke-dashoffset: var(--len, 1000);
      }
      .journey-rider {
        position: absolute;
        top: 0;
        left: 0;
        width: 76px;
        height: 76px;
        margin: -34px 0 0 -38px;
        display: grid;
        place-items: center;
        border-radius: 22px;
        background: rgba(20, 20, 22, 0.92);
        border: 1px solid rgba(255, 216, 121, 0.4);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
        will-change: transform;
      }
      .journey-rider img {
        width: 54px;
        height: 54px;
        object-fit: contain;
      }
      .journey-nodes {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-top: 6px;
      }
      .journey-node {
        text-align: center;
        padding: 0 6px;
        opacity: 0.34;
        transition:
          opacity 0.4s var(--ease),
          transform 0.4s var(--ease);
      }
      .journey-node.is-lit {
        opacity: 1;
        transform: translateY(-4px);
      }
      .journey-node .dot {
        width: 13px;
        height: 13px;
        margin: 0 auto 12px;
        border-radius: 50%;
        background: rgba(255, 253, 248, 0.2);
        border: 2px solid rgba(255, 253, 248, 0.3);
        transition:
          background 0.4s var(--ease),
          border-color 0.4s var(--ease),
          box-shadow 0.4s var(--ease);
      }
      .journey-node.is-lit .dot {
        background: var(--gold-2);
        border-color: var(--orange);
        box-shadow: 0 0 0 6px rgba(255, 138, 0, 0.16);
      }
      .journey-node strong {
        display: block;
        font-size: 0.86rem;
        font-weight: 800;
        margin-bottom: 4px;
      }
      .journey-node small {
        font-size: 0.72rem;
        color: rgba(255, 253, 248, 0.6);
        line-height: 1.4;
      }
      .journey-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin-top: 40px;
      }
      /* The field is sized to its own placeholder text plus breathing room,
         never the full row. 40ch covers the 48-character placeholder at the
         current face; the +82px covers side padding, borders and the inline
         scan button. */
      .journey-field {
        position: relative;
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        max-width: 100%;
      }
      .journey-input {
        width: calc(40ch + 82px);
        max-width: 100%;
        min-height: 56px;
        padding: 0 60px 0 22px;
        border-radius: 999px;
        background: rgba(255, 253, 248, 0.06);
        border: 1px solid var(--line-dark);
        color: var(--white);
      }
      .journey-input::placeholder {
        color: rgba(255, 253, 248, 0.4);
      }
      .journey-scan {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        padding: 0;
        border-radius: 999px;
        background: rgba(255, 253, 248, 0.08);
        border: 1px solid var(--line-dark);
        color: rgba(255, 253, 248, 0.62);
        cursor: pointer;
        transition:
          color 0.2s var(--ease),
          background 0.2s var(--ease);
      }
      .journey-scan svg {
        width: 20px;
        height: 20px;
      }
      .journey-scan:hover,
      .journey-scan:focus-visible {
        color: var(--white);
        background: rgba(255, 253, 248, 0.16);
      }
      .journey-scan-file {
        display: none;
      }
      .journey-result {
        width: 100%;
        margin-top: 14px;
        font-size: 0.82rem;
        color: rgba(255, 253, 248, 0.6);
      }

      /* Tablet and desktop: headline on the left, tracking field in the
         empty space on the right, Track movement stacked under the field.
         Scoped to #track .shell so the shared .shell utility is untouched. */
      @media (min-width: 761px) {
        #track .shell {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: center;
          column-gap: 40px;
        }
        #track .journey-head {
          grid-column: 1;
          grid-row: 1;
        }
        #track .journey-cta {
          grid-column: 2;
          grid-row: 1;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 0;
        }
        #track .journey-track {
          grid-column: 1 / -1;
          grid-row: 2;
        }
      }

      /* .access-note is still used by the business-vision disclaimer
         paragraph even though the Web vs App comparison table was removed. */
      .access-note {
        margin-top: 22px;
        font-size: 0.84rem;
        color: var(--muted);
        max-width: 70ch;
      }

      /* ============================================================
         SHARE VAN METER
         ============================================================ */

      .share-section {
        padding-block: 96px;
      }
      .share-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 44px;
        align-items: center;
        padding: 48px;
        border-radius: var(--radius-xl);
        background:
          radial-gradient(
            circle at 80% 15%,
            rgba(84, 167, 255, 0.14),
            transparent 55%
          ),
          var(--ink);
        color: var(--white);
        box-shadow: var(--shadow-lift);
      }
      .share-panel h2 {
        font-size: clamp(1.9rem, 3.6vw, 2.9rem);
        margin-bottom: 16px;
        font-weight: 900;
      }
      .share-panel > div > p {
        color: rgba(255, 253, 248, 0.7);
        font-size: 0.98rem;
        max-width: 46ch;
        margin-bottom: 26px;
      }
      /* the closing line leads into the button, so it is brighter and
         heavier than the body copy and sits tighter to the CTA */
      .share-panel > div > p.share-cta-line {
        color: var(--white);
        font-size: 1.02rem;
        font-weight: 700;
        max-width: none;
        margin-bottom: 18px;
      }
      .share-visual {
        position: relative;
      }
      .share-van-img {
        max-height: 160px;
        margin: 0 auto 22px;
        object-fit: contain;
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45));
      }
      .meter {
        position: relative;
        height: 74px;
        border-radius: var(--radius-md);
        background: rgba(255, 253, 248, 0.07);
        border: 1px solid var(--line-dark);
        overflow: hidden;
        display: flex;
      }
      .meter-fill {
        position: relative;
        display: grid;
        place-items: center;
        width: 0;
        transition: width 1.3s var(--ease);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .meter-fill.you {
        background: linear-gradient(120deg, var(--gold-2), var(--orange));
        color: #241b06;
      }
      .meter-fill.other {
        background: rgba(84, 167, 255, 0.32);
        color: #dbebff;
        border-left: 2px solid rgba(255, 253, 248, 0.2);
      }
      /* the key mirrors the bar's own 38/44/18 split, so each word sits
         under the colour it names and the bar explains itself. the swatch
         stacks above the label rather than beside it — inline, the dot
         plus "Empty" is wider than the 18% column can hold. */
      .meter-legend {
        display: grid;
        grid-template-columns: 38fr 44fr 18fr;
        gap: 8px;
        margin-top: 10px;
        font-size: 0.76rem;
        color: rgba(255, 253, 248, 0.64);
      }
      .meter-legend > span {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-align: center;
        line-height: 1.2;
      }
      .meter-legend i {
        display: block;
        flex: none;
        width: 11px;
        height: 11px;
        border-radius: 4px;
        margin-right: 0;
      }
      /* phone: the capacity bar is half height — it reads the same at a
         glance and gives the section back 37px */
      @media (max-width: 760px) {
        .meter {
          height: 37px;
        }
      }
      /* the three labels are two or three words each — a wrapping row
         reads as one set, where a stacked grid left them sparse */
      .share-points {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        margin-bottom: 22px;
      }
      .share-point {
        display: flex;
        gap: 12px;
        align-items: start;
        font-size: 0.88rem;
        color: rgba(255, 253, 248, 0.76);
      }
      .share-point::before {
        content: "";
        flex: none;
        width: 7px;
        height: 7px;
        margin-top: 8px;
        border-radius: 50%;
        background: var(--gold-2);
      }

      /* ============================================================
         SAVERS DEAL (web only)
         ============================================================ */

      .savers-section {
        padding-block: 0 96px;
      }
      .savers {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 0;
        border-radius: var(--radius-xl);
        overflow: hidden;
        border: 1px solid var(--line);
        background: var(--white);
        box-shadow: var(--shadow);
      }
      .savers-copy {
        padding: 44px;
      }
      .savers-copy h2 {
        font-size: clamp(1.8rem, 3.2vw, 2.6rem);
        margin-bottom: 14px;
      }
      .savers-copy p {
        color: var(--muted);
        font-size: 0.95rem;
        max-width: 44ch;
        margin-bottom: 24px;
      }
      /* four terms, so an even 2x2 rather than a ragged wrapped row —
         equal columns keep the block reading as one spec panel */
      .savers-terms {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 26px;
      }
      .savers-term {
        padding: 12px 16px;
        border-radius: var(--radius-sm);
        background: var(--paper);
        border: 1px solid var(--line);
      }
      .savers-term small {
        display: block;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 3px;
      }
      .savers-term strong {
        font-size: 1.02rem;
        letter-spacing: -0.01em;
      }
      /* the price is the offer — it carries the accent and the size, so
         the eye lands there before the conditions around it */
      .savers-term--rate {
        background: linear-gradient(
          135deg,
          rgba(255, 138, 0, 0.1),
          rgba(255, 216, 121, 0.06)
        );
        border-color: rgba(255, 138, 0, 0.28);
      }
      .savers-term--rate strong {
        font-size: 1.55rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--orange-deep);
      }
      .savers-eligibility {
        margin: -4px 0 26px;
        padding: 16px;
        border: 1px solid rgba(255, 138, 0, 0.22);
        border-radius: var(--radius-sm);
        background: rgba(255, 138, 0, 0.055);
      }
      .savers-eligibility > strong {
        display: block;
        margin-bottom: 7px;
        font-size: 0.82rem;
      }
      .savers-copy .savers-eligibility p {
        max-width: none;
        margin-bottom: 12px;
        font-size: 0.78rem;
        line-height: 1.55;
      }
      .savers-exclusions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 0 12px;
        padding: 0;
        list-style: none;
      }
      .savers-exclusions li {
        padding: 6px 9px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--white);
        color: var(--ink-2);
        font-size: 0.68rem;
        font-weight: 750;
      }
      .savers-copy .savers-app-note {
        margin-bottom: 0;
        color: var(--ink-2);
      }
      .savers-app-note a {
        color: var(--orange-deep);
        font-weight: 800;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }
      /* 2x2 still fits a 375px phone; only drop to one column on the
         genuinely narrow devices below that */
      @media (max-width: 340px) {
        .savers-terms {
          grid-template-columns: minmax(0, 1fr);
        }
      }
      .savers-meter {
        padding: 44px;
        background:
          radial-gradient(
            circle at 50% 0%,
            rgba(255, 138, 0, 0.2),
            transparent 60%
          ),
          var(--ink-2);
        color: var(--white);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .savers-slots {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-bottom: 6px;
      }
      .savers-slots b {
        font-size: 3.4rem;
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1;
        color: var(--gold-2);
      }
      .savers-slots span {
        font-size: 0.9rem;
        color: rgba(255, 253, 248, 0.6);
      }
      .savers-bar {
        height: 12px;
        border-radius: 999px;
        background: rgba(255, 253, 248, 0.1);
        overflow: hidden;
        margin: 20px 0 12px;
      }
      .savers-bar i {
        display: block;
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--gold-2), var(--orange));
        transition: width 1.6s var(--ease);
      }
      .savers-foot {
        display: flex;
        justify-content: space-between;
        font-size: 0.74rem;
        color: rgba(255, 253, 248, 0.55);
      }

      /* ============================================================
         CONSTRUCTION / HEAVY
         ============================================================ */

      .heavy-section {
        padding-block: 96px;
        background: var(--ink);
        color: var(--white);
        overflow: hidden;
      }
      .heavy-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
      }
      .heavy-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 460px;
        padding: 34px;
        border-radius: var(--radius-xl);
        background: rgba(255, 253, 248, 0.045);
        border: 1px solid var(--line-dark);
        overflow: hidden;
      }
      .heavy-card .pill {
        align-self: flex-start;
        background: rgba(255, 253, 248, 0.08);
        border: 1px solid var(--line-dark);
        color: var(--white);
        margin-bottom: 18px;
      }
      .heavy-card.owned .pill {
        background: rgba(39, 201, 132, 0.16);
        border-color: rgba(39, 201, 132, 0.36);
        color: #8bf0c4;
      }
      .heavy-card h3 {
        font-size: clamp(1.5rem, 2.6vw, 2.1rem);
        margin-bottom: 12px;
      }
      .heavy-card > p {
        font-size: 0.92rem;
        color: rgba(255, 253, 248, 0.68);
        max-width: 40ch;
        line-height: 1.55;
      }
      /* body copy 20% down from the card default on the supply card */
      :is(.heavy-card--supply, .heavy-card--containers) > p {
        font-size: 0.736rem;
      }
      .heavy-art {
        position: relative;
        margin-top: auto;
        display: grid;
        place-items: center;
        min-height: 190px;
      }
      .heavy-art img {
        max-height: 200px;
        object-fit: contain;
        filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.5));
      }
      .heavy-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 18px;
      }
      .heavy-list span {
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 0.74rem;
        font-weight: 600;
        background: rgba(255, 253, 248, 0.06);
        border: 1px solid var(--line-dark);
        color: rgba(255, 253, 248, 0.8);
      }
      /* materials, then the service promises — grouped as two runs so the
         six tags read as two kinds rather than one undifferentiated list */
      .heavy-list--service {
        margin-top: 8px;
      }
      .heavy-list--service span {
        background: rgba(255, 138, 0, 0.1);
        border-color: rgba(255, 138, 0, 0.26);
        color: #ffc98f;
      }
      /* this card is the one with an action, so it leads: warm pill in
         place of the old ownership badge, and the tipper bleeds off the
         card edge the way the service cards do */
      :is(.heavy-card--supply, .heavy-card--containers) .pill {
        background: rgba(255, 138, 0, 0.14);
        border-color: rgba(255, 138, 0, 0.34);
        color: #ffc27a;
      }
      /* both CTAs run 20% smaller than the site default so the pair sits
         on one row at every width and leaves the tipper room to breathe */
      .heavy-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 22px;
      }
      .heavy-cta .button {
        min-height: 42px;
        padding: 0 21px;
        font-size: 0.76rem;
        gap: 8px;
      }
      /* taken out of flow to bleed: in grid the image is capped by
         max-width against its column, so negative margins never reach
         the card edge. absolute + explicit height does, and the card's
         overflow:hidden does the clipping. */
      :is(.heavy-card--supply, .heavy-card--containers) .heavy-art {
        position: relative;
        margin-top: 24px;
        min-height: 200px;
      }
      :is(.heavy-card--supply, .heavy-card--containers) .heavy-art picture {
        display: contents;
      }
      :is(.heavy-card--supply, .heavy-card--containers) .heavy-art img {
        position: absolute;
        right: -58px;
        bottom: -46px;
        height: 258px;
        width: auto;
        max-width: none;
        max-height: none;
      }
      /* iPad and desktop: the tipper sits off the right edge, centred,
         and raised clear of the bottom. Phones keep the edge bleed. */
      @media (min-width: 761px) {
        :is(.heavy-card--supply, .heavy-card--containers) .heavy-art img {
          right: auto;
          left: 50%;
          transform: translateX(-50%);
          bottom: -26px; /* raised 20px from the base -46px */
        }
      }

      /* ============================================================
         APP SECTION
         ============================================================ */

      .app-section {
        padding-block: 100px;
      }
      .app-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
        gap: 20px;
        align-items: stretch;
      }
      .app-copy {
        padding: 48px;
        border-radius: var(--radius-xl);
        background: var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .app-copy h2 {
        font-size: clamp(1.9rem, 3.6vw, 3rem);
        margin-bottom: 16px;
      }
      .app-copy > p {
        color: var(--muted);
        font-size: 0.98rem;
        max-width: 46ch;
        margin-bottom: 28px;
      }
      .store-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 32px;
      }
      .store-button {
        display: inline-flex;
        align-items: center;
        gap: 13px;
        min-height: 62px;
        padding: 0 24px;
        border-radius: 16px;
        background: var(--ink);
        color: var(--white);
        transition:
          transform 0.25s var(--ease),
          box-shadow 0.25s var(--ease);
      }
      .store-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(21, 17, 8, 0.28);
      }
      .store-button svg {
        width: 26px;
        height: 26px;
        flex: none;
        fill: currentColor;
      }
      .store-button small {
        display: block;
        font-size: 0.62rem;
        letter-spacing: 0.08em;
        color: rgba(255, 253, 248, 0.6);
      }
      .store-button strong {
        display: block;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.01em;
      }
      .app-features {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .app-feature {
        min-height: 46px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1.5px solid var(--line);
        background: var(--paper);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.22s var(--ease);
      }
      .app-feature.is-active {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--white);
      }

      .phone-stage {
        position: relative;
        display: grid;
        place-items: center;
        padding: 40px 0;
        border-radius: var(--radius-xl);
        background:
          radial-gradient(
            circle at 50% 24%,
            rgba(255, 138, 0, 0.22),
            transparent 62%
          ),
          var(--ink);
        overflow: hidden;
      }
      .phone {
        position: relative;
        width: 280px;
        height: 570px;
        border-radius: 42px;
        padding: 12px;
        background: linear-gradient(160deg, #2c2c31, #131316);
        box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
        transform: rotate(-2.5deg);
      }
      .phone-screen {
        position: relative;
        height: 100%;
        padding: 30px 20px 20px;
        border-radius: 32px;
        background: linear-gradient(180deg, #17171a, #0d0d0f);
        color: var(--white);
        overflow: hidden;
      }
      .phone-notch {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 90px;
        height: 20px;
        border-radius: 999px;
        background: #000;
      }
      .phone-screen__head {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 14px 0 20px;
      }
      .phone-screen__head img {
        width: 34px;
        height: 34px;
        border-radius: 10px;
      }
      .phone-screen__head small {
        font-size: 0.72rem;
        color: rgba(255, 253, 248, 0.55);
      }
      .phone-screen h3 {
        font-size: 1.35rem;
        margin-bottom: 8px;
      }
      .phone-screen > p {
        font-size: 0.8rem;
        color: rgba(255, 253, 248, 0.6);
        line-height: 1.5;
        margin-bottom: 18px;
        min-height: 4.5em;
      }
      .phone-tile {
        padding: 14px;
        border-radius: 16px;
        background: rgba(255, 253, 248, 0.06);
        border: 1px solid var(--line-dark);
        margin-bottom: 10px;
      }
      .phone-tile small {
        display: block;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--gold-2);
        margin-bottom: 5px;
      }
      .phone-tile strong {
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.4;
      }
      .phone-art {
        display: grid;
        place-items: center;
        height: 92px;
        margin-bottom: 12px;
        border-radius: 16px;
        background: rgba(255, 138, 0, 0.1);
        border: 1px solid rgba(255, 216, 121, 0.2);
      }
      .phone-art img {
        max-height: 70px;
        object-fit: contain;
      }

      /* ============================================================
         BUSINESS VISION (clearly labelled — not live)
         ============================================================ */

      .coming-section {
        padding-block: 96px;
        background: var(--paper-2);
        border-block: 1px solid var(--line);
      }
      .coming-panel {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 46px;
        align-items: center;
        padding: 50px;
        border-radius: var(--radius-xl);
        background: var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .coming-chip {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 17px;
        border-radius: 999px;
        background: rgba(255, 138, 0, 0.13);
        border: 1px solid rgba(255, 138, 0, 0.3);
        color: #a35400;
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-bottom: 20px;
      }
      .coming-copy h2 {
        font-size: clamp(1.9rem, 3.6vw, 2.9rem);
        margin-bottom: 16px;
      }
      .coming-copy p {
        color: var(--muted);
        font-size: 0.95rem;
        max-width: 46ch;
        margin-bottom: 14px;
      }
      .network-points {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 26px;
      }
      .network-point {
        padding: 18px;
        border-radius: var(--radius-md);
        background: var(--paper);
        border: 1px solid var(--line);
      }
      .network-point strong {
        display: block;
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 5px;
      }
      .network-point small {
        font-size: 0.78rem;
        color: var(--muted);
        line-height: 1.45;
      }
      .coming-visual {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 400px;
      }
      .network-orbit {
        position: relative;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        border: 1px dashed var(--line);
        display: grid;
        place-items: center;
        animation: orbitSpin 46s linear infinite;
      }
      @keyframes orbitSpin {
        to {
          transform: rotate(360deg);
        }
      }
      .network-core {
        width: 108px;
        height: 108px;
        border-radius: 0;
        display: grid;
        place-items: center;
        background: transparent;
        box-shadow: none;
        animation: orbitSpin 46s linear infinite reverse;
      }
      .network-core img {
        width: 78px;
        border-radius: 0;
      }
      .network-core-mark {
        display: block;
      }
      .business-node {
        position: absolute;
        display: grid;
        place-items: center;
        width: 84px;
        height: 84px;
        border-radius: 26px;
        background: var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        animation: orbitSpin 46s linear infinite reverse;
      }
      .business-node.a {
        top: -26px;
        left: 50%;
        margin-left: -42px;
      }
      .business-node.b {
        right: -26px;
        top: 50%;
        margin-top: -42px;
      }
      .business-node.c {
        bottom: -26px;
        left: 50%;
        margin-left: -42px;
      }
      .business-node.d {
        left: -26px;
        top: 50%;
        margin-top: -42px;
      }

      /* ============================================================
         OPERATIONAL TRUST — present capability, clearly separated
         from the upcoming business-network promise above it
         ============================================================ */
      .trust-section {
        padding: 16px 0 96px;
        background: var(--paper-2);
      }
      .trust-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }
      .trust-card {
        min-height: 275px;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 25px;
        background: rgba(255, 255, 255, 0.72);
      }
      .trust-icon {
        width: 47px;
        height: 47px;
        display: grid;
        place-items: center;
        margin-bottom: 44px;
        color: var(--gold-2);
        border-radius: 15px;
        background: var(--ink);
        font-weight: 900;
      }
      .trust-card h3 {
        margin-bottom: 10px;
        font-size: clamp(1.12rem, 1.7vw, 1.45rem);
      }
      .trust-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.82rem;
      }

      /* ============================================================
         REFERRAL
         ============================================================ */

      .referral-section {
        padding-block: 96px;
      }
      .referral {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        align-items: stretch;
      }
      .referral-lead {
        grid-column: span 1;
        padding: 40px;
        border-radius: var(--radius-xl);
        background: var(--ink);
        color: var(--white);
      }
      .referral-lead h2 {
        font-size: clamp(1.6rem, 2.8vw, 2.2rem);
        margin-bottom: 14px;
      }
      .referral-lead p {
        font-size: 0.9rem;
        color: rgba(255, 253, 248, 0.68);
        line-height: 1.55;
      }
      .referral-step {
        padding: 34px;
        border-radius: var(--radius-xl);
        background: var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }
      .referral-step b {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
        border-radius: 14px;
        background: linear-gradient(140deg, var(--gold-2), var(--orange));
        color: #241b06;
        font-size: 0.9rem;
      }
      .referral-step h3 {
        font-size: 1.1rem;
        margin-bottom: 9px;
      }
      .referral-step p {
        font-size: 0.86rem;
        color: var(--muted);
        line-height: 1.55;
      }
      .referral-note {
        grid-column: 1 / -1;
        padding: 18px 24px;
        border-radius: var(--radius-md);
        background: var(--paper-2);
        border: 1px solid var(--line);
        font-size: 0.8rem;
        color: var(--muted);
      }

      /* ============================================================
         PROOF — customer-review layout
         ============================================================ */

      .proof-section {
        padding-block: 96px;
        background: var(--paper-2);
        border-block: 1px solid var(--line);
      }
      .proof-grid {
        display: block;
      }
      .review-rail {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }

      /* ---- ROTATING REVIEW DECK -------------------------------------
         Four reviews at a time on desktop and tablet, two on a phone.
         Pages are stacked: the active one stays in flow so it sets the
         container height, the rest sit absolutely on top of it at zero
         opacity. That keeps the section from jumping as cards of
         different lengths rotate through.

         Only applied once reviews.js has paginated (.is-rotating), so
         the server-rendered placeholder grid still renders on its own if
         the script never runs. */
      .review-rail.is-rotating {
        display: block;
        position: relative;
        /* Cards 20% narrower. Applied to the deck rather than each card so
           the two columns stay adjacent and the grid rhythm holds —
           shrinking each card inside its own cell would just open ragged
           gaps between them. */
        width: 80%;
        margin-inline: auto;
        /* The pages slide horizontally; without this the entering page is
           briefly visible outside the deck. */
        overflow: hidden;
      }
      .review-rail.is-rotating .review-page {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        transition:
          opacity 560ms var(--ease),
          transform 560ms var(--ease);
      }
      /* Three states, so the movement reads as one direction of travel:
         waiting  — parked off to the RIGHT, ready to come in
         active   — centred
         leaving  — pushed out to the LEFT
         Without the leaving state both pages would sit on the right and
         the deck would appear to bounce rather than advance. */
      .review-rail.is-rotating .review-page:not(.is-active) {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateX(6%);
        pointer-events: none;
        visibility: hidden;
      }
      .review-rail.is-rotating .review-page.is-leaving {
        opacity: 0;
        transform: translateX(-6%);
        /* Stays visible through the transition so the exit can be seen. */
        visibility: visible;
      }
      .review-rail.is-rotating .review-page.is-active {
        position: relative;
        opacity: 1;
        transform: none;
        visibility: visible;
      }
      @media (prefers-reduced-motion: reduce) {
        .review-rail.is-rotating .review-page {
          transition: none;
        }
        .review-rail.is-rotating .review-page:not(.is-active),
        .review-rail.is-rotating .review-page.is-leaving {
          transform: none;
        }
      }
      .review-card {
        padding: 28px;
        border-radius: var(--radius-lg);
        background: var(--white);
        border: 1px solid var(--line);
        /* No drop shadow (owner, 2026-08-24): the section's own background
           already separates the cards — the border is all the definition
           they need, and the floating look read as unprofessional. */
      }
      /* Reviews vary in length, so the card is a column and the byline is
         pushed to the bottom. Without this the avatar, name and location
         sit at a different height in every card and jump on each rotation
         — the one part of the card that must stay still. */
      .review-rail.is-rotating .review-card {
        display: flex;
        flex-direction: column;
      }
      .review-rail.is-rotating .review-card > p {
        flex: 1 1 auto;
      }
      .review-rail.is-rotating .review-who {
        margin-top: auto;
        padding-top: 16px;
      }
      .review-stars {
        color: var(--orange);
        letter-spacing: 3px;
        font-size: 0.9rem;
        margin-bottom: 12px;
      }
      .review-card p {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 16px;
      }
      .review-who {
        display: flex;
        align-items: center;
        gap: 11px;
      }
      .review-avatar {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--ink);
        color: var(--gold-2);
        font-size: 0.8rem;
        font-weight: 800;
      }
      .review-who strong {
        display: block;
        font-size: 0.85rem;
      }
      .review-who small {
        font-size: 0.72rem;
        color: var(--muted);
      }
      /* ============================================================
         VISION + FOOTER
         ============================================================ */

      .vision-section {
        padding-block: 96px;
      }
      .vision {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 46px;
        align-items: center;
        padding: 52px;
        border-radius: var(--radius-xl);
        background:
          radial-gradient(
            circle at 82% 20%,
            rgba(255, 138, 0, 0.2),
            transparent 55%
          ),
          var(--ink);
        color: var(--white);
        box-shadow: var(--shadow-lift);
      }
      .vision h2 {
        font-size: clamp(2rem, 4vw, 3.2rem);
        margin-bottom: 18px;
      }
      .vision p {
        color: rgba(255, 253, 248, 0.7);
        font-size: 0.98rem;
        max-width: 46ch;
      }
      .vision-route {
        display: grid;
        gap: 12px;
      }
      .vision-stop {
        display: grid;
        grid-template-columns: 46px 1fr auto;
        align-items: center;
        gap: 16px;
        padding: 20px 22px;
        border-radius: var(--radius-md);
        background: rgba(255, 253, 248, 0.05);
        border: 1px solid var(--line-dark);
      }
      .vision-stop span {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 14px;
        background: rgba(255, 216, 121, 0.14);
        color: var(--gold-2);
        font-size: 0.8rem;
        font-weight: 800;
      }
      .vision-stop strong {
        font-size: 1rem;
      }
      .vision-stop small {
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 253, 248, 0.5);
      }

      /* ============================================================
         FAQ — native details keep every answer available without JS
         ============================================================ */

      .faq-section {
        padding: 96px 0;
        background:
          radial-gradient(
            circle at 88% 12%,
            rgba(255, 138, 0, 0.14),
            transparent 24rem
          ),
          var(--paper-2);
      }
      .faq-shell {
        display: grid;
        grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr);
        gap: 70px;
        align-items: start;
      }
      .faq-intro {
        position: sticky;
        top: 130px;
      }
      .faq-intro h2 {
        font-size: clamp(3rem, 6vw, 6rem);
      }
      .faq-intro > p {
        max-width: 38ch;
        margin-top: 20px;
        color: var(--muted);
      }
      .faq-contact {
        display: inline-flex;
        margin-top: 24px;
      }
      .faq-list {
        display: grid;
        gap: 10px;
      }
      .faq-item {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: rgba(255, 254, 249, 0.72);
        transition:
          border-color 0.2s var(--ease),
          box-shadow 0.2s var(--ease);
      }
      .faq-item[open] {
        border-color: rgba(255, 138, 0, 0.32);
        box-shadow: 0 16px 36px rgba(21, 17, 8, 0.08);
      }
      .faq-item summary {
        position: relative;
        display: grid;
        grid-template-columns: 36px 1fr 34px;
        align-items: center;
        gap: 14px;
        min-height: 82px;
        padding: 16px 20px;
        cursor: pointer;
        list-style: none;
        font-size: 0.98rem;
        font-weight: 800;
      }
      .faq-item summary::-webkit-details-marker {
        display: none;
      }
      .faq-number {
        color: #b15b00;
        font-size: 0.62rem;
        letter-spacing: 0.12em;
      }
      .faq-toggle {
        position: relative;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: var(--white);
        background: var(--ink);
      }
      .faq-toggle::before,
      .faq-toggle::after {
        content: "";
        position: absolute;
        width: 12px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.25s var(--ease);
      }
      .faq-toggle::after {
        transform: rotate(90deg);
      }
      .faq-item[open] .faq-toggle::after {
        transform: rotate(0deg);
      }
      .faq-answer {
        padding: 0 74px 24px 70px;
        color: var(--muted);
        font-size: 0.9rem;
      }

      /* ============================================================
         ENTERPRISE FOOTER
         ============================================================ */

      footer {
        background: var(--ink);
        color: var(--white);
        padding: 30px 0 0;
      }
      .footer-callout {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 56px;
        padding: 34px;
        border: 1px solid var(--line-dark);
        border-radius: 28px;
        background:
          radial-gradient(
            circle at 88% 50%,
            rgba(255, 138, 0, 0.24),
            transparent 20rem
          ),
          rgba(255, 253, 248, 0.055);
      }
      .footer-callout small {
        display: block;
        margin-bottom: 8px;
        color: var(--gold-2);
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.17em;
        text-transform: uppercase;
      }
      .footer-callout strong {
        font-size: clamp(1.8rem, 4vw, 3.5rem);
        letter-spacing: -0.04em;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: minmax(260px, 1.5fr) repeat(
            4,
            minmax(120px, 1fr)
          );
        gap: 34px;
        padding-bottom: 48px;
      }
      .footer-brand > picture {
        display: block;
        width: 168px;
        margin-bottom: 16px;
      }
      .footer-brand > picture img {
        width: 100%;
        margin: 0;
      }
      /* ---- FOOTER BRAND — STACKED DESKTOP LOCKUP --------------------
         Desktop (>=1025px) swaps the single combined logo for the symbol
         sitting centred above the wordmark. Tablet adopts this exact image
         relationship in its own isolated rule; mobile keeps the combined
         lockup untouched. */
      .footer-brand__stack {
        display: none;
      }
      @media (min-width: 1025px) {
        .footer-brand > picture {
          display: none;
        }
        .footer-brand__stack {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 16px;
          width: 260px;
          margin-bottom: 20px;
        }
        .footer-brand__stack picture {
          display: block;
        }
        .footer-brand__stack img {
          width: 100%;
          height: auto;
          margin: 0;
        }
        .footer-brand__symbol {
          width: 97.2px; /* 108px − 10% */
        }
        .footer-brand__wordmark {
          width: 208px; /* 260px − 20% */
        }
        /* Store badges share the lockup's 260px column and centre inside
           it, so they sit on the same axis as the symbol and wordmark. */
        .footer-brand .footer-store-row {
          width: 260px;
          justify-content: center;
        }
      }
      .footer-brand p {
        font-size: 0.82rem;
        color: rgba(255, 253, 248, 0.56);
        line-height: 1.6;
        max-width: 34ch;
        margin-bottom: 20px;
      }
      .footer-store-row {
        display: flex;
        gap: 8px;
      }
      .footer-store-row .store-badge {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        overflow: hidden;
      }
      .footer-store-row .store-badge img {
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: contain;
      }
      footer h3 {
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.17em;
        text-transform: uppercase;
        color: var(--gold-2);
        margin-bottom: 16px;
      }
      footer a,
      footer address {
        display: block;
        font-size: 0.8rem;
        font-style: normal;
        color: rgba(255, 253, 248, 0.62);
        padding: 6px 0;
        transition: color 0.2s var(--ease);
      }
      footer a:hover {
        color: var(--white);
      }
      .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        text-align: center;
        padding: 20px 0 26px;
        border-top: 1px solid var(--line-dark);
        font-size: 0.7rem;
        color: rgba(255, 253, 248, 0.4);
      }
      .footer-copyright {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }
      .footer-copyright__mark {
        display: block;
        width: 18px;
        height: auto;
      }

      /* ---------- mobile action bar ---------- */

      .mobile-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(env(safe-area-inset-bottom) + 12px);
        z-index: 80;
        display: none;
        gap: 10px;
        padding: 9px;
        border-radius: 22px;
        background: rgba(14, 14, 15, 0.94);
        border: 1px solid var(--line-dark);
        backdrop-filter: blur(16px);
        box-shadow: 0 18px 44px rgba(6, 5, 2, 0.42);
        transform: translateY(140%);
        transition: transform 0.4s var(--ease);
      }
      .mobile-bar.is-in {
        transform: none;
      }
      .mobile-bar a {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 50px;
        border-radius: 15px;
        font-size: 0.88rem;
        font-weight: 700;
      }
      .mobile-bar a.book {
        background: linear-gradient(120deg, var(--gold-2), var(--orange));
        color: #241b06;
      }
      .mobile-bar a.track {
        background: rgba(255, 253, 248, 0.09);
        color: var(--white);
        border: 1px solid var(--line-dark);
      }

      /* ============================================================
         RESPONSIVE
         ============================================================ */

      @media (max-width: 1180px) {
        .nav-link {
          padding: 10px 11px;
          font-size: 0.82rem;
        }
        .track-chip {
          display: none;
        }
        .brand-copy {
          display: none;
        }
      }

      @media (max-width: 1024px) {
        :root {
          --shell: min(1280px, calc(100% - 32px));
        }
        /* .desktop-nav is dead — no element carries that class any more, so
           this rule hid nothing and the hamburger was ADDED to the actions
           pill instead of replacing its links. That pushed the pill (and the
           hamburger with it) off the right edge. Hide the real element:
           Services is item 01 of the mobile menu, so nothing is lost. */
        .desktop-nav,
        #servicesItem {
          display: none;
        }
        .menu-trigger {
          display: block;
        }
        /* auto 1fr auto: the brand and the actions pill are sized by their own
           content and anchored to the shell's left and right edges, while the
           middle track absorbs ALL the slack. The hamburger's position is
           therefore fixed by the viewport, not by the centre pill — the
           rotator can change width and nothing on either side moves.
           (1fr auto 1fr, used on desktop, would force both outer tracks to the
           same width and squeeze the brand at tablet sizes.) */
        .nav-shell {
          grid-template-columns: auto 1fr auto;
          gap: 10px;
        }
        /* Brand runs compact across the WHOLE tablet band. The full-size
           wordmark does fit at exactly 1024 — with 0px to spare — and breaks
           below ~1018, so it is not worth shipping. Compact costs ~110px and
           buys the long marketing copy and the full CTA all the way down to
           ~915px instead. */
        .brand-mark,
        .brand-mark img {
          width: 50px;
        }
        .brand-mark {
          height: 36px;
        }
        .brand-copy strong {
          font-size: 0.72rem;
          letter-spacing: 0.06em;
        }
        .brand-copy small {
          font-size: 0.48rem;
          letter-spacing: 0.08em;
        }
        .nav-seg--brand {
          padding: 10px 14px 10px 12px;
        }
        .brand {
          gap: 10px;
        }
        .hero {
          grid-template-columns: 1fr;
          gap: 20px;
          padding-bottom: 50px;
        }
        .hero-stage {
          min-height: 400px;
        }
        /* The wordmark is a fixed 192px but the brand pill shrinks with the
           viewport. Measured: it still clears its pill at 830px (-2px) and
           spills at 825px (+3px), sliding under the next pill. So the copy
           only comes back above that floor — below it the bar shows the
           emblem alone, same as 1025–1180px and the phone layout. */
        @media (min-width: 830px) {
          .brand-copy {
            display: flex;
          }
        }
        .savers,
        .share-panel,
        .coming-panel,
        .vision,
        .app-panel {
          grid-template-columns: 1fr;
        }
        .fleet-showcase {
          grid-template-columns: 1fr;
          min-height: 0;
        }
        .fleet-visual {
          order: -1;
          min-height: 280px;
        }
        .heavy-grid,
        .referral {
          grid-template-columns: 1fr;
        }
        /* stacked, the cards would run the full 736px while the copy
           inside stays capped near 320px — a third more empty space than
           desktop with the same content in it. Holding them to the
           desktop card width and centring restores those proportions. */
        .heavy-grid {
          justify-items: center;
        }
        .heavy-card {
          width: 100%;
          max-width: 631px;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
        }
        .footer-brand {
          grid-column: 1 / -1;
        }
        .faq-shell {
          gap: 40px;
        }
      }

      /* ---- COMPACT NAV BAND (below 940px) ----------------------------
         The 761–1024px range is far too wide to size once. Calibrated for
         761px it wasted 262px on an iPad Pro at 1024. So the short labels and
         the tightest sizing now stop at 940px: from there up to the 1024px
         top of the tablet band the bar runs the LONG marketing copy and the
         full "Start a booking" label, with the hamburger standing in for
         Services. The brand stays compact across the whole band — see the
         note in the <=1024 block for why the full-size wordmark is not worth
         shipping at 1024. */
      @media (max-width: 939px) {
        .nav-rot-lg,
        .nav-book-lg {
          display: none;
        }
        .nav-rot-sm,
        .nav-book-sm {
          display: inline;
        }
        /* The rotator and the store badges share the bar with the brand
           wordmark, so this band runs everything a step tighter. Measured to
           fit 761px (the narrowest width it sees) with headroom. */
        .nav-rot-item {
          font-size: 0.78rem;
        }
        .nav-seg--app {
          padding: 10px 12px;
        }
        .store-badge {
          width: 34px;
          height: 34px;
          border-radius: 10px;
        }
        .nav-seg--actions {
          gap: 8px;
          padding: 10px 10px 10px 12px;
        }
      }

      @media (max-width: 760px) {
        :root {
          --shell: min(1280px, calc(100% - 24px));
          --radius-xl: 26px;
          --radius-lg: 22px;
          --header-h: 64px;
        }
        .site-header {
          top: 10px;
        }
        /* Mobile owns three independent tracks. The outside tracks are sized
           only by the emblem and hamburger; minmax(0, 1fr) makes the centre
           genuinely flexible, so changing marketing copy can use the free
           space without ever pushing either outside control off-screen. */
        .nav-shell {
          grid-template-columns: max-content minmax(0, 1fr) max-content;
          gap: 8px;
        }
        /* Desktop/tablet keep the established centre. Phone uses the exact
           fixed-centre content and mechanics approved on Ads & Partnerships. */
        .nav-seg--app {
          display: none;
        }
        .nav-seg--app-mobile {
          grid-column: 2;
          justify-self: center;
          display: flex;
          align-items: center;
          width: 100%;
          max-width: min(430px, 100%);
          min-width: 0;
          min-height: 64px;
          gap: 9px;
          padding: 8px 9px 8px 12px;
          background: rgba(14, 14, 15, 0.93);
          box-shadow: 0 18px 50px rgba(10, 8, 3, 0.25);
        }
        .mobile-nav-rotator-link {
          display: flex;
          align-items: center;
          flex: 1 1 auto;
          min-width: 0;
          gap: 9px;
          color: var(--white);
          font-size: 0.76rem;
          font-weight: 800;
          text-decoration: none;
        }
        .mobile-nav-rotator-copy {
          min-width: 0;
          white-space: nowrap;
        }
        .mobile-nav-rotator-item {
          display: none;
          max-width: 18ch;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .mobile-nav-rotator-item.is-active {
          display: block;
          animation: mobileNavRotatorIn 0.32s ease both;
        }
        @keyframes mobileNavRotatorIn {
          from {
            opacity: 0;
            transform: translateY(4px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .mobile-nav-rotator-arrow {
          flex: none;
          color: var(--gold-2);
          font-size: 1.15rem;
        }
        .mobile-nav-rotator-stores {
          display: flex;
          flex: none;
          gap: 6px;
        }
        .nav-seg--app-mobile .store-badge {
          flex: 0 0 34px;
          width: 34px;
          height: 34px;
          padding: 4px;
          border-radius: 10px;
        }
        .nav-seg--actions {
          grid-column: 3;
        }
        .nav-seg--brand,
        .nav-seg--actions {
          position: relative;
          z-index: 1;
          flex-shrink: 0;
        }
        .nav-seg--brand {
          padding: 8px 12px;
        }
        .nav-seg--actions {
          padding: 8px;
        }
        /* The centre pill breathes with the ACTIVE message. On larger
           breakpoints the stacked messages still reserve the longest width;
           this override is deliberately phone-only. */
        .nav-seg--app {
          width: fit-content;
          max-width: 100%;
          min-width: 0;
          padding: 7px;
          gap: 6px;
        }
        .nav-rot-link {
          flex: 0 1 auto;
          min-width: 0;
        }
        .nav-rotator {
          position: relative;
          display: flex;
          min-width: 0;
        }
        .nav-rot-item {
          grid-area: auto;
        }
        .nav-rot-item:not(.is-active) {
          position: absolute;
          inset-inline-start: 0;
          visibility: hidden;
          pointer-events: none;
        }
        .nav-rot-item.is-active {
          position: relative;
          visibility: visible;
        }
        /* Phone keeps the centre slideshow AND the store icons, sized down
           again to make room. */
        .nav-rot-item {
          font-size: 0.68rem;
        }
        .nav-seg--app .store-badge {
          flex: 0 0 auto;
          width: 28px;
          height: 28px;
          border-radius: 9px;
          padding: 2px;
        }
        /* shell is a transparent grid — padding/radius here are single-bar
           leftovers that only inset the pills asymmetrically. Skin the pills. */
        .nav-seg {
          border-radius: 20px;
        }
        .brand-mark {
          width: 48px;
          height: 36px;
        }
        .brand-mark img {
          width: 48px;
        }
        /* Emblem only on phone. The wordmark needs 287px beside a 74px
           hamburger, which does not fit 390px and is far worse at 320px — it
           spilled out over the hero. Same treatment the bar already uses
           between 1025 and 1180px. */
        .brand-copy {
          display: none;
        }
        .nav-book {
          display: none;
        }
        .menu-trigger {
          width: 46px;
          height: 46px;
        }
        .mobile-menu {
          top: calc(env(safe-area-inset-top) + 84px);
          right: 12px;
          max-height: calc(100dvh - 98px);
          padding: 16px;
          border-radius: 24px;
        }
        .mobile-menu-intro {
          padding-bottom: 10px;
        }
        .mobile-bar {
          display: flex;
        }

        .hero-wrap {
          padding-top: 128px;
        }
        .hero h1 {
          /* tuned so "See everything." (the longer line) stays on one line
             down to a 320px viewport, since .wipe no longer wraps */
          font-size: clamp(2.05rem, 10.8vw, 4.2rem);
        }
        .hero-actions .button {
          width: 100%;
        }
        .hero-proof {
          gap: 20px 26px;
        }
        .hero-proof strong {
          font-size: 1.35rem;
        }
        .hero-stage {
          min-height: 380px;
          padding-left: 74px;
        }
        .hero-vehicle-slot {
          height: 230px;
        }
        .hero-vehicle {
          max-height: 230px;
        }
        .fleet-rail {
          left: 0;
          gap: 8px;
        }
        .rail-node {
          width: 54px;
          height: 54px;
          padding: 7px;
          border-radius: 17px;
        }
        .hero-ring {
          display: none;
        }

        .section-head {
          flex-direction: column;
          align-items: start;
          gap: 16px;
          margin-bottom: 30px;
        }
        .section-head > p {
          padding-bottom: 0;
        }

        .savers-copy,
        .savers-meter,
        .app-copy,
        .coming-panel,
        .share-panel,
        .vision,
        .referral-lead,
        .referral-step {
          padding: 28px 22px;
        }

        .network-section,
        .journey-section,
        .share-section,
        .app-section,
        .coming-section,
        .referral-section,
        .proof-section,
        .vision-section {
          padding-block: 62px;
        }
        .savers-section {
          padding-block: 0 62px;
        }

        /* slides become a swipeable rail on phones */
        .fleet-tabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          margin-inline: -12px;
          padding-inline: 12px;
        }
        .fleet-tabs::-webkit-scrollbar {
          display: none;
        }
        .fleet-tab {
          flex: none;
          scroll-snap-align: start;
        }
        .fleet-showcase {
          padding: 26px 22px 30px;
        }
        .fleet-visual {
          min-height: 210px;
        }
        .fleet-visual::before {
          width: 220px;
          height: 220px;
        }
        .fleet-visual img {
          max-height: 200px;
        }
        .fleet-badge {
          position: static;
          margin-bottom: 12px;
          align-self: flex-start;
        }
        .fleet-visual {
          flex-direction: column;
        }
        .fleet-metrics {
          gap: 18px;
        }
        .fleet-metric strong {
          font-size: 1.4rem;
        }
        .fleet-details .button {
          width: 100%;
        }

        .journey-svg {
          height: 90px;
        }
        .journey-rider {
          width: 58px;
          height: 58px;
          margin: -26px 0 0 -29px;
          border-radius: 17px;
        }
        .journey-rider img {
          width: 40px;
          height: 40px;
        }
        .journey-nodes {
          grid-template-columns: repeat(5, 1fr);
          gap: 4px;
        }
        .journey-node strong {
          font-size: 0.66rem;
        }
        .journey-node small {
          display: none;
        }
        /* Phone: the field takes the full row and the scan button stays
           inside it. Track movement drops onto its own line below, stays
           small — never stretched to the field width — and is centred. */
        .journey-field {
          flex: 1 1 100%;
          width: 100%;
        }
        .journey-input {
          width: 100%;
        }
        .journey-cta .button {
          width: auto;
          margin-inline: auto;
        }

        .heavy-card {
          min-height: 0;
          padding: 26px 22px 30px;
        }
        .heavy-art {
          min-height: 150px;
          margin-top: 24px;
        }
        .heavy-art img {
          max-height: 150px;
        }

        .store-buttons {
          display: grid;
          grid-template-columns: 1fr;
        }
        .store-button {
          width: 100%;
        }
        .phone-stage {
          padding: 30px 0;
        }
        .phone {
          width: 250px;
          height: 520px;
          transform: rotate(0deg);
        }
        .network-points {
          grid-template-columns: 1fr;
        }
        .trust-section {
          padding-block: 8px 62px;
        }
        .trust-grid {
          grid-template-columns: 1fr;
        }
        .trust-card {
          min-height: 0;
          display: grid;
          grid-template-columns: 47px minmax(0, 1fr);
          column-gap: 14px;
          padding: 22px;
        }
        .trust-icon {
          grid-row: 1 / span 2;
          margin-bottom: 0;
        }
        .trust-card h3,
        .trust-card p {
          grid-column: 2;
        }
        .trust-card h3 {
          align-self: end;
          margin: 0 0 5px;
        }
        .coming-copy {
          display: block;
        }
        .coming-visual {
          min-height: 320px;
        }
        .network-orbit {
          width: 268px;
          height: 268px;
        }
        .business-node {
          width: 68px;
          height: 68px;
          border-radius: 20px;
          font-size: 0.54rem;
        }
        .business-node.a,
        .business-node.c {
          margin-left: -34px;
        }
        .business-node.b,
        .business-node.d {
          margin-top: -34px;
        }
        .review-rail {
          grid-template-columns: 1fr;
        }
        /* Phone shows two reviews, stacked. */
        .review-rail.is-rotating .review-page {
          grid-template-columns: 1fr;
        }
        .faq-section {
          padding-block: 64px;
        }
        .faq-shell {
          grid-template-columns: 1fr;
          gap: 30px;
        }
        .faq-intro {
          position: static;
        }
        .faq-intro h2 {
          font-size: clamp(2.8rem, 13vw, 4.8rem);
        }
        .faq-item summary {
          grid-template-columns: 28px 1fr 32px;
          gap: 10px;
          min-height: 74px;
          padding: 14px 16px;
          font-size: 0.9rem;
        }
        .faq-answer {
          padding: 0 58px 20px 54px;
          font-size: 0.84rem;
        }
        .footer-callout {
          align-items: flex-start;
          flex-direction: column;
          margin-bottom: 42px;
          padding: 26px 22px;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 26px;
          width: min(100%, 380px);
          margin-inline: auto;
          padding-inline: 12px;
          padding-bottom: 34px;
          box-sizing: border-box;
        }
        .footer-brand {
          display: none;
        }
        .footer-bottom {
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding-bottom: 96px;
        }
      }

      /* Tablet: shorter launch copy and the network share the opening row.
         The benefits then use the full panel width, removing the long empty
         band that appeared above the orbit in the stacked 761–1024 layout. */
      @media (min-width: 761px) and (max-width: 1024px) {
        /* iPad footer: reuse the approved two-image desktop lockup while
           keeping both neighbouring breakpoint families fully isolated. */
        .footer-grid {
          grid-template-columns:
            clamp(190px, 25vw, 260px)
            minmax(0, 1fr)
            minmax(0, 1fr);
          grid-template-rows: auto auto;
          column-gap: clamp(18px, 4vw, 40px);
          row-gap: 36px;
          padding-inline: clamp(20px, 4vw, 48px);
          box-sizing: border-box;
        }
        .footer-brand {
          grid-column: 1;
          grid-row: 1 / span 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          align-self: start;
          text-align: center;
        }
        .footer-brand > picture {
          display: none;
        }
        .footer-brand__stack {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 16px;
          width: 100%;
          max-width: 260px;
          margin-bottom: 20px;
        }
        .footer-brand__stack picture {
          display: block;
        }
        .footer-brand__stack img {
          width: 100%;
          height: auto;
          margin: 0;
        }
        .footer-brand__symbol {
          width: clamp(82px, 10vw, 97.2px);
        }
        .footer-brand__wordmark {
          width: min(80%, 208px);
        }
        .footer-brand .footer-store-row {
          width: 100%;
          justify-content: center;
        }
        .footer-grid > :nth-child(2) {
          grid-column: 2;
          grid-row: 1;
        }
        .footer-grid > :nth-child(3) {
          grid-column: 3;
          grid-row: 1;
        }
        .footer-grid > :nth-child(4) {
          grid-column: 2;
          grid-row: 2;
        }
        .footer-grid > :nth-child(5) {
          grid-column: 3;
          grid-row: 2;
        }
        .footer-bottom {
          justify-content: center;
          text-align: center;
        }
        .coming-panel {
          grid-template-columns: minmax(0, 1fr) minmax(250px, 0.78fr);
          grid-template-rows: auto auto auto;
          gap: 28px 32px;
          align-items: start;
        }
        .coming-copy {
          display: contents;
        }
        .coming-intro {
          grid-column: 1;
          grid-row: 1;
          align-self: center;
        }
        .coming-intro p {
          max-width: 43ch;
        }
        .coming-visual {
          grid-column: 2;
          grid-row: 1;
          min-height: 0;
          align-self: center;
        }
        .network-orbit {
          width: clamp(250px, 32vw, 320px);
          height: clamp(250px, 32vw, 320px);
        }
        .network-core {
          width: 92px;
          height: 92px;
        }
        .business-node {
          width: 72px;
          height: 72px;
          border-radius: 22px;
          font-size: 0.54rem;
        }
        .business-node.a,
        .business-node.c {
          margin-left: -36px;
        }
        .business-node.b,
        .business-node.d {
          margin-top: -36px;
        }
        .network-points {
          grid-column: 1 / -1;
          grid-row: 2;
          margin-top: 0;
        }
        .coming-copy .access-note {
          grid-column: 1 / -1;
          grid-row: 3;
          max-width: 64ch;
          margin-top: 0 !important;
        }
      }

      /* Smallest phones drop the store icons from the centre pill. They cost
         ~70px and the bar needs ~340px of content; below ~374px that pushes
         the hamburger off the right edge. 375px and up keep them, which is
         every current iPhone and most Android. The mobile menu still carries
         both store buttons. */
      @media (max-width: 374px) {
        .nav-seg--app .store-badge,
        .nav-seg--app-mobile .store-badge {
          display: none;
        }
        .mobile-nav-rotator-item {
          max-width: 12ch;
        }
      }

      @media (max-width: 380px) {
        .hero-stage {
          padding-left: 64px;
        }
        .rail-node {
          width: 48px;
          height: 48px;
          border-radius: 15px;
        }
        .hero-proof div {
          min-width: 92px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .reveal,
        .stagger > *,
        .fleet-details .anim {
          opacity: 1;
          transform: none;
        }
        .wipe {
          clip-path: none;
        }
        .fleet-visual img,
        .hero-vehicle {
          opacity: 1;
          transform: none;
        }
      }

      /* ============================================================
         HERO OVERRIDE — FINAL HERO STAGE
         Placed last so it wins over the earlier hero rules.
         ============================================================ */

      .hero {
        align-items: center;
      }

      .hero-copy {
        max-width: 560px;
      }

      .hero-lead {
        max-width: 34ch;
        font-size: 0.98rem;
        margin-bottom: 24px;
      }

      .hero-actions {
        gap: 10px;
        margin-bottom: 28px;
      }

      .hero-actions .button {
        min-height: 48px;
        padding: 0 20px;
      }

      .hero-proof {
        gap: 22px;
        padding-top: 22px;
      }

      .hero-proof strong {
        font-size: 1.08rem;
      }

      .hero-proof span {
        font-size: 0.74rem;
        line-height: 1.35;
      }

      .hero-stage {
        position: relative;
        min-height: 560px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .hero-ring {
        width: min(520px, 96%);
      }

      .hero-ring.inner {
        width: min(360px, 72%);
      }

      .hero-orbit {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
      }

      .hero-orbit-svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(560px, 100%);
        aspect-ratio: 1 / 1;
        transform: translate(-50%, -50%);
        overflow: visible;
      }

      /* Each service's curved copy rotates in and out like a camera lens. */
      .hero-copyset {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: rotate(-18deg) scale(0.96);
        transition:
          opacity 0.42s var(--ease),
          transform 0.82s var(--ease);
      }

      .hero-copyset.is-active {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }

      .hero-copyset.is-leaving {
        opacity: 0;
        transform: rotate(18deg) scale(0.96);
      }

      .hero-arc {
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        fill: var(--gold-2);
      }

      /* Sized so the longest label (CONSTRUCTION SUPPLY • REAL-TIME TRACKING)
         still fits the 644-unit arc with margin — at 24px it overran and the
         renderer dropped the overflowing characters. */
      .hero-arc--top {
        font-size: 19px;
      }

      .hero-arc--bottom {
        font-size: 17px;
      }

      .hero-copyset--van .hero-arc {
        fill: #ffd879;
      }

      .hero-copyset--bike .hero-arc {
        fill: #8ef17f;
      }

      .hero-copyset--cargo .hero-arc {
        fill: #5fb6ff;
      }

      .hero-copyset--dump .hero-arc {
        fill: #ff9d2f;
      }

      .hero-copyset--equipment .hero-arc {
        fill: #d8a6ff;
      }

      .hero-vehicle-slot {
        position: relative;
        width: min(560px, 100%);
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
      }

      .hero-vehicle-slot picture {
        display: contents;
      }

      /* Every vehicle holds the same stage position; each one carries its own
         resting scale so the differing artwork proportions read evenly. */
      .hero-vehicle {
        position: absolute;
        max-width: 100%;
        max-height: 320px;
        object-fit: contain;
        filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.5));
        opacity: 0;
        transform: translateX(92px)
          scale(calc(var(--hero-active-scale, 1) * 0.95));
        transition:
          opacity 0.5s var(--ease),
          transform 0.82s var(--ease);
      }

      .hero-vehicle--van {
        --hero-active-scale: 1;
      }
      .hero-vehicle--bike {
        --hero-active-scale: 0.88;
      }
      .hero-vehicle--cargo {
        --hero-active-scale: 0.95;
      }
      .hero-vehicle--dump {
        --hero-active-scale: 0.94;
      }
      .hero-vehicle--equipment {
        --hero-active-scale: 0.9;
      }

      .hero-vehicle.is-active {
        opacity: 1;
        transform: translateX(0) scale(var(--hero-active-scale, 1));
      }

      .hero-vehicle.is-leaving {
        opacity: 0;
        transform: translateX(-92px)
          scale(calc(var(--hero-active-scale, 1) * 0.97));
      }

      @media (min-width: 1025px) {
        .hero h1 .wipe {
          width: max-content;
          padding-right: 0.06em;
        }
      }

      /* ---------- iPad / tablet: headline first, circle below ---------- */
      @media (max-width: 1024px) {
        .hero {
          grid-template-columns: 1fr;
          gap: 28px;
          padding-bottom: 44px;
        }

        .hero-stage {
          order: 2;
          min-height: 500px;
        }

        .hero-copy {
          order: 1;
          max-width: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .hero-copy .eyebrow {
          display: none;
        }

        .hero-lead {
          display: none;
        }

        .hero-actions {
          justify-content: center;
          margin-bottom: 16px;
        }

        .hero h1 {
          margin-bottom: 14px;
          font-size: clamp(3.2rem, 7vw, 4.8rem);
        }

        .hero-proof {
          justify-content: center;
          gap: 16px 22px;
          border-top: 0;
          padding-top: 10px;
        }

        .hero-proof div {
          align-items: center;
          min-width: 140px;
        }

        .hero-ring {
          width: min(500px, 82vw);
        }

        .hero-ring.inner {
          width: min(340px, 62vw);
        }

        .hero-orbit-svg {
          width: min(500px, 82vw);
        }

        .hero-vehicle-slot {
          width: min(500px, 82vw);
          height: 290px;
        }

        .hero-vehicle {
          max-height: 290px;
        }
      }

      /* ---------- mobile: only "Move anything." ---------- */
      @media (max-width: 760px) {
        .hero-wrap {
          padding-top: 118px;
        }

        .hero {
          gap: 14px;
          padding-bottom: 34px;
        }

        .hero-stage {
          order: 1;
          min-height: 360px;
          padding-left: 0;
        }

        .hero-copy {
          order: 2;
          align-items: center;
          text-align: center;
        }

        .hero-copy .eyebrow,
        .hero-lead,
        .hero-actions,
        .hero-proof {
          display: none;
        }

        /* Wide enough to hold "anything." on one line (6ch cropped it via the
           wipe clip-path) but narrow enough to still stack as two lines. */
        .hero h1 {
          max-width: 10ch;
          margin: 0 auto;
          text-align: center;
          font-size: clamp(2.5rem, 11.6vw, 3.8rem);
        }

        /* The 6ch measure is meant to stack this as "Move" / "anything.";
           the desktop nowrap rule would otherwise overflow and get cropped
           by the wipe's clip-path. */
        .hero h1 .wipe {
          white-space: normal;
        }

        .hero h1 .wipe:last-child {
          display: none;
        }

        .hero-ring {
          display: block;
          width: min(320px, 86vw);
        }

        .hero-ring.inner {
          width: min(240px, 66vw);
        }

        .hero-orbit-svg {
          width: min(340px, 86vw);
        }

        .hero-vehicle-slot {
          width: min(340px, 88vw);
          height: 220px;
        }

        .hero-vehicle {
          max-height: 220px;
        }

        .hero-arc--top {
          font-size: 17px;
        }

        .hero-arc--bottom {
          font-size: 15px;
        }
      }

      @media (max-width: 380px) {
        .hero-stage {
          min-height: 330px;
        }

        .hero-ring {
          width: min(292px, 88vw);
        }

        .hero-ring.inner {
          width: min(220px, 68vw);
        }

        .hero-orbit-svg {
          width: min(308px, 88vw);
        }

        .hero h1 {
          font-size: clamp(2.15rem, 11.2vw, 3.1rem);
        }

        .hero-arc--top {
          font-size: 15px;
        }

        .hero-arc--bottom {
          font-size: 13px;
        }
      }

      /* ============================================================
         PINNED EXPLORER — fit the panel inside one viewport
         A pinned panel must fit the screen, or its lower half is
         unreachable. These trim the panel down as the screen shrinks.
         ============================================================ */

      .explorer-pin {
        padding-block: calc(var(--header-h) + 14px) 22px;
      }
      .explorer-pin .section-head {
        margin-bottom: 10px;
      }
      .explorer-pin .section-head h2 {
        font-size: clamp(1.7rem, 3vw, 2.4rem);
      }
      .explorer-pin .fleet-tabs {
        margin-bottom: 14px;
      }
      .explorer-pin .fleet-showcase {
        min-height: 0;
        padding: 24px;
      }
      .explorer-pin .fleet-visual,
      .explorer-pin .fleet-frame {
        min-height: 250px;
      }
      .explorer-pin .fleet-visual img {
        max-height: 250px;
      }
      .explorer-pin .fleet-details > p {
        margin-bottom: 16px;
      }
      .explorer-pin .fleet-metrics {
        padding: 14px 0;
        margin-bottom: 14px;
      }
      .explorer-pin .fleet-facts {
        margin-bottom: 18px;
      }

      /* Short laptop screens: trim further rather than clip the panel. */
      @media (min-width: 761px) and (max-height: 800px) {
        .explorer-pin .section-head h2 {
          font-size: clamp(1.5rem, 2.4vw, 1.9rem);
        }
        .explorer-pin .fleet-visual,
        .explorer-pin .fleet-frame {
          min-height: 200px;
        }
        .explorer-pin .fleet-visual img {
          max-height: 200px;
        }
        .explorer-pin .fleet-showcase {
          padding: 20px;
        }
      }

      @media (min-width: 761px) and (max-height: 680px) {
        .explorer-pin .section-head {
          display: none;
        }
        .explorer-pin .fleet-visual,
        .explorer-pin .fleet-frame {
          min-height: 160px;
        }
        .explorer-pin .fleet-visual img {
          max-height: 160px;
        }
      }

      @media (max-width: 1024px) {
        .app-promo--tablet {
          display: block;
          padding: 18px 20px;
          border: 1px solid rgba(17, 17, 15, 0.1);
          border-radius: 22px;
          background:
            radial-gradient(
              circle at 100% 0,
              rgba(255, 138, 0, 0.13),
              transparent 45%
            ),
            rgba(255, 255, 255, 0.62);
          box-shadow: 0 18px 42px rgba(31, 24, 10, 0.08);
        }
        .app-promo--tablet .app-promo__eyebrow {
          color: var(--orange);
        }
        .app-promo--tablet .app-promo__copy {
          color: var(--muted);
        }
        .explorer-track {
          height: auto;
        }
        .explorer-pin {
          align-items: flex-start;
          padding-block: 40px 24px;
        }
        .explorer-pin .section-head {
          margin-bottom: 16px;
        }
        .explorer-pin .section-head h2 {
          font-size: clamp(1.6rem, 4.2vw, 2.3rem);
        }
        .explorer-pin .fleet-tabs {
          margin-bottom: 18px;
        }
        .explorer-pin .fleet-showcase {
          padding: 26px;
          gap: 20px;
        }
        .explorer-pin .fleet-visual,
        .explorer-pin .fleet-frame {
          min-height: 220px;
        }
        .explorer-pin .fleet-visual img {
          max-height: 220px;
        }
      }

      @media (max-width: 760px) {
        .app-promo--tablet {
          display: none;
        }
        .app-promo--mobile {
          display: block;
          padding-block: 26px 24px;
          text-align: center;
        }
        .app-promo--mobile .app-promo__eyebrow,
        .app-promo--mobile .app-promo__stores {
          justify-content: center;
        }
        .app-promo--mobile .app-promo__eyebrow {
          color: var(--orange);
        }
        .app-promo--mobile .app-promo__copy {
          max-width: 46ch;
          margin-inline: auto;
          color: var(--muted);
        }
        .app-promo--mobile .app-promo__store {
          width: 168px;
        }
        /* The generic phone section spacing added 62px above and below a
           component that already owns a full-height sticky canvas. Remove
           that dead space here; content and service order are unchanged. */
        .network-section {
          padding-block: 0;
        }
        .explorer-track {
          height: auto;
        }
        .explorer-pin {
          height: auto;
          min-height: 0;
          padding-block: 24px 14px;
        }
        .explorer-pin .section-head {
          margin-bottom: 6px;
        }
        .explorer-pin .section-head h2 {
          font-size: clamp(1.4rem, 6.4vw, 1.95rem);
        }
        .explorer-pin .fleet-tabs {
          margin-bottom: 8px;
        }
        .explorer-pin .fleet-showcase {
          padding: 15px 14px 16px;
          gap: 8px;
          min-height: 0;
        }
        .explorer-pin .fleet-visual,
        .explorer-pin .fleet-frame {
          min-height: 128px;
        }
        .explorer-pin .fleet-visual img {
          max-height: 124px;
        }
        .explorer-pin .fleet-visual::before {
          width: 145px;
          height: 145px;
        }
        .explorer-pin .fleet-badge {
          margin-bottom: 4px;
        }
        .explorer-pin .fleet-number {
          margin-bottom: 4px;
        }
        .explorer-pin .fleet-details h3 {
          font-size: clamp(1.35rem, 6.2vw, 1.7rem);
          margin-bottom: 5px;
        }
        .explorer-pin .fleet-details > p {
          font-size: 0.8rem;
          margin-bottom: 8px;
        }
        /* metrics and facts stack on a phone, so they are the tallest
           blocks here — tightened hardest */
        .explorer-pin .fleet-metrics {
          gap: 10px;
          padding: 8px 0;
          margin-bottom: 8px;
        }
        .explorer-pin .fleet-metric strong {
          font-size: 1rem;
          margin-bottom: 1px;
        }
        .explorer-pin .fleet-metric small {
          font-size: 0.6rem;
        }
        .explorer-pin .fleet-facts {
          gap: 5px;
          margin-bottom: 10px;
        }
        .explorer-pin .fleet-fact {
          padding: 6px 10px;
        }
        .explorer-pin .fleet-fact strong {
          font-size: 0.78rem;
        }
        .fleet-details .button {
          min-height: 46px;
        }
      }

      @media (min-width: 761px) and (max-width: 1024px) {
        .explorer-intro {
          display: grid;
          grid-template-columns: minmax(0, 0.82fr) minmax(390px, 1.18fr);
          align-items: start;
          gap: clamp(20px, 3vw, 38px);
          margin-bottom: 18px;
        }
        .explorer-intro .section-head {
          margin-bottom: 0;
        }
        .app-promo--tablet h2 {
          font-size: clamp(1.2rem, 2.4vw, 1.65rem);
        }
        .app-promo--tablet .app-promo__copy {
          margin-bottom: 12px;
          font-size: 0.76rem;
          line-height: 1.5;
        }
        .app-promo--tablet .app-promo__store {
          width: 156px;
          min-height: 52px;
          padding-inline: 12px;
        }
      }

      @media (max-width: 359px) {
        .app-promo--mobile .app-promo__stores {
          display: grid;
          grid-template-columns: 1fr;
        }
        .app-promo--mobile .app-promo__store {
          width: 100%;
        }
      }

      /* Short phones (iPhone SE/8 class, and any phone with the URL bar
         expanded). The panel must still fit, so the section heading drops
         out here — it has already been read on the way in. */
      @media (max-width: 760px) and (max-height: 760px) {
        .explorer-pin .section-head {
          display: none;
        }
        .explorer-pin .fleet-showcase {
          padding: 12px 12px 14px;
        }
        .explorer-pin .fleet-visual,
        .explorer-pin .fleet-frame {
          min-height: 84px;
        }
        .explorer-pin .fleet-visual img {
          max-height: 82px;
        }
        .explorer-pin .fleet-visual::before {
          width: 96px;
          height: 96px;
        }
        .explorer-pin .fleet-details h3 {
          font-size: 1.12rem;
          margin-bottom: 3px;
        }
        .explorer-pin .fleet-details > p {
          font-size: 0.75rem;
          margin-bottom: 6px;
        }
        .explorer-pin .fleet-metrics {
          gap: 8px;
          padding: 6px 0;
          margin-bottom: 6px;
        }
        .explorer-pin .fleet-metric strong {
          font-size: 0.92rem;
        }
        .explorer-pin .fleet-facts {
          margin-bottom: 8px;
        }
        .explorer-pin .fleet-fact {
          padding: 4px 9px;
        }
        .explorer-pin .fleet-fact small {
          margin-bottom: 1px;
        }
        .explorer-pin .fleet-details .button {
          min-height: 42px;
        }
      }

      /* ============================================================
         PORTED SERVICE CARDS — iPad + phone
         Express Bike (01) and Van Haulage (02), ported from
         logistics-design-lab.html. Scoped to those two data-fleet
         values and to these media queries only, so the desktop card
         and the other three services are untouched.
         The card becomes a fixed canvas with everything absolutely
         placed; the vehicle and the dashed ring deliberately run past
         the edge and are clipped. That bleed is intentional — do not
         "fix" it by pulling them back inside.
         ============================================================ */

      /* ---------- shared canvas (both cards, both sizes) ---------- */
      @media (max-width: 1100px) {
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          ) {
          display: block;
          padding: 0;
          overflow: hidden;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-visual {
          position: absolute;
          inset: 0;
          display: block;
          min-height: 0;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-frame {
          position: absolute;
          inset: 0;
          display: block;
          min-height: 0;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-visual::before {
          border: 1px dashed rgba(17, 17, 15, 0.18);
          border-radius: 50%;
          background: none;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-visual
          img {
          position: absolute;
          width: auto;
          object-fit: contain;
          z-index: 2;
          filter: drop-shadow(0 30px 25px rgba(31, 24, 10, 0.18));
        }
        /* the "OLADAY owned fleet" badge stays hidden here, as it is on
           desktop — v3's own rule handles it, nothing to override */
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-details {
          position: absolute;
          inset: 0;
          z-index: 3;
          pointer-events: none;
        }
        /* the SERVICE 01 / 02 pill is dropped here, like the owned-fleet
           badge; desktop still shows it */
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-number {
          display: none;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-details
          h3,
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-details
          > p {
          position: absolute;
          margin: 0;
        }
        /* the tiles carry the metrics, not the Best-for/Availability/
           Movement chips */
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-facts {
          display: none;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-metrics {
          position: absolute;
          z-index: 4;
          display: grid;
          padding: 0;
          margin: 0;
          border-block: 0;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-metric {
          border: 1px solid rgba(17, 17, 15, 0.11);
          border-radius: 11px;
          background: rgba(255, 255, 255, 0.68);
          box-shadow: 0 10px 26px rgba(31, 24, 10, 0.06);
          backdrop-filter: blur(12px);
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-details
          .button {
          position: absolute;
          pointer-events: auto;
        }
      }

      /* ---------- iPad ---------- */
      @media (min-width: 761px) and (max-width: 1100px) {
        .explorer-pin .fleet-showcase[data-fleet="van"] {
          width: min(728px, 100%);
          min-height: 576px;
          margin-inline: auto;
        }
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-details h3 {
          top: 65px;
          left: clamp(21px, 3.2vw, 46px);
          max-width: 329px;
          font-size: clamp(1.8rem, 2.8vw, 2.7rem);
        }
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-details > p {
          top: 105px;
          left: clamp(21px, 3.2vw, 46px);
          max-width: 301px;
          font-size: 0.78rem;
          font-weight: 600;
        }
        /* bottom is set so the van's centre lands on the dashed ring's
           centre (ring spans 108–508 from the card top, centre 308) */
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-visual img {
          max-width: 58%;
          max-height: 300px;
          right: 17px;
          left: auto;
          bottom: 180px;
        }
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-visual::before {
          width: 440px;
          height: 400px;
          right: 20px;
          left: auto;
          bottom: 68px;
          top: auto;
        }
        /* centred with auto margins, never a transform — .anim owns
           transform for the staggered entrance */
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-metrics {
          width: max-content;
          max-width: calc(100% - 42px);
          left: 0;
          right: 0;
          margin-inline: auto;
          bottom: 73px;
          grid-template-columns: repeat(3, max-content);
          gap: 6px;
        }
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-metric {
          width: max-content;
          padding: 9px 12px;
        }
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-metric strong {
          font-size: 1.15rem;
          margin-bottom: 2px;
        }
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-metric small {
          font-size: 0.52rem;
        }
        .explorer-pin .fleet-showcase[data-fleet="van"] .fleet-details .button {
          top: 236px;
          left: 44px;
          right: auto;
          bottom: auto;
        }

        /* Express Bike (01): title centred at the top, bike on the left,
           description and tiles stacked down the right, button centred
           at the bottom. */
        .explorer-pin .fleet-showcase[data-fleet="bike"] {
          width: min(728px, 100%);
          min-height: 576px;
          margin-inline: auto;
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-details h3 {
          top: 50px;
          left: 0;
          right: 0;
          width: calc(100% - 90px);
          max-width: none;
          margin-inline: auto;
          text-align: center;
          /* +20% on each stop of the original clamp(1.8, 2.8vw, 2.7) */
          font-size: clamp(2.16rem, 3.36vw, 3.24rem);
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-details > p {
          top: 152px;
          right: 30px;
          left: auto;
          max-width: 250px;
          text-align: left;
          font-size: 0.78rem;
          font-weight: 600;
        }
        /* -20% on both caps, and pulled off the left edge so the bike
           sits inside the ring instead of bleeding past it */
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-visual img {
          max-width: 48%;
          max-height: 320px;
          left: 60px;
          right: auto;
          bottom: 120px;
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-visual::before {
          width: 440px;
          height: 440px;
          left: 20px;
          right: auto;
          top: auto;
          bottom: 110px;
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-metrics {
          width: 210px;
          top: 250px;
          right: 30px;
          left: auto;
          bottom: auto;
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-metric {
          width: 210px;
          padding: 9px 12px;
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-metric strong {
          font-size: 1.15rem;
          margin-bottom: 2px;
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-metric small {
          font-size: 0.52rem;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="bike"]
          .fleet-details
          .button {
          top: auto;
          bottom: 26px;
          left: 0;
          right: 0;
          width: max-content;
          margin-inline: auto;
        }

        /* Cargo Movement (03): copy top-left, truck and ring on the
           right, tiles a single row bottom-right, button bottom-left. */
        .explorer-pin .fleet-showcase[data-fleet="cargo"] {
          width: min(728px, 100%);
          min-height: 576px;
          margin-inline: auto;
        }
        .explorer-pin .fleet-showcase[data-fleet="cargo"] .fleet-details h3 {
          top: 64px;
          left: clamp(21px, 3.2vw, 46px);
          max-width: 329px;
          font-size: clamp(1.8rem, 2.8vw, 2.7rem);
        }
        .explorer-pin .fleet-showcase[data-fleet="cargo"] .fleet-details > p {
          top: 107px;
          left: clamp(21px, 3.2vw, 46px);
          max-width: 301px;
          font-size: 0.78rem;
          font-weight: 600;
        }
        /* bottom is 148 rather than the lab's 85: v3's truck art is
           landscape, so it renders 221px tall against the lab's 429 cap
           and bottom-anchoring dropped it below the ring. 148 puts its
           centre on the ring's centre. */
        .explorer-pin .fleet-showcase[data-fleet="cargo"] .fleet-visual img {
          max-width: 66%;
          max-height: 429px;
          right: 14px;
          left: auto;
          bottom: 148px;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="cargo"]
          .fleet-visual::before {
          width: 350px;
          height: 350px;
          right: 20px;
          left: auto;
          top: auto;
          bottom: 84px;
        }
        .explorer-pin .fleet-showcase[data-fleet="cargo"] .fleet-metrics {
          width: max-content;
          max-width: calc(100% - 40px);
          top: auto;
          left: auto;
          right: 20px;
          bottom: 20px;
          grid-template-columns: repeat(3, max-content);
          gap: 8px;
        }
        .explorer-pin .fleet-showcase[data-fleet="cargo"] .fleet-metric {
          width: max-content;
          padding: 9px 12px;
        }
        .explorer-pin .fleet-showcase[data-fleet="cargo"] .fleet-metric strong {
          font-size: 1.15rem;
          margin-bottom: 2px;
        }
        .explorer-pin .fleet-showcase[data-fleet="cargo"] .fleet-metric small {
          font-size: 0.52rem;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="cargo"]
          .fleet-details
          .button {
          top: auto;
          bottom: 24px;
          left: clamp(21px, 3.2vw, 46px);
          right: auto;
        }

        /* Construction Supply (04): copy top-left, tipper and ring on the
           right, tiles stacked down the left, button bottom-left.
           Tiles start at 250 rather than the lab's 300 because v3 shows
           three metrics where the lab showed two — at 300 the third one
           would run into the button. */
        .explorer-pin .fleet-showcase[data-fleet="dump"] {
          width: min(728px, 100%);
          min-height: 576px;
          margin-inline: auto;
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-details h3 {
          top: 64px;
          left: clamp(21px, 3.2vw, 46px);
          max-width: 329px;
          font-size: clamp(1.8rem, 2.8vw, 2.7rem);
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-details > p {
          top: 107px;
          left: clamp(21px, 3.2vw, 46px);
          max-width: 301px;
          font-size: 0.78rem;
          font-weight: 600;
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-visual img {
          max-width: 68%;
          max-height: 384px;
          right: 40px;
          left: auto;
          bottom: 116px;
        }
        /* the ring is sized and placed to match the truck art exactly
           (494x305 at this fixed 728 card), rather than the lab's small
           cab-only circle */
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-visual::before {
          width: 494px;
          height: 305px;
          right: 40px;
          left: auto;
          top: auto;
          bottom: 116px;
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-metrics {
          width: max-content;
          max-width: calc(50% - 32px);
          top: 250px;
          left: 26px;
          right: auto;
          bottom: auto;
          grid-template-columns: max-content;
          gap: 10px;
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-metric {
          width: max-content;
          padding: 9px 12px;
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-metric strong {
          font-size: 1.15rem;
          margin-bottom: 2px;
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-metric small {
          font-size: 0.52rem;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="dump"]
          .fleet-details
          .button {
          top: auto;
          bottom: 24px;
          left: 26px;
          right: auto;
        }

        /* Heavy Equipment (05): excavator large on the left (bleeding
           past the edge, as designed), title + description centred on
           the right with the button under them, tiles a centred row
           along the bottom. This is the one service v3 badges
           ("Vetted specialist partners"), so the badge is kept and
           placed — only the SERVICE 05 pill is dropped. */
        .explorer-pin .fleet-showcase[data-fleet="equipment"] {
          width: min(728px, 100%);
          min-height: 576px;
          margin-inline: auto;
        }
        .explorer-pin .fleet-showcase[data-fleet="equipment"] .fleet-badge {
          position: absolute;
          top: 20px;
          left: 21px;
          z-index: 4;
          padding: 7px 9px;
          font-size: 0.62rem;
          background: rgba(255, 255, 255, 0.78);
          backdrop-filter: blur(10px);
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-details
          h3 {
          top: 74px;
          right: 30px;
          left: auto;
          width: 300px;
          max-width: 300px;
          text-align: center;
          font-size: clamp(1.8rem, 2.8vw, 2.7rem);
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-details
          > p {
          top: 117px;
          right: 50px;
          left: auto;
          width: 260px;
          max-width: 260px;
          text-align: center;
          font-size: 0.78rem;
          font-weight: 600;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-visual
          img {
          max-width: 76%;
          max-height: 404px;
          left: -20px;
          right: auto;
          bottom: 120px;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-visual::before {
          width: 400px;
          height: 400px;
          left: 40px;
          right: auto;
          top: auto;
          bottom: 128px;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-details
          .button {
          top: 250px;
          right: 52px;
          left: auto;
          bottom: auto;
        }
        .explorer-pin .fleet-showcase[data-fleet="equipment"] .fleet-metrics {
          width: max-content;
          max-width: calc(100% - 40px);
          left: 0;
          right: 0;
          margin-inline: auto;
          top: auto;
          bottom: 22px;
          grid-template-columns: repeat(3, max-content);
          gap: 8px;
        }
        .explorer-pin .fleet-showcase[data-fleet="equipment"] .fleet-metric {
          width: max-content;
          padding: 9px 12px;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-metric
          strong {
          font-size: 1.15rem;
          margin-bottom: 2px;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-metric
          small {
          font-size: 0.52rem;
        }
      }

      /* ---------- phone ---------- */
      @media (max-width: 760px) {
        /* 596 rather than the lab's 720: on a 375x812 phone the pin
           leaves exactly 596px under the heading and tabs, so this is
           the tallest card that fits with nothing clipped. The 124px
           comes out of the gaps around the van — the van, the tiles
           and the button all keep their original size. */
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          ) {
          min-height: 596px;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-details
          h3 {
          top: 55px;
          left: 15px;
          right: 15px;
          max-width: none;
          font-size: clamp(1.8rem, 8.8vw, 2.48rem);
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-details
          > p {
          top: 100px;
          left: 15px;
          right: 15px;
          max-width: none;
          font-size: 0.72rem;
        }
        /* van and ring share a centre, dropped 42px from the original
           port so the description is not sitting on the roof */
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-visual
          img {
          max-width: 74%;
          max-height: 224px;
          left: 0;
          right: 0;
          margin-inline: auto;
          bottom: 273px;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-visual::before {
          width: 290px;
          height: 290px;
          left: 0;
          right: 0;
          top: auto;
          margin-inline: auto;
          bottom: 182px;
        }
        /* payload + coverage share the top row, hire options centres
           underneath; each tile is only as wide as its own content.
           The container is inset 10px rather than 22px purely so the
           first two tiles fit on one line — the tiles are centred, so
           the wider container is not visible. */
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-metrics {
          width: auto;
          max-width: none;
          left: 10px;
          right: 10px;
          top: auto;
          bottom: 87px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-metric {
          width: max-content;
          padding: 10px 14px;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-metric
          strong {
          font-size: 1.2rem;
          margin-bottom: 2px;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-metric
          small {
          font-size: 0.56rem;
        }
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          )
          .fleet-details
          .button {
          left: 22px;
          right: 22px;
          bottom: 22px;
          top: auto;
          width: auto;
        }
        /* The bike artwork is portrait (900x1043) where the van is
           landscape, so at the shared height it runs into the
           description. Shorter cap and its own offset; the ring follows
           so the two still share a centre. */
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-visual img {
          max-height: 170px;
          bottom: 252px;
        }
        .explorer-pin .fleet-showcase[data-fleet="bike"] .fleet-visual::before {
          bottom: 192px;
        }
        /* phone: all four materials need 363px against 305px available,
           so they go two per row — which puts Bulk supply beside
           Laterite instead of alone on a line of its own. Desktop and
           iPad already fit all four on one row. */
        .heavy-card--supply .heavy-list:not(.heavy-list--service) {
          display: grid;
          grid-template-columns: repeat(2, auto);
          justify-content: start;
        }
        /* phone: the service row is dropped so the card is not stacked
           four tag-rows deep, and the tipper comes down 15% (258 -> 219)
           and centres with clearance underneath */
        .heavy-card--supply .heavy-list--service {
          display: none;
        }
        :is(.heavy-card--supply, .heavy-card--containers) .heavy-art img {
          height: 219px;
          right: auto;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0;
        }
        /* the tipper renders taller than the van too, so it needs its
           own offset to clear the description; ring follows */
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-visual img {
          bottom: 257px;
        }
        .explorer-pin .fleet-showcase[data-fleet="dump"] .fleet-visual::before {
          bottom: 192px;
        }
        /* the excavator is the tallest art of the five; same treatment,
           then scaled up 20% (170 -> 204) at your request. bottom is
           re-derived so it stays centred on the ring. */
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-visual
          img {
          max-height: 204px;
          bottom: 235px;
        }
        .explorer-pin
          .fleet-showcase[data-fleet="equipment"]
          .fleet-visual::before {
          bottom: 192px;
        }
        /* equipment is the one badged service — keep it, inset from the
           corner like the lab does */
        .explorer-pin .fleet-showcase[data-fleet="equipment"] .fleet-badge {
          position: absolute;
          top: 12px;
          left: 12px;
          z-index: 4;
          padding: 6px 8px;
          font-size: 0.52rem;
          background: rgba(255, 255, 255, 0.78);
          backdrop-filter: blur(10px);
        }
      }

      /* On short phones the fixed service canvas is shortened as one unit;
         its artwork, metrics and CTA remain anchored to the same safe bottom
         positions. */
      @media (max-width: 760px) and (max-height: 760px) {
        .explorer-pin
          .fleet-showcase:is(
            [data-fleet="van"],
            [data-fleet="bike"],
            [data-fleet="cargo"],
            [data-fleet="dump"],
            [data-fleet="equipment"]
          ) {
          min-height: 560px;
        }
      }

      /* ============================================================
         DYNAMIC ISLAND SERVICE SWITCHER — tablet + phone only
         Desktop keeps its five full pills. Here only the active
         service stays expanded; the rest collapse to numbered
         circles and the row morphs as the pinned section advances.
         It rides the existing .is-active toggle in setFleet(), so
         there is no new JS and no second source of truth.
         The collapse comes from the label's max-width, not the
         button's — width:auto is not animatable, so animating the
         label is what makes the morph actually run.
         ============================================================ */
      @media (max-width: 1024px) {
        .explorer-pin .fleet-tabs {
          flex-wrap: nowrap;
          overflow: visible;
          justify-content: center;
          align-items: center;
          gap: 8px;
          margin-inline: 0;
          padding-inline: 0;
          scroll-snap-type: none;
        }
        .explorer-pin .fleet-tab {
          flex: 0 0 auto;
          min-width: 46px;
          min-height: 46px;
          padding: 0;
          gap: 0;
          justify-content: center;
          overflow: hidden;
          scroll-snap-align: none;
          transition:
            padding 0.5s cubic-bezier(0.34, 1.36, 0.48, 1),
            background 0.32s var(--ease),
            border-color 0.32s var(--ease),
            color 0.32s var(--ease);
        }
        .explorer-pin .fleet-tab .fleet-tab-label {
          display: inline-block;
          max-width: 0;
          margin-left: 0;
          opacity: 0;
          overflow: hidden;
          white-space: nowrap;
          transition:
            max-width 0.5s cubic-bezier(0.34, 1.36, 0.48, 1),
            margin-left 0.5s cubic-bezier(0.34, 1.36, 0.48, 1),
            opacity 0.3s var(--ease);
        }
        /* the open pill may shrink (the circles may not), so the row can
           never overflow however narrow the phone. On anything normal the
           label shows in full; below ~350px it ellipsises rather than
           pushing the last circle off-screen. */
        .explorer-pin .fleet-tab.is-active {
          flex: 0 1 auto;
          min-width: 0;
          padding: 0 16px;
        }
        .explorer-pin .fleet-tab.is-active .fleet-tab-label {
          max-width: 13rem;
          margin-left: 9px;
          opacity: 1;
          text-overflow: ellipsis;
        }
      }
      /* Phones: the widest label ("Construction Supply") needs 415px of
         row against 351px available. The number moves out of the open
         pill — the collapsed circles still carry it, so nothing is lost
         — and the circles and gaps tighten. Tablet has 736px and needs
         none of this. */
      @media (max-width: 760px) {
        .explorer-pin .fleet-tabs {
          gap: 6px;
        }
        .explorer-pin .fleet-tab {
          min-width: 40px;
          min-height: 40px;
        }
        .explorer-pin .fleet-tab.is-active {
          padding: 0 14px;
        }
        .explorer-pin .fleet-tab.is-active .idx {
          display: none;
        }
        .explorer-pin .fleet-tab.is-active .fleet-tab-label {
          margin-left: 0;
          font-size: 0.78rem;
        }
      }
      @media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
        .explorer-pin .fleet-tab,
        .explorer-pin .fleet-tab .fleet-tab-label {
          transition: none;
        }
      }

      /* ============================================================
         DESIGN LAB APP EXPERIENCE — owner-approved transplant
         Scoped so the Design Lab's dark treatment cannot leak into
         the following business-vision section or other V3 components.
         ============================================================ */
      .app-section--lab {
        padding: 130px 0;
        overflow: hidden;
        color: var(--white);
        background: var(--ink);
      }
      .app-section--lab .app-panel {
        position: relative;
        min-height: 740px;
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 0;
        align-items: stretch;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-xl);
        background:
          radial-gradient(
            circle at 12% 80%,
            rgba(255, 138, 0, 0.24),
            transparent 25rem
          ),
          #1b1a17;
        box-shadow: none;
      }
      .app-section--lab .app-copy {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(40px, 7vw, 85px);
        color: var(--white);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .app-section--lab .app-copy .eyebrow {
        color: var(--gold-2);
      }
      .app-section--lab .app-copy h2 {
        max-width: 7.5ch;
        margin: 0 0 20px;
        color: var(--white);
        font-size: clamp(3rem, 5vw, 5.6rem);
      }
      .app-section--lab .app-copy > p {
        max-width: 43ch;
        margin: 0;
        color: rgba(255, 255, 255, 0.58);
        font-size: 0.98rem;
      }
      .app-section--lab .app-tablet-summary {
        display: none;
      }
      .app-section--lab .store-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 28px 0;
      }
      .app-section--lab .store-button {
        min-width: 180px;
        min-height: 61px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 18px;
        color: var(--ink);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 15px;
        background: var(--white);
      }
      .app-section--lab .store-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
      }
      .app-section--lab .store-icon {
        width: 30px;
        display: grid;
        place-items: center;
        flex: none;
        font-size: 1.6rem;
      }
      .app-section--lab .store-icon svg,
      .app-section--lab .store-icon img {
        width: 28px;
        height: 28px;
        display: block;
        object-fit: contain;
      }
      .app-section--lab .store-icon svg {
        fill: currentColor;
      }
      .app-section--lab
        .store-button[aria-label="Download on the App Store"]
        .store-icon,
      .app-section--lab
        .store-button[aria-label="Download on the App Store"]
        .store-icon
        svg {
        width: 34px;
        height: 34px;
      }
      .app-section--lab .store-button small {
        color: var(--ink);
        font-size: 0.56rem;
        font-weight: 750;
        text-transform: uppercase;
        letter-spacing: 0;
      }
      .app-section--lab .store-button strong {
        font-size: 1rem;
        line-height: 1.1;
      }
      .app-section--lab .app-features {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .app-section--lab .app-feature {
        min-height: 0;
        padding: 9px 12px;
        color: rgba(255, 255, 255, 0.52);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 99px;
        background: transparent;
        font-size: 0.68rem;
        font-weight: 800;
      }
      .app-section--lab .app-feature.is-active {
        color: var(--ink);
        border-color: transparent;
        background: var(--gold-2);
      }
      .app-section--lab .phone-stage {
        position: relative;
        min-height: 740px;
        display: grid;
        place-items: center;
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: transparent;
      }
      .app-section--lab .phone-glow {
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: var(--orange);
        opacity: 0.16;
        filter: blur(70px);
      }
      .app-section--lab .phone {
        position: relative;
        z-index: 2;
        width: 300px;
        height: 620px;
        padding: 11px;
        border: 2px solid rgba(255, 255, 255, 0.35);
        border-radius: 48px;
        background: #050505;
        box-shadow: 0 45px 90px rgba(0, 0, 0, 0.45);
        transform: rotate(5deg);
      }
      .app-section--lab .phone::before {
        position: absolute;
        z-index: 5;
        top: 19px;
        left: 50%;
        width: 92px;
        height: 24px;
        content: "";
        border-radius: 99px;
        background: #080808;
        transform: translateX(-50%);
      }
      .app-section--lab .phone-screen {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 58px 20px 20px;
        overflow: hidden;
        color: var(--white);
        border-radius: 38px;
        background: linear-gradient(160deg, #26231d, #11110f 57%);
      }
      .app-section--lab .phone-concept {
        height: 100%;
      }
      .app-section--lab .phone-sketch-preview {
        position: absolute;
        inset: 0;
        display: none;
        overflow: hidden;
        border-radius: inherit;
        background: #f7f4eb;
      }
      .app-section--lab .phone-sketch-preview video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        /* CONTAIN, not cover — the old iframe scaled the whole sketch to fit
           and let the paper colour fill the seams. Cover crops the sketch's
           status bar into the phone chrome and shifts the dock; contain seats
           the artwork exactly as the bundle did, with any letterbox vanishing
           into the matching background. */
        object-fit: contain;
        object-position: center;
        background: #f7f4eb;
        pointer-events: none;
      }
      .app-section--lab .phone.is-sketch-mode .phone-screen {
        padding: 0;
        background: #f7f4eb;
      }
      .app-section--lab .phone.is-sketch-mode .phone-concept {
        display: none;
      }
      .app-section--lab .phone.is-sketch-mode .phone-sketch-preview {
        display: block;
      }
      .app-section--lab .phone-screen__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0;
      }
      .app-section--lab .phone-screen__head img {
        width: 42px;
        height: auto;
        aspect-ratio: 1;
        border-radius: 12px;
      }
      .app-section--lab .phone-screen__head small {
        color: rgba(255, 255, 255, 0.45);
      }
      .app-section--lab .phone-screen h3 {
        margin: 35px 0 8px;
        font-size: 2rem;
      }
      .app-section--lab .phone-concept > p {
        min-height: 0;
        margin: 0;
        color: rgba(255, 255, 255, 0.5);
        font-size: 0.75rem;
      }
      .app-section--lab .share-route {
        position: relative;
        height: 210px;
        margin: 22px 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 25px;
        background: linear-gradient(145deg, #f7d67b, #f28e00);
      }
      .app-section--lab .share-route img {
        width: 220px;
        height: auto;
        filter: drop-shadow(0 18px 15px rgba(0, 0, 0, 0.22));
      }
      .app-section--lab .share-route__label {
        position: absolute;
        top: 13px;
        left: 15px;
        color: var(--ink);
        font-size: 0.63rem;
        font-weight: 900;
        letter-spacing: 0.09em;
        text-transform: uppercase;
      }
      .app-section--lab .phone-benefit {
        padding: 13px;
        margin-top: 8px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.04);
      }
      .app-section--lab .phone-benefit small {
        display: block;
        color: var(--gold-2);
        font-size: 0.56rem;
        font-weight: 900;
        text-transform: uppercase;
      }
      .app-section--lab .phone-benefit strong {
        display: block;
        margin-top: 4px;
        font-size: 0.76rem;
      }
      .app-section--lab .floating-app-card {
        position: absolute;
        z-index: 4;
        right: 6%;
        bottom: 13%;
        width: 220px;
        padding: 18px;
        color: var(--white);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(15px);
        box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25);
        transition:
          opacity 0.25s ease,
          transform 0.25s ease;
      }
      .app-section--lab .floating-app-card.is-changing {
        opacity: 0;
        transform: translateY(8px);
      }
      .app-section--lab .floating-app-card small {
        color: var(--gold-2);
        font-size: 0.6rem;
        font-weight: 900;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .app-section--lab .floating-app-card strong {
        display: block;
        margin: 8px 0 5px;
      }
      .app-section--lab .floating-app-card p {
        margin: 0;
        color: rgba(255, 255, 255, 0.48);
        font-size: 0.7rem;
      }
      @media (max-width: 1100px) {
        .app-section--lab .app-panel {
          grid-template-columns: 1fr;
        }
        .app-section--lab .phone-stage {
          min-height: 720px;
        }
      }
      @media (min-width: 761px) and (max-width: 1100px) {
        .app-section--lab .app-panel {
          min-height: 0;
          grid-template-columns: minmax(0, 1fr) minmax(290px, 0.78fr);
          grid-template-rows: auto auto;
          align-items: stretch;
        }
        .app-section--lab .app-copy {
          grid-column: 1;
          grid-row: 1;
          padding: clamp(34px, 4.6vw, 56px);
        }
        .app-section--lab .app-inline-summary {
          display: none;
        }
        .app-section--lab .app-copy h2 {
          font-size: clamp(2.75rem, 5.4vw, 4.5rem);
        }
        .app-section--lab .store-buttons {
          width: 100%;
        }
        .app-section--lab .store-button {
          min-width: 0;
          flex: 1 1 calc(50% - 5px);
          padding-inline: 12px;
          gap: 8px;
        }
        .app-section--lab .store-button strong {
          font-size: 0.9rem;
        }
        .app-section--lab .app-features {
          display: grid;
          grid-template-columns: 1fr 1fr;
        }
        .app-section--lab .phone-stage {
          grid-column: 2;
          grid-row: 1;
          min-height: clamp(550px, 64vw, 660px);
        }
        .app-section--lab .phone {
          width: clamp(244px, 28.5vw, 300px);
          height: auto;
          aspect-ratio: 300 / 620;
        }
        .app-section--lab .floating-app-card {
          right: 2%;
          bottom: 7%;
          width: clamp(168px, 21vw, 220px);
          padding: 15px;
        }
        .app-section--lab .app-tablet-summary {
          grid-column: 1 / -1;
          grid-row: 2;
          display: block;
          max-width: none;
          margin: 0;
          padding: 24px clamp(34px, 4.6vw, 56px) 30px;
          color: rgba(255, 255, 255, 0.58);
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          font-size: 0.92rem;
        }
      }
      @media (max-width: 760px) {
        .app-section--lab {
          padding-block: 85px;
        }
        .app-section--lab .app-copy {
          padding: 35px 25px;
        }
        .app-section--lab .app-copy h2 {
          max-width: 8ch;
          font-size: clamp(2.7rem, 14vw, 4.25rem);
        }
        .app-section--lab .store-buttons {
          display: grid;
          grid-template-columns: 1fr;
        }
        .app-section--lab .store-button {
          width: 100%;
        }
        .app-section--lab .phone-stage {
          min-height: 650px;
        }
        .app-section--lab .phone {
          width: 260px;
          height: 550px;
          transform: rotate(2deg);
        }
        .app-section--lab .floating-app-card {
          right: 8px;
          bottom: 3%;
        }
      }
      @media (max-width: 359px) {
        .app-section--lab .app-copy {
          padding-inline: 20px;
        }
        .app-section--lab .phone {
          width: 246px;
        }
        .app-section--lab .floating-app-card {
          width: 190px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .app-section--lab .store-button,
        .app-section--lab .floating-app-card {
          transition: none;
        }
      }

      /* ============================================================
         BOOKING DECK — app-like public booking preview
         ============================================================ */
      body.booking-deck-open {
        overflow: hidden;
      }
      .booking-deck {
        position: fixed;
        inset: 0;
        z-index: 1500;
        display: grid;
        justify-items: end;
        background: rgba(8, 8, 9, 0.54);
        backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 280ms ease,
          visibility 280ms ease;
      }
      .booking-deck.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .booking-deck__panel {
        position: relative;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        width: min(590px, 94vw);
        height: 100dvh;
        overflow: hidden;
        color: var(--ink);
        background:
          radial-gradient(circle at 100% 0%, rgba(255, 138, 0, 0.16), transparent 35%),
          var(--paper);
        border-left: 1px solid rgba(255, 255, 255, 0.42);
        box-shadow: -28px 0 80px rgba(0, 0, 0, 0.24);
        transform: translateX(104%);
        transition: transform 440ms var(--ease);
      }
      .booking-deck.is-open .booking-deck__panel {
        transform: translateX(0);
      }
      .booking-deck__header {
        position: relative;
        z-index: 2;
        padding: max(22px, env(safe-area-inset-top)) 28px 18px;
        border-bottom: 1px solid var(--line);
        background: rgba(248, 244, 235, 0.92);
        backdrop-filter: blur(16px);
      }
      .booking-deck__topline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      .booking-deck__brand {
        display: flex;
        align-items: center;
        gap: 11px;
      }
      .booking-deck__brand img {
        width: 46px;
        height: auto;
      }
      .booking-deck__brand span {
        display: grid;
        gap: 2px;
      }
      .booking-deck__brand strong {
        font-size: 0.78rem;
        letter-spacing: 0.08em;
      }
      .booking-deck__brand small {
        color: var(--muted);
        font-size: 0.55rem;
        font-weight: 800;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
      .booking-deck__close,
      .booking-deck__back {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.7);
        font: inherit;
        font-size: 1.25rem;
        cursor: pointer;
      }
      .booking-deck__back[hidden] {
        display: none;
      }
      .booking-deck__heading {
        margin-top: 18px;
      }
      .booking-deck__heading small {
        display: block;
        margin-bottom: 6px;
        color: var(--orange-deep);
        font-size: 0.61rem;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .booking-deck__heading h2 {
        max-width: 15ch;
        font-size: clamp(1.65rem, 4vw, 2.25rem);
        letter-spacing: -0.045em;
      }
      .booking-deck__heading p {
        max-width: 48ch;
        margin-top: 7px;
        color: var(--muted);
        font-size: 0.82rem;
        line-height: 1.5;
      }
      .booking-progress {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin-top: 18px;
      }
      .booking-progress i {
        height: 4px;
        border-radius: 999px;
        background: rgba(14, 14, 15, 0.1);
        transition: background 240ms ease;
      }
      .booking-progress i.is-active {
        background: linear-gradient(90deg, var(--gold-2), var(--orange));
      }
      .booking-deck__body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 24px 28px 32px;
      }
      .booking-step[hidden],
      .booking-service-fields[hidden],
      .booking-pickup-fields[hidden],
      .booking-referral[hidden],
      .booking-deck__footer[hidden] {
        display: none;
      }
      .booking-service-grid {
        display: grid;
        gap: 12px;
      }
      .booking-service-card {
        position: relative;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 20px;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.72);
        text-align: left;
        cursor: pointer;
        transition:
          transform 200ms ease,
          border-color 200ms ease,
          box-shadow 200ms ease;
      }
      .booking-service-card:hover,
      .booking-service-card:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(255, 138, 0, 0.46);
        box-shadow: 0 18px 32px rgba(38, 23, 7, 0.1);
      }
      /* Transparent tile with a gold trim. The service artwork is solid
         black, so a solid black tile would swallow it — the trim gives the
         tile its edge instead of the fill. The card behind is light, so
         black artwork sits at full contrast.
         The glyph colour matches the artwork so all three tiles read as
         one set rather than two images and a gold symbol. */
      .booking-service-card__icon {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        padding: 6px;
        border: 1px solid var(--gold);
        border-radius: 16px;
        background: transparent;
        color: var(--ink);
        font-size: 1.45rem;
      }
      .booking-service-card__icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }
      /* Morning Express has no icon file, so its glyph is an inline SVG
         rather than a <picture>. Sized like the image so all three service
         cards present the same 52px box, and drawn in currentColor so it
         inherits the card's ink exactly as the character it replaced did. */
      .booking-service-card__icon svg {
        width: 100%;
        height: 100%;
        display: block;
      }
      .booking-service-card strong {
        display: block;
        margin-bottom: 3px;
        font-size: 1rem;
      }
      .booking-service-card small {
        color: var(--muted);
        font-size: 0.7rem;
        line-height: 1.4;
      }
      .booking-service-card__arrow {
        color: var(--orange-deep);
        font-size: 1.2rem;
      }
      .booking-service-card--morning {
        background: linear-gradient(135deg, rgba(255, 216, 121, 0.42), rgba(255, 138, 0, 0.08));
      }
      /* ---- MORNING EXPRESS COMPRESSED CONTROLS --------------------
         Single state selector, receiver toggle and segmented choices.
         Scoped to the deck so nothing else on the page inherits them. */
      /* Coverage exclusions, stated before anything is typed. */
      .booking-exclusion {
        margin: 0 0 14px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(211, 56, 47, 0.28);
        background: rgba(211, 56, 47, 0.07);
        color: var(--ink-2);
        font-size: 0.76rem;
        line-height: 1.5;
      }
      .booking-exclusion a {
        color: var(--orange-deep);
        font-weight: 800;
        text-decoration: underline;
      }

      /* State stays a compact pill; the resolved axis sits beside it. */
      /* One state pill and the axis readout. Morning Express asks for the
         state once; the delivery state is mirrored from it on submit. */
      .booking-state-row {
        display: grid;
        grid-template-columns: minmax(96px, 132px) minmax(0, 1fr);
        gap: 10px;
        align-items: end;
        margin-bottom: 14px;
      }
      .booking-state-pill select {
        min-height: 46px;
        padding: 10px 12px;
        border-radius: 999px;
      }
      .booking-axis-slot {
        display: grid;
        align-content: center;
        gap: 2px;
        min-height: 46px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px dashed rgba(255, 138, 0, 0.45);
        background: rgba(255, 138, 0, 0.08);
      }
      .booking-axis-slot small {
        color: var(--muted);
        font-size: 0.58rem;
        font-weight: 850;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .booking-axis-slot strong {
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* Address suggestion list — populated by the server brick later. */
      .booking-suggest:empty {
        display: none;
      }
      .booking-suggest {
        display: grid;
        margin-top: 6px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.92);
        overflow: hidden;
      }
      .booking-suggest button {
        padding: 11px 13px;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: transparent;
        text-align: left;
        font-size: 0.82rem;
        cursor: pointer;
      }
      .booking-suggest button:last-child {
        border-bottom: 0;
      }
      .booking-suggest button:hover,
      .booking-suggest button:focus-visible {
        background: rgba(255, 138, 0, 0.1);
      }

      .booking-rule {
        margin: 0;
        padding: 11px 13px;
        border-radius: 12px;
        background: rgba(14, 14, 15, 0.055);
        color: var(--ink-2);
        font-size: 0.74rem;
        line-height: 1.5;
      }
      .booking-rule b {
        font-weight: 850;
      }

      /* State and axis stay on one line down to the narrowest phone —
         96px + 10px gap still leaves room for the axis on a 292px card.
         On phones the axis filling the remaining width looks right; from
         761px up the row is far wider, so the axis hugs its content
         instead of stretching into a long empty pill. */
      @media (min-width: 761px) {
        .booking-state-row {
          grid-template-columns: minmax(96px, 132px) max-content;
          justify-content: start;
        }
        .booking-axis-slot {
          min-width: 132px;
        }
      }
      .booking-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.6);
        cursor: pointer;
      }
      .booking-toggle__copy {
        flex: 1;
      }
      .booking-toggle__copy strong {
        display: block;
        font-size: 0.84rem;
      }
      .booking-toggle__copy small {
        display: block;
        color: var(--muted);
        font-size: 0.72rem;
      }
      .booking-toggle__switch {
        position: relative;
        flex: 0 0 46px;
        width: 46px;
        height: 27px;
        border-radius: 999px;
        background: rgba(14, 14, 15, 0.2);
        transition: background 200ms var(--ease);
      }
      .booking-toggle__switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        background: var(--white);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        transition: transform 200ms var(--ease);
      }
      .booking-toggle input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      .booking-toggle input:checked + .booking-toggle__switch {
        background: var(--green);
      }
      .booking-toggle input:checked + .booking-toggle__switch::after {
        transform: translateX(19px);
      }
      .booking-toggle input:focus-visible + .booking-toggle__switch {
        box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.25);
      }
      #bookingMorningReceiverFields[hidden] {
        display: none;
      }
      #bookingMorningReceiverFields {
        margin-top: 14px;
      }
      .booking-seg {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      .booking-seg--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .booking-seg__opt {
        position: relative;
        display: grid;
        place-items: center;
        gap: 2px;
        min-height: 58px;
        padding: 8px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.78);
        cursor: pointer;
        text-align: center;
        transition:
          border-color 180ms ease,
          background 180ms ease;
      }
      .booking-seg__opt input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
      }
      .booking-seg__opt strong {
        font-size: 0.86rem;
      }
      .booking-seg__opt small {
        color: var(--muted);
        font-size: 0.66rem;
      }
      .booking-seg__opt:has(input:checked) {
        border-color: var(--orange);
        background: rgba(255, 138, 0, 0.12);
      }
      .booking-seg__opt:has(input:focus-visible) {
        box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.18);
      }
      .booking-form-grid {
        display: grid;
        gap: 16px;
      }
      .booking-form-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .booking-field {
        display: grid;
        gap: 7px;
      }
      .booking-field--wide {
        grid-column: 1 / -1;
      }
      .booking-field > span,
      .booking-section-label {
        color: var(--ink-2);
        font-size: 0.65rem;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .booking-field input,
      .booking-field select,
      .booking-field textarea {
        width: 100%;
        min-height: 52px;
        padding: 13px 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        outline: none;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.78);
        font: inherit;
        font-size: 0.88rem;
        transition:
          border-color 180ms ease,
          box-shadow 180ms ease;
      }
      .booking-field textarea {
        min-height: 104px;
        resize: vertical;
      }
      .booking-field :is(input, select, textarea):focus {
        border-color: var(--orange);
        box-shadow: 0 0 0 4px rgba(255, 138, 0, 0.1);
      }
      .booking-field :is(input, select, textarea):disabled {
        color: rgba(14, 14, 15, 0.54);
        background: rgba(14, 14, 15, 0.055);
      }
      .booking-note {
        display: flex;
        gap: 10px;
        padding: 13px 14px;
        border: 1px solid rgba(255, 138, 0, 0.22);
        border-radius: 15px;
        color: var(--ink-2);
        background: rgba(255, 138, 0, 0.07);
        font-size: 0.76rem;
        line-height: 1.5;
      }
      .booking-note b {
        color: var(--orange-deep);
      }
      .booking-route-card {
        display: grid;
        gap: 6px;
        padding: 15px;
        border: 1px dashed rgba(14, 14, 15, 0.2);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.5);
      }
      .booking-route-card small {
        color: var(--orange-deep);
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .booking-route-card strong {
        font-size: 0.95rem;
      }
      .booking-referral {
        grid-column: 1 / -1;
        padding-top: 2px;
      }
      .booking-referral__toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 9px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--ink);
        background: rgba(255, 255, 255, 0.72);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 800;
        cursor: pointer;
      }
      .booking-referral__field {
        margin-top: 11px;
      }
      .booking-referral__field[hidden] {
        display: none;
      }
      .booking-deck__footer {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        padding: 14px 28px max(16px, env(safe-area-inset-bottom));
        border-top: 1px solid var(--line);
        background: rgba(248, 244, 235, 0.94);
        backdrop-filter: blur(16px);
      }
      .booking-deck__footer .button {
        min-height: 52px;
        border: 0;
        cursor: pointer;
      }
      .booking-deck__footer .booking-deck__previous {
        width: 52px;
        padding-inline: 0;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.72);
      }
      .booking-confirmation {
        display: grid;
        place-items: center;
        min-height: 100%;
        padding-block: 36px;
        text-align: center;
      }
      .booking-confirmation__mark {
        display: grid;
        place-items: center;
        width: 78px;
        height: 78px;
        margin-bottom: 22px;
        border-radius: 25px;
        color: var(--ink);
        background: linear-gradient(135deg, var(--gold-2), var(--orange));
        font-size: 2rem;
      }
      .booking-confirmation h3 {
        max-width: 12ch;
        margin-bottom: 12px;
        font-size: 2rem;
        letter-spacing: -0.045em;
      }
      .booking-confirmation p {
        max-width: 42ch;
        color: var(--muted);
        font-size: 0.86rem;
      }
      .booking-confirmation__reference {
        width: 100%;
        margin: 24px 0;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.72);
      }
      /* Sits under the reference, so it reads as a caption rather than a
         second heading competing with it. */
      .booking-confirmation__reference-use {
        margin-top: 8px;
        margin-bottom: 0 !important;
        color: var(--muted);
        line-height: 1.45;
      }
      .booking-confirmation__reference small {
        display: block;
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .booking-confirmation__reference strong {
        font-size: 1rem;
      }
      .booking-confirmation .button {
        min-width: 180px;
        border: 0;
        cursor: pointer;
      }
      .booking-step--legacy {
        display: none !important;
      }
      .booking-availability {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.68);
      }
      .booking-availability__dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #8b8b86;
        box-shadow: 0 0 0 6px rgba(139, 139, 134, 0.12);
      }
      .booking-availability.is-open .booking-availability__dot {
        background: #2fcf8f;
        box-shadow: 0 0 0 6px rgba(47, 207, 143, 0.14);
      }
      .booking-availability strong,
      .booking-availability small {
        display: block;
      }
      .booking-availability strong {
        margin-bottom: 2px;
        font-size: 0.82rem;
      }
      .booking-availability small {
        color: var(--muted);
        font-size: 0.68rem;
      }
      /* ---- CLOSED MORNING EXPRESS ------------------------------------
         A greyed-out card reads as "broken" and a customer taps it, waits
         for the deck, then finds nothing works. Red plus a live countdown
         answers the only question they actually have — WHEN — before they
         spend a tap on it. */
      .booking-service-card.is-unavailable {
        position: relative;
        overflow: hidden;
        border-color: rgba(211, 56, 47, 0.45);
        background: linear-gradient(
          135deg,
          rgba(211, 56, 47, 0.14),
          rgba(211, 56, 47, 0.05)
        );
        cursor: not-allowed;
      }
      /* The card stays readable underneath; this is a wash, not a mask. */
      .booking-service-card.is-unavailable > * {
        opacity: 0.62;
      }
      .booking-service-card__closed {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 10px 14px;
        text-align: center;
        background: rgba(255, 253, 248, 0.9);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-radius: inherit;
      }
      .booking-service-card__closed-label {
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #c0392b;
      }
      .booking-service-card__closed-timer {
        font-variant-numeric: tabular-nums;
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1.1;
        color: var(--ink);
      }
      .booking-service-card__closed-when {
        font-size: 0.66rem;
        line-height: 1.35;
        color: var(--muted);
      }
      /* The card is not interactive while closed, but the overlay must not
         swallow assistive focus outlines. */
      .booking-service-card.is-unavailable:focus-visible {
        outline: 2px solid #c0392b;
        outline-offset: 2px;
      }
      /* Tapping a closed card nudges the overlay rather than doing nothing,
         so the tap is acknowledged and the eye is pulled to the countdown. */
      @keyframes bookingClosedNudge {
        0%, 100% { transform: translateX(0); }
        25%      { transform: translateX(-4px); }
        75%      { transform: translateX(4px); }
      }
      .booking-service-card__closed.is-nudged {
        animation: bookingClosedNudge 0.32s var(--ease);
      }
      @media (prefers-reduced-motion: reduce) {
        .booking-service-card__closed {
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }
        .booking-service-card__closed.is-nudged {
          animation: none;
        }
      }
      .booking-service-card__status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 7px;
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 800;
      }
      .booking-service-card__status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #8b8b86;
      }
      .booking-service-card.is-available .booking-service-card__status {
        color: #167755;
      }
      .booking-service-card.is-available .booking-service-card__status::before {
        background: #2fcf8f;
      }
      .booking-compact-stack {
        display: grid;
        gap: 14px;
      }
      .booking-compact-card {
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 19px;
        background: rgba(255, 255, 255, 0.68);
      }
      .booking-compact-card__head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        margin-bottom: 13px;
      }
      .booking-compact-card__head strong {
        font-size: 0.94rem;
      }
      /* Same size as before, but readable rather than a faint whisper. */
      .booking-compact-card__head small {
        color: var(--ink-2);
        font-size: 0.65rem;
        font-weight: 800;
      }
      .booking-axis-status {
        margin-top: 7px;
        color: var(--muted);
        font-size: 0.64rem;
      }
      .booking-axis-status.is-ready {
        color: #167755;
        font-weight: 750;
      }
      .booking-referral-promo {
        grid-column: 1 / -1;
        padding: 14px;
        border: 1px solid rgba(255, 138, 0, 0.26);
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(255, 216, 121, 0.2), rgba(255, 138, 0, 0.06));
      }
      .booking-referral-promo strong,
      .booking-referral-promo small {
        display: block;
      }
      .booking-referral-promo strong {
        margin-bottom: 4px;
        font-size: 0.82rem;
      }
      .booking-referral-promo small {
        margin-bottom: 10px;
        color: var(--muted);
        font-size: 0.67rem;
        line-height: 1.45;
      }
      .booking-referral-promo input {
        width: 100%;
        min-height: 48px;
        padding: 12px 13px;
        border: 1px solid var(--line);
        border-radius: 13px;
        outline: none;
        background: rgba(255, 255, 255, 0.8);
        font: inherit;
      }
      .booking-review-card {
        display: grid;
        gap: 14px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 21px;
        background: rgba(255, 255, 255, 0.72);
      }
      .booking-review-route {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 10px;
      }
      .booking-review-route div {
        min-width: 0;
      }
      .booking-review-route small,
      .booking-review-route strong {
        display: block;
      }
      .booking-review-route small {
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 0.6rem;
        font-weight: 800;
        text-transform: uppercase;
      }
      .booking-review-route strong {
        overflow: hidden;
        font-size: 0.8rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .booking-review-route > span {
        color: var(--orange-deep);
      }
      .booking-review-price {
        padding-top: 14px;
        border-top: 1px solid var(--line);
      }
      .booking-review-price small,
      .booking-review-price strong,
      .booking-review-price span {
        display: block;
      }
      .booking-review-price small {
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }
      .booking-review-price strong {
        margin: 4px 0;
        font-size: 2rem;
        letter-spacing: -0.04em;
      }
      .booking-review-price span {
        color: var(--muted);
        font-size: 0.7rem;
      }
      @media (max-width: 1024px) and (min-width: 761px) {
        .booking-deck {
          place-items: center;
          padding: 28px;
        }
        .booking-deck__panel {
          width: min(720px, calc(100vw - 56px));
          height: min(880px, calc(100dvh - 56px));
          border: 1px solid rgba(255, 255, 255, 0.42);
          border-radius: 32px;
          box-shadow: 0 34px 100px rgba(0, 0, 0, 0.3);
          transform: translateY(36px) scale(0.98);
        }
        .booking-deck.is-open .booking-deck__panel {
          transform: translateY(0) scale(1);
        }
      }
      @media (max-width: 760px) {
        .booking-deck {
          align-items: end;
          justify-items: stretch;
          background: rgba(8, 8, 9, 0.5);
        }
        .booking-deck__panel {
          width: 100%;
          height: min(94dvh, 900px);
          border: 0;
          border-radius: 30px 30px 0 0;
          transform: translateY(104%);
          box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.28);
          transition:
            transform 440ms var(--ease),
            height 380ms var(--ease);
        }
        /* Phone only: the service list is short, so the sheet hugs it
           instead of leaving dead space. Choosing a service switches the
           view and the sheet grows back for the form. iPad and desktop
           keep their own fixed heights. */
        .booking-deck[data-deck-view="select"] .booking-deck__panel {
          height: auto;
          max-height: min(94dvh, 900px);
        }
        .booking-deck__panel::before {
          content: "";
          position: absolute;
          z-index: 4;
          top: 9px;
          left: 50%;
          width: 42px;
          height: 4px;
          border-radius: 999px;
          background: rgba(14, 14, 15, 0.22);
          transform: translateX(-50%);
        }
        .booking-deck.is-open .booking-deck__panel {
          transform: translateY(0);
        }
        .booking-deck__header {
          padding: 22px 18px 15px;
        }
        .booking-deck__heading {
          margin-top: 14px;
        }
        .booking-deck__heading h2 {
          font-size: clamp(1.55rem, 7.8vw, 2rem);
        }
        .booking-deck__heading p {
          font-size: 0.75rem;
        }
        .booking-progress {
          margin-top: 14px;
        }
        .booking-deck__body {
          padding: 20px 18px 26px;
        }
        .booking-deck__footer {
          padding: 12px 18px max(14px, env(safe-area-inset-bottom));
        }
        .booking-form-grid--two {
          grid-template-columns: 1fr;
        }
        .booking-service-card {
          grid-template-columns: 46px minmax(0, 1fr) auto;
          padding: 13px;
          border-radius: 18px;
        }
        .booking-service-card__icon {
          width: 46px;
          height: 46px;
          border-radius: 14px;
        }
      }
      @media (max-width: 359px) {
        .booking-deck__brand small {
          display: none;
        }
        .booking-deck__header,
        .booking-deck__body,
        .booking-deck__footer {
          padding-inline: 14px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .booking-deck,
        .booking-deck__panel,
        .booking-service-card,
        .booking-progress i {
          transition: none;
        }
      }

/* ---- section-local helpers (were beside their markup) ---- */
        /* stacking helpers for the slide surfaces (kept beside their markup) */
        .hero-vehicle-slot picture {
          display: contents;
        }
        .fleet-frame {
          position: relative;
          display: grid;
          place-items: center;
          width: 100%;
          min-height: 330px;
        }
        .fleet-frame picture {
          grid-area: 1 / 1;
          display: block;
        }
        .fleet-frame img {
          display: none;
        }
        .fleet-frame img.is-shown {
          display: block;
        }
        @media (max-width: 760px) {
          .fleet-frame {
            min-height: 210px;
          }
        }

/* ============================================================
   TRACKING RESULT
   Sits under the tracking field. Dark section, so light text.
   ============================================================ */
.tracking-panel {
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 253, 248, 0.14);
  background: rgba(255, 253, 248, 0.05);
  backdrop-filter: blur(8px);
  color: var(--white);
  text-align: left;
}
.tracking-panel[hidden] {
  display: none;
}

.tracking-loader,
.tracking-message {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
}
.tracking-message {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.tracking-message strong {
  font-size: 0.95rem;
}
.tracking-message span {
  color: rgba(255, 253, 248, 0.66);
  font-size: 0.82rem;
}

.tracking-spinner {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 216, 121, 0.3);
  border-top-color: var(--gold-2);
  animation: trackingSpin 0.8s linear infinite;
}
@keyframes trackingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* A node carrying a real server status, rather than its generic
   description. Lifts the copy out of placeholder grey. */
.journey-node.has-status small {
  color: var(--gold-2);
  opacity: 1;
}

/* ============================================================
   DELIVERED — the journey closed successfully.

   Applied only when the order genuinely reached Delivered, so the green
   carries meaning rather than being decoration. Deliberately placed
   after the .is-lit rules so it wins on source order at equal
   specificity, and it applies at every width — the dot and label are
   visible on phones too.
   ============================================================ */
.journey-node.is-delivered .dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 6px rgba(39, 201, 132, 0.18);
}
.journey-node.is-delivered strong {
  color: var(--green);
}
.journey-node.is-delivered .journey-event {
  border-left-color: var(--green);
}
.journey-node.is-delivered .journey-event__status {
  color: var(--green);
}

/* ============================================================
   TRACKING HISTORY UNDER THE NODES  (owner ruling 2026-08-03)

   iPad and desktop read the order's history in place, under the stage
   it belongs to, instead of in a separate vertical card. Phones are
   deliberately untouched: below 761px `.journey-node small` is already
   hidden and the card remains the phone's tracking surface, so this
   block stays switched off there.
   ============================================================ */
.journey-node__events {
  display: none;
}

@media (min-width: 761px) {
  .journey-node__events {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    text-align: left;
  }

  /* Once the events are showing, the one-line summary would repeat the
     newest of them. */
  .journey-node.has-status small {
    display: none;
  }

  .journey-event {
    display: grid;
    gap: 1px;
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(255, 253, 248, 0.04);
    border: 1px solid rgba(255, 253, 248, 0.08);
    border-left: 2px solid var(--orange);
  }
  .journey-event__time {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    color: rgba(255, 253, 248, 0.5);
  }
  .journey-event__status {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--gold-2);
    /* Statuses are staff-written and can be long; wrap rather than
       stretch the 1fr column and break the five-across grid. */
    overflow-wrap: anywhere;
  }
  .journey-event__note {
    font-size: 0.62rem;
    line-height: 1.4;
    color: rgba(255, 253, 248, 0.62);
    overflow-wrap: anywhere;
  }
  .journey-event__gps {
    font-size: 0.62rem;
    color: var(--orange);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  a.journey-event__gps:hover,
  a.journey-event__gps:focus-visible {
    text-decoration: underline;
  }

  /* The vertical list has moved under the nodes at these widths. The
     panel is kept for the staged loader, error text and the service
     line — only the event list retires. */
  body.tracking-has-order .tracking-panel .tracking-timeline {
    display: none;
  }
}

/* The tablet band is width-critical (761–1024px), so the event cards
   tighten rather than push the five columns apart. */
@media (min-width: 761px) and (max-width: 1024px) {
  .journey-event {
    padding: 6px 7px;
  }
  .journey-event__status {
    font-size: 0.64rem;
  }
  .journey-event__time,
  .journey-event__gps {
    font-size: 0.58rem;
  }
}

/* Service identity resolved from the tracking prefix (BK/VAN/PCL/CONS/
   PL/NXT). Sits above the timeline so the customer sees what is moving
   before they read when it moved. */
.tracking-service {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tracking-service__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}
.tracking-service strong {
  font-size: 15px;
  color: var(--gold-2);
}

.tracking-timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracking-event {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}
.tracking-event:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: rgba(255, 253, 248, 0.16);
}

.tracking-event__dot {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border-radius: 50%;
  border: 3px solid var(--gold-2);
  background: var(--ink);
}
.tracking-event.is-latest .tracking-event__dot {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(39, 201, 132, 0.18);
}

.tracking-event__body time {
  display: block;
  color: rgba(255, 253, 248, 0.52);
  font-size: 0.72rem;
}
.tracking-event__body strong {
  display: block;
  margin: 2px 0 4px;
  color: rgba(255, 253, 248, 0.72);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tracking-event.is-latest .tracking-event__body strong {
  color: var(--green);
}
.tracking-event__body p {
  margin: 0;
  color: rgba(255, 253, 248, 0.8);
  font-size: 0.84rem;
  line-height: 1.5;
}

.tracking-event__gps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--gold-2);
  font-size: 0.76rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.tracking-event__gps::before {
  content: "◉";
  font-size: 0.66rem;
}
a.tracking-event__gps:hover {
  text-decoration: underline;
}

/* Van orders ride the same path; artwork is wider than the bike. */
.journey-rider.is-van img {
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .tracking-spinner {
    animation-duration: 2s;
  }
}

/* ============================================================
   REFERRAL FEEDBACK
   Four states, matching the live logistics page. Colour alone never
   carries the meaning — the message text always states it.
   ============================================================ */
.referral-feedback {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.45;
  min-height: 1em;
  color: var(--muted);
}
.referral-feedback.is-checking {
  color: var(--muted);
}
.referral-feedback.is-valid {
  color: #167755;
  font-weight: 500;
}
.referral-feedback.is-invalid,
.referral-feedback.is-revoked {
  color: #c0392b;
}
.booking-referral-promo .referral-input {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   VAN — FIXED SINGLE TRIP
   The quote is per trip, so the count is stated rather than chosen.
   Styled to read as a settled value, not a disabled control.
   ============================================================ */
.booking-trip-fixed > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.76rem;
  color: var(--muted);
}
.booking-trip-fixed__value {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.booking-trip-fixed__note {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULL VAN HIRE — booking deck, details step
   ───────────────────────────────────────────────────────────────────────────
   Transcribed from the approved booking-deck.html redesign.

   CONTAINMENT: every rule below is scoped under [data-compact-service="van"]
   and uses `vn-` class names. Custom properties are `--vn-*` so they cannot
   collide with the site tokens in :root (home.css defines --ink, --paper,
   --line, --radius-lg with different values — those are left alone).
   Nothing here can reach Morning Express, Construction, or the page.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-compact-service="van"] {
  --vn-ink: #151310;
  --vn-ink-2: #5c554c;
  --vn-ink-3: #918a80;
  --vn-card: #ffffff;
  --vn-line: #e8e1d6;
  --vn-line-2: #d6cdbf;
  --vn-brand: #ee7b21;
  --vn-radius: 10px;
  --vn-radius-lg: 16px;
  --vn-field-h: 46px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* home.js toggles the `hidden` attribute to switch services; the flex rule
   above would otherwise defeat it. */
[data-compact-service="van"][hidden] { display: none; }

/* ── card ───────────────────────────────────────────────────────────────── */
[data-compact-service="van"] .vn-block {
  background: var(--vn-card);
  border: 1px solid var(--vn-line);
  border-radius: var(--vn-radius-lg);
  padding: 16px;
}
[data-compact-service="van"] .vn-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
[data-compact-service="van"] .vn-block__title {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--vn-ink);
}
[data-compact-service="van"] .vn-block__meta {
  font-size: 12px;
  color: var(--vn-ink-3);
}

/* ── field ──────────────────────────────────────────────────────────────── */
[data-compact-service="van"] .vn-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-compact-service="van"] .vn-field + .vn-field { margin-top: 13px; }
[data-compact-service="van"] .vn-field__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vn-ink-2);
}
[data-compact-service="van"] .vn-field__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--vn-ink-3);
}

/* The axis readout home.js writes into. The block meta now carries this
   message, so the per-field copy is hidden — but the node must survive. */
[data-compact-service="van"] .vn-axis { display: none; }

/* ── controls ───────────────────────────────────────────────────────────── */
/* min-height:0 is deliberate. The old markup inherited a 52px min-height and
   let <select> absorb leftover grid-row height, so selects rendered 67–85px
   next to 52px inputs. Explicit height + min-height:0 removes that. */
[data-compact-service="van"] input:not([type="hidden"]):not([type="checkbox"]),
[data-compact-service="van"] select {
  width: 100%;
  height: var(--vn-field-h);
  min-height: 0;
  padding: 0 13px;
  font: inherit;
  font-size: 14.5px;
  color: var(--vn-ink);
  background: var(--vn-card);
  border: 1px solid var(--vn-line-2);
  border-radius: var(--vn-radius);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-compact-service="van"] select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' stroke='%23918A80' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
[data-compact-service="van"] input::placeholder { color: var(--vn-ink-3); }
[data-compact-service="van"] input:not([type="hidden"]):not([type="checkbox"]):focus,
[data-compact-service="van"] select:focus {
  border-color: var(--vn-brand);
  box-shadow: 0 0 0 3px rgba(238, 123, 33, 0.16);
}

/* ── trips stepper (presentational; value is fixed at 1) ────────────────── */
[data-compact-service="van"] .vn-trips {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
[data-compact-service="van"] .vn-stepper {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--vn-field-h);
  background: var(--vn-card);
  border: 1px solid var(--vn-line-2);
  border-radius: var(--vn-radius);
  overflow: hidden;
}
[data-compact-service="van"] .vn-stepper button {
  width: 42px;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--vn-card);
  font: inherit;
  font-size: 17px;
  color: var(--vn-ink-2);
  cursor: pointer;
}
[data-compact-service="van"] .vn-stepper button:disabled {
  color: #cfc8be;
  cursor: default;
}
[data-compact-service="van"] .vn-stepper__val {
  min-width: 64px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vn-ink);
}

/* ── route spine ────────────────────────────────────────────────────────── */
[data-compact-service="van"] .vn-route {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 12px;
}
[data-compact-service="van"] .vn-route__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
}
[data-compact-service="van"] .vn-route__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid var(--vn-brand);
  border-radius: 50%;
  background: var(--vn-card);
}
[data-compact-service="van"] .vn-route__dot--end {
  background: var(--vn-brand);
  border-color: var(--vn-brand);
}
[data-compact-service="van"] .vn-route__line {
  flex: 1;
  width: 0;
  margin: 4px 0;
  border-left: 2px dotted var(--vn-line-2);
}
[data-compact-service="van"] .vn-leg + .vn-leg { margin-top: 16px; }
[data-compact-service="van"] .vn-leg__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vn-ink-2);
}
[data-compact-service="van"] .vn-leg__grid {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 8px;
}
@media (max-width: 420px) {
  [data-compact-service="van"] .vn-leg__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── receiver toggle ────────────────────────────────────────────────────── */
[data-compact-service="van"] .vn-switchrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--vn-line);
}
[data-compact-service="van"] .vn-switchrow__text { flex: 1; min-width: 0; }
[data-compact-service="van"] .vn-switchrow__lbl {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--vn-ink);
  cursor: pointer;
}
[data-compact-service="van"] .vn-switchrow__hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--vn-ink-3);
}
[data-compact-service="van"] .vn-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 27px;
}
[data-compact-service="van"] .vn-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
[data-compact-service="van"] .vn-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #ddd5c9;
  transition: background 0.18s;
  pointer-events: none;
}
[data-compact-service="van"] .vn-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s;
}
[data-compact-service="van"] .vn-switch input:checked + .vn-switch__track {
  background: var(--vn-brand);
}
[data-compact-service="van"] .vn-switch input:checked + .vn-switch__track::after {
  transform: translateX(19px);
}
[data-compact-service="van"] .vn-switch input:focus-visible + .vn-switch__track {
  box-shadow: 0 0 0 3px rgba(238, 123, 33, 0.25);
}
[data-compact-service="van"] .vn-recipient { margin-top: 14px; }
[data-compact-service="van"] .vn-recipient[hidden] { display: none; }

/* ── referral disclosure ────────────────────────────────────────────────── */
[data-compact-service="van"] .vn-disclose {
  background: var(--vn-card);
  border: 1px solid var(--vn-line);
  border-radius: var(--vn-radius-lg);
  overflow: hidden;
}
[data-compact-service="van"] .vn-disclose__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--vn-ink);
  cursor: pointer;
}
[data-compact-service="van"] .vn-disclose__lbl {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
[data-compact-service="van"] .vn-disclose__hint {
  font-size: 12px;
  color: var(--vn-ink-3);
}
[data-compact-service="van"] .vn-disclose__chev {
  font-size: 12px;
  color: var(--vn-ink-3);
  transition: transform 0.2s;
}
[data-compact-service="van"] .vn-disclose.is-open .vn-disclose__chev {
  transform: rotate(180deg);
}
[data-compact-service="van"] .vn-disclose__panel { padding: 0 16px 16px; }
[data-compact-service="van"] .vn-disclose__panel[hidden] { display: none; }
[data-compact-service="van"] .vn-disclose__panel .vn-field__note { margin: 0 0 9px; }

/* ── closing notice ─────────────────────────────────────────────────────── */
[data-compact-service="van"] .vn-notice {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vn-ink-2);
}
[data-compact-service="van"] .vn-notice b {
  color: var(--vn-ink);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONSTRUCTION ENQUIRY — layout only

   Every rule is scoped to [data-compact-service="construction"] so nothing
   here can reach Van, Morning Express or Parcel. That scoping is the whole
   safety property: the generic .booking-field rules these override are
   shared by every service on the page.
   ═══════════════════════════════════════════════════════════════════════ */

/* Required marker. Carries a title and a text glyph, so it survives with
   colour disabled and is not announced twice — the visible asterisk is
   aria-hidden and the accessible name says "required". */
[data-compact-service="construction"] .req {
  margin-left: 2px;
  color: #b3261e;
  font-weight: 900;
  text-decoration: none;
  border: 0;
}

/* State + address. The state select only ever holds a state name, so giving
   it half the row wasted the space the address actually needs. Fractional,
   not fixed: a longer label such as "Oyo (Ibadan)" must never clip. */
@media (min-width: 560px) {
  [data-compact-service="construction"] .booking-form-grid--two {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  }
  /* Full-width fields keep spanning both tracks. */
  [data-compact-service="construction"] .booking-field--wide {
    grid-column: 1 / -1;
  }
}

/* Both controls share one height so the pair reads as a single row. */
[data-compact-service="construction"] .booking-field :is(input, select) {
  min-height: 52px;
}

/* A chosen state is distinguishable by WEIGHT as well as colour, so the
   selection is still obvious in greyscale or with colours overridden. */
[data-compact-service="construction"] select[data-service-state]:not([data-empty="1"]) {
  color: var(--ink);
  font-weight: 700;
}
[data-compact-service="construction"] select[data-service-state][data-empty="1"] {
  color: var(--ink-2);
  font-weight: 500;
}

/* Material rows: the selector carries the meaning, so it takes the room.
   The quantity holds short text like "200 bags" and the remove button is a
   single glyph, so both are sized to their content instead of padding the
   row with empty width. */
[data-compact-service="construction"] .booking-construction-row {
  display: grid;
  /* The quantity column is sized so "Qty, e.g. 200 bags" fits without
     clipping — that placeholder is the only thing telling the customer
     free text is welcome, so truncating it defeats its purpose. */
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.46fr) 44px;
  gap: 8px;
  align-items: start;
  margin-top: 10px;
}
[data-compact-service="construction"] .booking-construction-row :is(input, select, button) {
  min-height: 48px;
}
[data-compact-service="construction"] .booking-construction-row button {
  padding: 0;
}
/* Below 560px the quantity needs its placeholder to stay readable, so the
   row stacks the remove button rather than squeezing the text. */
@media (max-width: 559px) {
  [data-compact-service="construction"] .booking-construction-row {
    /* Narrow panels stack the quantity under the selector rather than
       squeezing the placeholder into an unreadable sliver. */
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: "material remove" "qty qty";
    gap: 6px;
  }
  [data-compact-service="construction"] .booking-construction-row > label:first-child { grid-area: material; }
  [data-compact-service="construction"] .booking-construction-row > label:nth-child(2) { grid-area: qty; }
  [data-compact-service="construction"] .booking-construction-row > button { grid-area: remove; }
}

/* ═══════════════════════════════════════════════════════════════════════
   REVIEW SCREEN — read-back rows, callback promise, reference state

   Additive only. Nothing existing on the review card is restyled: the
   card, the route block, the price block and the footer button keep the
   styling they already had.
   ═══════════════════════════════════════════════════════════════════════ */

/* The callback promise. Same tint as the referral notice so it reads as
   information, not as a warning. */
.booking-callback-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(196, 106, 24, 0.08);
  color: #8a4a12;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Read-back groups. Label left and muted, value right and semibold —
   the customer is scanning for a wrong digit in their phone number, so
   the values carry the weight. */
.booking-review-block {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}
.booking-review-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.booking-review-block__head strong { font-size: 0.95rem; }
.booking-review-block__head small {
  color: var(--ink-2);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.booking-review-rows { margin: 0; }
.booking-review-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
}
.booking-review-rows dt {
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 500;
}
.booking-review-rows dd {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}
/* A material list wraps onto its own lines rather than fighting the label. */
.booking-review-rows dd.is-stacked {
  white-space: pre-line;
  line-height: 1.5;
}
/* An optional row the customer left blank is simply not shown. */
.booking-review-rows .is-optional[hidden] { display: none; }

/* Reference box: dashed and muted until issued, solid and black after. */
.booking-confirmation__reference.is-pending {
  border-style: dashed;
}
.booking-confirmation__reference.is-pending strong {
  color: var(--ink-2);
  font-weight: 600;
}
.booking-confirmation__reference.is-issued {
  border-style: solid;
}
.booking-confirmation__reference.is-issued strong {
  color: var(--ink);
  font-weight: 800;
}

/* Submitted state. Green carries the change, and the word changes too, so
   the state is never signalled by colour alone. */
#bookingReviewPrice.is-submitted { color: #2f6b3a; }
#bookingDeckEyebrow.is-submitted { color: #2f6b3a; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════
   POST-SUBMIT FOOTER

   Two full buttons that share the row. They replace the normal
   back-circle + Continue pair once the server has accepted the booking,
   so the print action is a real, readable control rather than a glyph
   crammed into the circular back button.
   ═══════════════════════════════════════════════════════════════════════ */
.booking-deck__footer .booking-deck__print,
.booking-deck__footer .booking-deck__done {
  flex: 1 1 0;
  min-height: 54px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
}
.booking-deck__footer .booking-deck__print {
  background: #fff;
  color: #1a1a1a;
  border: 1px solid var(--line);
}
.booking-deck__footer .booking-deck__done {
  background: #2f6b3a;
  color: #fff;
  border: 0;
}
.booking-deck__footer .booking-deck__print[hidden],
.booking-deck__footer .booking-deck__done[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   hidden must actually hide

   .button sets display:inline-flex, which outranks the browser's built-in
   [hidden] { display:none }. So button.hidden = true did nothing, and the
   "Submitting securely…" button stayed on screen after the booking had
   already succeeded, sitting above Print and Close.
   ═══════════════════════════════════════════════════════════════════════ */
.button[hidden] { display: none !important; }

/* Submit spinner. The button holds this while the request is in flight. */
.btn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: rgba(0, 0, 0, 0.75);
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2s; }
}

/* Collapsible review blocks. Open while the customer checks their details,
   folded away once the order is submitted — the information is still there,
   just not taking the whole screen at a point when it has been agreed. */
button.booking-review-block__head {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.booking-review-block__chev {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 0.8rem;
  transition: transform 160ms ease;
}
.booking-review-block__head[aria-expanded="false"] .booking-review-block__chev {
  transform: rotate(-90deg);
}
.booking-review-rows[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   DECK HEADER — the brand stays centred

   The topline was flex with space-between across three children: back,
   brand, close. Hiding the back arrow on the submitted screen left only
   two, so the brand slid to the left edge.

   A fixed three-column grid with each child pinned to its own column keeps
   the logo and wordmark centred whether the back arrow is there or not.
   ═══════════════════════════════════════════════════════════════════════ */
.booking-deck__topline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.booking-deck__topline .booking-deck__back  { grid-column: 1; justify-self: start; }
.booking-deck__topline .booking-deck__brand { grid-column: 2; justify-self: center; text-align: center; }
.booking-deck__topline .booking-deck__close { grid-column: 3; justify-self: end; }

/* The back arrow on the submitted screen: gone for the customer, still
   occupying its grid column so the brand stays centred. */
.booking-deck__back.is-locked {
  visibility: hidden;
  pointer-events: none;
}

/* A quote slot with nothing in it yet. Muted so it reads as waiting rather
   than as a figure of zero. */
#bookingReviewPrice.is-awaiting { color: var(--ink-2); }

/* Service icon inside the round footer control. */
.booking-deck__svcicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
}
.booking-deck__svcicon img { width: 26px; height: 26px; object-fit: contain; }
/* paintServiceIcon() clones the chosen card's icon into the back circle and
   resizes any <img> it finds. An inline SVG is not an <img>, so it is sized
   here instead — same 26px, so Morning Express sits in that circle at the
   weight Van and Construction already do.

   The colour is pinned rather than inherited, and that is the whole reason
   this circle looked empty for Morning Express. The back control is a
   .button, whose text colour is --white; the circle behind it is
   rgba(255,255,255,0.72). So the sun character it used to hold was being
   painted white on white — present in the DOM the entire time, and
   invisible. Van and Construction never showed the fault because they are
   raster PNGs carrying their own black pixels, immune to currentColor. */
.booking-deck__svcicon svg {
  width: 26px;
  height: 26px;
  display: block;
  color: var(--ink);
}