/* Natural Midang Korea — a designed hero whose map motion resolves into the product portrait. */
/* 색·글꼴 값은 brand.css 의 --hero-* 토큰(2026-10-09). 지도 그림 속 장식 색은 그림의 일부라 이 파일에 그대로 둔다. */
:root {
  --ink: var(--hero-ink);
  --ink-soft: var(--hero-ink-soft);
  --night: var(--hero-night);
  --paper: var(--hero-paper);
  --lime: var(--hero-lime);
  --line: var(--hero-line);
  --font: var(--f-body);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); -webkit-font-smoothing: antialiased; word-break: keep-all; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #7287e8; outline-offset: 4px; }
::selection { color: var(--ink); background: var(--lime); }

.hero { display: flex; flex-direction: column; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero-header, .hero-layout, .hero-footer { width: min(100% - 88px, 1536px); margin-inline: auto; }
.hero-header { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 28px; height: 110px; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; }
.brand-logo { display: block; width: auto; height: 58px; }   /* 2026-10-01 NM KOREA 로고(그림)로 교체 */
.header-right { display: flex; align-items: center; gap: clamp(24px, 5vw, 86px); }
.header-note { color: var(--ink); text-align: right; font-size: 13px; font-weight: 700; line-height: 1.7; letter-spacing: .13em; }
.header-contact { display: inline-flex; justify-content: center; align-items: center; gap: 32px; min-height: 44px; padding: 0 19px; border: 1px solid var(--ink); border-radius: 100px; font-size: 12px; font-weight: 700; transition: background .25s, color .25s; }
.header-contact:hover { color: var(--paper); background: var(--ink); }
.header-contact span { font-size: 17px; font-weight: 300; }

.hero-layout { display: grid; grid-template-columns: minmax(0, 48%) minmax(0, 52%); flex: 1; min-height: 0; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 26px 28px 58px 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 29px; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.eyebrow-line { width: 32px; height: 2px; background: var(--ink); }
.eyebrow-index { margin-left: 8px; color: #8090a7; font-weight: 600; }
.hero-copy h1 { margin: 0; font-size: clamp(52px, 5.3vw, 88px); font-weight: 800; letter-spacing: -.075em; line-height: 1.12; }
.hero-copy h1 em { position: relative; z-index: 0; color: #334d85; font-style: normal; white-space: nowrap; }
.hero-copy h1 em::after { position: absolute; z-index: -1; content: ""; left: 0; right: -.015em; bottom: .04em; height: .24em; border-radius: 2px; background: var(--lime); transform: skewX(-12deg); }
.hero-lead { margin: 33px 0 0; max-width: 30em; color: #46516f; font-size: clamp(15px, 1.18vw, 18px); font-weight: 500; line-height: 1.75; letter-spacing: -.025em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 27px; margin-top: 34px; }
.primary-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; min-height: 58px; padding: 0 24px 0 27px; border-radius: 100px; color: #fff; background: var(--ink); box-shadow: 0 14px 24px -17px #17265d8f; font-size: 15px; font-weight: 700; transition: transform .25s, box-shadow .25s; }
.primary-link:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -16px #17265d8f; }
.primary-link span { font-size: 22px; font-weight: 300; }
.secondary-link { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; }
.secondary-link span { font-size: 18px; font-weight: 300; }
.hero-process { display: flex; align-items: center; gap: 14px; width: min(100%, 552px); margin-top: clamp(54px, 7vh, 86px); padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; font-weight: 600; white-space: nowrap; }
.hero-process span { display: inline-flex; align-items: center; gap: 7px; }
.hero-process b { color: var(--ink); font-size: 10px; letter-spacing: .04em; }
.hero-process i { width: 18px; height: 1px; flex: none; background: #a9b4b2; }

.hero-visual { position: relative; min-height: min(68vw, 660px); max-height: 780px; margin: 0 0 30px; overflow: hidden; border-radius: 8px; background: #dfe1bc; box-shadow: 0 30px 70px -45px #0d1f5773; }
.photo-stage, .photo-stage picture, .photo-stage picture img, .map-stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-stage { overflow: hidden; background: #dfe1bc; }
.photo-stage picture { display: block; }
.photo-stage picture img { object-fit: cover; object-position: 70% 50%; }
.model-sign { position: absolute; right: 3%; bottom: 12%; width: min(30%, 185px); height: auto; transform: rotate(-4deg); }
.photo-badge { position: absolute; left: 25px; bottom: 25px; display: inline-flex; flex-direction: column; gap: 3px; padding: 11px 14px 9px; color: var(--ink); background: rgb(242 241 232 / .86); backdrop-filter: blur(9px); font-size: 13px; font-weight: 700; line-height: 1.2; }
.photo-badge b { color: #557095; font-size: 9px; letter-spacing: .13em; }

.map-stage { z-index: 2; overflow: hidden; color: #ebf2e4; background: radial-gradient(circle at 73% 36%, #284679 0, #172d5c 46%, #0e2049 100%); }
.map-stage::before { position: absolute; z-index: 1; content: ""; inset: 0; opacity: .55; background: radial-gradient(circle at 80% 40%, transparent 0 24%, #07163669 100%); pointer-events: none; }
.map-stage::after { position: absolute; z-index: 5; content: ""; left: 82%; top: 34%; width: 95%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.01); background: radial-gradient(circle, #faffd5 0 5%, #e9f7a5 17%, #dbec76aa 27%, #d9ec7700 65%); mix-blend-mode: screen; }
.map-grid { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(#a9c8d426 1px, transparent 1px), linear-gradient(90deg, #a9c8d426 1px, transparent 1px); background-size: 76px 76px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent); }
.map-graphic { position: absolute; z-index: 2; left: -41%; top: 18%; width: 145%; aspect-ratio: 2; }
.world-map, .flow-routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.world-map { opacity: .85; }
.flow-routes { overflow: visible; fill: none; }
.route { stroke: #d6f177; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 5px #daff7b); }
.source { fill: #d7ee74; opacity: 0; filter: drop-shadow(0 0 5px #dcff91); }
.korea-light { position: absolute; z-index: 5; left: 85.4%; top: 29.2%; width: 1px; height: 1px; }
.korea-light span, .korea-light b { position: absolute; left: 50%; top: 50%; display: block; width: 20px; height: 20px; border: 1.5px solid #ecf6ae; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.2); box-shadow: 0 0 15px #dbf77f8a; }
.korea-light b { width: 12px; height: 12px; border: 0; background: #e4f887; box-shadow: 0 0 16px 6px #d5ed79; opacity: 1; transform: translate(-50%, -50%); }
.korea-label { position: absolute; z-index: 4; left: 85.4%; top: 31.7%; color: #e9f4ce; font-size: 12px; font-weight: 800; letter-spacing: .15em; transform: translateX(-50%); white-space: nowrap; }
.korea-label span { display: block; margin-top: 5px; color: #b2c6b5; font-size: 8px; font-weight: 600; letter-spacing: .1em; text-align: center; }
.map-wordmark { position: absolute; z-index: 6; left: 50%; top: 50%; display: grid; place-items: center; gap: 0; width: 330px; height: 330px; transform: translate(-50%, -50%) scale(.22); opacity: 0; }
.map-wordmark strong { position: relative; z-index: 2; color: #f7f9e8; font-size: clamp(120px, 13vw, 190px); font-weight: 800; line-height: .85; letter-spacing: -.15em; padding-right: .15em; text-shadow: 0 6px 28px #09183a70; }
.map-wordmark > span { position: relative; z-index: 2; align-self: start; color: #d6e692; font-size: 11px; font-weight: 700; letter-spacing: .28em; }
.wordmark-orbit { position: absolute; z-index: 1; inset: 26px; border: 2px solid #d9ef7e; border-radius: 50%; transform: rotate(-28deg) scaleX(.62); box-shadow: 0 0 20px #cdef73a3, inset 0 0 15px #cdef7359; }
.wordmark-orbit::after { position: absolute; content: ""; inset: -1px; border: 1px solid #89b8e1; border-radius: 50%; transform: rotate(40deg) scaleX(.86); }
.map-topline, .map-bottomline { position: absolute; z-index: 8; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #e8f0df; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.map-topline { top: 27px; }
.map-bottomline { bottom: 26px; }
.map-stage-time { color: #d8ef8e; }
.skip-motion { padding: 8px 0 8px 10px; border: 0; color: #edf6dd; background: none; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: -.02em; }
.skip-motion:hover { color: var(--lime); }

.hero-footer { display: grid; grid-template-columns: 1fr minmax(300px, 425px) 1fr; align-items: center; gap: 22px; min-height: 74px; border-top: 1px solid var(--line); flex: none; }
.footer-edition { color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.footer-edition b { margin-left: 10px; color: #95a29e; font-weight: 600; }
.motion-timeline { display: flex; align-items: center; gap: 11px; }
.timeline-label, .timeline-time { color: var(--ink-soft); font-size: 9px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.timeline-time { color: var(--ink); }
.motion-progress { width: 100%; height: 2px; appearance: none; border: 0; background: #b5c1bf; }
.motion-progress::-webkit-progress-bar { background: #b5c1bf; }
.motion-progress::-webkit-progress-value { background: var(--ink); }
.motion-progress::-moz-progress-bar { background: var(--ink); }
.replay-motion { justify-self: end; min-height: 44px; padding: 8px 0 8px 10px; border: 0; color: var(--ink); background: none; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.replay-motion span { padding-left: 7px; font-size: 18px; font-weight: 300; vertical-align: -1px; }
.replay-motion:hover { color: #6070a8; }

/* The map, routes, light and wordmark are website graphics. No Blender frame is displayed. */
.js .hero[data-phase="playing"] .map-stage { animation: map-exit 3s linear both; }
.js .hero[data-phase="playing"] .world-map { animation: map-arrive .28s .04s both, map-dim .4s 1.84s forwards; }
.js .hero[data-phase="playing"] .route { animation: route-draw .76s ease-out forwards; }
.js .hero[data-phase="playing"] .route-a { animation-delay: .42s; }
.js .hero[data-phase="playing"] .route-b { animation-delay: .49s; }
.js .hero[data-phase="playing"] .route-c { animation-delay: .56s; }
.js .hero[data-phase="playing"] .route-d { animation-delay: .62s; }
.js .hero[data-phase="playing"] .route-e { animation-delay: .68s; }
.js .hero[data-phase="playing"] .source { animation: dot-in .12s forwards; }
.js .hero[data-phase="playing"] .source-a { animation-delay: .4s; }
.js .hero[data-phase="playing"] .source-b { animation-delay: .47s; }
.js .hero[data-phase="playing"] .source-c { animation-delay: .54s; }
.js .hero[data-phase="playing"] .source-d { animation-delay: .6s; }
.js .hero[data-phase="playing"] .source-e { animation-delay: .66s; }
.js .hero[data-phase="playing"] .korea-light span:nth-child(1) { animation: ring-wave .38s 1.28s ease-out both; }
.js .hero[data-phase="playing"] .korea-light span:nth-child(2) { animation: ring-wave .46s 1.4s ease-out both; }
.js .hero[data-phase="playing"] .korea-light span:nth-child(3) { animation: ring-wave .52s 1.5s ease-out both; }
.js .hero[data-phase="playing"] .map-stage::after { animation: light-bloom .64s 1.32s ease-out both; }
.js .hero[data-phase="playing"] .map-wordmark { animation: wordmark-rise .4s 1.88s cubic-bezier(.17,.67,.2,1) both; }
.js .hero[data-phase="playing"] .photo-stage picture img { animation: photo-drift 3s ease-out both; }
.js .hero[data-phase="playing"] .hero-copy > * { animation: copy-rise .21s both; }
.js .hero[data-phase="playing"] .hero-eyebrow { animation-delay: .05s; }
.js .hero[data-phase="playing"] .hero-copy h1 { animation-delay: .08s; }
.js .hero[data-phase="playing"] .hero-lead { animation-delay: .13s; }
.js .hero[data-phase="playing"] .hero-actions { animation-delay: .18s; }
.js .hero[data-phase="playing"] .hero-process { animation-delay: .22s; }
.js .hero[data-phase="complete"] .map-stage { display: none; }
.js .hero[data-phase="complete"] .photo-stage picture img { transform: none; }
@keyframes map-arrive { from { opacity: .45; transform: scale(.98); } to { opacity: .85; transform: scale(1); } }
@keyframes map-dim { from { opacity: .85; } to { opacity: .24; } }
@keyframes route-draw { from { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes dot-in { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ring-wave { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(24); } }
@keyframes light-bloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.01); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
@keyframes wordmark-rise { 0% { opacity: 0; transform: translate(4%, -65%) scale(.18); filter: blur(12px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes map-exit { 0%, 79% { opacity: 1; clip-path: inset(0); } 89% { opacity: 1; clip-path: circle(66% at 82% 34%); } 100% { opacity: 0; clip-path: circle(0 at 82% 34%); } }
/* 남색 지도가 로고 자리를 덮는 동안만 로고를 흰색으로 — 지도가 걷히는 2.4초 무렵 원래 색으로 돌아온다 */
.js .hero[data-motion-consent="play"][data-phase="reset"] .brand-logo { filter: brightness(0) invert(1); }
.js .hero[data-phase="playing"] .brand-logo { animation: logo-on-map 3s linear both; }
@keyframes logo-on-map { 0%, 78% { filter: brightness(0) invert(1); } 86%, 100% { filter: none; } }
@keyframes photo-drift { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes copy-rise { from { opacity: 1; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1100px) and (min-width: 801px) {
  .hero-header, .hero-layout, .hero-footer { width: min(100% - 48px, 1536px); }
  .hero-layout { grid-template-columns: minmax(0, 51%) minmax(0, 49%); }
  .hero-copy h1 { font-size: clamp(47px, 5vw, 62px); }
  .hero-process { gap: 9px; font-size: 10px; }
  .hero-process i { width: 9px; }
  .hero-footer { grid-template-columns: 1fr auto; }
  .motion-timeline { display: none; }
}

@media (max-width: 800px) {
  .hero-header, .hero-layout, .hero-footer { width: min(100% - 32px, 560px); }
  .hero-header { height: 72px; }
  .brand { gap: 9px; min-height: 44px; }
  .brand-logo { height: 46px; }
  .header-note { display: none; }
  .header-contact { min-height: 38px; gap: 12px; padding: 0 12px; font-size: 11px; }
  .header-contact span { font-size: 15px; }
  .hero-layout { display: flex; flex-direction: column; min-height: 0; }
  .hero-copy { flex: none; padding: 26px 0 23px; }
  .hero-eyebrow { margin-bottom: 16px; font-size: 9px; letter-spacing: .13em; }
  .eyebrow-line { width: 22px; }
  .hero-copy h1 { font-size: clamp(37px, 9.5vw, 54px); line-height: 1.12; }
  .hero-lead { margin-top: 16px; font-size: 14px; line-height: 1.6; }
  .hero-actions { gap: 19px; margin-top: 19px; }
  .primary-link { min-height: 46px; gap: 27px; padding: 0 16px 0 19px; font-size: 13px; }
  .primary-link span { font-size: 18px; }
  .secondary-link { min-height: 42px; font-size: 12px; }
  .secondary-link span { font-size: 15px; }
  .hero-process { display: none; }
  .hero-visual { width: 100%; min-height: 0; max-height: none; aspect-ratio: .9; flex: none; margin: 0 0 19px; }
  .photo-stage picture img { object-position: 50% 19%; }
  .model-sign { bottom: 7%; width: min(35%, 145px); }
  .photo-badge { left: 13px; bottom: 13px; padding: 8px 10px 7px; font-size: 11px; }
  .photo-badge b { font-size: 8px; }
  .map-graphic { left: -22%; top: 25%; width: 124%; }
  .map-wordmark { width: 245px; height: 245px; }
  .map-wordmark strong { font-size: 136px; }
  .wordmark-orbit { inset: 15px; }
  .map-topline, .map-bottomline { left: 16px; right: 16px; font-size: 8px; }
  .map-topline { top: 16px; }
  .map-bottomline { bottom: 14px; }
  .korea-label { font-size: 9px; }
  .korea-label span { font-size: 7px; }
  .hero-footer { grid-template-columns: 1fr auto; min-height: 54px; }
  .footer-edition { font-size: 9px; }
  .footer-edition b { display: none; }
  .motion-timeline { display: none; }
  .replay-motion { font-size: 10px; }
}

@media (max-width: 380px) {
  .hero-copy { padding-top: 15px; }
  .hero-copy h1 { font-size: 35px; }
  .hero-lead { font-size: 13px; }
  .hero-actions { gap: 13px; }
  .hero-visual { aspect-ratio: .9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero:not([data-motion-consent="play"]) .map-stage { display: none !important; }
  .hero:not([data-motion-consent="play"]) *, .hero:not([data-motion-consent="play"]) *::before, .hero:not([data-motion-consent="play"]) *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero:not([data-motion-consent="play"]) .motion-timeline { display: none; }
}

html:not(.js) .map-stage { display: none; }

/* Full-viewport direction: the map owns the opening; the brand and photograph resolve it. */
.hero { position: relative; min-height: 100svh; color: var(--ink); background: var(--hero-night-deep); }
.hero[data-phase="playing"], .hero[data-phase="reset"] {
  --ink: var(--hero-dark-ink);
  --ink-soft: var(--hero-dark-ink-soft);
  --paper: var(--hero-night-deep);
  --line: #ffffff4d;
}
.hero-header, .hero-footer { position: absolute; z-index: 10; left: 50%; width: min(100% - 96px, 1640px); margin: 0; transform: translateX(-50%); }
.hero-header { top: 0; height: 96px; }
.hero-footer { bottom: 0; min-height: 74px; }
.hero[data-phase="complete"] .hero-footer { width: 100%; padding-inline: max(48px, calc((100vw - 1640px) / 2)); background: #f2f4d8d9; backdrop-filter: blur(12px); }
.header-contact { display: none; }
.hero[data-phase="complete"] .header-contact { display: inline-flex; }
.hero-layout { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; }
.hero-visual { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
.photo-stage { background: #e9edc2; }
.photo-stage picture img { object-position: center center; }
.photo-stage::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, #e8edc0 0, #e8edc0bb 25%, transparent 57%); pointer-events: none; }
.photo-badge { right: clamp(46px, 5vw, 100px); left: auto; bottom: 120px; border: 1px solid #15275c22; background: #f7f8e8eb; }
.model-sign { right: 4%; bottom: 60%; width: min(15vw, 200px); }   /* 2026-10-01 모델을 키운 뒤 상자와 겹쳐 얼굴 오른쪽 빈 배경으로 옮김 */
.hero-copy { position: absolute; z-index: 4; left: max(48px, calc((100vw - 1640px) / 2)); top: 50%; width: min(52vw, 780px); padding: 0; opacity: 0; transform: translateY(-41%); pointer-events: none; }
.hero-copy h1 { display: flex; flex-direction: column; font-size: clamp(72px, 8.1vw, 142px); font-weight: 850; line-height: .87; letter-spacing: -.092em; }
.hero-copy h1 span, .hero-copy h1 em { display: block; }
.hero-copy h1 em { color: #294985; font-style: normal; }
.hero-copy h1 em::after { right: 3%; bottom: -.025em; height: .15em; }
.hero-eyebrow { margin-bottom: 28px; font-size: 11px; }
.hero-lead { margin-top: 35px; max-width: 38em; font-size: clamp(14px, 1.15vw, 18px); }
.hero-actions { margin-top: 26px; }
.hero-process, .secondary-link { display: none; }
.hero[data-phase="complete"] .hero-copy { opacity: 1; pointer-events: auto; }
.js .hero[data-phase="playing"] .hero-copy { animation: full-copy-reveal .23s 2.62s ease-out both; }
.js .hero[data-phase="playing"] .hero-copy > * { animation: none; }
.js .hero[data-phase="playing"] .photo-stage picture img { animation: photo-drift 3s ease-out both; }
.map-stage { background: radial-gradient(circle at 74% 37%, #2e4d7a 0, #102755 42%, #071a3b 100%); }
.map-grid { background-size: 100px 100px; opacity: .29; }
.map-graphic { left: -13%; top: 12%; width: 105%; }
.world-map { opacity: .82; }
.flow-routes .route { stroke-width: 2.8; }
.korea-light { left: 85.4%; top: 29.2%; }
.map-stage::after { left: 75%; top: 36%; }
.map-wordmark { left: 50%; top: 48%; width: min(40vw, 560px); height: min(40vw, 560px); }
.map-wordmark strong { font-size: clamp(160px, 20vw, 300px); }
.map-wordmark > span { font-size: clamp(10px, 1vw, 15px); }
.map-topline { top: 120px; left: 4%; right: 4%; font-size: 11px; }
.map-bottomline { bottom: 110px; left: 4%; right: 4%; font-size: 11px; }
.map-topline > span { letter-spacing: .22em; }
.hero-footer { grid-template-columns: 1fr minmax(300px, 530px) 1fr; }
.footer-edition b { opacity: .7; }
.motion-progress::-webkit-progress-value { background: #d8e981; }
.motion-progress::-moz-progress-bar { background: #d8e981; }
.hero[data-phase="complete"] .motion-progress::-webkit-progress-value { background: #1c315e; }
.hero[data-phase="complete"] .motion-progress::-moz-progress-bar { background: #1c315e; }
.hero[data-phase="playing"]::before { position: absolute; z-index: 5; inset: 0; content: ""; background: linear-gradient(#071a3b99, transparent 19%, transparent 80%, #071a3b88); pointer-events: none; }
@keyframes full-copy-reveal { from { opacity: 0; transform: translateY(calc(-41% + 36px)); filter: blur(8px); } to { opacity: 1; transform: translateY(-41%); filter: blur(0); } }
@keyframes wordmark-rise { 0% { opacity: 0; left: 75%; top: 36%; transform: translate(-50%, -50%) scale(.1); filter: blur(14px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; left: 50%; top: 48%; transform: translate(-50%, -50%) scale(1); } }
@keyframes map-exit { 0%, 79% { opacity: 1; clip-path: inset(0); } 89% { opacity: 1; clip-path: circle(74% at 50% 48%); } 100% { opacity: 0; clip-path: circle(0 at 50% 48%); } }

@media (max-width: 1100px) and (min-width: 801px) {
  .hero-header, .hero-footer { width: calc(100% - 64px); }
  .hero-copy { left: 32px; width: 58vw; }
  .hero-copy h1 { font-size: clamp(62px, 8.5vw, 104px); }
  .hero-footer { grid-template-columns: 1fr auto; }
  .map-graphic { left: -20%; width: 118%; top: 18%; }
}

@media (max-width: 800px) {
  .hero { min-height: 100svh; }
  .hero-header, .hero-footer { width: calc(100% - 36px); }
  .hero-header { height: 68px; }
  .hero-footer { min-height: 62px; }
  .hero[data-phase="complete"] .hero-footer { padding-inline: 18px; }
  .brand-logo { height: 44px; }
  .header-note { display: block; font-size: 9px; line-height: 1.5; letter-spacing: .06em; }
  .hero-copy { top: auto; bottom: 77px; left: 18px; width: calc(100% - 36px); padding: 0; transform: none; }
  .hero-copy h1 { font-size: clamp(47px, 14vw, 78px); line-height: .86; }
  .hero-eyebrow { margin-bottom: 14px; font-size: 8px; }
  .hero-lead { margin-top: 20px; font-size: 12px; line-height: 1.55; }
  .hero-actions { margin-top: 16px; }
  .primary-link { min-height: 42px; font-size: 12px; }
  .photo-stage picture img { height: 62%; object-position: center 13%; }
  .photo-stage::after { background: linear-gradient(180deg, transparent 0 42%, #e8edc0bb 59%, #e8edc0 67% 100%); }
  .photo-badge, .model-sign { display: none; }
  .map-graphic { left: -85%; top: 18%; width: 190%; }
  .map-stage::after { left: 77%; top: 45%; }
  .map-wordmark { width: min(84vw, 390px); height: min(84vw, 390px); }
  .map-wordmark strong { font-size: clamp(124px, 43vw, 210px); }
  .map-wordmark > span { font-size: 8px; letter-spacing: .16em; }
  .map-topline, .map-bottomline { left: 18px; right: 18px; font-size: 8px; }
  .map-topline { top: 90px; }
  .map-bottomline { bottom: 85px; }
  .hero-footer { grid-template-columns: 1fr auto; }
  .footer-edition { font-size: 8px; }
  .replay-motion { font-size: 9px; }
  .js .hero[data-phase="playing"] .hero-copy { animation: mobile-copy-reveal .23s 2.62s ease-out both; }
  @keyframes mobile-copy-reveal { from { opacity: 0; transform: translateY(30px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
  @keyframes wordmark-rise { 0% { opacity: 0; left: 77%; top: 45%; transform: translate(-50%, -50%) scale(.1); filter: blur(14px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; left: 50%; top: 48%; transform: translate(-50%, -50%) scale(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .hero:not([data-motion-consent="play"]) { --ink: #17265d !important; --ink-soft: #53608a !important; --paper: #f2f1e8 !important; --line: #d8dbd2 !important; }
  .hero:not([data-motion-consent="play"]) .hero-copy { opacity: 1 !important; pointer-events: auto; }
  .hero:not([data-motion-consent="play"]) .header-contact { display: inline-flex; }
  .hero:not([data-motion-consent="play"])::before { display: none; }
}
html:not(.js) .hero { --ink: #17265d; --ink-soft: #53608a; --paper: #f2f1e8; --line: #d8dbd2; }
html:not(.js) .hero-copy { opacity: 1; pointer-events: auto; }