/* Hallmark · macrostructure: Scroll-Story Scene · page: /pack · tone: warm, plainspoken, cinematic · anchor hue: UpHex blue 257°
 * pre-emit critique: P5 H4 E4 S5 R4 V5
 */
/* ------------------------------------------------------------------ 1 · hero */
.hero { position: relative; padding-top: 8.5rem; }
.hero__copy { position: relative; z-index: 3; }
.hero__title {
  font: 800 var(--text-display)/0.94 var(--font-display);
  letter-spacing: -0.045em;
  max-width: 11ch;
  overflow-wrap: anywhere; min-width: 0;
}
.hero__title em { font-size: 1.04em; letter-spacing: -0.03em; }
.hero__lede { margin-top: var(--space-lg); max-width: 34rem; font-size: var(--text-md); color: var(--color-muted); }
.hero__lede, .start-form { position: relative; }


.scene { position: relative; z-index: 1; margin-top: var(--space-lg); overflow: clip; }
/* Square art on phones, widescreen from 760px; local_business/scenes.js swaps the matching overlay map at the same breakpoint. */
.scene__frame { position: relative; width: 100%; aspect-ratio: 1 / 1; }
@media (min-width: 760px) { .scene__frame { aspect-ratio: 1672 / 941; } }
.scene__img, .route--ghost {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 88%, transparent 100%);
}
.scene__img, .scene__overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__img { object-fit: cover; }
.scene__caption { margin-top: calc(-1 * var(--space-xl)); position: relative; font-size: var(--text-xs); color: var(--color-muted); text-align: right; }
@media (min-width: 960px) {
  .hero { padding-top: 9rem; }
  .scene { margin-top: -27vw; pointer-events: none; }
  .scene__img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36%, #000 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 36%, #000 90%, transparent 100%);
  }
  .hero__copy::before {
    content: ""; position: absolute; z-index: -1; inset: -4rem 20% -6rem -20vw;
    background: radial-gradient(closest-side, var(--color-canvas) 45%, color-mix(in oklab, var(--color-canvas) 85%, transparent) 65%, transparent);
  }
}


.bubble {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 10px 16px; border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-navy);
  font-size: clamp(0.72rem, 1.1vw, 1rem); font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow-lift);
  transform: translate(var(--ax, -50%), -100%);
}
.bubble::after { content: ""; position: absolute; left: calc(-1 * var(--ax, -50%)); bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.bubble__icon { width: 1.1em; height: 1.1em; fill: none; stroke: var(--color-blue); stroke-width: 2.4; stroke-linecap: round; }
.bubble--call { background: var(--color-navy); color: var(--color-on-navy); }
.bubble--call strong { color: var(--color-blue-light); }
.bubble__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-blue); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-blue) 35%, transparent); }
/* Finished state is the default; .motion-ready (added by local_business.js once the scenes are
   built) sets the starting positions. No JS, a failed bundle, or reduced motion shows everything. */
/* Bubbles are positioned from the scene map, so they only show once scenes.js has placed them. */
.bubble:not(.is-placed) { display: none; }
.motion-ready .bubble { opacity: 0; }
@media (max-width: 560px) { .bubble { padding: 6px 10px; } .bubble--call { left: 70%; } }

/* ------------------------------------------------------------------ 2 · leak */
.leak { padding: var(--space-4xl) 0 var(--space-3xl); }
.leak__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.leak__lede { margin-top: var(--space-lg); max-width: 32rem; font-size: var(--text-md); color: var(--color-muted); }
.stat { margin: var(--space-xl) 0 0; }
.stat__value { font: 800 var(--text-mega)/0.85 var(--font-display); letter-spacing: -0.06em; color: var(--color-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__value > span:first-child { font-size: 0.5em; vertical-align: 0.75em; letter-spacing: 0; color: var(--color-blue); }
.stat__unit { font-size: 0.28em; letter-spacing: -0.01em; color: var(--color-muted); margin-left: 0.1em; }
.stat__label { margin-top: var(--space-sm); font-weight: 600; }
.leak__aside { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-strong); max-width: 26rem; color: var(--color-muted); }
.leak__aside strong { color: var(--color-navy); }
@media (min-width: 960px) { .leak__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

.receipt-wrap { display: flex; justify-content: center; perspective: 1400px; }
.receipt {
  --tooth: 12px;
  position: relative; width: min(100%, 28rem);
  padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) + var(--tooth));
  background: var(--color-surface);
  box-shadow: var(--shadow-lift);
  transform: rotate(1.5deg);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) + 1px) no-repeat;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - var(--tooth) + 1px) no-repeat;
}
.receipt__title { margin-top: var(--space-xs); font: 800 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.02em; }
.receipt__head { padding-bottom: var(--space-md); border-bottom: 2px dashed var(--color-rule-strong); }
.receipt__lines { padding: var(--space-sm) 0; }
.receipt__lines li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-sm); align-items: center;
  padding: 9px 0; font-size: var(--text-sm);
}
.receipt__term { font-weight: 600; overflow-wrap: anywhere; }
.receipt__cost { font-weight: 700; font-variant-numeric: tabular-nums; }
.receipt__lines li::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 2.5px; border-radius: 2px;
  background: var(--color-blue); transform-origin: left center; transform: scaleX(var(--strike, 0));
}
.receipt__tag {
  position: relative; z-index: 1;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-blue-deep); color: var(--color-surface);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  transform: scale(var(--tag, 0)); opacity: var(--tag, 0);
}
.receipt__total, .receipt__after { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-md); font-weight: 800; }
.receipt__total { border-top: 2px dashed var(--color-rule-strong); font-size: var(--text-md); }
.receipt__sum { font-variant-numeric: tabular-nums; }
.receipt__after { color: var(--color-blue-deep); }
.receipt__zero { font-size: var(--text-xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.receipt__keep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.receipt__keep em { color: var(--color-navy); font-family: var(--font-body); font-style: normal; font-weight: 700; }
.receipt__keep-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-teal); flex: none; }
.receipt__lines li { --strike: 1; --tag: 1; }
.receipt__lines .receipt__term { opacity: 0.45; }
.motion-ready .receipt__lines li { --strike: 0; --tag: 0; }
.motion-ready .receipt__lines .receipt__term { opacity: 1; }
.motion-ready .receipt__after { opacity: 0; }

/* ------------------------------------------------------------------ 3 · route / stops */
.route-section { padding: var(--space-3xl) 0 var(--space-4xl); }
.stops-wrap { position: relative; margin-top: var(--space-2xl); }
.stops__line { display: none; }
.stops { display: grid; gap: var(--space-xl); }
.stop { position: relative; padding-left: 3.25rem; }
.stop::before { content: ""; position: absolute; left: 15px; top: 40px; bottom: calc(-1 * var(--space-xl)); width: 2px; background: var(--color-rule-strong); }
.stop:last-child::before { display: none; }
.stop__pin { position: absolute; left: 0; top: 0; width: 32px; height: 40px; }
.stop__pin svg { width: 32px; height: 40px; fill: var(--color-blue); }
.stop__pin circle { fill: var(--color-surface); }
.stop__title { font: 800 var(--text-xl)/1.1 var(--font-display); letter-spacing: -0.025em; }
.stop__body { margin-top: var(--space-xs); color: var(--color-muted); max-width: 22rem; }
.stop__body em { font-family: var(--font-body); font-style: normal; font-weight: 800; color: var(--color-navy); }
.artifact {
  margin-top: var(--space-lg); padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-soft);
}
.artifact__label strong { color: var(--color-navy); text-transform: none; letter-spacing: 0; }
.artifact__meta { margin-top: var(--space-md); font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.chip { padding: 6px 12px; border-radius: var(--radius-pill); border: 1.5px solid var(--color-rule-strong); font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
.chip--on { border-color: var(--color-blue); background: var(--color-soft-blue); color: var(--color-blue-deep); }
.plan { width: 100%; margin-top: var(--space-sm); border-collapse: collapse; font-size: var(--text-sm); }
.plan th { text-align: left; font-size: var(--text-xs); color: var(--color-muted); font-weight: 700; padding: 6px 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.plan td { padding: 10px 0; border-bottom: var(--rule-hair) solid var(--color-rule); font-weight: 600; }
.plan tr:last-child td { border-bottom: 0; }
.plan td:last-child, .plan th:last-child { text-align: right; }
.intent { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--color-rule); font-size: var(--text-xs); font-weight: 700; color: var(--color-navy); white-space: nowrap; }
.intent--high { background: var(--color-soft-blue); color: var(--color-blue-deep); }
.status { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); font-weight: 800; font-size: var(--text-md); }
.artifact__button { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-md); padding: 0 var(--space-md); border-radius: var(--radius-pill); background: var(--color-blue-deep); color: var(--color-surface); font-weight: 700; font-size: var(--text-sm); }
@media (min-width: 960px) {
  .stops-wrap { margin-top: var(--space-3xl); }
  .stops__line { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 40px; overflow: visible; }
  .stops__track { stroke: var(--color-rule-strong); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; }
  .stops__progress { stroke: var(--color-blue); stroke-width: 4; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; }
  .stops { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  .stop { padding-left: 0; padding-top: 4.5rem; }
  .stop::before { display: none; }
  .stop__pin { left: 50%; top: -14px; transform: translateX(-50%); width: 40px; height: 50px; }
  .stop__pin svg { width: 40px; height: 50px; }
  .stop__title, .stop__body { text-align: center; margin-inline: auto; }
}

/* ------------------------------------------------------------------ 4 · the switch */
.go { position: relative; background: var(--color-navy-deep); }
.go__stage { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.go__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.go__img--paused { filter: grayscale(1) brightness(0.42) contrast(1.05); }
.go__overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.go__scrim { position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 50%, var(--color-scrim) 30%, transparent 100%); }
.go__content { position: relative; z-index: 2; width: min(100% - 2rem, 56rem); text-align: center; color: var(--color-on-navy); padding: var(--space-3xl) 0; }
.go__title { display: grid; font: 800 var(--text-3xl)/1.02 var(--font-display); letter-spacing: -0.035em; text-shadow: 0 2px 30px color-mix(in oklab, var(--color-navy-deep) 60%, transparent); }
.go__line { grid-area: 1 / 1; overflow-wrap: anywhere; min-width: 0; }
.go__line--off { opacity: 0; }
.motion-ready .go__line--off { opacity: 1; }
.motion-ready .go__line--on { opacity: 0; }
.switch { display: inline-flex; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); padding: 10px 18px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-navy-deep) 55%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.switch__label { font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-on-navy-2); }
.switch__track { position: relative; width: 92px; height: 48px; border-radius: var(--radius-pill); background: var(--color-navy-raised); overflow: hidden; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--color-white) 12%, transparent); }
.switch__fill { position: absolute; inset: 0; background: var(--color-blue); transform-origin: left center; }
.switch__knob { position: absolute; top: 5px; left: 5px; width: 38px; height: 38px; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow-soft); }
.go__note { margin-top: var(--space-lg); color: var(--color-on-navy); font-weight: 600; text-shadow: 0 1px 12px var(--color-navy-deep); }
.go__img--paused { opacity: 0; }
.switch__knob { transform: translateX(44px); }
.motion-ready .go__img--paused { opacity: 1; }
.motion-ready .switch__fill { transform: scaleX(0); }
.motion-ready .switch__knob { transform: none; }

/* ------------------------------------------------------------------ 5 · watch (night) */
.watch { background: var(--color-navy-deep); color: var(--color-on-navy); padding: var(--space-4xl) 0; }
.watch__grid { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); }
@media (min-width: 960px) { .watch__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); } }
.report, .chat { padding: var(--space-xl); border-radius: var(--radius-panel); background: var(--color-navy); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 8%, transparent); }
.report .report__kicker, .chat .report__kicker { color: var(--color-on-navy-2); }
.report__title { margin-top: var(--space-xs); font: 800 var(--text-xl)/1.15 var(--font-display); letter-spacing: -0.02em; }
.report__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0 0; }
.report__stats div { padding: var(--space-md); border-radius: var(--radius-card); background: var(--color-navy-raised); }
.report__stats dt { font-size: var(--text-sm); color: var(--color-on-navy-2); font-weight: 600; }
.report__stats dd { margin: var(--space-2xs) 0 0; font: 800 var(--text-3xl)/1 var(--font-display); letter-spacing: -0.04em; }
.report__line { margin-top: var(--space-lg); font: italic 500 var(--text-lg)/1.35 var(--font-editorial); color: var(--color-on-navy); }
.report__terms { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.report__terms li { padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-on-navy-2); text-decoration: line-through; text-decoration-color: var(--color-blue-light); text-decoration-thickness: 2px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-white) 14%, transparent); }
.report__terms .report__more { text-decoration: none; }
.chat__log { display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }

/* ------------------------------------------------------------------ 6 · deal */
.deal { padding: var(--space-4xl) 0 var(--space-3xl); }
.deal__grid { display: grid; gap: var(--space-2xl); margin-top: var(--space-2xl); align-items: center; }
@media (min-width: 960px) { .deal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); } }
.contract-wrap { position: relative; display: grid; justify-items: center; min-height: 28rem; }
.contract { grid-area: 1 / 1; width: min(100%, 25rem); }
.contract__body {
  padding: var(--space-xl); background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-lift);
  transform: rotate(-2deg);
}
.contract--left { clip-path: polygon(0 0, 52% 0, 47% 14%, 54% 30%, 46% 47%, 53% 63%, 47% 80%, 52% 100%, 0 100%); }
.contract--right { clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 47% 80%, 53% 63%, 46% 47%, 54% 30%, 47% 14%); }
.contract__title { margin-top: var(--space-xs); font: 600 var(--text-xl)/1.15 var(--font-editorial); }
.contract__clauses { margin-top: var(--space-lg); counter-reset: clause; display: grid; gap: var(--space-sm); }
.contract__clauses li { counter-increment: clause; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); font-size: var(--text-sm); color: var(--color-navy); }
.contract__clauses li::before { content: counter(clause) "."; font-weight: 800; color: var(--color-muted); }
.contract__sign { margin-top: var(--space-xl); font: italic 500 var(--text-md) var(--font-editorial); color: var(--color-muted); white-space: nowrap; overflow: hidden; }
.promises { display: grid; gap: var(--space-lg); }
.promise { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-md); align-items: start; font-size: var(--text-md); color: var(--color-muted); }
.promise strong { color: var(--color-navy); font-weight: 800; }
.promise__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-blue); }
.promise__mark svg { width: 20px; height: 20px; fill: none; stroke: var(--color-surface); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }