/* Stage props share a viewport; each chapter brings its own scenery into place. */
main, .scene { pointer-events: none; }
.scene-copy, .header, footer { pointer-events: auto; }
.scene-copy { width: 46%; max-width: 650px; }
.scene-art { position: absolute; opacity: 0; visibility: hidden; pointer-events: none; }
.eye { z-index: 4; }
.inspection { z-index: 5; }
.scene { min-height: max(800px, 100svh); }
.hero { min-height: max(800px, 100svh); }
.approach h2 { font-size: clamp(43px, 4.3vw, 68px); line-height: 1.04; }
.not-equal { display: block; color: var(--gold); font-size: .95em; line-height: 1; margin: 10px 0; }
.approach h2>span:last-child { color: var(--ink); }
.approach h2>span:last-child::first-line { color: var(--ink); }
.approach .lead, .platform .lead { max-width: 400px; font-size: 17px; }
.platform h2 { font-size: clamp(48px, 4.8vw, 76px); }
.inspection, .technical { left: 54%; top: 37%; width: min(41vw, 620px); }
.scan-beam { position: absolute; z-index: 5; width: 100%; height: 100%; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ad-pair { display: flex; gap: 22px; align-items: flex-start; perspective: 900px; }
.ad-card { position: relative; width: calc(50% - 11px); min-width: 0; background: #fff; box-shadow: 0 15px 45px #25252a12, 0 0 0 1px #e6e6e7; border-radius: 5px; transform-origin: center bottom; }
.ad-header { height: 37px; display: flex; align-items: center; padding: 0 12px; gap: 7px; }
.ad-header i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ffa340; box-shadow: inset 0 0 0 3px #fff; background: #ffd442; }
.ad-brand { font-size: 11px; font-weight: 600; }
.ad-menu { margin-left: auto; font-size: 18px; line-height: 1; }
.ad-picture { position: relative; aspect-ratio: 360/380; overflow: hidden; }
.product-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-headline { position: absolute; left: 14px; top: 12px; font-size: clamp(15px, 1.45vw, 23px); line-height: 1.02; letter-spacing: -.04em; font-weight: 600; color: #422912; }
.ad-card:nth-child(2) .ad-headline { padding: 8px 10px; left: 8px; top: 8px; background: #ffffffed; font-size: clamp(15px, 1.35vw, 21px); }
.ad-card:nth-child(2) .product-image { transform: scale(1.08); }
.play { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 40px; height: 40px; display: grid; place-items: center; padding-left: 2px; border: 1px solid #ffffffb3; border-radius: 50%; background: #3b281f70; color: #fff; font-size: 13px; }
.video-time { position: absolute; right: 10px; bottom: 8px; font-size: 9px; color: #fff; background: #3b281fb3; padding: 2px 4px; }
.ad-footer { padding: 10px 12px; font-size: 14px; min-height: 61px; }
.ad-footer p { font-size: 9px; color: #69696d; margin-top: 4px; }
.ad-cta { font-size: 10px; font-weight: 600; display: block; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.verdict { position: absolute; left: 50%; bottom: -16px; white-space: nowrap; transform: translateX(-50%); padding: 7px 10px; font-size: 10px; border: 1px solid #e2e2e4; color: #626268; background: #fff; opacity: 0; }
#right-verdict { background: #ffdf62; border-color: #ffcf38; color: #29292c; }
.scan-sweep { position: absolute; left: 0; right: 0; top: var(--scan, 0%); height: 1px; background: #fff; box-shadow: 0 0 10px 1px #ff7930; opacity: 0; }
.animation-status { margin-top: 42px; text-align: center; font-size: 12px; color: #45454a; min-height: 19px; }
.art-footnote { display: block; text-align: center; margin-top: 12px; font-size: 9px; letter-spacing: .3px; color: #707077; }
.technical { top: 38%; }
.campaign-map { position: relative; height: 360px; }
.connections { position: absolute; inset: 20px 0 0; width: 100%; height: 270px; overflow: visible; }
.active-route { stroke-dasharray: 650; stroke-dashoffset: 650; }
.campaign-node { position: absolute; border: 1px solid #dedee1; padding: 12px 15px; background: #fff; box-shadow: 0 8px 24px #24242c08; }
.campaign-node>span, .budget>span { font-size: 8px; letter-spacing: 1.3px; display: block; color: #76767b; }
.campaign-node strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
.objective { top: 0; left: 50%; transform: translateX(-50%); width: 160px; border-color: #ffd145; background: #fff5c8; }
.objective i { position: absolute; right: 16px; top: 23px; font-style: normal; }
.branch { top: 116px; width: 39%; }
.branch-a { left: 2%; }
.branch-b { right: 2%; }
.mini-ad { height: 37px; margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.mini-ad>span { width: 33px; height: 36px; display: grid; place-items: center; background: #ffdb57; font-size: 13px; }
.branch-b .mini-ad>span { background: #ffae65; }
.mini-ad i { height: 3px; width: 20px; background: #dadadd; }
.budget { position: absolute; top: 238px; left: 9%; width: 82%; }
.budget-track { height: 7px; display: flex; gap: 4px; margin: 8px 0; }
.budget-track i { display: block; height: 100%; }
.budget-a { width: 50%; background: #ffcf42; }
.budget-b { flex: 1; background: #ff8a43; }
.budget>div:last-child { display: flex; justify-content: space-between; font-size: 8px; color: #77777c; }
.code-note { position: absolute; top: 298px; left: 9%; width: 82%; padding: 12px; display: flex; align-items: center; gap: 12px; background: #f5f5f6; border-left: 2px solid #ffb83d; }
.code-note>span:first-child { font-size: 24px; color: #ec8b39; }
.code-note code { font: 9px/1.5 Consolas, monospace; color: #68686e; }
.adjustment { margin-left: auto; font-size: 8px; color: #b94a1d; }
.technical .animation-status { margin-top: 16px; }
.client-message { position: relative; background: #fff; border: 1px solid #e3e3e6; border-left: 3px solid #ffce43; padding: 28px 32px 32px; box-shadow: 0 14px 55px #29293007; }
.client-message::after { content: ''; position: absolute; bottom: -11px; left: 30px; width: 18px; height: 18px; background: #fff; border-right: 1px solid #e3e3e6; border-bottom: 1px solid #e3e3e6; transform: rotate(45deg); }
.message-source { font-size: 11px; margin-bottom: 24px; color: #76767b; }
.message-source span { color: #c65321; margin-right: 5px; }
.haystack h2 { font-size: clamp(27px, 2.7vw, 43px); line-height: 1.15; }
.haystack .reply { padding-left: 32px; margin-top: 28px; font-size: 20px; }
.hay-prop { left: 53%; top: 34%; width: min(43vw, 640px); }
.hay-button { display: block; border: 0; width: 100%; padding: 0; background: none; pointer-events: auto; }
.hay-button>svg { display: block; width: 100%; height: auto; }
.needle-svg { transform-origin: 290px 260px; transition: transform 250ms ease; }
.hay-button:hover .needle-svg, .hay-button[aria-pressed="true"] .needle-svg { transform: scale(1.055); }
.hay-prop .art-footnote { margin-top: -5px; }
.city { width: min(52vw, 840px); left: 47%; top: 25%; }
.city img { width: 100%; height: auto; display: block; }
.closing .scene-copy { width: 47%; }
.closing h2 { font-size: clamp(42px, 4.1vw, 68px); }
.closing h2 span { max-width: 600px; }
.motion-toggle { position: absolute; z-index: 6; right: 24px; bottom: 14px; border: 0; border-bottom: 1px solid #c9c9ce; background: #fffffff0; padding: 7px 4px; color: #6d6d74; font-size: 10px; pointer-events: auto; }
.landscape-note { color: #29292c; }
html:not(.enhanced) .scene:not(.hero) { background: white; }
html:not(.enhanced) .haystack { background: #fff !important; }
@media (max-width: 900px) and (min-width: 641px) {
  .scene-copy { width: 48%; }
  .approach h2 { font-size: 44px; }
  .inspection, .technical { width: 44%; left: 53%; }
  .ad-pair { gap: 14px; }
  .ad-card { width: calc(50% - 7px); }
  .verdict { font-size: 8px; padding: 5px; }
  .technical { top: 39%; }
  .client-message { padding: 22px; }
  .haystack h2 { font-size: 28px; }
}
@media (max-width: 640px) {
  .scene { padding: 58px 24px 470px; min-height: max(930px, 108svh); }
  .hero { padding-top: 112px; padding-bottom: 340px; min-height: max(800px, 100svh); }
  .scene-copy, .closing .scene-copy { width: 100%; }
  .approach h2 { font-size: clamp(31px, 8.5vw, 44px); }
  .not-equal { margin: 5px 0; font-size: .85em; }
  .approach .lead, .platform .lead { font-size: 14px; margin-top: 18px; max-width: 325px; }
  .platform h2 { font-size: clamp(38px, 10vw, 51px); }
  .inspection, .technical { left: 24px; width: calc(100% - 48px); top: 61%; }
  .ad-pair { gap: 14px; }
  .ad-card { width: calc(50% - 7px); border-radius: 3px; }
  .ad-header { height: 27px; padding: 0 8px; gap: 5px; }
  .ad-header i { width: 13px; height: 13px; }
  .ad-brand { font-size: 9px; }
  .ad-headline { font-size: 16px; left: 8px; top: 8px; }
  .ad-card:nth-child(2) .ad-headline { font-size: 14px; padding: 5px; left: 5px; top: 5px; }
  .play { width: 30px; height: 30px; font-size: 10px; }
  .ad-footer { padding: 8px; min-height: 50px; font-size: 12px; }
  .ad-footer p { font-size: 8px; }
  .ad-cta { font-size: 8px; }
  .verdict { font-size: 8px; padding: 6px; bottom: -13px; }
  .animation-status { font-size: 10px; margin-top: 30px; }
  .art-footnote { margin-top: 5px; font-size: 8px; }
  .campaign-map { height: 310px; }
  .campaign-node { padding: 9px 10px; }
  .objective { width: 140px; }
  .campaign-node strong { font-size: 13px; }
  .branch { top: 100px; width: 40%; }
  .connections { top: 9px; height: 237px; }
  .budget { top: 209px; }
  .code-note { top: 260px; left: 4%; width: 92%; padding: 8px; }
  .code-note code { font-size: 8px; }
  .technical .animation-status { margin-top: 15px; }
  .haystack { min-height: max(950px, 110svh); padding-top: 58px; }
  .client-message { padding: 20px; }
  .message-source { font-size: 10px; margin-bottom: 18px; }
  .haystack h2 { font-size: clamp(24px, 6.5vw, 33px); }
  .haystack .reply { padding-left: 20px; font-size: 17px; margin-top: 25px; }
  .hay-prop { width: calc(100% - 32px); left: 16px; top: 53%; }
  .city { width: calc(100% + 12px); left: -6px; top: 47%; }
  .closing { min-height: max(900px, 105svh); padding-top: 64px; }
  .closing h2 { font-size: clamp(35px, 9vw, 47px); }
  .motion-toggle { right: 16px; bottom: 7px; font-size: 9px; padding: 5px 3px; }
  .contact[open] { margin-bottom: 0; }
}
.ad-headline { white-space: pre-line; }
.hero-badge { border-radius: 99px; gap: 28px; padding: 14px 25px; font-size: 12px; letter-spacing: 1.5px; }
.profile-mark { width: 38px; height: 5px; background: #e2e2e4; border-radius: 3px; }
.ad-card { border-radius: 14px; }
.ad-header { height: 38px; }
.ad-footer { display:flex; justify-content:space-between; min-height:40px; height:40px; }
.save-mark { font-size:18px; }
.technical { z-index:5; }
.campaign-node { border-radius:18px; }
.code-note { border-radius:14px; border:1px solid #ececef; }
.mini-ad>span { border-radius:9px; }
.budget-track, .budget-track i { border-radius:99px; }
.objective { overflow:visible; }
.money-burst { position:absolute; left:50%; top:0; pointer-events:none; }
.money-burst b { position:absolute; font-size:26px; color:#e7a31d; opacity:0; font-weight:500; }
.motion-ready .hero-float, .motion-ready .hero-coin { animation: heroFloat 3.4s ease-in-out infinite alternate; }
.hero-float.alternate { animation-delay:-1.7s; }
.hero-coin.later { animation-delay:-.9s; }
.motion-ready .hero-bar { transform-box:fill-box; transform-origin:center bottom; animation:barGrow 3.2s ease-in-out infinite alternate; }
.bar-two { animation-delay:-.7s; }.bar-three { animation-delay:-1.4s; }
.hero-growth { stroke-dasharray:800; stroke-dashoffset:800; }
.motion-ready .hero-growth { animation:growth 4s ease-in-out infinite; }
.motion-ready .hero-spark { animation:heroFloat 2.4s ease-in-out infinite alternate; }
.landscape:not([data-scene="0"]) .terrain *, .landscape[data-paused="true"] .terrain * { animation-play-state:paused; }
@keyframes heroFloat { from { translate:0 0; } to { translate:0 -12px; } }
@keyframes barGrow { from { scale:1 .8; } to { scale:1 1; } }
@keyframes growth { 0% { stroke-dashoffset:800; } 65%,100% { stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce) { .terrain * { animation:none!important; } .hero-growth { stroke-dashoffset:0; } }
@media(max-width:640px) {
  .terrain { width:190%; left:-90%; height:58%; top:42%; }
  .ad-card { border-radius:10px; }.ad-header { height:29px; }.ad-footer { height:34px; min-height:34px; }
  .city { top:55%; }
  .hero-badge { min-height:46px; }
}
.campaign-node>span, .budget>span, .budget>div:last-child { color: #626266; }
.section-kicker { font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1.5; color: #9e3d1a; margin-bottom: 22px; }
.meta-kicker { display:flex; align-items:center; gap:10px; }
.meta-kicker img { width:94px; height:auto; display:block; }
.client-message { border-radius:26px; padding:32px; }
.message-source { font-size:16px; line-height:1.4; font-weight:600; color:var(--ink); margin-bottom:26px; }
.review-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.review-heading .message-source { margin:0; }
.review-heading img { flex:0 0 28px; }
.review-stars { color:#f5b400; font-size:24px; letter-spacing:3px; line-height:1; margin-top:24px; }
.client-message h2 span { display:inline; }
.contact summary.button { border-radius:99px; }
.closing h2 { font-size:clamp(42px,4vw,64px); }
.closing-context { display:block; color:var(--ink); }
.closing-growth { display:block; width:fit-content; margin-top:26px; color:var(--gold); }
.closing-growth>span { display:block; margin:0; white-space:nowrap; }
.closing-growth .closing-rise { position:relative; display:block; width:fit-content; margin-top:.06em; }
.closing-growth svg { position:absolute; left:calc(100% + 24px); bottom:.08em; width:clamp(78px,7.5vw,112px); height:auto; overflow:visible; }
.closing-growth path { fill:none; stroke:currentColor; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
.mobile-stage { display:none; }
.sunlight { z-index:0; }
.terrain { z-index:1; }
.hero-line { display:block; }
.hero-line:first-child { color:var(--ink); }
.hero-sale { color:inherit; }
#motion-toggle { display:none!important; }
@media(max-width:900px) {
  #hero-title { font-size:clamp(22px,6.8vw,44px); line-height:1.2; letter-spacing:-.04em; }
  #hero-title .hero-line { white-space:nowrap; color:var(--ink); }
  #hero-title .desktop-break { display:none; }
  #hero-title .hero-sale { color:var(--gold); }
}
.mobile-stage[data-paused="true"] .terrain * { animation-play-state:paused; }
.header-link { white-space:nowrap; }
.header-link span { margin-left:12px; }
@media(max-width:900px) {
  html { scroll-padding-top:20px; }
  .scene, .hero, .haystack, .closing { display:flex; flex-direction:column; align-items:stretch; gap:24px; min-height:0; padding:64px 24px 36px; }
  .hero { padding-top:112px; }
  .scene-copy, .closing .scene-copy { width:100%; max-width:560px; margin:0 auto; }
  .scene-copy { z-index:1; }
  .scene h2 { font-size:clamp(32px,8.4vw,52px); line-height:1.08; letter-spacing:-.045em; }
  .platform h2 { font-size:clamp(35px,9.3vw,52px); }
  .approach h2 { font-size:clamp(35px,9.5vw,54px); }
  .not-equal { margin:8px 0; font-size:.8em; }
  .scene .lead, .approach .lead, .platform .lead { font-size:16px; line-height:1.5; max-width:480px; margin-top:20px; }
  .section-kicker { font-size:15px; margin-bottom:20px; letter-spacing:.07em; }
  .meta-kicker img { width:86px; }
  .header { height:88px; padding:0 24px; gap:20px; }
  .wordmark { font-size:27px; }
  .header-link { font-size:12px; white-space:normal; max-width:150px; text-align:right; line-height:1.35; }
  .header-link span { margin-left:3px; }
  .mobile-stage { display:block; position:relative; width:100%; max-width:420px; margin:0 auto; height:480px; isolation:isolate; pointer-events:none; }
  .hero .mobile-stage { height:380px; }
  .platform .mobile-stage { height:550px; }
  .haystack { gap:0; padding-bottom:14px; }
  .haystack .mobile-stage { height:400px; margin-top:-8px; }
  .closing .mobile-stage { height:490px; }
  .mobile-stage .scene-art { visibility:visible!important; opacity:1!important; translate:none!important; scale:1!important; left:0; width:100%; top:150px; }
  .mobile-stage .inspection { top:152px; padding:0 8px; }
  .mobile-stage .technical { top:148px; }
  .mobile-stage .hay-prop { top:52px; left:7%; width:86%; }
  .mobile-stage .city { top:95px; }
  .mobile-stage .eye { left:50%!important; top:70px!important; width:78%!important; max-width:330px; }
  .haystack .mobile-stage .eye { width:34%!important; left:74%!important; top:24px!important; }
  .closing .mobile-stage .eye { width:48%!important; left:70%!important; top:45px!important; }
  .mobile-stage .terrain { width:190%; left:-90%; height:380px; top:-55px; }
  .mobile-stage .ad-pair { overflow:clip; overflow-clip-margin:12px; }
  .mobile-stage .set-piece { transform:none!important; opacity:1!important; }
  .landscape { overflow:hidden; }
  .mobile-stage .ad-card { width:calc(50% - 7px); }
  .mobile-stage .ad-header { height:30px; }
  .mobile-stage .ad-footer { height:34px; min-height:34px; }
  .campaign-map { height:340px; }
  .campaign-node>span, .budget>span, .budget>div:last-child { font-size:11px; letter-spacing:.4px; }
  .campaign-node strong { font-size:15px; }
  .campaign-node { padding:10px 12px; }
  .objective { width:146px; }
  .branch { top:114px; width:42%; }
  .connections { top:14px; height:260px; }
  .budget { top:237px; left:5%; width:90%; }
  .code-note { top:294px; left:5%; width:90%; padding:8px; }
  .budget-track { margin:6px 0; }
  .client-message { padding:26px 24px; border-radius:24px; }
  .message-source { font-size:16px; margin-bottom:22px; }
  .haystack h2 { font-size:clamp(27px,7.3vw,38px); line-height:1.2; }
  .haystack .reply { padding-left:24px; margin-top:25px; font-size:18px; }
  .art-footnote { font-size:12px; line-height:1.5; }
  .closing h2 .closing-growth { display:block; width:100%; margin-top:24px; font-size:1.06em; }
  .closing-growth>span { display:block; margin:0; }
  .closing-growth .closing-rise { display:block; margin-top:.08em; }
  .closing-growth svg { left:calc(100% + 14px); width:clamp(56px,17vw,74px); }
  .contact { width:100%; }
  .contact summary.button { font-size:14px; margin-top:26px; padding:16px 22px; gap:20px; }
  input, textarea { font-size:16px; }
  .motion-toggle { font-size:12px; min-height:40px; bottom:max(6px,env(safe-area-inset-bottom)); }
  footer { padding:28px 24px 64px; }
}
@media(max-width:360px) {
  .scene, .hero, .haystack, .closing { padding-left:20px; padding-right:20px; }
  .header { padding:0 20px; gap:14px; }
  .wordmark { font-size:25px; }
  .header-link { max-width:124px; }
  .mobile-stage { height:420px; }
  .hero .mobile-stage { height:380px; }
  .haystack .mobile-stage { height:350px; }
  .closing .mobile-stage { height:420px; }
  .platform .mobile-stage { height:540px; }
  .client-message { padding:24px 20px; }
  .closing-growth svg { left:calc(100% + 8px); width:52px; }
  .budget>div:last-child { font-size:10px; }
}
html:not(.enhanced) .mobile-stage { display:none; }

/* A short conversation, one question at a time. */
#contact-form { border-radius:24px; padding:clamp(20px,3vw,32px); }
#contact-form [hidden] { display:none!important; }
#form-title { font-size:26px; line-height:1.15; letter-spacing:-.7px; margin:0 0 8px; }
.questionnaire-sub { font-size:16px; margin:0 0 28px; }
.step-progress { color:#ac401b; font-size:13px; font-weight:600; margin:0 0 18px; }
#contact-form label { font-size:20px; line-height:1.3; font-weight:500; }
.field-hint { color:#626266; font-size:14px; line-height:1.5; margin:8px 0 16px; }
#contact-form input, #contact-form textarea { border:1px solid #a0a0a5; border-radius:12px; line-height:1.5; }
.question-actions { display:flex; align-items:center; gap:20px; }
#contact-form .button { border-radius:99px; font-size:14px; justify-content:center; gap:8px; }
.question-actions .text-link { flex-shrink:0; }
#complete-title { font-size:23px; margin:0 0 12px; }
#question-complete p { font-size:15px; line-height:1.5; }
.message-preview { white-space:pre-wrap; overflow-wrap:anywhere; padding:16px; border-radius:12px; background:#fff7d7; max-height:220px; overflow:auto; }