/* Without JavaScript, the finished campaign remains visible in normal flow. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.production-story { --motion-header-height: 81px; background: #161c19; color: #f9faf7; scroll-margin-top: var(--motion-header-height); }
.production-pin { overflow: hidden; }
.production-content { padding-top: 50px; padding-bottom: 28px; }
.production-heading { position: relative; z-index: 3; }
.production-heading .eyebrow { margin-bottom: 20px; color: #a5b0a5; }
.production-heading .section-index { color: var(--accent); }
.production-heading h2 { font: 700 96px/.91 var(--display); margin: 0; letter-spacing: 0; }
.production-heading h2 span { display: block; }
.production-heading h2 span:last-child { color: var(--accent); }
.production-title-break { display: none; }
.production-stage { position: relative; height: 380px; margin: 28px 0 22px; }
.production-rail { position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: #3d4840; opacity: 0; }
.production-rail span { position: absolute; width: 8px; height: 8px; top: -3px; background: var(--accent); }
.production-rail span:last-child { right: 0; }
.source-sheet { position: absolute; top: 50%; left: 7%; width: 300px; transform: translateY(-50%); background: #f5f7f0; color: var(--ink); border-radius: 3px; padding: 17px; opacity: 0; }
.source-file { display: flex; align-items: center; gap: 9px; font: 600 10px var(--body); padding-bottom: 17px; }
.source-file svg { width: 18px; height: 18px; color: #52703c; }
.source-file > span:last-child { margin-left: auto; color: #63715a; }
.source-columns { display: flex; justify-content: space-between; border-bottom: 1px solid #cdd4c8; padding: 0 0 8px; color: #6b7465; font: 9px var(--body); }
.source-row { display: flex; align-items: center; justify-content: space-between; height: 34px; border-bottom: 1px solid #dce1d7; font-size: 11px; }
.source-row > span { display: flex; align-items: center; gap: 7px; }
.source-row i { width: 5px; height: 5px; background: #668849; border-radius: 50%; }
.source-row strong { font-size: 10px; font-weight: 500; }
.source-total { display: flex; justify-content: space-between; padding-top: 12px; font-size: 8px; color: #596250; }
.creative-engine { position: absolute; width: 290px; height: 235px; left: 62%; top: 50%; transform: translate(-50%, -50%); opacity: 0; color: var(--accent); }
.engine-corner { width: 21px; height: 21px; position: absolute; border-color: #7c9177; border-style: solid; }
.corner-tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.corner-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.corner-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.corner-br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.engine-label { display: block; text-align: center; font-size: 10px; padding-top: 14px; color: #c4cfc2; }
.engine-drawing { display: block; width: 100%; height: 155px; }
.engine-drawing path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.engine-drawing .engine-outline { stroke-dasharray: none; stroke: #65755f; stroke-width: 1; }
.engine-fields { display: flex; gap: 20px; justify-content: center; font-size: 8px; color: #a9b6a6; }
.engine-meter { height: 2px; margin: 16px 36px 0; background: #364234; }
.engine-meter span { display: block; background: var(--accent); height: 100%; transform-origin: left; }
.production-output { position: absolute; inset: 0; }
.output-tile { position: absolute; left: calc(50% + var(--tile-x) * .9%); top: calc(50% + var(--tile-y) * .75%); width: 18%; max-width: 215px; background: #f0f2f3; color: #172118; container-type: inline-size; border: 3px solid #161c19; box-shadow: 0 9px 24px #0003; padding: 9px; display: grid; grid-template-rows: 12% 25% 43% 20%; overflow: hidden; transform: translate(-50%, -50%) rotate(var(--tile-angle)); }
.output-square { aspect-ratio: 1; }
.output-portrait { aspect-ratio: 9 / 15; width: 14%; grid-template-rows: 12% 26% 40% 22%; }
.output-wide { aspect-ratio: 1.65; width: 23%; grid-template-rows: 14% 28% 36% 22%; }
.output-tone-1 { background: #a8d8ff; }
.output-tone-2 { background: #d7e5ec; }
.tile-brand { font-size: 4cqw; line-height: 1; font-weight: 700; display: flex; justify-content: space-between; align-items: start; }
.tile-headline { font: 700 13cqw/.88 var(--display); }
.output-wide .tile-headline { font-size: 7.5cqw; }
.output-tile img { width: calc(100% + 18px); max-width: none; height: 100%; object-fit: cover; object-position: 50% 61%; margin-left: -9px; min-height: 0; }
.tile-offer { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding-top: 2px; }
.tile-offer > span { font-size: 4cqw; }
.tile-offer > strong { font: 600 15cqw/.95 var(--display); white-space: nowrap; }
.output-wide .tile-offer > strong { font-size: 11cqw; }
.tile-offer small { font: 400 5cqw var(--body); }
.production-tally { position: absolute; left: 0; bottom: -3px; z-index: 10; display: flex; align-items: center; gap: 12px; background: #161c19; padding: 8px 16px 8px 0; }
.production-tally > strong { font: 600 66px/.9 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; min-width: 84px; }
.production-tally > span { font-size: 10px; line-height: 1.5; color: #b6c4b6; }
.production-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #3b463d; padding-top: 22px; }
.production-phases { display: flex; gap: 28px; font-size: 11px; color: #acb7a9; }
.production-phases b { color: #f9faf7; margin-left: 9px; font-weight: 500; }
.production-phases .is-active, .production-phases .is-active b { color: var(--accent); }
.production-example { color: #a5b0a5; font-size: 10px; }
body[data-motion] .campaign-section { background: #edf2f5; }
body[data-motion] .demo-note { display: none; }
body[data-motion].motion-ready .production-story { height: 310svh; }
body[data-motion].motion-ready .production-pin { position: sticky; top: var(--motion-header-height); height: calc(100svh - var(--motion-header-height)); min-height: 640px; }
body[data-motion].motion-ready .production-content { height: 100%; display: flex; flex-direction: column; }
body[data-motion].motion-ready .production-stage { flex: 1; min-height: 280px; max-height: 460px; width: 100%; }
body[data-motion].motion-ready .production-bottom { margin-top: auto; }
body[data-motion].motion-ready .output-tile { left: 50%; top: 50%; }
body[data-motion].motion-ready .hero-image { transform: translate3d(0, var(--hero-image-y, 0px), 0) scale(1.23); }
body[data-motion].motion-ready .hero-brand { transform: translate3d(0, var(--hero-brand-y, 0px), 0); }
body[data-motion].motion-ready .hero-pitch { transform: translate3d(0, var(--hero-pitch-y, 0px), 0); }
body[data-motion].motion-ready .motion-creative { transform: translate3d(0, var(--creative-y, 0px), 0) rotate(var(--creative-angle, 0deg)); }
@media (min-width: 1600px) { .production-heading h2 { font-size: 112px; } }
@media (max-width: 1100px) {
    .production-heading h2 { font-size: 76px; }
    .source-sheet { left: 2%; width: 265px; }
    .creative-engine { left: 68%; width: 260px; }
    .production-example { max-width: 190px; text-align: right; }
}
@media (max-width: 720px) {
    .production-content { padding-top: 32px; padding-bottom: 22px; }
    .production-heading h2 { font-size: 56px; }
    .production-heading .eyebrow { font-size: 9px; margin-bottom: 18px; }
    .production-stage { height: 430px; margin: 22px 0; }
    .source-sheet { left: 50%; top: 25%; width: 260px; transform: translate(-50%, -50%); }
    .source-row { height: 27px; }
    .creative-engine { left: 50%; top: 75%; width: 240px; height: 190px; }
    .engine-drawing { height: 116px; }
    .engine-label { font-size: 9px; }
    .engine-meter { margin-top: 10px; }
    .production-rail { left: 50%; right: auto; top: 20%; bottom: 20%; width: 1px; height: auto; }
    .production-rail span:last-child { right: auto; bottom: 0; top: auto; }
    .output-tile { width: 34%; padding: 6px; border-width: 2px; }
    .output-portrait { width: 29%; }
    .output-wide { width: 43%; }
    .output-tile img { width: calc(100% + 12px); margin-left: -6px; }
    .production-tally > strong { font-size: 52px; min-width: 66px; }
    .production-tally > span { font-size: 8px; }
    .production-bottom { display: block; padding-top: 18px; }
    .production-phases { justify-content: space-between; gap: 8px; }
    .production-phases b { margin-left: 5px; }
    .production-example { display: block; margin-top: 14px; max-width: none; text-align: left; font-size: 9px; }
    body[data-motion].motion-ready .production-story { height: 290svh; }
    body[data-motion].motion-ready .production-pin { min-height: 650px; }
    body[data-motion].motion-ready .production-stage { min-height: 325px; }
}
@media (min-width: 721px) and (max-width: 900px) { .production-heading h2 { font-size: 66px; } }
@media (max-width: 850px) { .production-story { --motion-header-height: 73px; } }
@media (max-width: 600px) {
    .production-story { --motion-header-height: 69px; }
    .production-title-break { display: block; }
    .production-heading h2 { font-size: 52px; }
}
@media (max-width: 390px) {
    .production-heading h2 { font-size: 48px; }
    .production-heading .eyebrow { font-size: 8px; }
}
@media (max-height: 760px) and (min-width: 721px) {
    .production-content { padding-top: 24px; padding-bottom: 18px; }
    .production-heading h2 { font-size: 64px; }
    .production-heading .eyebrow { margin-bottom: 12px; }
    body[data-motion].motion-ready .production-pin { min-height: 570px; }
    body[data-motion].motion-ready .production-stage { min-height: 260px; margin: 16px 0; }
}
@media (max-height: 800px) and (max-width: 720px) {
    .production-content { padding-top: 20px; padding-bottom: 16px; }
    .production-heading h2 { font-size: 44px; }
    body[data-motion].motion-ready .production-pin { min-height: 0; }
    body[data-motion].motion-ready .production-stage { min-height: 240px; margin: 12px 0; }
    .source-sheet { width: 220px; padding: 10px; top: 29%; }
    .source-file { padding-bottom: 8px; }
    .source-row { height: 22px; font-size: 9px; }
    .source-row strong { font-size: 9px; }
    .source-row:nth-last-child(2), .source-row:nth-last-child(3), .source-total { display: none; }
    .creative-engine { height: 120px; width: 180px; top: 80%; }
    .engine-drawing { height: 65px; }
    .engine-label { padding-top: 9px; }
    .engine-fields { font-size: 7px; }
    .engine-meter { margin-top: 8px; }
    .production-example { margin-top: 9px; }
    .production-bottom { padding-top: 12px; }
}
@media (max-width: 360px) { .production-heading h2 { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) {
    body[data-motion] .hero-image, body[data-motion] .hero-brand, body[data-motion] .hero-pitch, body[data-motion] .motion-creative { transform: none !important; }
}
@media print {
    body[data-motion].motion-ready .production-story { height: auto; }
    body[data-motion].motion-ready .production-pin { position: static; height: auto; min-height: 0; }
    .source-sheet, .creative-engine, .production-rail { display: none; }
    .production-output, .output-tile, .production-tally { opacity: 1 !important; }
    body[data-motion].motion-ready .output-tile { left: calc(50% + var(--tile-x) * .9%); top: calc(50% + var(--tile-y) * .75%); transform: translate(-50%, -50%) rotate(var(--tile-angle)) !important; }
    .hero-image, .hero-brand, .hero-pitch, .motion-creative { transform: none !important; }
}