/* ============================================================================
   How It Works — 3D experience styles.

   Ported from the standalone Vite app's index.css and FULLY SCOPED under
   `.dm-hiw-3d` so nothing bleeds into the surrounding Next.js site. The original
   had global `:root` / `body` / `::-webkit-scrollbar` rules and generic class
   names (.navbar, .btn-primary, .section-title, .loader-overlay) that would
   collide with the site's Elementor CSS — every selector below is therefore
   prefixed with `.dm-hiw-3d`.

   Pinning mirrors the site's existing scroll-driven 3D sections (see
   StrategySection): a tall `position:relative` section + an absolutely
   positioned stage toggled absolute(top) → fixed → absolute(bottom) from
   ScrollTrigger pin state. CSS `position: sticky` / GSAP pin are unreliable
   here because the site has a fixed header and an ancestor `overflow:hidden`.
   ============================================================================ */

/* ---- Doormile card design tokens (single system for all four stages) ----
   Brand red #c01227, ink #1F1F1F, fonts inherited from the site (Manrope body /
   Space Grotesk headings, exposed as CSS vars on <html> by layout.tsx). */
.dm-hiw-3d {
  --dm-red: #c01227;
  --dm-red-soft: rgba(192, 18, 39, 0.10);
  --dm-ink: #1f1f1f;
  --dm-body: #4b5563;
  --dm-muted: #8a8f98;
  --dm-card-bg: rgba(255, 255, 255, 0.86);
  --dm-card-border: rgba(15, 23, 42, 0.08);
  --dm-card-radius: 18px;
  --dm-card-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.45);
  --dm-font-head: var(--font-space-grotesk), var(--font-manrope), system-ui, sans-serif;
  --dm-font-body: var(--font-manrope), system-ui, -apple-system, sans-serif;

  /* Container spacing — matches the site's full-width section frame
     (.custom-standard-hero-container used by Contact/About/CTA: full width,
     no max-width cap, 20px gutters, 25px radius). The stage spans ~98% of the
     viewport with standard gutters rather than sitting in a narrow centred box.
     Values scale down responsively. */
  --hiw-max-width: none;
  --hiw-gutter: 20px;
  --hiw-gap-top: 20px;
  --hiw-gap-bottom: 20px;
  --hiw-radius: 25px;
}

/* ---- Section shell + self-managed fixed pin ---- */
.dm-hiw-3d {
  position: relative;
  width: 100%;
  font-family: var(--dm-font-body);
  line-height: 1.5;
  font-weight: 400;
  color: var(--dm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The stage is inset to sit inside the site's content container: a centred
   max-width box with left/right gutters and equal top/bottom spacing. The SAME
   inset is applied in every pin state (absolute-top → fixed → absolute-bottom)
   so the stage never jumps at the pin hand-offs. Scroll progress and stage
   maths are driven by the separate 900vh spacer (#scroll-trigger-trigger), so
   insetting the stage doesn't touch them. Horizontal centring uses
   left/right:0 + margin:auto (not transform) so it composes with the existing
   translateZ(0) GPU layer. The 3D scene is not scaled — the canvas simply fills
   the smaller framed box and CameraRig already adapts FOV to the aspect. */
.dm-hiw-3d-stage {
  position: absolute;
  top: var(--hiw-gap-top);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 2 * var(--hiw-gutter));
  max-width: var(--hiw-max-width);
  height: calc(100vh - var(--hiw-gap-top) - var(--hiw-gap-bottom));
  overflow: hidden;
  border-radius: var(--hiw-radius);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.dm-hiw-3d.is-pinned .dm-hiw-3d-stage {
  position: fixed;
}
.dm-hiw-3d.is-after .dm-hiw-3d-stage {
  position: absolute;
  top: auto;
  bottom: var(--hiw-gap-bottom);
}

.dm-hiw-3d .canvas-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: auto;
}

/* Floating Vertical Side Navigation */
.dm-hiw-3d .side-navigation {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: transparent;
  padding: 18px 10px;
}

.dm-hiw-3d .side-nav-item {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 4px 6px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  outline: none;
}

.dm-hiw-3d .side-nav-label {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0;
  transform: translateX(8px) scale(0.9);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

.dm-hiw-3d .side-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dm-hiw-3d .side-nav-item:hover .side-nav-label {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.dm-hiw-3d .side-nav-item:hover .side-nav-dot {
  background-color: #1d1d1f;
  transform: scale(1.15);
}
.dm-hiw-3d .side-nav-item.active .side-nav-label {
  color: var(--dm-red);
}
.dm-hiw-3d .side-nav-item.active .side-nav-dot {
  background-color: var(--dm-red);
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(192, 18, 39, 0.35);
}

.dm-hiw-3d .section-close-btn {
  margin-top: 18px;
  background-color: var(--dm-red);
  color: #ffffff;
  border: none;
  font-family: var(--dm-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 18px -8px rgba(192, 18, 39, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
}
.dm-hiw-3d .section-close-btn:hover {
  background-color: #a30f20;
  box-shadow: 0 10px 22px -8px rgba(192, 18, 39, 0.7);
  transform: translateY(-1px);
}
.dm-hiw-3d .section-close-btn:active {
  transform: translateY(0);
}

/* ---- Story stage text panels ---- */
.dm-hiw-3d .sections-overlay-container {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none; /* Let clicks pass to 3D canvas */
  display: flex;
  align-items: center;
}

/* Side placement keeps the moving truck / scene visible in the centre, with the
   card vertically centred (top/bottom:0 + margin:auto works with the GSAP reveal,
   which only animates translateY/scale). */
.dm-hiw-3d #first-mile-section,
.dm-hiw-3d #mid-mile-section,
.dm-hiw-3d #last-mile-section {
  top: 0;
  bottom: 0;
  height: max-content;
  margin-top: auto;
  margin-bottom: auto;
}
.dm-hiw-3d #first-mile-section,
.dm-hiw-3d #last-mile-section {
  left: clamp(24px, 5vw, 72px);
}
/* ===========================================================================
   Stage 02 — Mid Mile Hub: premium enterprise dashboard card.
   Scoped entirely to #mid-mile-section so the other three stage cards keep the
   unified chrome. UI only — no transform/animation/scene/scroll changes (the
   GSAP reveal still targets the same .section-* classes, which are preserved).
   Sizes use clamp() so they scale down gracefully without fighting the shared
   responsive rules below.
   =========================================================================== */
.dm-hiw-3d #mid-mile-section {
  right: clamp(24px, 5vw, 72px);
  /* Only marginally larger than the sibling side panels (Stage 01/03 are
     min(404px, 37vw)) — ~13% wider to hold the extra info, not dominant. */
  width: min(456px, 41vw);
  max-height: calc(100vh - 120px);
  padding: clamp(22px, 2.4vw, 30px) clamp(24px, 2.8vw, 34px) clamp(20px, 2.2vw, 26px);
  /* Clean glassmorphism white surface with subtle transparency. */
  background: rgba(255, 255, 255, 0.9);
  border-top: 3px solid var(--dm-red);   /* thin red accent along the top edge */
  box-shadow: 0 32px 72px -30px rgba(15, 23, 42, 0.5);
}

/* ---- Header: stronger hierarchy ---- */
.dm-hiw-3d #mid-mile-section .section-badge {
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  margin: 0 0 10px !important;
}
.dm-hiw-3d #mid-mile-section .section-title {
  font-size: clamp(28px, 2.5vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.07 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 7px !important;
}
.dm-hiw-3d #mid-mile-section .section-subtitle {
  font-size: clamp(14.5px, 1.2vw, 16px) !important;
  font-weight: 600 !important;
  color: var(--dm-body) !important;
  margin: 0 0 13px !important;
}

/* ---- Description: larger, more readable, contained measure ---- */
.dm-hiw-3d #mid-mile-section .section-description {
  font-size: clamp(14.5px, 1.15vw, 16px) !important;
  line-height: 1.72 !important;
  max-width: 44ch !important;
  margin: 0 0 6px !important;
}

/* ---- Stage 02 information strip ----------------------------------------
   Replaces the KPI/metric look with a clean enterprise info panel: a
   full-width column of icon + title + description rows divided by subtle
   hairlines. Scoped to #mid-mile-section so the shared .section-metrics /
   .metric-* styling on the other cards is untouched. The ID specificity also
   overrides the base `.section-metrics` flex-row + border styling that still
   rides along on the retained class. */
.dm-hiw-3d #mid-mile-section .mm-info-strip {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;                                   /* full-width content row */
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 4px;
}
.dm-hiw-3d #mid-mile-section .mm-info-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 11px 0;
}
/* Subtle separator between rows only (not above the first / below the last). */
.dm-hiw-3d #mid-mile-section .mm-info-row + .mm-info-row {
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}
.dm-hiw-3d #mid-mile-section .mm-info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--dm-red-soft);
  color: var(--dm-red);
}
.dm-hiw-3d #mid-mile-section .mm-info-icon svg {
  width: 21px;
  height: 21px;
}
.dm-hiw-3d #mid-mile-section .mm-info-content {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}
.dm-hiw-3d #mid-mile-section .mm-info-title {
  font-family: var(--dm-font-head) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--dm-ink) !important;
  margin: 0 0 3px !important;
}
.dm-hiw-3d #mid-mile-section .mm-info-text {
  font-family: var(--dm-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.58 !important;
  color: var(--dm-body) !important;
  margin: 0 !important;
}

/* ---- Metrics: a simple horizontal row sitting DIRECTLY on the card surface —
   no nested tiles / boxed containers. A thin divider rule above separates it
   from the description; within each metric the icon sits to the left of the
   value, with the label directly beneath it. Compact + uncluttered. ---- */
.dm-hiw-3d #mid-mile-section .section-metrics {
  /* The strip is a vertical column; rows space themselves via their own
     padding, so no large flex gap (this was a major source of extra height). */
  gap: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  margin-top: 14px;
  padding-top: 12px;
}
.dm-hiw-3d #mid-mile-section .metric-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}
/* Compact icon chip, vertically centred against the value/label stack. */
.dm-hiw-3d #mid-mile-section .metric-icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 3vw, 42px);
  height: clamp(36px, 3vw, 42px);
  margin: 0;
  border-radius: 11px;
  background: var(--dm-red-soft);
  color: var(--dm-red);
}
.dm-hiw-3d #mid-mile-section .metric-icon svg {
  width: 56%;
  height: 56%;
}
.dm-hiw-3d #mid-mile-section .metric-value {
  grid-column: 2;
  align-self: end;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
.dm-hiw-3d #mid-mile-section .metric-label {
  grid-column: 2;
  align-self: start;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  margin: 0 !important;
}

/* ---- CTA: larger red pill with subtle shadow + hover lift ---- */
.dm-hiw-3d #mid-mile-section .section-close-btn {
  margin-top: 16px;
  font-size: clamp(14px, 1vw, 15px);
  font-weight: 600;
  padding: clamp(12px, 1vw, 15px) clamp(24px, 2vw, 30px);
  box-shadow: 0 16px 30px -12px rgba(192, 18, 39, 0.6);
}
.dm-hiw-3d #mid-mile-section .section-close-btn svg {
  width: 16px;
  height: 16px;
}

/* Tablet/mobile: relax the contained measure and tighten the KPI tiles so the
   larger desktop styling above never overflows the bottom-docked card. */
@media (max-width: 1024px) {
  .dm-hiw-3d #mid-mile-section .section-description {
    max-width: none !important;
  }
  .dm-hiw-3d #mid-mile-section .section-metrics {
    margin-top: 12px;
    padding-top: 10px;
    gap: 0;
  }
  .dm-hiw-3d #mid-mile-section .section-close-btn {
    margin-top: 14px;
  }
}
/* Closing promise card — a centred card occupying the final slot. */
.dm-hiw-3d #promise-section {
  left: 50%;
  right: auto;
  top: 50%;
  transform: translate(-50%, -50%) translateY(18px) scale(0.97);
  width: min(1060px, 92vw);
  max-height: calc(100vh - 110px);
}
/* Closing-statement card — the final key message of the journey, scaled to the
   authority of the page hero. The card spans most of the viewport width (small
   left/right margins) so the headline can run wide; padding is kept lean so the
   headline — not whitespace — dominates. */
.dm-hiw-3d #promise-section {
  width: min(1060px, 92vw) !important;   /* wide: uses most of the viewport */
  padding: 36px 56px !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;              /* centre the group vertically */
  align-items: center;                  /* centre the group horizontally */
}
/* Kicker/subtitle — bumped ~+25% to sit in proportion with the larger headline. */
.dm-hiw-3d #promise-section .section-badge {
  display: block !important;
  font-size: 15px !important;
  letter-spacing: 0.2em !important;
  margin: 0 0 18px !important;
}
/* Dominant headline — matches the hero scale: up to 80px, uppercase, heavy
   weight, tight hero leading + word-spacing. This is the visual anchor of the
   card and the strongest type on the screen. */
/* Scoped under #promise-section (ID specificity) so it reliably overrides the
   shared `.section-title` base rule, which is declared later in the file. */
.dm-hiw-3d #promise-section .promise-title {
  font-size: clamp(40px, 6vw, 80px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  word-spacing: -0.03em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
/* Real, flex-centred divider element — exactly under the headline centre. */
.dm-hiw-3d .promise-divider {
  display: block;
  width: 76px;
  height: 3px;
  border-radius: 999px;
  background: var(--dm-red);
  margin: 24px auto;
}
/* Supporting paragraph — hero body scale (20px) on a wide measure so it reads
   as a balanced two-to-three line statement instead of wrapping too early.
   Scoped under #promise-section so it overrides the later `.section-description`
   base rule. */
.dm-hiw-3d #promise-section .promise-desc {
  margin: 0 auto !important;
  max-width: 760px !important;
  font-size: 20px !important;
  line-height: 1.7 !important;
}

/* ---- Unified card — all four stages share this exact chrome ---- */
.dm-hiw-3d .section-panel {
  position: absolute;
  width: min(404px, 37vw);
  max-height: calc(100vh - 140px);   /* never taller than the viewport */
  overflow-y: auto;
  padding: 34px 36px 34px;
  background: var(--dm-card-bg);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border: 1px solid var(--dm-card-border);
  border-top: 3px solid var(--dm-red);   /* brand accent that unifies every card */
  border-radius: var(--dm-card-radius);
  box-shadow: var(--dm-card-shadow);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  visibility: hidden;
  transition: backdrop-filter 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.9s;
  pointer-events: none;
  box-sizing: border-box;
}
.dm-hiw-3d .section-panel.active {
  visibility: visible;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  pointer-events: auto;
}

/* Typography — one scale across all cards. !important defeats the page's
   Elementor h2/h3 styles (loaded via /css/site.css with their own !important),
   which were inflating these headings to ~80px and overflowing the cards. */
.dm-hiw-3d .section-badge {
  display: inline-block;
  font-family: var(--dm-font-body) !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  color: var(--dm-red) !important;
  margin: 0 0 12px !important;
}
.dm-hiw-3d .section-title {
  font-family: var(--dm-font-head) !important;
  font-size: clamp(19px, 1.55vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.018em !important;
  text-transform: none !important;
  color: var(--dm-ink) !important;
  margin: 0 0 6px !important;
}
.dm-hiw-3d .section-subtitle {
  font-family: var(--dm-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
  color: var(--dm-muted) !important;
  margin: 0 0 16px !important;
}
.dm-hiw-3d .section-description {
  font-family: var(--dm-font-body) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  color: var(--dm-body) !important;
  margin: 0 0 20px !important;
}
.dm-hiw-3d .section-metrics {
  display: flex;
  gap: 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 18px;
}
.dm-hiw-3d .metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.dm-hiw-3d .metric-value {
  font-family: var(--dm-font-head) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--dm-ink) !important;
}
.dm-hiw-3d .metric-label {
  font-family: var(--dm-font-body) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--dm-muted) !important;
}
.dm-hiw-3d .font-green .metric-value { color: #1f9d57 !important; }

/* Supporting metric (e.g. Last Mile real-time driver tracking) — a full-width
   live-status row that sits beneath the two headline metrics. */
.dm-hiw-3d .section-supporting {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(31, 157, 87, 0.07);
  border: 1px solid rgba(31, 157, 87, 0.18);
  border-radius: 12px;
}
.dm-hiw-3d .supporting-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #1f9d57;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(31, 157, 87, 0.5);
  animation: dmHiwPulseDot 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.dm-hiw-3d .supporting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-hiw-3d .supporting-value {
  font-family: var(--dm-font-head) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
  color: var(--dm-ink) !important;
}
.dm-hiw-3d .supporting-label {
  font-family: var(--dm-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: #1f9d57 !important;
}
@keyframes dmHiwPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(31, 157, 87, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(31, 157, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 157, 87, 0); }
}

/* ---- Animations (keyframes left global; uniquely named) ---- */
@keyframes dmHiwScrollWheel {
  0% { top: 6px; opacity: 1; height: 6px; }
  50% { top: 14px; opacity: 0.3; height: 4px; }
  100% { top: 6px; opacity: 1; height: 6px; }
}
@keyframes dmHiwPulseGreen {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes dmHiwMoveArrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  /* Moderate gutters on tablet (radius matches the site's tablet section card). */
  .dm-hiw-3d {
    --hiw-gutter: 16px;
    --hiw-gap-top: 16px;
    --hiw-gap-bottom: 16px;
    --hiw-radius: 22px;
  }
  .dm-hiw-3d .sections-overlay-container {
    padding-left: 0;
    padding-right: 0;
    align-items: flex-end;
    padding-bottom: 50px;
  }
  .dm-hiw-3d .section-panel {
    padding: 26px 28px 28px;
    border-radius: 16px;
  }
  /* Tablet/mobile: cards bottom-centred so the truck/scene stays visible above. */
  .dm-hiw-3d #first-mile-section,
  .dm-hiw-3d #mid-mile-section,
  .dm-hiw-3d #last-mile-section,
  .dm-hiw-3d #promise-section {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 64px !important;
    transform: translateX(-50%) translateY(18px) scale(0.97) !important;
    width: min(460px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 180px) !important;
  }
  .dm-hiw-3d #first-mile-section.active,
  .dm-hiw-3d #mid-mile-section.active,
  .dm-hiw-3d #last-mile-section.active,
  .dm-hiw-3d #promise-section.active {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
  /* Tablet: keep the promise card wider than the stage cards so the larger
     headline still runs wide and balanced. */
  .dm-hiw-3d #promise-section {
    width: min(760px, calc(100vw - 40px)) !important;
    padding: 30px 40px !important;
  }
  .dm-hiw-3d #promise-section .section-badge {
    font-size: 14px !important;
  }
  .dm-hiw-3d #promise-section .promise-title {
    font-size: clamp(34px, 5.4vw, 54px) !important;
    line-height: 1.08 !important;
  }
  .dm-hiw-3d #promise-section .promise-desc {
    font-size: 18px !important;
    max-width: 640px !important;
  }
  .dm-hiw-3d .side-navigation {
    bottom: 12px;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 18px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    padding: 8px 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }
  .dm-hiw-3d .side-nav-item { justify-content: center; padding: 0; }
  .dm-hiw-3d .side-nav-label { display: none; }
}

@media (max-width: 400px) {
  /* Slimmest gutters on phones — matches the hero's mobile frame. */
  .dm-hiw-3d {
    --hiw-gutter: 12px;
    --hiw-gap-top: 12px;
    --hiw-gap-bottom: 12px;
    --hiw-radius: 16px;
  }
  .dm-hiw-3d .section-panel,
  .dm-hiw-3d #promise-section {
    padding: 20px 20px 20px !important;
    width: min(360px, calc(100vw - 24px)) !important;
    bottom: 56px !important;
  }
  .dm-hiw-3d .section-badge {
    font-size: 9.5px !important;
    margin-bottom: 6px !important;
  }
  .dm-hiw-3d .section-title {
    font-size: 19px !important;
  }
  .dm-hiw-3d #promise-section .section-badge {
    font-size: 12.5px !important;
  }
  .dm-hiw-3d #promise-section .promise-title {
    font-size: clamp(28px, 8.5vw, 34px) !important;
    line-height: 1.08 !important;
  }
  .dm-hiw-3d #promise-section .promise-desc {
    font-size: 16px !important;
    max-width: 100% !important;
  }
  .dm-hiw-3d .section-subtitle {
    font-size: 12.5px !important;
    margin-bottom: 10px !important;
  }
  .dm-hiw-3d .section-description {
    font-size: 12px !important;
    line-height: 1.45 !important;
    margin-bottom: 14px !important;
  }
  .dm-hiw-3d .section-metrics {
    padding-top: 12px !important;
    gap: 14px !important;
  }
  .dm-hiw-3d .metric-value { font-size: 16px !important; }
  .dm-hiw-3d .metric-label { font-size: 9px !important; }
  /* Stage 02 info strip stays a tidy hairline-divided column on small screens
     (overrides the shared .section-metrics !important gap/padding above). */
  .dm-hiw-3d #mid-mile-section .mm-info-strip {
    gap: 0 !important;
    padding-top: 2px !important;
  }
  .dm-hiw-3d #mid-mile-section .mm-info-row { padding: 13px 0; gap: 13px; }
  .dm-hiw-3d #mid-mile-section .mm-info-icon { width: 36px; height: 36px; }
  .dm-hiw-3d #mid-mile-section .mm-info-icon svg { width: 19px; height: 19px; }
  .dm-hiw-3d #mid-mile-section .mm-info-title { font-size: 14px !important; }
  .dm-hiw-3d #mid-mile-section .mm-info-text { font-size: 12.5px !important; }
  .dm-hiw-3d .side-navigation {
    bottom: 8px !important;
    gap: 12px !important;
    padding: 6px 12px !important;
  }
  .dm-hiw-3d .side-nav-dot { width: 6px !important; height: 6px !important; }
  .dm-hiw-3d #first-mile-section,
  .dm-hiw-3d #mid-mile-section,
  .dm-hiw-3d #last-mile-section,
  .dm-hiw-3d #promise-section {
    left: 50% !important;
    right: auto !important;
    bottom: 56px !important;
    width: min(360px, calc(100vw - 24px)) !important;
    transform: translateX(-50%) translateY(18px) scale(0.97) !important;
  }
  .dm-hiw-3d #first-mile-section.active,
  .dm-hiw-3d #mid-mile-section.active,
  .dm-hiw-3d #last-mile-section.active,
  .dm-hiw-3d #promise-section.active {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
}
