@font-face {
  font-family: "Fredoka";
  src: url("./fonts/Fredoka-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --night: #0a0c0c;
  --night-soft: #101313;
  --panel: #151918;
  --panel-light: #1d211f;
  --cream: #fff8ee;
  --cream-dim: #d6d4ce;
  --blue: #4ea7dd;
  --orange: #f49936;
  --muted: #969a95;
  --line: rgba(255, 248, 238, 0.16);
  --line-strong: rgba(255, 248, 238, 0.34);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --shell: min(1480px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 92px; background: var(--night); }
body { margin: 0; overflow-x: hidden; color: var(--cream); background: var(--night); font-family: "Fredoka", system-ui, sans-serif; font-size: 17px; font-weight: 410; line-height: 1.5; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
::selection { color: var(--night); background: var(--orange); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.honeypot { position: absolute; left: -10000px; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; padding: 10px 14px; background: var(--cream); color: var(--night); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.section-shell { width: var(--shell); margin-inline: auto; }
.section { position: relative; padding: clamp(96px, 10vw, 156px) 0; }
.scanlines { position: absolute; inset: 0; opacity: 0.22; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.025) 3px 4px); pointer-events: none; }

.site-header { position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 94px; transition: background 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease; }
.site-header.is-scrolled { border-bottom: 1px solid var(--line); background: rgba(10, 12, 12, 0.9); backdrop-filter: blur(18px); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: var(--shell); height: 100%; margin-inline: auto; border-bottom: 1px solid rgba(255,248,238,0.24); }
.is-scrolled .header-inner { border-bottom-color: transparent; }
.brand { display: flex; width: 190px; padding: 0; background: transparent; text-decoration: none; }
.brand img { width: 100%; height: auto; }
.site-header nav { display: flex; gap: clamp(20px, 2.1vw, 34px); }
.site-header nav a, .header-cta { position: relative; text-decoration: none; text-transform: uppercase; font-family: var(--mono); font-size: 0.69rem; font-weight: 650; letter-spacing: 0.08em; }
.site-header nav a { color: #deddd7; }
.site-header nav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform 160ms ease; }
.site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { justify-self: end; padding: 12px 0; border-bottom: 2px solid var(--orange); }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 820px; height: 100svh; overflow: hidden; background: #111817; }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: hero-in 1.4s ease-out both; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,8,0.98) 0%, rgba(6,8,8,0.88) 28%, rgba(6,8,8,0.25) 59%, rgba(6,8,8,0.16)), linear-gradient(0deg, rgba(6,8,8,0.86), transparent 36%); }
.hero-copy { position: absolute; z-index: 2; top: 49%; left: max(32px, calc((100vw - 1480px) / 2)); width: min(720px, 49vw); transform: translateY(-48%); }
.hero-copy.reveal.is-visible { transform: translateY(-48%); }
.signal, .kicker { margin: 0; text-transform: uppercase; font-family: var(--mono); font-size: 0.67rem; font-weight: 650; letter-spacing: 0.13em; }
.signal { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; color: #dddcd6; }
.signal i { width: 7px; height: 7px; background: var(--orange); box-shadow: 0 0 0 5px rgba(244,153,54,0.14); animation: pulse 2.2s ease-in-out infinite; }
.kicker { color: var(--muted); }
.kicker span { color: var(--orange); }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin-top: 0; }
h1 { margin-bottom: 0; text-transform: uppercase; font-size: clamp(4rem, 6.2vw, 6.7rem); font-weight: 650; line-height: 0.82; letter-spacing: -0.058em; }
h2 { margin-bottom: 0; text-transform: uppercase; font-size: clamp(3.2rem, 6vw, 6.7rem); font-weight: 640; line-height: 0.86; letter-spacing: -0.055em; }
h3 { margin-bottom: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; }
.meta { display: flex; flex-wrap: wrap; margin-top: 31px; text-transform: uppercase; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; }
.meta span { padding-right: 15px; margin-right: 15px; border-right: 1px solid var(--line-strong); }
.meta span:last-child { border: 0; }
.hero-lede { max-width: 540px; margin: 22px 0 0; color: var(--cream-dim); font-size: 1.17rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid transparent; border-radius: 0; background: transparent; text-transform: uppercase; text-decoration: none; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; cursor: pointer; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--orange); color: #17120d; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.button-primary:hover { background: #ffad51; }
.button-ghost { border-color: rgba(255,255,255,0.44); background: rgba(10,12,12,0.36); backdrop-filter: blur(8px); }
.button-ghost:hover { border-color: var(--cream); background: rgba(255,255,255,0.08); }
.hero-manifesto { position: absolute; z-index: 2; right: max(32px, calc((100vw - 1480px) / 2)); bottom: 84px; text-align: right; text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.04em; }
.hero-manifesto span, .hero-manifesto strong { display: block; }
.hero-manifesto strong { color: var(--blue); font-size: 1.85rem; }
.hero-status { position: absolute; z-index: 2; bottom: 28px; left: 50%; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); color: #b7b7b1; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; }
.hero-status i { width: 48px; height: 2px; background: linear-gradient(90deg, var(--orange) 33%, rgba(255,255,255,0.25) 33%); }

.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr); gap: clamp(54px, 8vw, 130px); align-items: end; margin-bottom: 62px; }
.section-heading > .heading-title-group { display: block; }
.section-heading h2 { font-size: clamp(3rem, 5vw, 5.8rem); }
.section-heading .heading-title-group .kicker { margin-bottom: 30px; }
.section-heading .heading-title-group h2 { max-width: 920px; }
.section-heading .heading-intro { max-width: 410px; margin: 0 0 10px; color: var(--muted); font-size: 1.08rem; }

.stories-section { overflow: hidden; background: var(--night); }
.story-rail { display: grid; grid-template-columns: 1.48fr 1fr 1fr 1fr; gap: 18px; }
.story-card { min-width: 0; }
.story-description { margin: 14px 2px 0; color: var(--cream-dim); font-size: 1rem; line-height: 1.5; }
.cover-play { text-decoration: none; }
.bespoke { border-top: 1px solid var(--line); background: linear-gradient(120deg, rgba(244,153,54,0.07), transparent 60%), var(--night-soft); }
.bespoke-layout { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(42px,7vw,110px); align-items: start; }
.bespoke-copy h2 { margin-top: 28px; font-size: clamp(3rem,5.6vw,6rem); line-height: 0.95; }
.bespoke-copy > p:not(.kicker) { max-width: 660px; color: var(--cream-dim); }
.bespoke-copy .bespoke-lede { margin-top: 32px; font-size: 1.5rem; color: var(--cream); }
.bespoke-copy .gift-hook { margin: 38px 0 0; padding-left: 22px; border-left: 3px solid var(--orange); color: var(--cream); font-size: 1.3rem; }
.bespoke-offer { min-width: 0; padding: clamp(24px,3vw,42px); border: 1px solid rgba(244,153,54,0.5); background: var(--panel); }
.bespoke-price { margin: 24px 0; color: var(--orange); font-size: clamp(4.5rem,7vw,7rem); line-height: 1; font-weight: 600; letter-spacing: -0.05em; }
.bespoke-capacity { font-size: 1.05rem; font-weight: 550; }
.bespoke-offer > p:not(.kicker):not(.bespoke-price):not(.bespoke-capacity) { color: var(--cream-dim); }
.bespoke-includes-title { margin: 0 0 20px; font-size: 1.4rem; line-height: 1.2; }
.bespoke-includes { display: grid; gap: 12px; margin: 0 0 28px; padding-left: 20px; color: var(--cream-dim); }
.bespoke-includes li { padding-left: 5px; }
.bespoke-includes li::marker { color: var(--orange); }
.bespoke-includes strong { color: var(--cream); font-weight: 550; }
.bespoke-delivery { margin: 26px 0; padding: 20px 0; border-block: 1px solid var(--line); }
.bespoke-delivery > strong { color: var(--orange); font-size: 1.3rem; font-weight: 550; }
.bespoke-delivery p { margin: 8px 0 0; color: var(--cream-dim); font-size: 1rem; }
.bespoke-handover { max-width: 660px; margin-top: 46px; padding: 30px; border: 1px solid rgba(78,167,221,0.35); background: rgba(78,167,221,0.04); }
.bespoke-handover h3 { margin-top: 20px; font-size: clamp(1.8rem,2.6vw,2.6rem); line-height: 1.08; }
.bespoke-handover > p:not(.kicker) { color: var(--cream-dim); font-size: 1rem; }
.bespoke-handover > p:last-child { margin-bottom: 0; }
.bespoke-offer .button { width: 100%; padding-block: 14px; white-space: normal; text-align: center; font-size: 0.875rem; }
.bespoke-next, .bespoke-privacy { font-size: 0.875rem; }
.bespoke-privacy { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.bespoke .kicker { font-size: 0.875rem; letter-spacing: 0.07em; }
.form-anchor { position: absolute; top: 0; scroll-margin-top: 92px; }
.inquiry-choice { display: grid; gap: 10px; margin-bottom: 32px; }
#story-form .inquiry-choice label { display: flex; align-items: start; gap: 12px; padding: 14px; margin: 0; border: 1px solid rgba(23,25,24,0.2); cursor: pointer; }
#story-form .inquiry-choice input { margin: 5px 0 0; accent-color: #1775ad; }
.inquiry-choice strong, .inquiry-choice small { display: block; }
.inquiry-choice small { color: #51544f; font-size: 0.875rem; }
.inquiry-choice label:has(input:checked) { border-color: #1775ad; background: rgba(78,167,221,0.08); }
@media (max-width: 900px) {
  .bespoke-layout { grid-template-columns: 1fr; gap: 40px; }
}
.story-cover { position: relative; min-height: 530px; overflow: hidden; border: 1px solid var(--line); background: #1b201f; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.story-cover-wide { min-height: 530px; }
.story-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 520ms cubic-bezier(.2,.7,.2,1), filter 350ms ease; }
.story-cover-wide > img { object-position: 58% center; }
.story-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,6,6,0.96), transparent 64%), linear-gradient(90deg, rgba(4,6,6,0.25), transparent); pointer-events: none; }
.story-card:hover .story-cover > img { transform: scale(1.045); filter: saturate(1.08); }
.story-index, .story-state { position: absolute; z-index: 2; top: 18px; font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.09em; }
.story-index { left: 18px; padding: 6px 8px; background: rgba(10,12,12,0.82); }
.story-state { right: 18px; display: flex; align-items: center; gap: 7px; color: #deded7; text-transform: uppercase; }
.story-state i { width: 6px; height: 6px; background: var(--orange); }
.cover-play { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 60px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,0.58); border-radius: 50%; background: rgba(8,10,10,0.58); color: white; opacity: 0; transform: translate(-50%, -35%); cursor: pointer; transition: opacity 180ms ease, transform 180ms ease, background 180ms ease; backdrop-filter: blur(8px); }
.story-card:hover .cover-play, .cover-play:focus-visible { opacity: 1; transform: translate(-50%, -50%); }
.cover-play:hover { background: var(--orange); color: var(--night); }
.cover-copy { position: absolute; z-index: 2; right: 22px; bottom: 22px; left: 22px; }
.cover-copy small { display: block; margin-bottom: 10px; color: #c5c6c0; text-transform: uppercase; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.09em; }
.cover-copy h3 { max-width: 390px; text-transform: uppercase; font-size: clamp(1.4rem, 2.5vw, 2.55rem); }
.story-cover:not(.story-cover-wide) .cover-copy h3 { font-size: clamp(1.35rem, 1.8vw, 1.85rem); }
.story-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 2px 0; color: var(--muted); text-transform: uppercase; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; }
.story-row-meta button, .story-row-meta a { border: 0; background: none; color: var(--cream); text-transform: uppercase; text-decoration: none; font: inherit; cursor: pointer; }
.your-story { display: block; border-color: rgba(78,167,221,0.5); color: inherit; text-decoration: none; background: radial-gradient(circle at 68% 26%, rgba(78,167,221,0.21), transparent 34%), linear-gradient(145deg, #17211f, #0b0e0e); }
.your-story::before { content: ""; position: absolute; inset: 0; opacity: 0.24; background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 32px 32px; }
.waiting { color: var(--blue); }
.waiting i { background: var(--blue); animation: pulse 2s infinite; }
.empty-world { position: absolute; top: 22%; left: 50%; width: 180px; height: 190px; transform: translateX(-50%); }
.empty-world span { position: absolute; z-index: 2; top: 18px; left: 50%; color: rgba(255,255,255,0.5); font-family: var(--mono); font-size: 4.6rem; transform: translateX(-50%); }
.empty-world i { position: absolute; bottom: 0; width: 34%; height: 60%; background: #1f3230; clip-path: polygon(0 100%, 42% 0, 100% 100%); }
.empty-world i:nth-of-type(1) { left: 0; }
.empty-world i:nth-of-type(2) { left: 31%; height: 78%; background: #263d3a; }
.empty-world i:nth-of-type(3) { right: 0; height: 52%; }
.cover-copy b { display: inline-block; margin-top: 16px; color: var(--orange); text-transform: uppercase; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; }
.art-note { margin: 32px 0 0; color: #666b67; text-align: right; text-transform: uppercase; font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.08em; }

.first-100 { overflow: hidden; border-block: 1px solid rgba(23,25,24,0.18); background: linear-gradient(135deg, #fff8ee 0%, #f6eddf 52%, #efe3d4 100%); color: #171918; isolation: isolate; }
.first-100::before { content: ""; position: absolute; z-index: -2; inset: 0 0 0 43%; background: linear-gradient(148deg, rgba(78,167,221,0.13), rgba(78,167,221,0.28)); clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%); }
.first-100::after { content: "100"; position: absolute; z-index: -1; top: 50%; right: -0.055em; color: rgba(255,248,238,0.38); font-family: var(--mono); font-size: clamp(17rem, 34vw, 36rem); font-weight: 800; line-height: 0.72; letter-spacing: -0.15em; transform: translateY(-47%); pointer-events: none; }
.first-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(56px, 7vw, 108px); align-items: center; }
.first-copy .kicker { color: #61645f; }
.collection-count { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: start; gap: clamp(16px, 2vw, 28px); margin: 36px 0 30px; font-family: var(--mono); }
.collection-count span { display: grid; gap: 7px; }
.collection-count strong { color: var(--blue); font-size: clamp(3.4rem, 5.3vw, 6.2rem); font-weight: 800; line-height: 0.72; letter-spacing: -0.08em; }
.collection-count small { color: #656964; text-transform: uppercase; font-size: 0.52rem; letter-spacing: 0.08em; }
.collection-count i { color: rgba(23,25,24,0.27); font-size: clamp(2.5rem, 4vw, 4.8rem); font-style: normal; font-weight: 300; }
.first-copy h2 { max-width: 640px; }
.first-statement { margin: 34px 0 20px; font-size: clamp(1.3rem, 2vw, 1.85rem); font-weight: 580; line-height: 1.2; }
.first-copy > p:last-of-type { max-width: 580px; color: #4f524f; }
.text-cta { display: inline-flex; gap: 18px; align-items: center; margin-top: 26px; padding-bottom: 6px; border-bottom: 2px solid var(--orange); text-transform: uppercase; text-decoration: none; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; }
.text-cta span { transition: transform 160ms ease; }
.text-cta:hover span { transform: translateX(5px); }
.memory-wall-wrap { border: 1px solid rgba(23,25,24,0.28); background: rgba(255,248,238,0.82); box-shadow: 18px 18px 0 rgba(36,31,24,0.12), 0 22px 60px rgba(36,31,24,0.08); backdrop-filter: blur(10px); }
.wall-head, .wall-legend { display: flex; justify-content: space-between; gap: 20px; text-transform: uppercase; font-family: var(--mono); font-size: 0.59rem; letter-spacing: 0.08em; }
.wall-head { padding: 14px 16px; border-bottom: 1px solid rgba(23,25,24,0.2); }
.memory-wall { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; padding: 12px; }
.memory-slot { position: relative; display: grid; aspect-ratio: 0.78; place-items: end start; overflow: hidden; padding: 5px; border: 1px solid rgba(23,25,24,0.17); color: rgba(23,25,24,0.42); background: rgba(23,25,24,0.035); font-family: var(--mono); font-size: clamp(0.39rem, 0.55vw, 0.56rem); }
.memory-slot.filled { border-color: #171918; color: white; background-position: center; background-size: cover; }
.memory-slot.filled::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,9,9,0.84), transparent 65%); }
.memory-slot.filled:nth-child(1) { background-image: url('./art/vietnam-current.jpg'); }
.memory-slot.filled:nth-child(2) { background-image: url('./art/wedding-current.jpg'); }
.memory-slot.filled:nth-child(3) { background-image: url('./art/ema-current.jpg'); }
.memory-slot b { position: relative; z-index: 1; font-weight: 500; }
.wall-legend { padding: 12px 16px; border-top: 1px solid rgba(23,25,24,0.2); color: #60635f; }
.wall-legend span { display: flex; align-items: center; gap: 8px; }
.wall-legend i { width: 8px; height: 8px; border: 1px solid rgba(23,25,24,0.34); }
.wall-legend i.filled { border-color: var(--orange); background: var(--orange); }

.browse { overflow: hidden; background: var(--night-soft); }
.category-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.category-card { position: relative; min-height: 410px; overflow: hidden; padding: 26px; border: 1px solid var(--line); background: #171b1a; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.category-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,9,9,0.98), rgba(7,9,9,0.12)); }
.category-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease; }
.category-card:hover > img { transform: scale(1.04); }
.category-card > span, .category-card > h3, .category-card > p, .category-card > b { position: relative; z-index: 2; }
.category-card > span { display: block; margin-top: 238px; margin-bottom: 10px; color: var(--orange); text-transform: uppercase; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; }
.category-card h3 { text-transform: uppercase; font-size: 2rem; }
.category-card p { max-width: 330px; margin-bottom: 0; color: #b5b6b1; font-size: 0.91rem; }
.future-card { background: radial-gradient(circle at 70% 24%, rgba(78,167,221,0.23), transparent 28%), #151a19; }
.future-card::before { content: ""; position: absolute; top: 0; right: 0; width: 72%; height: 62%; opacity: 0.25; background: repeating-linear-gradient(145deg, transparent 0 16px, rgba(255,255,255,0.09) 16px 17px); clip-path: polygon(30% 0,100% 0,100% 100%,0 70%); }
.future-card::after { background: linear-gradient(0deg, #090b0b, transparent 80%); }
.future-card > b { display: inline-block; margin-top: 22px; padding: 5px 7px; border: 1px solid var(--line-strong); color: var(--muted); text-transform: uppercase; font-family: var(--mono); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; }
.small-moments { background: radial-gradient(circle at 62% 20%, rgba(244,153,54,0.22), transparent 29%), #171816; }

.how { background: var(--night); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 70px 0 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); }
.process-grid li { position: relative; min-height: 410px; padding: 28px; background: var(--panel); }
.process-grid li > span { color: var(--orange); font-family: var(--mono); font-size: 0.68rem; }
.process-grid h3 { margin-top: 30px; text-transform: uppercase; font-size: 1.8rem; }
.process-grid p { max-width: 350px; color: var(--muted); }
.process-photo { position: relative; height: 176px; margin: 20px 0 0; overflow: hidden; border: 1px solid var(--line); background: #0e1211; }
.process-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,7,0.08), rgba(5,7,7,0.58)); pointer-events: none; }
.process-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: saturate(0.78) contrast(0.98); transition: transform 500ms ease, filter 300ms ease; }
.process-photo-wide img { object-position: center 56%; }
.process-photo-play img { object-position: center 35%; }
.process-grid li:hover .process-photo img { transform: scale(1.035); filter: saturate(0.95) contrast(1.02); }
.process-photo figcaption { position: absolute; z-index: 2; right: 12px; bottom: 11px; left: 12px; color: rgba(255,248,238,0.82); text-transform: uppercase; font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.09em; }
.process-photo-play > i { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 58px; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,0.66); border-radius: 50%; background: rgba(8,10,10,0.56); color: var(--orange); font-style: normal; transform: translate(-50%,-50%); backdrop-filter: blur(7px); }
.transformation { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.32fr); min-height: 450px; margin-top: 36px; border: 1px solid var(--line); background: #111514; }
.transform-source { display: flex; min-width: 0; overflow: hidden; flex-direction: column; justify-content: space-between; gap: 12px; padding: 26px; }
.transform-source > span, .transform-result > span { text-transform: uppercase; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.08em; }
.source-stack { position: relative; width: 100%; height: 270px; }
.source-stack figure { position: absolute; top: 54px; width: clamp(92px, 7vw, 122px); height: clamp(136px, 10vw, 166px); margin: 0; overflow: hidden; border: 1px solid rgba(255,248,238,0.55); background: #232927; box-shadow: 0 15px 30px rgba(0,0,0,0.34); transform-origin: center 115%; }
.source-stack figure:nth-child(1) { left: 1%; top: 75px; transform: rotate(-9deg); }
.source-stack figure:nth-child(2) { left: 14%; top: 46px; transform: rotate(-5deg); }
.source-stack figure:nth-child(3) { left: 27%; top: 69px; transform: rotate(2deg); }
.source-stack figure:nth-child(4) { left: 40%; top: 34px; transform: rotate(-2deg); }
.source-stack figure:nth-child(5) { left: 53%; top: 63px; transform: rotate(5deg); }
.source-stack figure:nth-child(6) { left: 66%; top: 42px; transform: rotate(1deg); }
.source-stack figure:nth-child(7) { left: 79%; top: 73px; transform: rotate(7deg); }
.source-stack figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(0.96); }
.source-stack figure:nth-child(3n) img { object-position: 57% center; }
.source-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); text-transform: uppercase; font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.06em; }
.source-stats span { display: flex; align-items: baseline; gap: 7px; color: var(--muted); }
.source-stats b { color: var(--cream); font-size: 0.83rem; }
.transform-arrow { display: flex; width: auto; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-inline: 1px solid var(--line); color: var(--orange); text-transform: uppercase; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.06em; }
.transform-arrow i { width: 56px; height: 1px; background: var(--orange); }
.transform-arrow i::after { content: ""; display: block; width: 8px; height: 8px; margin: -4px 0 0 auto; border-top: 1px solid var(--orange); border-right: 1px solid var(--orange); transform: rotate(45deg); }
.transform-result { position: relative; min-height: 410px; overflow: hidden; }
.transform-result::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,6,6,0.78), transparent 64%); }
.transform-result img { width: 100%; height: 100%; object-fit: cover; }
.transform-result > span { position: absolute; z-index: 2; top: 24px; left: 24px; padding: 7px 9px; background: rgba(8,10,10,0.7); }
.transform-result a { position: absolute; z-index: 2; right: 24px; bottom: 24px; padding: 11px 14px; border: 1px solid rgba(255,255,255,0.5); background: rgba(8,10,10,0.65); text-transform: uppercase; text-decoration: none; font-family: var(--mono); font-size: 0.875rem; cursor: pointer; }

.engine { overflow: hidden; border-block: 1px solid var(--line); background: radial-gradient(circle at 72% 48%, rgba(78,167,221,0.1), transparent 34%), #0d1515; }
.engine-backdrop { position: absolute; inset: 0; opacity: 0.22; background-image: linear-gradient(rgba(78,167,221,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(78,167,221,0.16) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent 18%, black 56%, transparent 100%); }
.engine-backdrop span { display: none; }
.engine-layout { position: relative; display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(55px,8vw,120px); align-items: center; }
.engine-copy h2 { margin-top: 30px; }
.engine-copy > p:not(.kicker) { max-width: 590px; color: #b6b9b4; }
.engine-note { margin-top: 28px !important; padding-left: 16px; border-left: 3px solid var(--orange); color: var(--cream) !important; }
.engine-console { overflow: hidden; border: 1px solid rgba(78,167,221,0.48); background: linear-gradient(145deg, rgba(20,31,29,0.94), rgba(7,12,12,0.97)); box-shadow: 18px 18px 0 rgba(78,167,221,0.08), 0 28px 70px rgba(0,0,0,0.28); }
.console-top, .console-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; color: #a9b9b5; text-transform: uppercase; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.07em; }
.console-top { border-bottom: 1px solid rgba(78,167,221,0.3); }
.console-top i { width: 7px; height: 7px; margin-left: auto; background: #63c795; box-shadow: 0 0 0 4px rgba(99,199,149,0.12); }
.console-flow { position: relative; display: grid; grid-template-columns: 0.9fr 1.32fr 0.9fr; align-items: center; gap: 30px; min-height: 410px; padding: 34px; }
.console-flow::before { content: ""; position: absolute; top: 50%; right: 16%; left: 16%; height: 1px; background: linear-gradient(90deg, transparent, rgba(78,167,221,0.58) 18%, rgba(244,153,54,0.75) 50%, rgba(78,167,221,0.58) 82%, transparent); }
.input-stack, .output-stack { display: flex; flex-direction: column; gap: 10px; }
.input-stack, .output-stack, .console-core { position: relative; z-index: 1; }
.input-stack > small, .output-stack > small { margin-bottom: 3px; color: var(--blue); text-transform: uppercase; font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; }
.input-stack span, .output-stack span { position: relative; padding: 12px 13px; border: 1px solid var(--line); background: #171d1b; text-transform: uppercase; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em; }
.input-stack span::after { content: "+"; float: right; color: var(--orange); }
.output-stack span::before { content: "✓"; margin-right: 8px; color: #64c491; }
.output-stack .output-live { border-color: var(--orange); color: var(--orange); }
.console-core { display: flex; min-height: 285px; flex-direction: column; align-items: center; justify-content: center; padding: 28px 22px 22px; border: 1px solid var(--blue); background: radial-gradient(circle at 50% 30%, rgba(78,167,221,0.18), transparent 48%), rgba(8,14,14,0.96); text-align: center; box-shadow: inset 0 0 60px rgba(78,167,221,0.1), 0 0 0 10px rgba(78,167,221,0.04); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.console-core img { width: 66px; margin-bottom: 14px; filter: drop-shadow(0 10px 20px rgba(78,167,221,0.18)); }
.console-core strong { text-transform: uppercase; font-family: var(--mono); font-size: 0.82rem; line-height: 1.2; letter-spacing: 0.06em; }
.console-core small { margin-top: 11px; color: var(--muted); font-family: var(--mono); font-size: 0.48rem; }
.engine-stages { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 21px; }
.engine-stages span { padding: 7px 4px; border-top: 1px solid rgba(78,167,221,0.5); color: #b8c7c3; text-transform: uppercase; font-family: var(--mono); font-size: 0.42rem; letter-spacing: 0.04em; }
.console-status { border-top: 1px solid rgba(78,167,221,0.3); }
.console-status span:first-child { display: flex; align-items: center; gap: 8px; }
.console-status i { width: 6px; height: 6px; background: var(--orange); }

.human-stories { padding-bottom: clamp(110px,12vw,180px); overflow: hidden; background: #ece5d9; color: #151817; }
.human-stories h2 { max-width: 1050px; margin-top: 30px; }
.human-stories .kicker { color: #696d68; }
.memory-lines { margin-top: 80px; border-block: 1px solid rgba(21,24,23,0.24); transform: rotate(-1.2deg) scale(1.02); }
.memory-lines > div { display: flex; width: max-content; align-items: center; gap: 30px; padding: 15px 0; white-space: nowrap; text-transform: uppercase; font-size: clamp(1.7rem,3.2vw,4rem); font-weight: 560; letter-spacing: -0.03em; animation: marquee 34s linear infinite; }
.memory-lines > div + div { border-top: 1px solid rgba(21,24,23,0.24); animation-direction: reverse; animation-duration: 39s; transform: translateX(-32%); }
.memory-lines i { padding: 7px 10px; background: var(--blue); font-family: var(--mono); font-size: 0.55rem; font-style: normal; letter-spacing: 0.07em; }
.memory-lines > div:nth-child(2) i { background: var(--orange); }
.human-close { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-top: 80px; }
.human-close p { max-width: 680px; margin: 0; font-size: clamp(1.35rem,2.1vw,2rem); }

.vision { overflow: hidden; background: var(--night); }
.vision-copy { display: grid; grid-template-columns: 0.38fr 1fr; gap: 44px; }
.vision-copy h2 { grid-column: 2; max-width: 1030px; }
.vision-copy > p:last-child { grid-column: 2; max-width: 690px; color: var(--muted); font-size: 1.13rem; }
.vision-timeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; margin-top: 78px; }
.vision-timeline article { min-height: 330px; padding: 28px; border: 1px solid var(--line); background: var(--panel); }
.vision-timeline article.active { border-color: var(--blue); background: linear-gradient(140deg, rgba(78,167,221,0.14), transparent), var(--panel); }
.vision-timeline article > span { color: var(--orange); text-transform: uppercase; font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.08em; }
.vision-timeline article > strong { display: block; margin-top: 35px; color: #333a37; font-family: var(--mono); font-size: 6rem; line-height: 0.8; }
.vision-timeline article.active > strong { color: var(--blue); }
.vision-timeline h3 { margin-top: 30px; text-transform: uppercase; }
.vision-timeline p { color: var(--muted); }
.vision-timeline > i { width: 44px; height: 1px; background: var(--orange); }

.mission { border-block: 1px solid var(--line); background: #101413; }
.mission-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(60px,8vw,120px); }
.mission-head h2 { margin-top: 28px; }
.mission-head > p:last-child { max-width: 620px; color: var(--muted); }
.mission-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mission-cards article { min-height: 440px; padding: 28px; border: 1px solid var(--line); background: var(--panel); clip-path: polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.mission-cards article:first-child { background: linear-gradient(145deg, rgba(244,153,54,0.14), transparent), var(--panel); }
.mission-cards article:last-child { background: linear-gradient(145deg, rgba(78,167,221,0.15), transparent), var(--panel); }
.mission-cards span { color: var(--muted); text-transform: uppercase; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; }
.mission-cards b { display: block; margin: 60px 0 56px; color: var(--orange); font-family: var(--mono); font-size: clamp(4rem,6vw,6.8rem); line-height: 0.7; letter-spacing: -0.08em; }
.mission-cards article:last-child b { color: var(--blue); font-size: clamp(3rem,4.8vw,5rem); }
.mission-cards h3 { text-transform: uppercase; }
.mission-cards p { color: var(--muted); }

.submit { background: #e9e2d7; color: #171918; }
.submit-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(60px,8vw,125px); align-items: start; }
.submit-copy { position: sticky; top: 130px; }
.submit-copy .kicker { color: #656863; }
.submit-copy h2 { margin-top: 28px; }
.submit-copy > p:not(.kicker) { max-width: 560px; color: #5b5f5a; font-size: 1.13rem; }
.trust-note { display: flex; gap: 15px; max-width: 560px; margin-top: 42px; padding: 20px; border: 1px solid rgba(23,25,24,0.2); background: rgba(255,255,255,0.32); }
.trust-note img { width: 48px; height: 48px; }
.trust-note p { margin: 0; color: #51544f; font-size: 0.88rem; }
.trust-note strong { display: block; margin-bottom: 3px; color: #171918; }
.form-panel { border: 1px solid rgba(23,25,24,0.3); background: #f8f2e9; box-shadow: 18px 18px 0 rgba(23,25,24,0.1); }
.form-progress { padding: 20px 24px; border-bottom: 1px solid rgba(23,25,24,0.18); }
.form-progress > div { display: flex; justify-content: space-between; gap: 18px; text-transform: uppercase; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.07em; }
.form-progress > div span:last-child { color: #71746f; }
.form-progress > i { display: block; height: 3px; margin-top: 15px; background: rgba(23,25,24,0.12); }
.form-progress b { display: block; width: 33.333%; height: 100%; background: var(--orange); transition: width 220ms ease; }
#story-form { padding: clamp(24px,4vw,48px); }
fieldset { margin: 0; padding: 0; border: 0; }
fieldset[hidden] { display: none; }
fieldset legend { margin-bottom: 32px; font-size: clamp(1.9rem,3.3vw,3.1rem); font-weight: 590; line-height: 1; }
.field-grid { display: grid; gap: 18px; }
.field-grid.two { grid-template-columns: 1fr 1fr; }
#story-form label:not(.privacy-options label):not(.file-field) { display: block; margin-bottom: 23px; }
#story-form label > span:first-child { display: block; margin-bottom: 8px; text-transform: uppercase; font-family: var(--mono); font-size: 0.61rem; font-weight: 650; letter-spacing: 0.07em; }
#story-form input:not([type="radio"]), #story-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(23,25,24,0.32); border-radius: 0; outline: none; background: transparent; color: #171918; font-size: 1rem; }
#story-form input:not([type="radio"]) { height: 50px; }
#story-form textarea { min-height: 130px; padding: 13px 0; resize: vertical; }
#story-form input:focus, #story-form textarea:focus { border-bottom-color: var(--blue); box-shadow: 0 2px 0 var(--blue); }
#story-form [aria-invalid="true"] { border-bottom-color: #a93027 !important; box-shadow: 0 2px 0 #a93027 !important; }
#story-form ::placeholder { color: #8f918d; }
.privacy-options { display: grid; gap: 10px; }
.privacy-options label { display: flex; gap: 13px; align-items: start; padding: 17px; border: 1px solid rgba(23,25,24,0.2); cursor: pointer; }
.privacy-options label:has(input:checked) { border-color: var(--blue); background: rgba(78,167,221,0.08); box-shadow: inset 4px 0 var(--blue); }
.privacy-options input { margin: 4px 0 0; accent-color: var(--blue); }
.privacy-options strong, .privacy-options small { display: block; }
.privacy-options strong { margin-bottom: 3px; font-size: 0.94rem; }
.privacy-options small { color: #676a65; }
.file-field { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 92px; margin-top: 22px; padding: 17px; border: 1px dashed rgba(23,25,24,0.35); cursor: pointer; }
.file-field b, .file-field small { display: block; }
.file-field b { margin-bottom: 3px; text-transform: uppercase; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.07em; }
.file-field small { color: #727570; }
.file-field > strong { color: #1775ad; font-size: 0.82rem; font-weight: 600; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.form-back { border-color: rgba(23,25,24,0.34); color: #171918; }
.form-error { margin: 22px 0 0; padding: 12px 14px; border-left: 3px solid #a93027; background: rgba(169,48,39,0.08); color: #81251f; font-size: 0.86rem; }
.form-success { padding: clamp(40px,6vw,78px); text-align: center; }
.form-success > span { color: #4f7369; text-transform: uppercase; font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.08em; }
.form-success img { width: 84px; margin: 35px auto; }
.form-success h3 { max-width: 560px; margin-inline: auto; text-transform: uppercase; font-size: clamp(2rem,4vw,3.5rem); }
.form-success p { max-width: 570px; margin: 20px auto 32px; color: #5c5f5a; }
.form-success .button-ghost { border-color: rgba(23,25,24,0.35); color: #171918; }

.final-cta { position: relative; display: grid; min-height: 730px; place-items: center; overflow: hidden; background: #0b1111; text-align: center; }
.final-glow { position: absolute; top: 50%; left: 50%; width: min(80vw,1000px); aspect-ratio: 1; border: 1px solid rgba(78,167,221,0.25); border-radius: 50%; box-shadow: 0 0 0 80px rgba(78,167,221,0.02), 0 0 180px rgba(78,167,221,0.08); transform: translate(-50%,-50%); }
.final-cta .section-shell { position: relative; z-index: 2; }
.final-cta p { color: var(--orange); text-transform: uppercase; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.11em; }
.final-cta h2 { max-width: 1100px; margin: 28px auto; }
.final-cta .section-shell > span { display: block; margin-bottom: 34px; color: var(--blue); font-size: 1.6rem; }

.site-footer { padding: 74px 0 40px; border-top: 1px solid var(--line); background: #070909; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: clamp(40px,6vw,90px); }
.footer-brand .brand { width: 170px; }
.footer-brand p { margin: 26px 0 55px; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; }
.footer-brand > span { color: #646865; font-family: var(--mono); font-size: 0.6rem; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: start; gap: 12px; }
.footer-grid strong { margin-bottom: 12px; color: var(--orange); text-transform: uppercase; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; }
.footer-grid a:not(.brand) { color: #c0c2bd; text-decoration: none; font-size: 0.88rem; }
.footer-grid a:hover { color: white; }
.footer-grid > div:last-child p { max-width: 250px; color: #666a66; font-size: 0.72rem; }
.mobile-submit { display: none; }
.notice-toast { position: fixed; z-index: 180; right: 24px; bottom: 24px; max-width: 370px; padding: 14px 18px; border: 1px solid var(--line-strong); background: #1b201e; box-shadow: 0 18px 40px rgba(0,0,0,0.35); font-size: 0.84rem; }

.story-dialog { width: min(620px, calc(100% - 32px)); padding: 0; border: 1px solid rgba(78,167,221,0.5); background: #111615; color: var(--cream); box-shadow: 0 30px 90px rgba(0,0,0,0.7); }
.story-dialog::backdrop { background: rgba(2,3,3,0.82); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 40px; height: 40px; border: 1px solid var(--line); background: rgba(10,12,12,0.72); color: white; font-size: 1.6rem; cursor: pointer; }
.story-dialog > p:first-of-type { margin: 0; padding: 25px 28px 14px; color: var(--orange); text-transform: uppercase; font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.08em; }
.story-dialog h2 { padding: 0 28px 26px; font-size: clamp(2.3rem,5vw,4.6rem); }
.dialog-screen { position: relative; display: grid; height: 240px; place-items: center; overflow: hidden; border-block: 1px solid var(--line); background: radial-gradient(circle at 70% 30%, rgba(78,167,221,0.24), transparent 34%), #0d1312; }
.dialog-screen i { position: absolute; inset: 0; opacity: 0.18; background-image: linear-gradient(rgba(255,255,255,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.08) 1px,transparent 1px); background-size: 26px 26px; }
.dialog-screen > span { position: relative; display: grid; width: 72px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--orange); }
.dialog-screen small { position: absolute; bottom: 15px; text-transform: uppercase; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.08em; }
.story-dialog > p:nth-of-type(2) { padding: 4px 28px 0; color: #afb2ad; }
.story-dialog > .button { margin: 10px 28px 28px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 620ms ease, transform 620ms ease; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes hero-in { from { transform: scale(1.055); filter: brightness(0.7); } to { transform: scale(1); filter: brightness(1); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.38; } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (min-width: 901px) and (max-height: 720px) {
  .hero { min-height: 0; height: 100svh; }
  .hero-copy { top: 55%; width: min(620px, 46vw); transform: translateY(-50%); }
  .hero-copy.reveal.is-visible { transform: translateY(-50%); }
  .hero-copy h1 { font-size: clamp(3.35rem, 10vh, 5.05rem); line-height: 0.83; }
  .signal { margin-bottom: 12px; font-size: 0.58rem; }
  .meta { margin-top: 16px; font-size: 0.58rem; }
  .hero-lede { max-width: 490px; margin-top: 12px; font-size: 0.95rem; }
  .hero-actions { margin-top: 16px; }
  .hero-actions .button { min-height: 42px; padding-inline: 18px; font-size: 0.62rem; }
  .hero-manifesto { right: 26px; bottom: 30px; font-size: 0.78rem; }
  .hero-manifesto strong { font-size: 1.35rem; }
  .hero-status { display: none; }
}

@media (max-width: 1180px) {
  .story-rail { grid-template-columns: repeat(4, minmax(280px,1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--orange) transparent; }
  .story-card { scroll-snap-align: start; }
  .story-cover, .story-cover-wide { min-height: 480px; }
  .engine-layout, .submit-layout { grid-template-columns: 0.85fr 1.15fr; }
  .category-rail { grid-template-columns: repeat(4, minmax(300px,1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .category-card { scroll-snap-align: start; }
  .vision-timeline article { min-height: 360px; }
}

@media (max-width: 900px) {
  :root { --shell: calc(100% - 36px); }
  html { scroll-padding-top: 76px; }
  body { padding-bottom: 58px; }
  .site-header { height: 76px; background: rgba(10,12,12,0.68); backdrop-filter: blur(10px); }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .brand { width: 144px; }
  .menu-toggle { display: block; grid-column: 3; width: 42px; height: 42px; margin-left: 12px; border: 1px solid var(--line-strong); background: rgba(10,12,12,0.5); }
  .menu-toggle span { display: block; width: 17px; height: 1px; margin: 5px auto; background: white; transition: transform 160ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-header nav { position: fixed; top: 76px; right: 0; left: 0; display: none; height: calc(100svh - 76px); flex-direction: column; align-items: start; gap: 0; padding: 30px 18px; background: rgba(8,10,10,0.98); }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { width: 100%; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .header-cta { display: none; }
  .mobile-submit { position: fixed; z-index: 95; right: 0; bottom: 0; left: 0; display: flex; height: 58px; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--orange); color: #17120d; text-transform: uppercase; text-decoration: none; font-family: var(--mono); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.06em; }
  .hero { min-height: 760px; height: 100svh; }
  .hero-image { object-position: 62% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(5,7,7,0.99) 0%, rgba(5,7,7,0.88) 44%, rgba(5,7,7,0.12) 82%); }
  .hero-copy { top: auto; right: 18px; bottom: 108px; left: 18px; width: auto; transform: none; }
  .hero-copy.reveal.is-visible { transform: none; }
  h1 { font-size: clamp(3.1rem,13.6vw,6rem); }
  .signal { margin-bottom: 15px; font-size: 0.57rem; }
  .meta { margin-top: 20px; font-size: 0.57rem; }
  .meta span { padding-right: 8px; margin-right: 8px; }
  .hero-lede { max-width: 500px; margin-top: 15px; font-size: 0.98rem; }
  .hero-actions { margin-top: 21px; }
  .button { min-height: 50px; padding: 0 17px; font-size: 0.65rem; }
  .hero-manifesto { top: 96px; right: 18px; bottom: auto; font-size: 0.72rem; }
  .hero-manifesto strong { font-size: 1.2rem; }
  .hero-status { display: none; }
  .section-heading, .vision-copy { display: block; }
  .section-heading { margin-bottom: 46px; }
  .section-heading .kicker, .vision-copy .kicker { margin-bottom: 30px; }
  .section-heading > div { display: block; }
  .section-heading .heading-intro { max-width: 620px; margin-top: 22px; }
  .first-layout, .engine-layout, .mission-layout, .submit-layout { grid-template-columns: 1fr; }
  .first-100::before { inset: 44% -18% -8% -14%; clip-path: polygon(0 18%, 100% 0, 100% 100%, 8% 100%); }
  .first-100::after { top: auto; right: -0.03em; bottom: 7%; font-size: 24rem; transform: none; }
  .first-copy { max-width: 680px; }
  .memory-wall-wrap { box-shadow: 9px 9px 0 rgba(23,25,24,0.1); }
  .category-card { min-height: 380px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid li { min-height: 350px; }
  .transformation { grid-template-columns: 1fr; }
  .transform-arrow { width: auto; height: 80px; flex-direction: row; border: 0; border-block: 1px solid var(--line); }
  .transform-result { min-height: 360px; }
  .human-close { display: block; }
  .human-close .text-cta { margin-top: 30px; }
  .vision-copy h2, .vision-copy > p:last-child { grid-column: auto; }
  .vision-copy > p:last-child { margin-top: 24px; }
  .vision-timeline { grid-template-columns: 1fr; gap: 0; }
  .vision-timeline article { min-height: 280px; }
  .vision-timeline > i { width: 1px; height: 30px; margin-left: 34px; }
  .mission-head { max-width: 720px; }
  .submit-copy { position: static; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / 4; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100% - 28px); }
  .section { padding: 88px 0; }
  h2 { font-size: clamp(2.9rem,14vw,4.6rem); }
  .hero { min-height: 720px; }
  .hero-copy { bottom: 82px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .button { padding: 0 10px; }
  .story-rail { width: calc(100vw - 14px); grid-template-columns: repeat(4, minmax(78vw,1fr)); padding-right: 12vw; }
  .story-cover, .story-cover-wide { min-height: 460px; }
  .story-cover-wide .cover-copy h3, .story-cover:not(.story-cover-wide) .cover-copy h3 { font-size: 1.7rem; }
  .cover-play { opacity: 1; transform: translate(-50%,-50%); }
  .art-note { text-align: left; }
  .first-100::before { inset: 48% -42% -6% -32%; }
  .first-100::after { display: none; }
  .collection-count { gap: 12px; }
  .collection-count strong { font-size: 3.15rem; }
  .collection-count i { font-size: 2.4rem; }
  .collection-count small { max-width: 82px; font-size: 0.44rem; }
  .memory-wall { gap: 2px; padding: 7px; }
  .memory-slot { padding: 2px; font-size: 0.35rem; }
  .wall-head, .wall-legend { font-size: 0.48rem; }
  .category-rail { width: calc(100vw - 14px); grid-template-columns: repeat(4, minmax(80vw,1fr)); padding-right: 10vw; }
  .process-grid li { padding: 22px; }
  .transformation { min-height: auto; }
  .source-stack { height: 220px; }
  .source-stack figure { width: 82px; height: 118px; }
  .source-stack figure:nth-child(1) { left: 2%; }
  .source-stack figure:nth-child(2) { left: 14%; }
  .source-stack figure:nth-child(3) { left: 27%; }
  .source-stack figure:nth-child(4) { left: 40%; }
  .source-stack figure:nth-child(5) { left: 53%; }
  .source-stack figure:nth-child(6) { left: 66%; }
  .source-stack figure:nth-child(7) { left: 78%; }
  .source-stats { gap: 5px; font-size: 0.46rem; }
  .source-stats span { gap: 4px; }
  .source-stats b { font-size: 0.72rem; }
  .transform-result { min-height: 300px; }
  .console-flow { grid-template-columns: 1fr; min-height: 0; padding: 22px; }
  .console-flow::before { top: 10%; bottom: 10%; left: 50%; width: 1px; height: auto; background: linear-gradient(transparent, rgba(78,167,221,0.58) 24%, rgba(244,153,54,0.75) 50%, rgba(78,167,221,0.58) 76%, transparent); }
  .console-core { width: min(100%, 270px); margin: 8px auto; }
  .console-status { align-items: start; flex-direction: column; }
  .memory-lines { margin-top: 60px; }
  .human-close { margin-top: 60px; }
  .mission-cards { grid-template-columns: 1fr; }
  .mission-cards article { min-height: 340px; }
  .mission-cards b { margin: 45px 0; }
  .form-panel { width: calc(100% + 4px); margin-left: -2px; box-shadow: 8px 8px 0 rgba(23,25,24,0.1); }
  #story-form { padding: 24px 18px; }
  .field-grid.two { grid-template-columns: 1fr; gap: 0; }
  .form-progress { padding: 17px 18px; }
  .form-progress > div span:last-child { display: none; }
  .file-field { align-items: start; flex-direction: column; }
  .form-actions { display: grid; grid-template-columns: 0.72fr 1.28fr; }
  .form-actions .form-next, .form-actions .form-submit { grid-column: 2; }
  .form-actions .form-back:not([hidden]) + .form-next, .form-actions .form-back:not([hidden]) ~ .form-submit { grid-column: 2; }
  .final-cta { min-height: 620px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-brand p { margin-bottom: 30px; }
  .notice-toast { right: 12px; bottom: 70px; left: 12px; }
}

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