:root {
  --ink: #11100e;
  --ink-soft: #181714;
  --paper: #eeeae1;
  --paper-deep: #d9d1c3;
  --muted: #a8a196;
  --muted-dark: #6c665d;
  --line: rgba(238, 234, 225, 0.16);
  --line-dark: rgba(17, 16, 14, 0.18);
  --ember: #ef6d37;
  --sand: #cfa86a;
  --display: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img, svg { display: block; }
h1, h2, h3, p, figure, blockquote { margin-top: 0; }
h1, h2, h3, blockquote { text-wrap: balance; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 0.95; letter-spacing: -0.055em; }
h1 em, h2 em { color: var(--sand); font-style: italic; font-weight: 400; }
h2 { font-size: clamp(3rem, 5.3vw, 5rem); }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid #ff9567; outline-offset: 5px; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 16px; background: var(--paper); color: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.section-shell { width: min(var(--shell), calc(100% - 64px)); margin-inline: auto; }

.site-header { position: fixed; z-index: 30; inset: 0 0 auto; height: 82px; display: flex; align-items: center; justify-content: space-between; padding-inline: max(32px, calc((100vw - var(--shell)) / 2)); border-bottom: 1px solid transparent; transition: background 0.25s, border-color 0.25s; }
.site-header.scrolled { background: rgba(17, 16, 14, 0.93); border-color: var(--line); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.04em; }
.brand small { margin-left: 3px; color: #827c73; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.brand-mark { width: 20px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.brand-mark circle { fill: var(--ember); stroke: none; }
.site-header nav { display: flex; align-items: center; gap: 30px; color: #c9c3b9; font-size: 12px; }
.site-header nav > a:not(.nav-cta):hover { color: white; }
.nav-cta { padding: 9px 14px; border: 1px solid #6c675f; color: var(--paper); }
.nav-cta:hover { border-color: var(--ember); }
.nav-toggle { display: none; }

.button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 190px; gap: 22px; padding: 14px 17px; border: 1px solid var(--ember); background: var(--ember); color: white; font-size: 12px; font-weight: 700; transition: transform 0.2s, background 0.2s; }
.button:hover { transform: translateY(-2px); background: #ff7d45; }
.button-dark { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.button-dark:hover { background: #292621; }
.text-link { padding: 12px 0; border-bottom: 1px solid #716b62; color: #e2ddd4; font-size: 12px; font-weight: 700; }
.text-link span { margin-left: 8px; color: var(--ember); }
.stage-pill { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-bottom: 24px; color: #c8c2b8; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.stage-pill span { width: 7px; height: 7px; border: 1px solid var(--ember); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 5px var(--ember); }
.stage-pill.light { color: #4f4a43; }
.stage-pill.light span { box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 5px var(--ember); }
.eyebrow { color: #aaa399; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.section-intro { max-width: 870px; }
.section-intro > p:last-child { max-width: 610px; margin: 28px 0 0; color: var(--muted); font-size: 16px; }
.section-intro.compact { max-width: 940px; }
.section-intro.horizontal { display: flex; align-items: end; justify-content: space-between; max-width: none; gap: 80px; }
.section-intro.horizontal > p { max-width: 420px; margin: 0 0 7px; }

.hero { min-height: 800px; height: min(920px, 100vh); display: grid; grid-template-columns: 0.93fr 1.07fr; align-items: center; gap: 70px; padding-top: 104px; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 660px; margin-bottom: 27px; font-size: clamp(4.7rem, 7vw, 7.2rem); }
.hero-summary { max-width: 600px; margin-bottom: 16px; color: #bcb6ac; font-size: 17px; }
.hero-summary strong { color: var(--paper); font-weight: 600; }
.audience-line { max-width: 570px; margin-bottom: 32px; color: #888278; font-size: 12px; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.hero-note { display: flex; gap: 28px; margin-top: 44px; color: #aaa399; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-note span + span { position: relative; }
.hero-note span + span::before { content: ""; position: absolute; left: -16px; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: var(--ember); }

.concept-visual { position: relative; height: 620px; margin: 0; border: 1px solid var(--line); background: linear-gradient(145deg, #171612, #0c0b0a); overflow: hidden; isolation: isolate; }
.concept-visual::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.25; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 82px 82px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.concept-label { position: absolute; z-index: 5; inset: 20px 22px auto; display: flex; justify-content: space-between; color: #aaa399; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.concept-steps { position: absolute; z-index: 5; top: 51px; left: 22px; display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; color: #c3bdb3; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.concept-steps li { display: flex; gap: 5px; }
.concept-steps span { color: var(--ember); }
.postcard-demo { position: absolute; z-index: 3; left: 28px; bottom: 85px; width: 350px; height: 228px; padding: 12px; background: #e5ded1; color: var(--ink); box-shadow: 0 32px 70px rgba(0,0,0,.6); transform: rotate(-6deg); }
.postcard-face { position: relative; height: 100%; border: 1px solid rgba(17,16,14,.22); padding: 14px; }
.postcard-edition { position: absolute; z-index: 2; top: 9px; left: 11px; color: rgba(255,255,255,.85); font-size: 6px; letter-spacing: .14em; text-transform: uppercase; }
.landscape { position: relative; height: 145px; overflow: hidden; background: linear-gradient(#56302a, #bf6845 52%, #d9a666 53%, #4a3729); }
.sun { position: absolute; right: 42px; top: 25px; width: 45px; height: 45px; border-radius: 50%; background: #ffdca5; box-shadow: 0 0 25px #f5c37e; }
.horizon { position: absolute; inset: auto 0 0; height: 48px; background: #1c1915; clip-path: polygon(0 70%, 15% 42%, 28% 61%, 42% 20%, 54% 67%, 68% 42%, 79% 72%, 91% 34%, 100% 58%, 100% 100%, 0 100%); }
.dome { position: absolute; z-index: 2; bottom: 14px; border-radius: 100% 100% 0 0; background: #ca945c; }
.dome-a { left: 53px; width: 70px; height: 42px; }
.dome-b { left: 128px; width: 39px; height: 25px; }
.postcard-face > strong { display: block; margin-top: 10px; font-size: 10px; letter-spacing: .18em; }
.postcard-face > small { display: block; color: #6c6258; font-size: 7px; letter-spacing: .05em; }
.qr-code { position: absolute; right: 14px; bottom: 13px; width: 33px; height: 33px; border: 4px solid #eee7db; outline: 1px solid #171511; background: repeating-linear-gradient(45deg, #171511 0 3px, #e6ded1 3px 6px); }
.phone-demo { position: absolute; z-index: 2; right: 30px; top: 78px; width: 235px; height: 465px; padding: 9px; border: 1px solid #58534a; border-radius: 34px; background: #1c1a17; box-shadow: 0 35px 80px #000; transform: rotate(4deg); }
.phone-speaker { position: absolute; z-index: 3; top: 16px; left: 50%; width: 70px; height: 16px; border-radius: 9px; background: #181612; transform: translateX(-50%); }
.story-screen { height: 100%; overflow: hidden; border-radius: 27px; background: #e3ded4; color: var(--ink); }
.browser-bar { display: block; height: 42px; padding-top: 17px; background: #25221e; color: #8f8980; font-size: 7px; text-align: center; letter-spacing: .1em; }
.story-art { position: relative; height: 250px; overflow: hidden; background: linear-gradient(#14202b 0 57%, #6d4130 58%, #171512); }
.story-moon { position: absolute; top: 45px; right: 35px; width: 43px; height: 43px; border-radius: 50%; background: #e9c68b; box-shadow: 0 0 30px #e09857; }
.story-arch { position: absolute; bottom: 5px; left: 45px; width: 100px; height: 105px; border: 17px solid #c38c55; border-bottom: 0; border-radius: 65px 65px 0 0; }
.sound-wave { position: absolute; bottom: 60px; left: 20px; width: 195px; height: 1px; background: var(--ember); box-shadow: 0 0 10px var(--ember); transform: rotate(-12deg); }
.story-copy { padding: 20px; }
.story-copy small { color: #7c756b; font-size: 7px; letter-spacing: .15em; }
.story-copy strong { display: block; margin: 7px 0 15px; font: 400 19px/1.05 var(--display); }
.story-copy > span { display: flex; align-items: center; gap: 8px; color: #777066; font-size: 7px; }
.story-copy > span i { width: 80px; height: 1px; background: linear-gradient(to right, var(--ember) 35%, #aaa 35%); }
.scan-path { position: absolute; z-index: 4; left: 343px; bottom: 236px; width: 128px; transform: rotate(-7deg); }
.scan-path span { display: block; height: 1px; background: linear-gradient(90deg, var(--ember), transparent); box-shadow: 0 0 9px var(--ember); }
.scan-path small { display: block; margin-top: 7px; color: var(--ember); font-size: 7px; letter-spacing: .13em; text-transform: uppercase; }
.concept-visual figcaption { position: absolute; right: 22px; bottom: 22px; max-width: 270px; color: #817b72; font-size: 9px; line-height: 1.5; text-align: right; text-transform: uppercase; letter-spacing: .09em; }

.signal-bar { border-block: 1px solid var(--line); }
.signal-bar > div { min-height: 66px; display: flex; align-items: center; justify-content: space-between; color: #c4beb4; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.signal-bar i { color: var(--ember); font-style: normal; }
.journey { padding-block: 150px 130px; }
.journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 75px 0 0; padding: 0; list-style: none; background: #3a3731; border: 1px solid #3a3731; }
.journey-grid li { background: var(--ink); }
.journey-grid li > div:last-child { min-height: 220px; padding: 28px 30px 34px; }
.journey-grid small { color: var(--ember); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.journey-grid h3 { margin: 18px 0 12px; font: 400 26px/1.1 var(--display); }
.journey-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.journey-art { position: relative; height: 260px; overflow: hidden; background: #171612; border-bottom: 1px solid #3a3731; }
.mini-card { position: absolute; top: 75px; width: 120px; height: 82px; border: 5px solid #ded6c9; background: linear-gradient(150deg, #4a2923 30%, #c56840 31% 65%, #2a211b 66%); box-shadow: 0 20px 30px #080807; }
.card-one { left: 34px; transform: rotate(-13deg); }
.card-two { left: calc(50% - 60px); z-index: 2; top: 58px; transform: rotate(-2deg); }
.card-three { right: 34px; transform: rotate(10deg); }
.scan-card { position: absolute; left: 40px; bottom: 54px; width: 160px; height: 105px; background: #ded6c9; transform: rotate(-7deg); }
.scan-card i { position: absolute; right: 10px; bottom: 10px; width: 28px; height: 28px; border: 4px solid #ded6c9; background: repeating-linear-gradient(45deg, #171511 0 3px, #e6ded1 3px 6px); }
.scan-phone { position: absolute; z-index: 2; right: 47px; top: 32px; width: 93px; height: 180px; border: 5px solid #393630; border-radius: 16px; background: rgba(10,10,9,.7); transform: rotate(5deg); }
.scan-art b { position: absolute; z-index: 3; top: 125px; left: 45px; right: 45px; height: 1px; background: var(--ember); box-shadow: 0 0 14px var(--ember); }
.memory-frame { position: absolute; inset: 30px 45px; overflow: hidden; border: 1px solid #5b554c; background: linear-gradient(#192531 0 55%, #5f3b2f 56%, #161410); }
.memory-frame i { position: absolute; top: 38px; right: 36px; width: 45px; height: 45px; border-radius: 50%; background: #e5bb78; box-shadow: 0 0 25px #d17b48; }
.memory-frame b { position: absolute; bottom: 0; left: 45px; width: 100px; height: 90px; border: 15px solid #bf8753; border-bottom: 0; border-radius: 60px 60px 0 0; }
.audio-lines { position: absolute; z-index: 2; bottom: 42px; left: 68px; right: 68px; height: 15px; background: repeating-linear-gradient(90deg, var(--ember) 0 2px, transparent 2px 7px); clip-path: polygon(0 45%,10% 15%,20% 70%,30% 20%,40% 80%,50% 0,60% 65%,70% 23%,80% 77%,90% 35%,100% 50%,100% 60%,0 60%); }

.opportunity { padding-block: 130px 150px; display: grid; grid-template-columns: .25fr .75fr; gap: 40px; border-top: 1px solid var(--line); }
.opportunity-statement p { max-width: 700px; margin: 35px 0 65px; color: var(--muted); font-size: 17px; }
.opportunity-pair { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.opportunity-pair article { min-height: 240px; padding: 30px; }
.opportunity-pair article + article { border-left: 1px solid var(--line); }
.opportunity-pair small { color: var(--ember); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.opportunity-pair strong { display: block; max-width: 310px; margin: 35px 0 15px; font: 400 26px/1.1 var(--display); }
.opportunity-pair p { max-width: 280px; color: var(--muted); font-size: 12px; }

.system { padding-block: 140px; background: var(--paper); color: var(--ink); }
.system .eyebrow, .system .section-intro > p:last-child { color: var(--muted-dark); }
.system h2 em { color: #8b6248; }
.system-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; margin-top: 85px; }
.system-flow > i { color: #9c9285; font-style: normal; }
.system-flow article { min-height: 280px; padding: 25px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.system-flow article > span { color: #8b6248; font-size: 9px; letter-spacing: .15em; }
.system-flow svg { width: 70px; margin: 30px 0; fill: none; stroke: #342f29; stroke-width: 1.2; }
.system-flow h3 { margin-bottom: 10px; font: 400 20px var(--display); }
.system-flow p { color: var(--muted-dark); font-size: 12px; }

.story-ingredients { padding-block: 150px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.ingredients-visual { position: relative; min-height: 610px; border: 1px solid var(--line); background: #151411; overflow: hidden; }
.ingredients-visual::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(239,109,55,.12), transparent 38%); }
.vertical-caption { position: absolute; left: 23px; top: 25px; color: #756f66; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; writing-mode: vertical-rl; }
.layer { position: absolute; left: 50%; width: 330px; height: 205px; border: 1px solid #575147; transform: translateX(-50%) rotate(-5deg); color: #8f887e; font-size: 8px; padding: 12px; letter-spacing: .13em; text-transform: uppercase; }
.layer b { float: right; color: #aaa399; font-weight: 500; }
.layer-one { top: 105px; }
.layer-two { top: 190px; transform: translateX(-50%) rotate(4deg); }
.layer-three { top: 276px; transform: translateX(-50%) rotate(-2deg); }
.layer-core { position: absolute; z-index: 3; left: 50%; top: 50%; width: 180px; height: 180px; display: grid; place-content: center; border-radius: 50%; border: 1px solid rgba(239,109,55,.7); background: rgba(17,16,14,.85); box-shadow: 0 0 60px rgba(239,109,55,.12); text-align: center; transform: translate(-50%, -50%); }
.layer-core i { position: absolute; top: 25px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); transform: translateX(-50%); }
.layer-core strong { font: 400 26px var(--display); letter-spacing: .08em; }
.layer-core small { color: #857f75; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.ingredients-copy > p:not(.eyebrow):not(.future-note) { max-width: 560px; margin: 30px 0 38px; color: var(--muted); }
.ingredients-copy ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ingredients-copy li { display: flex; align-items: center; gap: 24px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.ingredients-copy li > span { color: var(--ember); font-size: 9px; }
.ingredients-copy li strong, .ingredients-copy li small { display: block; }
.ingredients-copy li strong { font-size: 13px; font-weight: 600; }
.ingredients-copy li small { margin-top: 2px; color: #8f897f; font-size: 11px; }
.future-note { padding: 18px; border-left: 2px solid var(--ember); background: #181714; color: #aaa399; font-size: 11px; }
.future-note strong { color: var(--paper); }

.partners { padding-block: 140px; border-block: 1px solid var(--line); background: #151411; }
.partner-list { margin-top: 75px; border-top: 1px solid var(--line); }
.partner-list article { display: grid; grid-template-columns: 70px .65fr 1fr .7fr; gap: 30px; align-items: center; min-height: 128px; border-bottom: 1px solid var(--line); }
.partner-list article > span { color: var(--ember); font-size: 9px; }
.partner-list h3 { margin: 0; font: 400 24px var(--display); }
.partner-list p { margin: 0; color: var(--muted); font-size: 12px; }
.partner-list small { color: #777168; font-size: 9px; letter-spacing: .1em; text-align: right; text-transform: uppercase; }

.pilot { margin-block: 140px; padding: 70px; background: var(--paper); color: var(--ink); display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.pilot .eyebrow { color: var(--muted-dark); }
.pilot h2 em { color: #8b6248; }
.pilot-heading > p:not(.stage-pill):not(.eyebrow) { max-width: 500px; margin: 30px 0; color: var(--muted-dark); }
.pilot-details { border-top: 1px solid var(--line-dark); }
.pilot-details article { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line-dark); }
.pilot-details small { color: #8b6248; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pilot-details p { margin: 0; color: #59534b; font-size: 12px; }
.pilot-scope { grid-column: 1 / -1; display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 20px; padding-top: 35px; border-top: 1px solid var(--line-dark); }
.pilot-scope > p { align-self: center; margin: 0; color: #504a43; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pilot-scope > p small { display: block; margin-top: 5px; color: #8d857a; font-size: 8px; font-weight: 500; }
.pilot-scope > div { display: flex; align-items: center; gap: 12px; }
.pilot-scope strong { font: 400 27px var(--display); }
.pilot-scope span { color: #777066; font-size: 8px; line-height: 1.3; text-transform: uppercase; letter-spacing: .07em; }

.roadmap { padding-block: 30px 150px; }
.roadmap-track { display: grid; grid-template-columns: repeat(3, 1fr); margin: 75px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.roadmap-track li { position: relative; min-height: 280px; padding: 38px 32px; border-right: 1px solid var(--line); }
.roadmap-track li:first-child { border-left: 1px solid var(--line); }
.roadmap-track li::before { content: ""; position: absolute; top: -4px; left: 28px; width: 7px; height: 7px; border-radius: 50%; background: #5f5a52; }
.roadmap-track li.current::before { background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.roadmap-track li > span { color: #777168; font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.roadmap-track small { display: block; margin-top: 28px; color: var(--ember); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.roadmap-track h3 { margin: 16px 0; font: 400 26px var(--display); }
.roadmap-track p { color: var(--muted); font-size: 12px; }

.founder { padding-block: 140px; display: grid; grid-template-columns: .32fr 1fr; gap: 70px; border-top: 1px solid var(--line); }
.founder-stamp { width: 175px; height: 220px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid #5c564c; transform: rotate(-3deg); }
.founder-stamp span { font: italic 64px var(--display); color: var(--sand); }
.founder-stamp small { color: #777168; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.founder-copy h2 { margin-bottom: 8px; }
.founder-role { color: var(--ember); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.founder blockquote { max-width: 850px; margin: 45px 0 35px; font: italic 400 clamp(2rem, 3.5vw, 3.3rem)/1.06 var(--display); }
.founder-copy > p:not(.eyebrow):not(.founder-role):not(.disclosure) { max-width: 710px; color: var(--muted); }
.disclosure { max-width: 780px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); color: #8d877d; font-size: 11px; }
.disclosure strong { color: #c5bfb5; }

.closing { padding-block: 140px; background: #191713; text-align: center; }
.closing .section-shell { display: flex; flex-direction: column; align-items: center; }
.closing h2 { font-size: clamp(3.5rem, 6vw, 6rem); }
.closing > div > p:not(.stage-pill) { max-width: 600px; margin: 30px 0; color: var(--muted); }
.site-footer { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 50px; padding-block: 55px 28px; color: #8f897f; font-size: 11px; }
.site-footer > div > p { margin: 13px 0 0; }
.site-footer small { color: #69645c; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.site-footer a:hover { color: var(--paper); }
.site-footer p span { color: #69645c; }
.copyright { grid-column: 1 / -1; margin: 22px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: #68635b; font-size: 9px; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 35px; }
  .hero h1 { font-size: clamp(4.2rem, 7.7vw, 6rem); }
  .concept-visual { height: 570px; }
  .postcard-demo { left: 20px; width: 290px; height: 195px; }
  .landscape { height: 120px; }
  .phone-demo { right: 18px; width: 205px; height: 410px; }
  .story-art { height: 215px; }
  .scan-path { left: 280px; bottom: 215px; width: 95px; }
  .story-ingredients { gap: 55px; }
  .partner-list article { grid-template-columns: 50px .65fr 1fr; }
  .partner-list small { display: none; }
  .pilot { padding: 50px; gap: 50px; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 72px; }
  .section-shell { width: min(100% - 40px, var(--shell)); }
  .site-header { height: 70px; padding-inline: 20px; background: rgba(17,16,14,.93); border-color: var(--line); }
  .brand small { display: none; }
  .nav-toggle { align-items: center; gap: 9px; border: 0; background: none; color: var(--paper); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
  html.js .nav-toggle { display: flex; }
  .nav-toggle i, .nav-toggle i::before { display: block; width: 18px; height: 1px; background: currentColor; content: ""; transition: transform .2s; }
  .nav-toggle i::before { transform: translateY(5px); }
  .nav-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i::before { transform: rotate(-90deg); }
  .site-header nav { position: absolute; inset: 70px 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 20px 24px; background: rgba(17,16,14,.98); border-bottom: 1px solid var(--line); }
  html.js .site-header nav { display: none; }
  html.js .site-header nav.open { display: flex; }
  .site-header nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .site-header .nav-cta { margin-top: 12px; padding-inline: 14px; border: 1px solid #6c675f; text-align: center; }
  .hero { height: auto; min-height: 0; grid-template-columns: 1fr; gap: 50px; padding-top: 130px; padding-bottom: 70px; }
  .hero-copy { max-width: 680px; }
  .hero h1 { font-size: clamp(4.5rem, 13vw, 7rem); }
  .concept-visual { width: 100%; max-width: 650px; height: 590px; justify-self: center; }
  .postcard-demo { width: 330px; height: 220px; }
  .landscape { height: 140px; }
  .phone-demo { width: 225px; height: 445px; }
  .story-art { height: 235px; }
  .scan-path { left: 320px; }
  .journey, .story-ingredients, .partners { padding-block: 100px; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-grid li { display: grid; grid-template-columns: .9fr 1.1fr; }
  .journey-art { height: 280px; border-right: 1px solid #3a3731; border-bottom: 0; }
  .opportunity { padding-block: 100px; grid-template-columns: 1fr; }
  .opportunity-pair { grid-column: 1; }
  .system { padding-block: 100px; }
  .system-flow { grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-dark); }
  .system-flow > i { display: none; }
  .system-flow article { background: var(--paper); }
  .story-ingredients { grid-template-columns: 1fr; }
  .ingredients-visual { min-height: 550px; }
  .section-intro.horizontal { align-items: start; flex-direction: column; gap: 24px; }
  .partner-list article { grid-template-columns: 45px .6fr 1fr; }
  .pilot { width: calc(100% - 40px); margin-block: 100px; padding: 45px; grid-template-columns: 1fr; }
  .pilot-scope { grid-column: 1; grid-template-columns: repeat(4, 1fr); }
  .pilot-scope > p { grid-column: 1 / -1; }
  .pilot-scope > div { display: block; }
  .pilot-scope span { display: block; margin-top: 5px; }
  .roadmap { padding-bottom: 100px; }
  .roadmap-track li { padding-inline: 22px; }
  .founder { padding-block: 100px; grid-template-columns: .25fr 1fr; gap: 45px; }
  .founder-stamp { width: 135px; height: 180px; }
  .site-footer { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (max-width: 560px) {
  .section-shell { width: min(100% - 28px, var(--shell)); }
  h2 { font-size: clamp(2.75rem, 13vw, 4rem); }
  .eyebrow { line-height: 1.5; }
  .hero { padding-top: 112px; gap: 42px; }
  .hero h1 { font-size: clamp(3.75rem, 18vw, 5rem); }
  .hero-summary { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { width: fit-content; }
  .hero-note { flex-direction: column; gap: 8px; margin-top: 30px; }
  .hero-note span + span::before { display: none; }
  .concept-visual { height: 490px; overflow: hidden; }
  .concept-label { inset: 14px 15px auto; }
  .concept-steps { top: 42px; left: 15px; gap: 10px; font-size: 7px; }
  .postcard-demo { left: -25px; bottom: 76px; width: 245px; height: 165px; padding: 8px; }
  .postcard-face { padding: 9px; }
  .landscape { height: 100px; }
  .postcard-edition { font-size: 5px; }
  .postcard-face > strong { margin-top: 6px; }
  .qr-code { width: 25px; height: 25px; bottom: 8px; }
  .phone-demo { right: -7px; top: 52px; width: 175px; height: 350px; border-radius: 25px; }
  .story-screen { border-radius: 19px; }
  .story-art { height: 176px; }
  .story-arch { left: 35px; width: 75px; height: 80px; border-width: 12px; }
  .story-moon { width: 34px; height: 34px; }
  .story-copy { padding: 13px; }
  .story-copy strong { font-size: 15px; }
  .scan-path { left: 186px; bottom: 188px; width: 80px; }
  .concept-visual figcaption { right: 15px; bottom: 14px; max-width: 255px; font-size: 7px; }
  .signal-bar > div { min-height: 58px; gap: 8px; overflow: hidden; }
  .signal-bar span { white-space: nowrap; font-size: 7px; }
  .signal-bar i { font-size: 8px; }
  .journey { padding-block: 85px; }
  .journey-grid { margin-top: 50px; }
  .journey-grid li { display: block; }
  .journey-art { height: 220px; border-right: 0; border-bottom: 1px solid #3a3731; }
  .journey-grid li > div:last-child { min-height: 0; padding: 25px 22px 30px; }
  .mini-card { width: 95px; height: 66px; }
  .card-one { left: 25px; }
  .card-two { left: calc(50% - 47px); }
  .card-three { right: 25px; }
  .scan-card { left: 25px; }
  .scan-phone { right: 30px; }
  .memory-frame { inset: 25px 35px; }
  .opportunity { padding-block: 85px; }
  .opportunity-statement p { margin-bottom: 45px; }
  .opportunity-pair { grid-template-columns: 1fr; }
  .opportunity-pair article { min-height: 200px; padding: 25px; }
  .opportunity-pair article + article { border-left: 0; border-top: 1px solid var(--line); }
  .system { padding-block: 85px; }
  .system-flow { grid-template-columns: 1fr; margin-top: 55px; }
  .system-flow article { min-height: 220px; }
  .system-flow svg { margin: 20px 0; }
  .story-ingredients { padding-block: 85px; }
  .ingredients-visual { min-height: 430px; }
  .layer { width: 240px; height: 155px; }
  .layer-one { top: 75px; }
  .layer-two { top: 140px; }
  .layer-three { top: 205px; }
  .layer-core { width: 140px; height: 140px; }
  .partners { padding-block: 85px; }
  .partner-list { margin-top: 50px; }
  .partner-list article { grid-template-columns: 28px 1fr; gap: 10px; padding-block: 24px; }
  .partner-list p { grid-column: 2; }
  .pilot { width: calc(100% - 28px); margin-block: 85px; padding: 32px 20px; gap: 45px; }
  .pilot-details article { grid-template-columns: 1fr; gap: 8px; }
  .pilot-scope { grid-template-columns: 1fr 1fr; gap: 25px 15px; }
  .pilot-scope > p { grid-column: 1 / -1; }
  .roadmap { padding-block: 0 85px; }
  .roadmap-track { grid-template-columns: 1fr; border-left: 1px solid var(--line); border-top: 0; }
  .roadmap-track li { min-height: 0; padding: 28px 25px; border: 0; border-bottom: 1px solid var(--line); }
  .roadmap-track li:first-child { border-left: 0; }
  .roadmap-track li::before { top: 30px; left: -4px; }
  .roadmap-track small { margin-top: 18px; }
  .founder { padding-block: 85px; grid-template-columns: 1fr; }
  .founder-stamp { width: 110px; height: 140px; padding: 16px; }
  .founder-stamp span { font-size: 45px; }
  .founder blockquote { margin-block: 35px 28px; }
  .closing { padding-block: 90px; }
  .closing h2 { font-size: clamp(3rem, 14vw, 4.5rem); }
  .site-footer { grid-template-columns: 1fr; gap: 30px; padding-top: 45px; }
  .copyright { grid-column: 1; }
}

@media (max-width: 350px) {
  .hero h1 { font-size: 3.45rem; }
  .concept-visual { height: 445px; }
  .postcard-demo { width: 220px; height: 150px; }
  .landscape { height: 88px; }
  .phone-demo { width: 157px; height: 320px; }
  .story-art { height: 160px; }
  .scan-path { left: 160px; bottom: 172px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Cinematic opening — final state is the default for no-JavaScript resilience. */
.cinematic-hero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 820px;
  height: min(940px, 100svh);
  display: block;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #0d0c0a;
}

.cinema-atmosphere { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 69% 45%, #2d2018 0, #16120f 30%, #0d0c0a 68%); }
.cinema-atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(238,234,225,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(238,234,225,.035) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(circle at 70% 48%, black, transparent 62%); }
.cinema-atmosphere span { position: absolute; border-radius: 50%; background: #d4a15e; filter: blur(1px); opacity: .22; }
.cinema-atmosphere span:nth-child(1) { width: 3px; height: 3px; left: 76%; top: 22%; }
.cinema-atmosphere span:nth-child(2) { width: 2px; height: 2px; left: 62%; top: 67%; }
.cinema-atmosphere span:nth-child(3) { width: 4px; height: 4px; left: 88%; top: 54%; }

.cinematic-hero .hero-copy { position: absolute; z-index: 10; top: 50%; left: 50%; pointer-events: none; transform: translate(-50%, -47%); }
.cinematic-hero .hero-copy > * { width: min(520px, 44%); pointer-events: auto; }
.cinematic-hero .hero-copy h1 { max-width: 700px; width: min(650px, 52%); margin-bottom: 18px; font-size: clamp(5.1rem, 7vw, 7.6rem); text-shadow: 0 4px 30px rgba(0,0,0,.55); }
.hero-tagline { margin: 0 0 18px; color: #e5ded3; font: italic 400 19px var(--display); letter-spacing: .01em; }
.cinematic-hero .hero-summary { max-width: 510px; margin-bottom: 26px; color: #aaa399; font-size: 14px; }
.cinematic-hero .hero-summary strong { color: #d9d3c9; }
.cinematic-hero .hero-note { margin-top: 31px; }

.cinema-stage { --pointer-x: 0px; --pointer-y: 0px; position: absolute; z-index: 2; inset: 78px max(28px, calc((100vw - var(--shell))/2)) 38px 41%; margin: 0; perspective: 1200px; transform: translate(var(--pointer-x), var(--pointer-y)); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.cinema-label { position: absolute; z-index: 9; top: 0; right: 0; color: #918a80; font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.cinema-postcard { position: absolute; z-index: 4; top: 50%; left: 52%; width: min(510px, 42vw); aspect-ratio: 1.53; padding: 13px; color: var(--ink); background: #ded5c7; box-shadow: 0 45px 90px rgba(0,0,0,.72), inset 0 0 35px rgba(97,77,55,.13); transform: translate(-50%, -37%) rotateX(58deg) rotateZ(-5deg); transform-style: preserve-3d; }
.paper-edge { position: absolute; inset: 3px; border: 1px solid rgba(74,59,43,.22); pointer-events: none; }
.postcard-scene { position: relative; height: 79%; overflow: hidden; background: #211d1c; transform-style: preserve-3d; }
.scene-sky { position: absolute; inset: 0; background: linear-gradient(#171b23, #5c3730 58%, #c27c4d); }
.scene-moon { position: absolute; z-index: 1; top: 17%; right: 18%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: #e7c188; box-shadow: 0 0 18px rgba(231,193,136,.7); }
.scene-water { position: absolute; z-index: 1; inset: 72% 0 0; background: repeating-linear-gradient(175deg, #34241e 0 4px, #6d4430 5px 6px); }
.scene-architecture { position: absolute; z-index: 3; bottom: 12%; border: solid #bd8858; border-bottom: 0; border-radius: 90px 90px 0 0; filter: drop-shadow(0 -4px 7px rgba(231,164,97,.25)); }
.architecture-one { left: 13%; width: 31%; height: 54%; border-width: 18px; transform: translateZ(20px); }
.architecture-two { left: 43%; width: 20%; height: 35%; border-width: 12px; transform: translateZ(34px); }
.architecture-three { right: 8%; width: 16%; height: 26%; border-width: 9px; transform: translateZ(46px); }
.projection-pattern { position: absolute; z-index: 4; opacity: .9; mix-blend-mode: screen; }
.pattern-one { left: 17%; bottom: 16%; width: 25%; height: 39%; background: repeating-linear-gradient(42deg, transparent 0 7px, rgba(239,109,55,.68) 8px 10px); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.pattern-two { left: 47%; bottom: 15%; width: 13%; height: 23%; border: 3px double #e5b56f; border-radius: 70px 70px 0 0; }
.celebration-points { position: absolute; z-index: 5; inset: 7% 4% 25%; opacity: .75; background-image: radial-gradient(circle, #f0c783 0 1px, transparent 2px); background-size: 31px 27px; mask-image: linear-gradient(110deg, transparent 5%, black 48%, transparent 85%); }
.postcard-meta { display: flex; justify-content: space-between; align-items: end; padding: 12px 4px 0; }
.postcard-meta strong { font-size: 11px; letter-spacing: .18em; }
.postcard-meta small { color: #6c6258; font-size: 7px; letter-spacing: .05em; }
.cinema-qr { position: absolute; z-index: 7; right: 17px; bottom: 13px; width: 40px; height: 40px; border: 5px solid #e8e0d4; outline: 1px solid #29241f; background: repeating-linear-gradient(45deg, #171511 0 3px, #e6ded1 3px 6px); }

.cinema-phone { position: absolute; z-index: 7; top: 17%; right: 2%; width: 190px; height: 375px; padding: 8px; border: 1px solid #625b51; border-radius: 29px; background: #171613; box-shadow: 0 40px 70px rgba(0,0,0,.75); transform: rotateY(-8deg) rotateZ(4deg); }
.phone-camera { position: absolute; z-index: 2; top: 15px; left: 50%; width: 60px; height: 14px; border-radius: 9px; background: #12110f; transform: translateX(-50%); }
.camera-view { position: relative; height: 100%; overflow: hidden; border-radius: 22px; background: linear-gradient(rgba(23,27,34,.84), rgba(98,57,42,.8)); }
.camera-view::before, .camera-view::after { content: ""; position: absolute; inset: 22% 16%; border: 1px solid rgba(238,234,225,.45); }
.camera-view::after { inset: 25% 20%; border-color: rgba(239,109,55,.75); }
.camera-view i { position: absolute; left: 50%; top: 49%; width: 40px; height: 40px; background: repeating-linear-gradient(45deg, #d9d2c7 0 3px, transparent 3px 6px); opacity: .65; transform: translate(-50%,-50%); }
.camera-view span { position: absolute; bottom: 24px; left: 50%; color: #d8d1c7; font-size: 7px; letter-spacing: .14em; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.cinema-beam { position: absolute; z-index: 8; top: 47%; left: 54%; width: 43%; height: 2px; background: linear-gradient(90deg, transparent, #ef6d37 30%, #ffc28c 65%, transparent); box-shadow: 0 0 12px rgba(239,109,55,.8); transform: rotate(-7deg); transform-origin: right; }
.cinema-beam span { position: absolute; right: 30%; top: -65px; width: 1px; height: 130px; background: linear-gradient(transparent, rgba(255,190,128,.65), transparent); }

.story-layers { position: absolute; z-index: 6; left: 50%; top: 21%; width: 400px; height: 280px; pointer-events: none; transform: translateX(-50%) translateZ(100px); }
.emerging-arch { position: absolute; bottom: 0; border: solid rgba(217,156,96,.88); border-bottom: 0; border-radius: 100px 100px 0 0; filter: drop-shadow(0 0 13px rgba(239,109,55,.35)); }
.arch-back { left: 20%; width: 57%; height: 72%; border-width: 2px; transform: translateY(15px); }
.arch-front { left: 32%; width: 37%; height: 52%; border-width: 3px; }
.mapping-ribbon { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, #e0a05e, #ef6d37, transparent); transform-origin: center; }
.ribbon-one { top: 31%; left: 6%; width: 90%; transform: rotate(19deg); }
.ribbon-two { top: 51%; left: 2%; width: 96%; transform: rotate(-15deg); }
.ribbon-three { top: 69%; left: 17%; width: 70%; transform: rotate(8deg); }
.cinema-sequence { position: absolute; z-index: 9; right: 0; bottom: 48px; display: flex; gap: 19px; margin: 0; padding: 0; list-style: none; color: #9d968c; font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.cinema-sequence li { display: flex; gap: 5px; }
.cinema-sequence span { color: var(--ember); }
.cinema-stage figcaption { position: absolute; z-index: 9; right: 0; bottom: 6px; max-width: 500px; margin: 0; color: #756f66; font-size: 7px; line-height: 1.5; text-align: right; letter-spacing: .07em; text-transform: uppercase; }

.cinema-ready .cinema-postcard { opacity: 0; transform: translate(-50%, -30%) rotateX(72deg) rotateZ(-8deg) scale(.84); }
.cinema-ready .cinema-phone { opacity: 0; transform: translate(90px,-20px) rotateY(-15deg) rotateZ(8deg); }
.cinema-ready .cinema-beam, .cinema-ready .story-layers, .cinema-ready .projection-pattern, .cinema-ready .celebration-points { opacity: 0; }
.cinema-ready .hero-copy > * { opacity: .82; transform: translateY(4px); }
.cinema-ready.is-playing .cinema-postcard { animation: postcardEnter 1.5s .15s cubic-bezier(.2,.8,.2,1) forwards; }
.cinema-ready.is-playing .cinema-phone { animation: phoneApproach 1.15s 1.2s cubic-bezier(.2,.75,.2,1) forwards; }
.cinema-ready.is-playing .cinema-beam { animation: scanBeam .9s 2.15s ease-in-out forwards; }
.cinema-ready.is-playing .projection-pattern, .cinema-ready.is-playing .celebration-points { animation: printAwaken 1.4s 2.65s ease-out forwards; }
.cinema-ready.is-playing .story-layers { animation: cityEmerge 1.6s 2.85s cubic-bezier(.2,.8,.2,1) forwards; }
.cinema-ready.is-playing .hero-copy > * { animation: copyReveal .75s ease-out forwards; }
.cinema-ready.is-playing .hero-copy > :nth-child(1) { animation-delay: 3.45s; }
.cinema-ready.is-playing .hero-copy > :nth-child(2) { animation-name: cinemaReveal; animation-delay: 3.58s; }
.cinema-ready.is-playing .hero-copy > :nth-child(3) { animation-delay: 3.72s; }
.cinema-ready.is-playing .hero-copy > :nth-child(4) { animation-delay: 3.82s; }
.cinema-ready.is-playing .hero-copy > :nth-child(5) { animation-delay: 3.94s; }
.cinema-ready.is-playing .hero-copy > :nth-child(6) { animation-delay: 4.05s; }
@keyframes postcardEnter { to { opacity: 1; transform: translate(-50%, -37%) rotateX(58deg) rotateZ(-5deg) scale(1); } }
@keyframes phoneApproach { to { opacity: 1; transform: rotateY(-8deg) rotateZ(4deg); } }
@keyframes scanBeam { 0% { opacity: 0; transform: rotate(-7deg) scaleX(.05); } 35%,70% { opacity: 1; } 100% { opacity: .75; transform: rotate(-7deg) scaleX(1); } }
@keyframes printAwaken { from { opacity: 0; } to { opacity: .9; } }
@keyframes cityEmerge { from { opacity: 0; transform: translateX(-50%) translateY(70px) scale(.75); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes copyReveal { from { opacity: .82; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cinemaReveal { from { opacity: .82; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.event-example { display: grid; grid-template-columns: .58fr 1fr; gap: 60px; align-items: center; margin-top: 70px; padding: 42px; border: 1px solid var(--line); background: #11100e; }
.event-example-visual { position: relative; min-height: 245px; overflow: hidden; background: radial-gradient(circle at 50% 65%, rgba(239,109,55,.15), transparent 48%); }
.event-card { position: absolute; left: 50%; bottom: 22px; width: 230px; height: 145px; border: 8px solid #ddd5c8; background: linear-gradient(#17202a 0 52%, #6b3c2f 53%, #1b1714); box-shadow: 0 22px 40px rgba(0,0,0,.55); transform: translateX(-50%) rotateX(55deg) rotateZ(-4deg); }
.event-card i { position: absolute; left: 24%; bottom: 0; width: 50%; height: 65%; border: 11px solid #c48c58; border-bottom: 0; border-radius: 60px 60px 0 0; }
.event-card b { position: absolute; right: 8px; bottom: 7px; width: 25px; height: 25px; background: repeating-linear-gradient(45deg,#171511 0 2px,#ddd5c8 2px 4px); }
.event-burst { position: absolute; left: 50%; top: 28px; width: 120px; height: 120px; opacity: .7; background: repeating-conic-gradient(from 0deg, transparent 0 12deg, #dba35f 13deg 14deg, transparent 15deg 26deg); border-radius: 50%; transform: translateX(-50%); mask-image: radial-gradient(circle, transparent 0 12%, black 13% 55%, transparent 57%); }
.burst-two { width: 82px; height: 82px; left: 68%; top: 70px; opacity: .45; }
.event-example h3 { margin: 14px 0 17px; font: 400 34px/1.05 var(--display); }
.event-example > div:last-child > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) {
  .cinematic-hero .hero-copy > * { width: min(460px, 46%); }
  .cinematic-hero .hero-copy h1 { width: 52%; font-size: clamp(4.5rem, 7vw, 6rem); }
  .cinema-stage { left: 43%; }
  .cinema-postcard { left: 47%; width: min(430px, 43vw); }
  .cinema-phone { width: 165px; height: 330px; }
  .story-layers { left: 47%; width: 320px; height: 240px; }
}

@media (max-width: 820px) {
  .cinematic-hero { height: auto; min-height: 1060px; padding-top: 108px; display: flex; flex-direction: column; }
  .cinematic-hero .hero-copy { position: relative; top: auto; left: auto; order: 1; transform: none; }
  .cinematic-hero .hero-copy > *, .cinematic-hero .hero-copy h1 { width: min(100%, 620px); }
  .cinematic-hero .hero-copy h1 { font-size: clamp(4.5rem, 13vw, 7rem); }
  .cinema-stage { position: relative; inset: auto; order: 2; width: min(100% - 40px, 680px); height: 555px; margin: 40px auto 26px; transform: none; }
  .cinema-postcard { left: 43%; top: 54%; width: min(440px, 63vw); }
  .cinema-phone { top: 15%; right: 1%; }
  .story-layers { left: 43%; top: 19%; }
  .cinema-ready .hero-copy > * { opacity: 1; transform: none; }
  .cinema-ready.is-playing .hero-copy > * { animation: none; }
  .event-example { grid-template-columns: .7fr 1fr; gap: 35px; padding: 32px; }
}

@media (max-width: 560px) {
  .cinematic-hero { min-height: 920px; padding-top: 100px; }
  .cinematic-hero .hero-copy h1 { font-size: clamp(3.75rem, 18vw, 5rem); }
  .hero-tagline { font-size: 17px; }
  .cinematic-hero .hero-summary { font-size: 13px; }
  .cinema-stage { width: calc(100% - 28px); height: 415px; margin-top: 32px; }
  .cinema-label { top: 0; left: 0; right: auto; }
  .cinema-postcard { left: 37%; top: 60%; width: 270px; padding: 8px; transform: translate(-50%,-37%) rotateX(55deg) rotateZ(-5deg); }
  .postcard-meta { padding-top: 7px; }
  .postcard-meta strong { font-size: 8px; }
  .postcard-meta small { display: none; }
  .cinema-qr { width: 28px; height: 28px; right: 10px; bottom: 8px; border-width: 4px; }
  .cinema-phone { top: 15%; right: -9px; width: 122px; height: 242px; padding: 5px; border-radius: 20px; }
  .camera-view { border-radius: 15px; }
  .phone-camera { top: 10px; width: 40px; height: 9px; }
  .story-layers { left: 37%; top: 25%; width: 210px; height: 155px; }
  .cinema-beam { top: 51%; left: 42%; width: 55%; }
  .cinema-sequence { left: 0; right: auto; bottom: 34px; gap: 10px; font-size: 6px; }
  .cinema-stage figcaption { right: 0; bottom: 0; max-width: 280px; font-size: 6px; }
  .cinema-ready .cinema-postcard, .cinema-ready.is-playing .cinema-postcard { opacity: 1; animation: none; transform: translate(-50%,-37%) rotateX(55deg) rotateZ(-5deg); }
  .cinema-ready .cinema-phone, .cinema-ready.is-playing .cinema-phone { opacity: 1; animation: none; transform: rotateY(-8deg) rotateZ(4deg); }
  .cinema-ready .cinema-beam, .cinema-ready .story-layers, .cinema-ready .projection-pattern, .cinema-ready .celebration-points { opacity: .85; }
  .cinema-ready.is-playing .cinema-beam, .cinema-ready.is-playing .story-layers, .cinema-ready.is-playing .projection-pattern, .cinema-ready.is-playing .celebration-points { animation: none; }
  .event-example { grid-template-columns: 1fr; gap: 25px; margin-top: 45px; padding: 22px; }
  .event-example-visual { min-height: 210px; }
  .event-example h3 { font-size: 29px; }
}

@media (max-width: 350px) {
  .cinematic-hero { min-height: 900px; }
  .cinema-stage { height: 390px; }
  .cinema-postcard { width: 240px; }
  .cinema-phone { width: 108px; height: 220px; }
  .story-layers { width: 185px; height: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-hero *, .cinematic-hero *::before, .cinematic-hero *::after { animation: none !important; transition: none !important; }
  .cinema-postcard, .cinema-phone, .cinema-beam, .story-layers, .projection-pattern, .celebration-points, .cinematic-hero .hero-copy > * { opacity: 1 !important; }
  .cinema-postcard { transform: translate(-50%, -37%) rotateX(58deg) rotateZ(-5deg) scale(1) !important; }
  .cinema-phone { transform: rotateY(-8deg) rotateZ(4deg) !important; }
  .cinema-beam { transform: rotate(-7deg) scaleX(1) !important; }
  .story-layers { transform: translateX(-50%) translateY(0) scale(1) !important; }
  .cinematic-hero .hero-copy > * { transform: none !important; }
}

@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
  .cinema-postcard { transform: translate(-50%, -37%) rotateX(55deg) rotateZ(-5deg) !important; }
}