@layer sections {
  .delivery { overflow-x: clip; }
  .delivery > *:not(.sunburst) { position: relative; z-index: 1; }
  .delivery__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 6vw, 7rem); align-items: center; }
  .delivery__title { max-width: 12ch; }
  .delivery__opts { display: grid; gap: 1.1rem; list-style: none; margin: 0.5rem 0 0.5rem; padding: 0; }
  .delivery__opt { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; padding: 1.1rem 1.4rem 1.1rem 1.1rem; border-radius: var(--radius-l); border: 1px solid var(--line); background: color-mix(in oklab, var(--c-cream) 4%, transparent); transition: background var(--dur-m), border-color var(--dur-m), transform 0.7s var(--ease-out); }
  .delivery__opt:hover { background: color-mix(in oklab, var(--c-gold) 12%, transparent); border-color: color-mix(in oklab, var(--c-gold) 55%, transparent); transform: translateX(8px); }
  .delivery__opt-title { font-family: var(--font-display); font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.015em; font-weight: 500; }
  .delivery__opt-text { color: var(--fg-soft); font-size: var(--fs-s); margin-top: 0.25rem; }

  /* ---- the map ---- */
  .delivery__map { position: relative; justify-self: center; width: min(100%, 31rem); }
  .route-map { width: 100%; height: auto; max-height: 76vh; overflow: visible; filter: drop-shadow(0 40px 60px rgb(0 0 0 / 0.5)); }
  .route-map__isle { fill: url(#isle-grad); fill: var(--isle-fill, #3a2517); stroke: var(--c-caramel); stroke-width: 1.2; stroke-linejoin: round; }
  .route-map__texture { pointer-events: none; }
  .route-map [data-route] { stroke: var(--c-gold); stroke-width: 1.4; stroke-dasharray: 2.5 5; opacity: 0; animation: ants 3.2s linear infinite; transition: opacity 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 160ms + 500ms); }
  .delivery__map.is-in .route-map [data-route], .reveal-all .route-map [data-route] { opacity: 0.95; }
  @keyframes ants { to { stroke-dashoffset: -30; } }
  .route-map .city { opacity: 0; transform-box: fill-box; transition: opacity 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 160ms + 900ms); }
  .delivery__map.is-in .route-map .city, .reveal-all .route-map .city { opacity: 1; }
  .route-map .city circle { fill: var(--c-cream); stroke: var(--c-gold); stroke-width: 1.5; }
  .route-map .city text, .route-map .hub-label { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; fill: var(--c-cream); paint-order: stroke; stroke: #2a170d; stroke-width: 3px; stroke-linejoin: round; }
  .route-map .city--root path { fill: var(--c-gold); stroke: var(--c-cream); stroke-width: 1.2; stroke-linejoin: round; }
  .route-map .city--root text { fill: var(--c-honey); }
  .route-map .hub-zone { fill: color-mix(in oklab, var(--c-gold) 24%, transparent); stroke: var(--c-gold); stroke-width: 1; stroke-dasharray: 3 3; }
  .route-map .hub-pulse { fill: none; stroke: var(--c-gold); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: hub-pulse 2.6s var(--ease-out) infinite; }
  @keyframes hub-pulse { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
  .route-map .hub-dot { fill: var(--c-gold); stroke: var(--c-cream); stroke-width: 2; }
  .route-map .hub-label { font-size: 11px; font-weight: 700; fill: var(--c-honey); }
  .route-map__rider { opacity: 0; fill: none; stroke: var(--c-cream); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.6)); }
  .route-map__rider circle { fill: var(--c-ink); }
  .route-map__rider .rider-box { fill: var(--c-gold); stroke: var(--c-ink); }
  .delivery__map-note { margin-top: 1rem; text-align: center; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-soft); }

  @media (max-width: 989px) {
    .delivery__inner { grid-template-columns: 1fr; }
    .delivery__map { width: min(100%, 24rem); }
  }
  @media (prefers-reduced-motion: reduce) { .route-map [data-route], .route-map .hub-pulse { animation: none; } }
}