:root {
  --cn-ink: #182a22;
  --cn-forest: #123323;
  --cn-leaf: #71945d;
  --cn-mist: #eaf0e7;
  --cn-paper: #f7f8f3;
  --cn-line: rgba(30, 64, 42, .18);
}

html { scroll-behavior: smooth; }
body { background: var(--cn-paper); color: var(--cn-ink); }
.topbar { position: fixed; inset: 0 0 auto; z-index: 50; min-height: 54px; background: rgba(247, 248, 243, .82); border-color: var(--cn-line); }
.topbar .back { font-weight: 700; }
.topbar small { color: #526e5a; }
.progress { z-index: 60; background: #a8d26f; }
main { overflow: clip; }
.container { width: min(100% - clamp(40px, 8vw, 144px), 1320px); }
.chapter { border-top: 0; padding-block: clamp(88px, 10vw, 160px); }
.section-id { font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1, h2 { letter-spacing: -.05em; }

/* The supplied key visual includes its own logo and campaign title; the live title
   sits in a dark caption band instead of covering that original typography. */
.opening { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: #dbe9e4; }
.hero-art { position: relative; grid-row: 1 / 3; grid-column: 1; min-height: 100svh; overflow: hidden; background: #dbe9e4 url('./hero-loop-poster.jpg') center / cover no-repeat; }
.hero-art video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero-intro { grid-row: 2; grid-column: 1; z-index: 2; align-self: end; padding: clamp(38px, 5vw, 72px) 0 clamp(34px, 5vw, 62px); color: white; background: linear-gradient(180deg, transparent, rgba(8, 35, 22, .84) 64%); }
.hero-intro .container { max-width: 1320px; }
.hero-kicker { margin-bottom: 10px; color: #cfe1c9; font-family: inherit; font-weight: 700; letter-spacing: .14em; }
.hero-intro h1 { margin: 0 0 4px; font-size: clamp(34px, 5.7vw, 88px); line-height: 1.18; }
.hero-line { color: #f7f7ed; font-size: clamp(14px, 1.5vw, 20px); }
.hero-rule { display: none; }
.opening-cue { position: absolute; z-index: 3; right: clamp(22px, 5vw, 74px); bottom: 50px; color: white; font-size: 10px; font-weight: 700; letter-spacing: .18em; writing-mode: vertical-rl; }
.opening-cue span { display: inline-block; margin-top: 14px; font-size: 20px; }

.what-if { padding-top: clamp(96px, 10vw, 150px); background: #f7f8f3; }
.what-if .section-id { margin-bottom: 34px; }
.what-if-line { max-width: 1080px; margin: 0 0 clamp(50px, 7vw, 110px); font-size: clamp(34px, 5.4vw, 78px); font-weight: 650; line-height: 1.34; letter-spacing: -.045em; }
.what-if .full-image { width: min(100% + 12vw, 1500px); margin: 0 auto 0 50%; transform: translateX(-50%); }
.what-if .full-image img { width: 100%; }

.question { position: relative; min-height: 155svh; padding: 0; background: var(--cn-forest); color: #f0f6ed; text-align: left; }
.question-stage { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; padding-block: 90px 50px; transform: translateY(var(--cn-drift, 0px)); }
.question .section-id { color: #a3c9a7; }
.question h2 { max-width: 16em; margin: 0 0 36px; font-size: clamp(37px, 5vw, 75px); }
.question .body-copy { max-width: 800px; margin: 0; font-size: clamp(18px, 1.65vw, 25px); line-height: 1.55; }
.question .body-copy p { margin-bottom: 18px; }
.question .subline { margin: 40px 0 0; color: #bad6b7; }
.question [data-cn-line] { position: relative; }
.question [data-cn-line].cn-lines-ready { color: transparent; }
.cn-line-overlay { position: absolute; inset: 0; pointer-events: none; color: #f0f6ed; }
.cn-line-overlay .cn-line { position: absolute; display: block; white-space: pre; clip-path: inset(0 calc((1 - var(--cn-line-progress, 0)) * 100%) 0 0); }
.question .subline .cn-line-overlay { color: #bad6b7; }
.question .body-copy .cn-line-overlay { color: #f0f6ed; }
html:not(.cn-motion) .question { min-height: auto; }
html:not(.cn-motion) .question-stage { position: static; min-height: auto; padding-block: clamp(90px, 12vw, 150px); }

.insight { background: linear-gradient(180deg, #edf2e9, #f7f8f3 72%); }
.insight .large-line { max-width: 1050px; margin-bottom: 70px; font-size: clamp(38px, 5vw, 74px); line-height: 1.25; }
.insight-flow { max-width: 950px; margin: 0 0 85px; gap: 12px; border: 0; padding: 0; font-size: clamp(13px, 1.2vw, 17px); }
.insight-flow span { padding: 9px 16px; border: 1px solid #b4c8b1; border-radius: 999px; }
.insight-flow span:not(:last-child):after { display: none; }
.insight-images { display: grid; grid-template-columns: .7fr 1.3fr !important; align-items: end; gap: clamp(18px, 3vw, 46px); margin-top: 0; }
.insight-images figure:first-child { transform: translateY(-55px); }
.insight-images figure img { width: 100%; height: 100%; object-fit: cover; }
.insight-interactive { position: relative; isolation: isolate; overflow: hidden; cursor: crosshair; outline-offset: 5px; aspect-ratio: 16 / 9; background: #66766d; --cn-x: 70%; --cn-y: 50%; --cn-radius: 100%; }
.insight-interactive > img:first-child { width: 100%; height: 100%; filter: grayscale(1) contrast(.9); }
.insight-interactive .insight-color { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.62); clip-path: circle(var(--cn-radius) at var(--cn-x) var(--cn-y)); transition: clip-path .42s ease, filter .42s ease; }
.insight-interactive.is-active .insight-color { --cn-radius: 85%; filter: saturate(1.2) brightness(1.04); }
.insight-interactive:focus-visible .insight-color { clip-path: circle(85% at 72% 50%); }
.insight-interactive .insight-hint { position: absolute; right: 20px; bottom: 18px; padding: 7px 11px; color: white; background: rgba(15, 40, 25, .65); font-size: 10px; font-weight: 700; letter-spacing: .12em; pointer-events: none; }
.insight-hint span { margin-left: 12px; }
.insight .thought { max-width: 680px; margin: clamp(62px, 8vw, 115px) 0 0 auto; padding: 0; border: 0; font-size: clamp(24px, 3vw, 43px); line-height: 1.55; }

.answer { padding-block: clamp(125px, 13vw, 210px); background: #d9e8d4; }
.answer .split { grid-template-columns: .75fr 1.25fr; gap: clamp(45px, 7vw, 120px); }
.answer h2 { font-size: clamp(58px, 6.5vw, 103px); white-space: nowrap; }
.answer .body-copy { max-width: 430px; }
.answer .split figure { overflow: hidden; }
.answer .split figure img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.answer .split figure:hover img { transform: scale(1.035); }

.phase-line { margin-block: 70px 80px; }
.phase { min-height: 170px; }
.phase b { color: var(--cn-leaf); }
.subsection { margin-top: clamp(100px, 12vw, 180px); }
.subsection-head h3 { font-size: clamp(19px, 2vw, 28px); }
.camera { background: #e9efe6; }
.camera > .container > h2 { font-size: clamp(38px, 5.4vw, 80px); }
.camera .image-pair { gap: clamp(20px, 4vw, 55px); }
.camera .three-stills { gap: clamp(15px, 2vw, 30px); }
.workflow-art { max-width: 820px; }
.finale { padding-block: clamp(125px, 15vw, 230px); background: #102b1d; }
.finale h2 { font-size: clamp(66px, 11vw, 158px); }
.film-slot { min-height: 350px; background: linear-gradient(125deg, #284632, #142e21); }

/* Desktop editorial headings remain complete on one baseline, including at full screen. */
@media (min-width: 761px) {
  .chapter h2, .finale h2, .hero-intro h1, .what-if-line, .subsection-head h3 { white-space: nowrap; }
  .what-if-line { max-width: none; font-size: clamp(30px, 4.1vw, 55px); }
  .what-if-line br { display: none; }
  .question .container.narrow { max-width: 1320px; }
  .question h2 { max-width: none; font-size: clamp(30px, 3.75vw, 56px); }
  .insight .large-line { max-width: none; font-size: clamp(29px, 4vw, 61px); }
  .answer h2 { font-size: clamp(30px, 3.6vw, 56px); }
  .process-intro { max-width: none; }
  .process-intro h2 { font-size: clamp(34px, 4.4vw, 62px); }
  .camera > .container > h2 { font-size: clamp(35px, 5vw, 72px); }
  .insight .thought { white-space: nowrap; }
}

.insight-flow { margin-bottom: clamp(36px, 5vw, 72px); }
.insight-interactive { width: 100%; aspect-ratio: 1268 / 544; }
.insight .thought { max-width: none; margin: clamp(32px, 5vw, 72px) 0; font-size: clamp(24px, 2.55vw, 38px); line-height: 1.45; }

.answer .split { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); }
.poster-flip { display: block; width: min(100%, 590px); aspect-ratio: 410 / 546; margin-inline: auto; padding: 0; border: 0; background: transparent; perspective: 1300px; cursor: pointer; text-align: left; }
.poster-flip:focus-visible { outline: 3px solid #50795c; outline-offset: 6px; }
.poster-flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.2,.78,.17,1); }
.poster-flip.is-flipped .poster-flip-inner { transform: rotateY(180deg); }
.poster-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; box-shadow: 0 28px 65px rgba(19,47,27,.18); }
.poster-back { transform: rotateY(180deg); }
.poster-face img { width: 100%; height: 100%; object-fit: cover; }
.poster-prompt { position: absolute; right: 14px; bottom: 14px; padding: 8px 13px; background: rgba(12,33,23,.8); color: white; font-size: 12px; font-weight: 650; letter-spacing: .04em; }

.phase-line { gap: 12px; border: 0; margin: 62px 0 22px; }
.phase { min-height: 160px; border: 1px solid var(--cn-line); border-radius: 22px; padding: 22px !important; background: #edf2e9; color: var(--cn-ink); text-align: left; font: inherit; cursor: pointer; transition: transform .35s ease, background .35s ease, box-shadow .35s ease; }
.phase:hover, .phase:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(29,67,37,.12); }
.phase.is-selected { background: #d7e7d2; border-color: #8cae82; }
.phase p { margin: 15px 0 4px; }
.phase-stage { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(250px,.65fr); align-items: stretch; min-height: 380px; overflow: hidden; border-radius: 28px; background: #dce8d8; --phase-accent: #7a9584; }
.phase-stage.is-changing { animation: phase-bubble .65s cubic-bezier(.2,.75,.2,1) both; }
.phase-stage figure { overflow: hidden; }
.phase-stage img { display: block; width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.phase-detail { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px,4vw,58px); background: var(--phase-accent); color: var(--phase-text,white); }
.phase-detail span { font-size: 12px; letter-spacing: .16em; }
.phase-detail h3 { margin: 22px 0 10px; font-size: clamp(42px,5vw,74px); line-height: 1; font-weight: 600; }
.phase-detail p { font-size: clamp(16px,1.5vw,21px); }
.phase-palette { display: flex; gap: 7px; margin-top: 32px; }
.phase-palette i { width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: #d9dbdb; }
.phase-palette i:nth-child(2) { background: #a9afa9; }.phase-palette i:nth-child(3) { background: #778578; }.phase-palette i:nth-child(4) { background: #3d5a48; }.phase-palette i:nth-child(5) { background: #1a3328; }
@keyframes phase-bubble { from { clip-path: circle(0% at 50% 50%); transform: scale(.95); } to { clip-path: circle(120% at 50% 50%); transform: scale(1); } }

.moodboard-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(18px,3vw,42px); margin-top: clamp(55px,7vw,105px); }
.mood-panel { min-width: 0; }
.mood-panel > img { width: 100%; aspect-ratio: 858 / 438; border-radius: 20px; object-fit: cover; }
.mood-panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 18px 0; }
.mood-panel-heading h3 { margin: 0; font-family: Georgia,serif; font-size: clamp(20px,2.4vw,32px); font-weight: 500; letter-spacing: -.025em; white-space: nowrap; }
.mood-panel-heading p { margin: 0; font-size: 15px; }
.mood-panel-heading > span { color: #687b6d; font-size: 11px; white-space: nowrap; }
.mood-swatches { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.mood-swatches button { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--cn-ink); text-align: center; font: inherit; cursor: pointer; }
.mood-swatches button i { display: block; width: 100%; aspect-ratio: 1.3; margin-bottom: 8px; border-radius: 14px; transition: transform .35s ease, box-shadow .35s ease; }
.mood-swatches button:hover i, .mood-swatches button:focus-visible i { transform: translateY(-6px) scale(1.04); box-shadow: 0 12px 18px rgba(25,50,35,.18); }
.mood-swatches button[aria-pressed="true"] i { outline: 2px solid #234b34; outline-offset: 3px; }
.mood-swatches button b { font-size: clamp(9px,.85vw,12px); font-weight: 650; letter-spacing: .02em; }
.mood-swatches button span { font-size: clamp(11px,1vw,14px); }
.mood-swatches button small { color: #687b6d; font-size: clamp(9px,.78vw,11px); }
.tone-board { width: 100%; margin: clamp(55px, 7vw, 105px) 0 0; overflow: hidden; border-radius: 14px; }
.tone-board img { display: block; width: 100%; height: auto; }

.gallery-note { margin: -5px 0 24px; color: #5f7765; font-size: 14px; }
.test-gallery { position: relative; overflow: hidden; padding-bottom: 58px; touch-action: pan-y; }
.gallery-viewport { overflow: hidden; cursor: grab; }
.gallery-viewport.is-dragging { cursor: grabbing; }
.gallery-track { display: flex; align-items: center; gap: 18px; width: max-content; will-change: transform; }
.gallery-card { flex: none; width: clamp(220px, 29vw, 400px); height: clamp(170px, 22vw, 290px); overflow: hidden; border-radius: 8px; background: #dbe2db; transform: scaleX(var(--edge-scale,1)); transform-origin: center; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.gallery-controls { position: absolute; right: 0; bottom: 0; display: flex; gap: 9px; }
.gallery-controls button { width: 42px; height: 42px; border: 1px solid #adc2ab; border-radius: 50%; background: #f7f8f3; color: #23432d; font-size: 22px; cursor: pointer; }
.gallery-controls button:hover, .gallery-controls button:focus-visible { background: #dbe9d6; }
.gallery-instruction { position: absolute; left: 0; bottom: 12px; margin: 0; color: #78917c; font-size: 12px; letter-spacing: .06em; }

/* Headline sizes are fitted against their available line width in the page script. */
.hero-intro h1, .chapter h2:not(.section-id), .what-if-line, .subsection-head h3, .finale h2 { white-space: nowrap; max-width: none; }
.what-if-line br { display: none; }
.subsection-head { min-width: 0; }
.subsection-head h3 { flex: none; }

.test-film { width: min(100%, 960px); margin: clamp(22px, 4vw, 48px) auto 0; }
.test-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #193426; object-fit: contain; border-radius: 12px; }
.test-film figcaption { margin-top: 10px; color: #66806b; font-size: 13px; text-align: center; }

.script-accordion { display: flex; gap: 10px; width: 100%; min-height: clamp(370px, 43vw, 590px); overflow: hidden; border-radius: 16px; }
.script-panel { position: relative; flex: .65 1 0; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #cad9ca; border-radius: 10px; background: #fff; color: #fff; cursor: pointer; text-align: left; transition: flex-grow .7s cubic-bezier(.2,.78,.2,1), filter .5s ease; }
.script-panel.is-active { flex-grow: 5; }
.script-panel:focus-visible { outline: 3px solid #366741; outline-offset: -4px; }
.script-panel img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: left center; filter: brightness(.65); transition: filter .6s ease, transform .6s ease; }
.script-panel.is-active img { object-fit: contain; filter: none; }
.script-panel:not(.is-active):hover img { transform: scale(1.06); }
.script-panel-label { position: absolute; inset: auto 0 0; display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 15px 20px; background: linear-gradient(0deg, rgba(10,31,22,.88), transparent); font-size: clamp(12px, 1.15vw, 16px); white-space: nowrap; }
.script-panel-label b { font-size: 11px; letter-spacing: .1em; }
.script-panel:not(.is-active) .script-panel-label { inset: 0; flex-direction: column; justify-content: end; padding: 14px 8px; background: linear-gradient(0deg, rgba(10,31,22,.9), rgba(10,31,22,.1)); writing-mode: vertical-rl; }

.scene-gallery { position: relative; overflow: hidden; padding-block: 20px 66px; touch-action: pan-y; }
.scene-track { display: flex; align-items: center; gap: 22px; width: max-content; transition: transform .5s cubic-bezier(.2,.75,.2,1); }
.scene-card { flex: none; width: min(77vw, 950px); margin: 0; transform: scale(var(--scene-scale, .78)); opacity: .62; transform-origin: center; transition: transform .5s cubic-bezier(.2,.75,.2,1), opacity .4s ease; }
.scene-card.is-active { opacity: 1; }
.scene-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 10px; background: #fff; box-shadow: 0 18px 45px rgba(26,56,38,.12); }
.scene-card figcaption { margin-top: 13px; color: #536c59; font-size: 13px; }
.scene-controls { position: absolute; right: 0; bottom: 0; display: flex; gap: 8px; }
.scene-controls button { width: 40px; height: 40px; border: 1px solid #a8bda7; border-radius: 50%; background: #f7f8f3; color: #24412e; font: inherit; cursor: pointer; }
.scene-controls button:hover, .scene-controls button:focus-visible { background: #d8e7d5; }

.auto-gallery { overflow: hidden; touch-action: pan-y; }
.auto-viewport { overflow: hidden; cursor: grab; }
.auto-viewport.is-dragging { cursor: grabbing; }
.auto-track { display: flex; align-items: center; gap: 22px; width: max-content; will-change: transform; }
.shoot-card { position: relative; flex: none; width: clamp(185px, 21vw, 276px); aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border-radius: 12px; box-shadow: 0 14px 35px rgba(24,54,35,.16); }
.shoot-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shoot-card figcaption { position: absolute; inset: auto 0 0; padding: 28px 14px 14px; background: linear-gradient(transparent, rgba(10,31,22,.78)); color: #fff; font-size: 13px; line-height: 1.45; }
.result-card { flex: none; width: clamp(280px, 37vw, 510px); aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 10px; background: #dbe5db; }
.result-card img { width: 100%; height: 100%; object-fit: cover; }

.finale .container { max-width: 970px; }
.finale-lead { margin: 34px auto 26px; color: #e8f3df; font-size: clamp(22px, 2.7vw, 36px); line-height: 1.55; }
.finale-copy { max-width: 730px; margin: 0 auto 70px; color: #c3d5c4; font-size: clamp(16px, 1.35vw, 20px); line-height: 2; }
.finale .endline { margin: 0; line-height: 1.8; }

html.cn-motion [data-cn-text-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .78s ease, transform .78s cubic-bezier(.2,.7,.2,1); }
html.cn-motion [data-cn-text-reveal].cn-visible { opacity: 1; transform: translateY(0); }

[data-cn-image-reveal] { clip-path: inset(0 0 0 0); }
html.cn-motion [data-cn-image-reveal] { clip-path: inset(0 99% 0 0); transition: clip-path 1.2s cubic-bezier(.22,.7,.2,1); }
html.cn-motion [data-cn-image-reveal].cn-visible { clip-path: inset(0 0 0 0); }
html.cn-motion [data-cn-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s ease, transform .9s cubic-bezier(.22,.7,.2,1); }
html.cn-motion [data-cn-reveal].cn-visible { opacity: 1; transform: translateY(0); }
html.cn-motion .hero-intro[data-cn-reveal] { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .opening { min-height: 100svh; }
  .hero-art { background-position: right center; }
  .hero-art video { object-position: right center; }
  .hero-intro { padding-bottom: 42px; }
  .hero-intro h1 { max-width: 8em; }
  .opening-cue { right: 18px; bottom: 30px; }
  .what-if-line br { display: none; }
  .question { min-height: 130svh; }
  .question-stage { min-height: 90svh; padding-block: 100px 55px; }
  .question h2 { max-width: none; font-size: clamp(34px, 8vw, 54px); }
  .insight-images { grid-template-columns: 1fr !important; }
  .insight-images figure:first-child { width: 78%; transform: none; }
  .insight .thought { white-space: normal; }
  .insight-interactive { aspect-ratio: 16 / 10; }
  .answer .split { grid-template-columns: 1fr; }
  .answer h2 { white-space: normal; }
  .phase-line { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .phase { min-height: 0; border: 1px solid var(--cn-line) !important; padding: 14px 17px !important; }
  .phase p { margin: 5px 0 0; }
  .phase-stage { grid-template-columns: 1fr; }
  .phase-stage img { min-height: 0; max-height: 280px; aspect-ratio: 16 / 10; }
  .phase-detail { min-height: 220px; }
  .moodboard-split { grid-template-columns: 1fr; }
  .mood-panel-heading { display: block; }
  .mood-panel-heading > span { display: block; margin-top: 5px; }
  .mood-swatches { gap: 5px; }
  .mood-swatches button i { border-radius: 8px; }
  .mood-swatches button b { font-size: 9px; }
  .mood-swatches button span { font-size: 10px; }
  .mood-swatches button small { font-size: 8px; }
  .gallery-card { width: 73vw; height: 53vw; }
  .script-accordion { min-height: 400px; gap: 5px; }
  .script-panel { flex-grow: .42; }
  .script-panel.is-active { flex-grow: 5; }
  .script-panel-label { padding-inline: 10px; font-size: 11px; }
  .scene-card { width: 86vw; }
  .shoot-card { width: 55vw; }
  .result-card { width: 78vw; }
  .camera .image-pair, .camera .three-stills { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art video { display: none; }
  .question { min-height: auto; }
  .question-stage { position: static; min-height: auto; padding-block: 90px; }
  .question [data-cn-line].cn-lines-ready { color: inherit; }
  .cn-line-overlay { display: none; }
  html.cn-motion [data-cn-image-reveal], html.cn-motion [data-cn-reveal] { clip-path: none; opacity: 1; transform: none; transition: none; }
  .insight-interactive .insight-color { clip-path: none; transition: none; }
  .answer .split figure img { transition: none; }
  .poster-flip-inner, .phase { transition: none; }
  .phase-stage.is-changing { animation: none; }
  .gallery-track { will-change: auto; }
  .gallery-card { transform: none; }
  .auto-track { will-change: auto; }
  .scene-track, .scene-card, .script-panel, .script-panel img { transition: none; }
  html.cn-motion [data-cn-text-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Chapter depth sits behind readable copy; existing galleries keep their own motion. */
.what-if .full-image { overflow: hidden; }
.what-if .full-image img { transform: translate3d(0, var(--cn-parallax-y, 0px), 0) scale(1.1); }
.insight-interactive > img { transform: translate3d(0, var(--cn-parallax-y, 0px), 0) scale(1.1); }
.question, .process, .camera, .finale { position: relative; isolation: isolate; overflow: hidden; }
.question > .container { z-index: 1; }
.process > .container, .camera > .container, .finale > .container { position: relative; z-index: 1; }
.chapter-ambient { position: absolute; z-index: -1; pointer-events: none; transform: translate3d(0, var(--cn-parallax-y, 0px), 0); }
.question-ambient { inset: -65px -8%; opacity: .7; background: radial-gradient(ellipse 42% 37% at 78% 37%, rgba(145,191,119,.24), transparent 80%), radial-gradient(ellipse 44% 50% at 8% 81%, rgba(100,158,104,.17), transparent 82%); }
.process-ambient, .camera-ambient { inset: -55px -4% auto; height: min(1050px, 115svh); mask-image: linear-gradient(#000 0%, #000 34%, transparent 100%); }
.process-ambient { opacity: .52; background: radial-gradient(ellipse 43% 42% at 82% 17%, rgba(157,198,137,.26), transparent 90%), radial-gradient(ellipse 38% 43% at 12% 53%, rgba(199,221,183,.2), transparent 86%); }
.camera-ambient { opacity: .48; background: radial-gradient(ellipse 50% 43% at 12% 28%, rgba(125,167,137,.22), transparent 88%), radial-gradient(ellipse 40% 42% at 80% 62%, rgba(206,225,174,.23), transparent 88%); }
.finale-ambient { inset: -65px -7%; opacity: .21; background: radial-gradient(ellipse 40% 70% at 78% 35%, #7fa864, transparent 76%), radial-gradient(ellipse 36% 65% at 16% 86%, #477d57, transparent 78%); }

.answer { position: relative; isolation: isolate; overflow: hidden; background: #193426 url('./hero-loop-poster.jpg') center / cover no-repeat; color: #f5f8f0; }
.answer::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11,34,24,.86), rgba(11,34,24,.65) 44%, rgba(11,34,24,.32)); }
.answer-video { position: absolute; z-index: 0; inset: -55px 0; pointer-events: none; overflow: hidden; transform: translate3d(0, var(--cn-parallax-y, 0px), 0); }
.answer-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.answer > .container { position: relative; z-index: 2; }
.answer .section-id, .answer .title-mark { color: #d7e5d4; }
.answer .accent { color: #e6f8c9; }

@media (max-width: 760px) {
  .answer::after { background: linear-gradient(180deg, rgba(11,34,24,.82), rgba(11,34,24,.66) 48%, rgba(11,34,24,.38)); }
  .answer .text { min-width: 0; }
  .answer h2 { font-size: clamp(30px, 9vw, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  .answer-video video { display: none; }
  .chapter-ambient, .answer-video, .what-if .full-image img, .insight-interactive > img { transform: none; }
}