:root { color-scheme: dark; --ink: #101114; --journey: 10000px; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: #fff; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.journey { height: calc(100vh + var(--journey)); height: calc(100svh + var(--journey)); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: var(--ink); }
.scene, .picture, .media, .dark-plane { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene { overflow: hidden; background: var(--ink); }
.scene-one { z-index: 0; }
.media { object-fit: cover; object-position: center; pointer-events: none; }
.poster { z-index: 0; }
.film, .sequence { opacity: 0; z-index: 1; }
.scene[data-renderer="video"][data-ready="true"] .film,
.scene[data-renderer="frames"][data-ready="true"] .sequence { opacity: 1; }
.masthead { position: absolute; z-index: 8; left: max(22px, env(safe-area-inset-left)); top: max(23px, env(safe-area-inset-top)); }
.logo { width: 74px; height: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 5px #0004); }
.dark-plane { z-index: 4; background: var(--ink); transform: translate3d(0,100%,0); will-change: transform; pointer-events: none; }
.scene-two { z-index: 3; visibility: hidden; clip-path: inset(0 0 100% 0); will-change: clip-path; }
.scene-two .picture { will-change: transform; }
/* Keep the complete horizontal composition and both billboards on mobile. */
.scene-two .media { object-fit: contain; object-position: center top; transform: scale(1.3); transform-origin: center top; }
.status { position: absolute; z-index: 4; left: 22px; right: 22px; bottom: calc(30px + env(safe-area-inset-bottom)); text-align: center; font-size: 10px; line-height: 1.5; text-shadow: 0 1px 6px #000; }
.status:empty { display: none; }
.no-script { position: absolute; z-index: 5; bottom: 120px; width: 100%; text-align: center; font-size: 12px; }
@media (min-aspect-ratio: 4/5) {
  .scene-one .media { object-fit: contain; }
}
@media (max-height: 480px) { .logo { width: 50px; } }

.cover-copy { position:absolute; z-index:1; left:max(24px,env(safe-area-inset-left)); bottom:calc(52px + env(safe-area-inset-bottom)); max-width:calc(100% - 70px); }
.cover-copy::before { content:""; position:absolute; inset:-60px -30px -70px; background:linear-gradient(transparent,#0009); z-index:-1; pointer-events:none; }
.eyebrow { font-size:9px; font-weight:700; letter-spacing:.18em; line-height:1.5; margin:0 0 16px; color:#fff; }
.color-copy { --fill:0%; margin:0; font-family:Arial,Helvetica,sans-serif; font-size:clamp(36px,9vw,88px); font-weight:900; letter-spacing:-.065em; line-height:.91; background:linear-gradient(105deg,#ff4856 var(--fill),#fff calc(var(--fill) + 12%)); color:transparent; background-clip:text; -webkit-background-clip:text; }
.explore { margin-top:22px; padding:10px 0; background:none; border:0; color:#fff; font:700 9px Arial,sans-serif; letter-spacing:.13em; cursor:pointer; }
.explore span { display:inline-block; margin-left:14px; font-size:20px; vertical-align:middle; }
.discovery-copy { position:absolute; left:max(24px,env(safe-area-inset-left)); right:24px; top:50%; transform:translateY(-50%); }
.discovery-copy h2 { font-size:clamp(35px,9.1vw,104px); }
.scene-nav { position:absolute; z-index:8; right:max(16px,env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); display:flex; gap:6px; }
.scene-nav button { width:44px; height:44px; border:1px solid #ffffff65; border-radius:50%; background:#101114aa; color:#fff; font:700 10px Arial,sans-serif; cursor:pointer; }
.scene-nav button[aria-current="step"] { color:#101114; background:#ff6672; border-color:#ff6672; }
button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.journey-progress { position:absolute; bottom:0; left:0; width:100%; height:2px; z-index:9; background:#ffffff20; }
#journey-fill { width:100%; height:100%; background:#ff4856; transform:scaleX(0); transform-origin:left; }
@media(min-width:760px) { .cover-copy,.discovery-copy { left:5vw; } .cover-copy { bottom:70px; } }
@media(max-height:500px) { .cover-copy { bottom:30px; } .color-copy,.discovery-copy h2 { font-size:clamp(26px,7vh,42px); } .eyebrow { margin-bottom:8px; } .explore { margin-top:10px; } }

.national-map { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:90px 20px; opacity:0; pointer-events:none; }
.national-map .eyebrow { color:#ff6672; font-size:11px; letter-spacing:.25em; margin-bottom:25px; }
.national-map svg { width:min(100%,780px); height:auto; max-height:65vh; overflow:visible; }
.mexico-land { fill:#191d26; stroke:#59667d; stroke-width:1.3; stroke-linejoin:round; }
.coverage-point { fill:#729dff; opacity:0; }
.point-halo { fill:#2459ed; opacity:.35; filter:drop-shadow(0 0 6px #729dff); }

/* Keep the invitation above the map throughout the coverage sequence. */
.discovery-copy { transform-origin:top left; z-index:1; }
.national-map { inset:48% 0 7%; padding:0 22px; justify-content:center; }
.national-map .eyebrow { margin-bottom:12px; font-size:9px; }
.national-map svg { width:min(100%,640px); max-height:calc(100% - 30px); }
@media(max-height:500px) { .national-map { inset:45% 0 12%; } .national-map .eyebrow { margin-bottom:5px; font-size:8px; } }

.site-specs { position:absolute; z-index:5; top:clamp(200px,76vw,52%); left:max(24px,env(safe-area-inset-left)); right:max(24px,env(safe-area-inset-right)); max-width:640px; padding:20px 0 14px; color:#c1c3c8; opacity:0; visibility:hidden; pointer-events:none; }
.spec-heading { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.18em; border-top:1px solid #b8bdc633; padding-top:15px; }
.site-specs h2 { font-size:clamp(24px,6.5vw,42px); line-height:.98; letter-spacing:-.035em; font-weight:600; margin:15px 0 20px; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 14px; }
.spec-item { display:flex; gap:10px; align-items:center; }
.spec-item svg { width:21px; height:21px; flex:none; fill:none; stroke:#9299a6; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.spec-item span { display:block; color:#9299a6; font-size:8px; letter-spacing:.09em; margin-bottom:5px; }
.spec-item strong { font-size:13px; font-weight:400; }
.spec-note { font-size:8px; color:#858c99; line-height:1.5; max-width:430px; margin-top:19px; }
@media(min-aspect-ratio:4/5) { .site-specs { top:auto; bottom:3%; background:#101114ed; padding:22px 28px; left:5vw; right:auto; width:min(640px,85vw); } }
@media(max-height:600px) and (max-aspect-ratio:4/5) { .site-specs { top:40%; padding-top:12px; } .site-specs h2 { margin:10px 0 12px; } .spec-grid { gap:12px; } }

/* Real two-wall specifications, sized to fit beneath the mobile film. */
.site-specs h2 { font-size:clamp(21px,5.3vw,32px); line-height:1.05; margin:13px 0 17px; }
.spec-item strong { line-height:1.4; font-size:12px; }
.spec-heading { gap:14px; }
.spec-note { margin-top:14px; line-height:1.6; }

/* Clean first frame; the interface follows the visitor's first scroll. */
.cover-copy,.masthead,.side-menu,.journey-progress { opacity:0; }
.cover-copy { padding:24px; left:20px; bottom:24px; width:max-content; max-width:calc(100% - 40px); isolation:isolate; }
.cover-copy::before { inset:0; border:1px solid #ffffff12; background:linear-gradient(115deg,#000c 0%,#0009 60%,#0002 100%); border-radius:2px; }
.cover-copy h1 { font-size:clamp(36px,8.4vw,78px); }
.cover-copy .explore { margin-top:14px; }
.side-menu { position:absolute; z-index:10; top:110px; left:20px; display:flex; flex-direction:column; gap:5px; }
.side-menu :is(button,a) { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:40px; width:132px; padding:9px 12px; border:1px solid #ffffff25; color:#eee; background:#101114a8; backdrop-filter:blur(8px); font:500 11px Arial,sans-serif; text-align:left; cursor:pointer; }
.side-menu :is(button,a) span { color:#aeb3bb; }
.side-menu :is(button,a):hover { background:#101114e8; }
.site-panel { position:fixed; inset:0; margin:0; padding:0; border:0; width:100%; height:100dvh; max-width:none; max-height:none; color:#f5f5f5; background:#14171d; transform:translateX(-100%); transition:transform .55s cubic-bezier(.22,.75,.2,1); overflow-y:auto; overscroll-behavior:contain; }
.site-panel[data-open="true"] { transform:translateX(0); }
.site-panel::backdrop { background:#0008; }
.site-panel[data-kind="crew"] { background:#2459ed; }
.site-panel[data-kind="clients"] { background:#c5c6c9; color:#181a1f; }
.site-panel[data-kind="contact"] { background:#ff4856; color:#181a1f; }
.panel-top { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:max(22px,env(safe-area-inset-top)) 24px 18px; background:inherit; }
.panel-top img { filter:brightness(0) invert(1); }
[data-kind="clients"] .panel-top img,[data-kind="contact"] .panel-top img { filter:brightness(0); }
.panel-close { border:0; background:transparent; color:inherit; cursor:pointer; font:600 10px Arial,sans-serif; letter-spacing:.1em; min-height:44px; padding:8px; }
.panel-close span { font-size:28px; margin-left:18px; vertical-align:middle; }
.panel-body { padding:35px 24px 80px; max-width:1000px; margin:auto; }
.panel-kicker { font-size:9px; letter-spacing:.15em; margin-bottom:28px; }
.panel-body h2 { font-size:clamp(50px,12vw,112px); letter-spacing:-.065em; line-height:.9; margin:0 0 38px; }
.panel-lead { font-size:clamp(27px,5vw,50px); line-height:1.1; letter-spacing:-.03em; margin:0 0 28px; }
.panel-text { max-width:580px; font-size:15px; line-height:1.65; margin:0 0 24px; }
.location-link { display:block; width:100%; color:inherit; background:none; border:0; border-top:1px solid #ffffff40; padding:24px 0; text-align:left; cursor:pointer; }
.location-link span { display:block; font-size:10px; letter-spacing:.1em; }
.location-link strong { display:block; font-size:clamp(29px,6vw,50px); margin:16px 0; font-weight:500; line-height:1; }
.contact-email { display:inline-block; color:inherit; font-size:clamp(18px,4vw,30px); margin:8px 0 40px; text-underline-offset:7px; overflow-wrap:anywhere; }
@media(max-height:650px) { .side-menu { top:82px; gap:3px; } .side-menu :is(button,a) { min-height:32px; padding:6px 10px; } .cover-copy { padding:17px; bottom:14px; } .cover-copy h1 { font-size:32px; } .cover-copy .eyebrow { margin-bottom:10px; } .cover-copy .explore { margin-top:8px; } }
@media(prefers-reduced-motion:reduce) { .site-panel { transition:none; } }

/* Small color-only navigation, with accessible 44px touch targets. */
.cover-copy { background:none; padding:0; left:max(24px,env(safe-area-inset-left)); bottom:calc(88px + env(safe-area-inset-bottom)); }
.cover-copy::before { content:none; }
.cover-copy .eyebrow,.cover-copy .explore { text-shadow:0 1px 8px #0009; }
.side-menu { top:auto; bottom:calc(18px + env(safe-area-inset-bottom)); left:max(14px,env(safe-area-inset-left)); flex-direction:row; gap:0; }
.side-menu :is(button,a),.side-menu :is(button,a):hover { position:relative; display:block; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:transparent; backdrop-filter:none; opacity:0; }
.side-menu :is(button,a)::before { content:""; position:absolute; width:19px; height:19px; left:12px; top:12px; border-radius:50%; background:var(--dot); box-shadow:0 0 0 1px #ffffff55,0 2px 7px #0003; }
.side-menu [data-panel="locations"] { --dot:#14171d; }
.side-menu [data-panel="crew"] { --dot:#2459ed; }
.side-menu [data-panel="clients"] { --dot:#c5c6c9; }
.side-menu [data-panel="contact"] { --dot:#ff4856; }
.side-menu :is(button,a):focus-visible { outline:1px solid #fff; outline-offset:-3px; }

/* Right-side vertical color navigation and a stronger cinematic title. */
.side-menu { left:auto; right:max(12px,env(safe-area-inset-right)); top:auto; bottom:calc(20px + env(safe-area-inset-bottom)); flex-direction:column; gap:3px; }
.cover-copy { bottom:calc(38px + env(safe-area-inset-bottom)); max-width:calc(100% - 86px); }
.cover-copy h1 { font-size:clamp(42px,11.5vw,112px); line-height:.9; letter-spacing:-.065em; filter:drop-shadow(0 2px 7px #0005); }
.scene-one::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:var(--hero-shade,0); background:linear-gradient(to top,#000d 0%,#0008 25%,#0002 52%,transparent 72%),linear-gradient(90deg,#0004,transparent 70%); }
@media(max-height:650px) { .cover-copy h1 { font-size:clamp(36px,10.8vw,58px); } .cover-copy { bottom:24px; } }

.side-menu :is(button,a) { will-change:transform,opacity; }

/* Editorial content: the established scroll timeline and navigation stay intact. */
.editorial-link { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-height:44px; max-width:100%; padding:12px 0; border:0; border-bottom:1px solid currentColor; border-radius:0; background:transparent; color:inherit; font:700 11px/1.4 Arial,sans-serif; letter-spacing:.08em; text-align:left; text-decoration:none; cursor:pointer; transition:color .2s,border-color .2s; }
.editorial-link span { display:inline-block; font-size:20px; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.editorial-link:hover span,.editorial-link:focus-visible span { transform:translate(4px,-4px); }
.editorial-link:hover { color:#ff8d96; }
.editorial-link:active { opacity:.7; }
.editorial-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.hero-cta { display:flex; width:max-content; margin-top:3px; font-size:10px; }
.cover-copy { bottom:calc(92px + env(safe-area-inset-bottom)); }
.cover-copy h1 { font-size:clamp(38px,10.3vw,104px); }
.cover-copy .explore { margin-top:13px; }
.map-caption { margin:0; max-width:300px; color:#b6bac5; font-size:11px; line-height:1.5; }
.national-map { padding-bottom:22px; }
.national-map svg { flex:1; min-height:0; max-height:calc(100% - 75px); }
.site-specs .editorial-link { pointer-events:auto; color:#e0e1e5; font-size:10px; }
.gallery-teaser { position:absolute; top:59%; bottom:35px; left:max(24px,env(safe-area-inset-left)); right:max(68px,env(safe-area-inset-right)); display:flex; flex-direction:column; gap:16px; }
.teaser-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.teaser-heading .eyebrow { max-width:180px; margin:0; color:#b6bac5; }
.teaser-heading .editorial-link { flex-shrink:0; font-size:9px; }
.teaser-photos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; flex:1; min-height:0; max-height:220px; }
.teaser-photos button { padding:0; border:0; overflow:hidden; background:#181a1e; cursor:pointer; }
.teaser-photos img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.teaser-photos button:hover img { transform:scale(1.04); }
.editorial-gallery { margin:55px 0 0; }
.space-story { margin:0 0 58px; padding-bottom:30px; border-bottom:1px solid #ffffff26; }
.space-story>img { display:block; width:100%; max-height:75svh; height:auto; object-fit:contain; background:#101114; }
.space-story figcaption { padding-top:20px; }
.space-story .eyebrow { color:#b6bac5; font-size:9px; }
.space-story h3 { font-size:clamp(27px,6vw,56px); font-weight:600; letter-spacing:-.045em; line-height:1.05; margin:0 0 14px; max-width:650px; }
.gallery-disclaimer { font-size:11px; opacity:.7; }
.whatsapp-fixed { position:fixed; z-index:15; left:max(18px,env(safe-area-inset-left)); bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:10px; min-height:48px; padding:12px 16px; background:#14171df0; color:#fff; border:1px solid #ffffff70; border-radius:28px; text-decoration:none; opacity:0; box-shadow:0 3px 18px #0003; }
.whatsapp-fixed svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.whatsapp-fixed span { font:700 9px Arial,sans-serif; letter-spacing:.1em; }
.whatsapp-fixed:hover { background:#fff; color:#14171d; }
.whatsapp-fixed:focus-visible { outline:2px solid #ff4856; outline-offset:4px; }
.finale-phone { font-size:13px; min-height:44px; display:flex; align-items:center; }
.contact-finale { padding-bottom:calc(85px + env(safe-area-inset-bottom)); }
.finale-copy>p:last-child { line-height:1.5; }
.site-panel .editorial-link { margin-bottom:18px; }
@media(min-width:900px) { .editorial-gallery { max-width:1040px; } .space-story:nth-child(even) { margin-left:12%; } .space-story:nth-child(odd) { margin-right:12%; } }
@media(max-height:650px) { .gallery-teaser { top:58%; bottom:20px; gap:8px; } .teaser-heading .eyebrow { display:none; } .cover-copy { bottom:80px; } .hero-cta { padding:6px 0; } }
@media(prefers-reduced-motion:reduce) { .editorial-link,.editorial-link span,.teaser-photos img { transition:none; } }

/* Final brand-color plane: native upward scroll, no extra media or scroll lock. */
.contact-finale { position:relative; z-index:11; min-height:100svh; padding:max(30px,env(safe-area-inset-top)) max(26px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(26px,env(safe-area-inset-left)); background:#ff4856; color:#fff; display:flex; flex-direction:column; align-items:center; text-align:center; gap:30px; }
.finale-logo { display:block; flex-shrink:0; width:112px; height:auto; filter:brightness(0) invert(1); }
.finale-copy { margin:auto 0; padding:24px 0; }
.finale-copy h2 { margin:0; font-size:clamp(43px,11.8vw,100px); line-height:.91; letter-spacing:-.065em; font-weight:900; }
.finale-copy>p:last-child { font-size:clamp(14px,3.6vw,19px); margin:22px 0 0; }
.finale-contact { width:min(100%,470px); display:flex; flex-direction:column; align-items:center; gap:13px; }
.finale-contact a { color:inherit; text-decoration:none; }
.finale-cta { width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 23px; border:1px solid #ffffffb3; border-radius:2px; font-size:13px; font-weight:700; letter-spacing:.14em; }
.finale-cta:hover { background:#fff; color:#ff4856; }
.finale-cta span { font-size:23px; line-height:1; }
.finale-email { font-size:14px; padding:5px; overflow-wrap:anywhere; }
.finale-pending { margin:0; color:#fffc; font-size:10px; line-height:1.5; }
.finale-socials { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.finale-socials button { font:600 12px Arial,sans-serif; color:#fffc; border:1px solid #ffffff70; border-radius:30px; background:transparent; padding:12px 17px; min-height:44px; cursor:not-allowed; }
.finale-signoff { margin:9px 0 0; font-size:8px; letter-spacing:.2em; }
.contact-finale a:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.contact-finale.is-pinned { position:absolute; inset:0 0 auto; width:100%; min-height:100%; padding-bottom:calc(85px + env(safe-area-inset-bottom)); transform:translate3d(0,100%,0); will-change:transform; box-shadow:0 -25px 70px #0003; }
.scene-three { transform-origin:50% 35%; will-change:transform,opacity; }
@media(prefers-reduced-motion:reduce) { .contact-finale.is-pinned { box-shadow:none; } }
@media(min-width:760px) { .contact-finale { gap:25px; } .finale-copy { padding:30px 0; } .finale-copy h2 { font-size:clamp(60px,7vw,100px); } }
.impact-plane { z-index:7; }
.impact-copy { position:absolute; top:50%; left:max(24px,env(safe-area-inset-left)); right:70px; transform:translateY(-50%); }
.impact-copy h2 { font-size:clamp(34px,8.7vw,104px); }
.scene-three { z-index:6; visibility:hidden; }
.scene-three .media { object-fit:cover; object-position:30% center; }
.scene-three .picture { height:55%; bottom:auto; will-change:transform; }
@media(min-width:760px) { .impact-copy { left:5vw; } }
@media(max-height:500px) { .impact-copy h2 { font-size:clamp(26px,8vh,42px); } }

/* Lightweight opening; motion uses only composited transforms and opacity. */
/* Never lock native page scrolling for a media preloader. */
.preloader { pointer-events:none; position:fixed; inset:0; z-index:100; background:#101114; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:32px; transition:transform .6s cubic-bezier(.76,0,.24,1),opacity .6s; }
.preloader[hidden] { display:none; }
.preloader>img { width:142px; height:100px; object-fit:contain; filter:brightness(0) invert(1); }
.preloader>span { color:#919298; font-size:9px; letter-spacing:.22em; }
.preloader.is-leaving { transform:translate3d(0,-100%,0); pointer-events:none; }
.loader-dots { display:flex; align-items:center; gap:14px; height:28px; }
.loader-dots i { display:block; width:12px; height:12px; border-radius:50%; background:#2459ed; animation:loader-bounce 1.15s cubic-bezier(.36,0,.25,1) infinite; }
.loader-dots i:nth-child(2) { background:#ff4856; animation-delay:.12s; }
.loader-dots i:nth-child(3) { background:#c5c6c9; animation-delay:.24s; }
@keyframes loader-bounce { 0%,100% { transform:translateY(0) scale(1); } 35% { transform:translateY(-10px) scale(.88,1.12); } 65% { transform:translateY(3px) scale(1.14,.86); } }
@media(prefers-reduced-motion:reduce) { .loader-dots i { animation:none; } .preloader { transition:opacity .15s; } .preloader.is-leaving { transform:none; opacity:0; } }