:root{--white:#f4f4f1;--black:#070809;--soft:#101215;--orange:#ff622d;--pad:clamp(1.25rem,5vw,6rem)}
html,body{overflow-x:clip}body.loading{overflow:visible}body{font-family:Arial,Helvetica,sans-serif}.intro{display:none}.noise{opacity:.017}.ink-split{text-shadow:none}.nav{background:linear-gradient(#070809ed,#07080900);padding:1.2rem var(--pad) 2rem;color:#fff;mix-blend-mode:normal}.nav-logo{width:3.8rem}.nav a{font-size:.875rem;letter-spacing:0;text-transform:none}.nav-links{gap:2rem}.nav-cta{border:1px solid #fff5!important;border-radius:999px;padding:.7rem 1.2rem!important;min-height:44px;background:#0b0d1070;backdrop-filter:blur(15px)}
.immersive-story{height:430svh;position:relative;background:#070809}.immersive-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;perspective:1200px;background:#070809;--glow-position:35%}
.stage-ambient{position:absolute;inset:0;background:radial-gradient(ellipse at var(--glow-position) 38%,#68728145,transparent 52%),radial-gradient(ellipse at 90% 70%,#e84a0d26,transparent 45%)}
.stage-grid{position:absolute;left:-25%;right:-25%;bottom:-32%;height:60%;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#ffffff0b 10%),repeating-linear-gradient(0deg,transparent 0,transparent 39px,#ffffff0b 40px);transform:perspective(600px) rotateX(66deg);mask-image:linear-gradient(transparent,#0005);pointer-events:none}
.stage-lottie{position:absolute;inset:0;opacity:.10;filter:invert(1);pointer-events:none}.logo-rig{position:absolute;left:26%;top:17%;width:48%;aspect-ratio:749/422;transform-style:preserve-3d;z-index:3;pointer-events:none;transform:rotateX(8deg) rotateY(-15deg) rotateZ(-5deg)}
.logo-solid{position:absolute;inset:0;transform-style:preserve-3d}.logo-solid i{position:absolute;inset:0;display:block;background:linear-gradient(120deg,#424b59,#070b12 35%,#aeb8c4 68%,#3b414b);mask:url('./assets/logo-canal7.png') center/contain no-repeat;-webkit-mask:url('./assets/logo-canal7.png') center/contain no-repeat;transform:translateZ(var(--depth));backface-visibility:visible}.logo-solid i:last-child{background:linear-gradient(110deg,#a2aab5 2%,#f6f8fc 28%,#9da5b2 42%,#fafbff 48%,#ffffff 54%,#718092 70%,#c8cfd7 85%);background-size:230% 100%;animation:logo-glint 7s ease-in-out infinite}
.logo-mirror{position:absolute;inset:110% 0 auto;height:100%;mask:url('./assets/logo-canal7.png') center/contain no-repeat;-webkit-mask:url('./assets/logo-canal7.png') center/contain no-repeat;background:linear-gradient(0deg,#b6c5d8aa,transparent 80%);opacity:.22;transform:scaleY(-.6);transform-origin:top;filter:blur(1px)}
.portal-scene{position:absolute;inset:0;z-index:0;opacity:0;overflow:hidden}.portal-scene img{width:100%;height:100%;object-fit:cover;filter:brightness(.4) saturate(.75)}.portal-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#070809,transparent 70%),linear-gradient(90deg,#07080970,transparent)}
.orbit-films{position:absolute;inset:0;z-index:2;pointer-events:none}.orbit-film{position:absolute;width:27vw;aspect-ratio:16/9;opacity:0;transform-style:preserve-3d}.orbit-film>img{width:100%;height:100%;object-fit:cover;border:1px solid #ffffff30;box-shadow:0 24px 70px #0009;border-radius:6px}.orbit-film .film-reflection{position:absolute;top:106%;left:0;transform:scaleY(-1);opacity:.23;mask-image:linear-gradient(transparent 25%,#0009);-webkit-mask-image:linear-gradient(transparent 25%,#0009);box-shadow:none;pointer-events:none}.orbit-a{left:-7%;top:15%}.orbit-b{right:-6%;top:12%;width:29vw}.orbit-c{right:4%;bottom:15%;width:24vw}
.light-sweep{position:absolute;z-index:4;top:-30%;bottom:-30%;left:0;width:30vw;background:linear-gradient(90deg,transparent,#d7e9ff13,transparent);pointer-events:none;opacity:0;mix-blend-mode:screen}.scene-curtain{position:absolute;z-index:5;inset:0;background:#070809;transform:scaleY(0);transform-origin:bottom;pointer-events:none}
.scene-copy{position:absolute;z-index:6;left:var(--pad);right:var(--pad);bottom:12%;pointer-events:none}.scene-copy p{font-size:.875rem;letter-spacing:.12em;color:#b8bec7;line-height:1.5;margin:0 0 1.2rem}.scene-copy h1,.scene-copy h2{font-size:clamp(3.2rem,6.7vw,7.5rem);font-weight:500;letter-spacing:-.065em;line-height:1.02;margin:0}.scene-copy em{font-family:Georgia,serif;font-weight:400;color:#e0e6ed}.scene-copy>span{display:block;margin-top:1rem;font-size:.875rem;color:#9da6b3}.scene-two,.scene-three{opacity:0}.scene-two{bottom:19%}.scene-two em{color:#ff7b4d}.scene-three{bottom:21%}.scene-three h2{font-size:clamp(4.5rem,10vw,11rem)}.scene-three a{display:inline-flex;align-items:center;gap:2rem;min-height:48px;margin-top:1.5rem;padding:.8rem 1.2rem;border:1px solid #ffffff70;border-radius:99px;color:#fff;text-decoration:none;font-size:1rem;pointer-events:auto;visibility:hidden;background:#07080960;backdrop-filter:blur(10px)}
.story-status{position:absolute;z-index:8;bottom:2rem;left:var(--pad);right:var(--pad);display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem;align-items:center;font-size:.875rem;color:#b0b8c4}.scroll-prompt i{font-style:normal;display:inline-block;margin-left:.5rem;animation:scroll-drift 2s ease-in-out infinite}.chapter-meter{height:1px;background:#fff3}.chapter-meter b{display:block;height:100%;background:#e5edf8;transform:scaleX(0);transform-origin:left}.chapter-caption{text-align:right;font-size:.75rem;letter-spacing:.1em}.stage-paused .logo-solid i:last-child,.stage-paused .scroll-prompt i{animation-play-state:paused}
@keyframes logo-glint{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}@keyframes scroll-drift{50%{transform:translateY(6px);opacity:.4}}
.work{background:#070809;position:relative;z-index:9;perspective:1300px;padding-bottom:6rem;margin-top:-1px}.work-title{padding:4rem var(--pad) 3rem;align-items:end}.work-title .display{font-size:clamp(3.2rem,6.5vw,7.4rem);line-height:1.05;letter-spacing:-.06em}.work-title em{font-family:Georgia,serif;font-weight:400;color:#a3afc0}.section-id{font-size:.875rem;font-weight:500;letter-spacing:.07em}.reel-total{font-size:.875rem;letter-spacing:.03em}.theater{width:calc(100% - 2 * var(--pad));max-width:1450px;transform-origin:50% 30%}.cinema-screen{border-radius:16px;border:1px solid #ffffff30;box-shadow:0 30px 70px #0009}.screen-halo{opacity:.2;filter:blur(40px)}.screen-poster{filter:brightness(.75)}.play-symbol{border:1px solid #fff8;background:#ffffff15;border-radius:50%;width:5rem;height:5rem}.screen-caption{font-size:.875rem;letter-spacing:0;text-transform:none}.film-reel{gap:1.25rem;perspective:1000px}.reel-card{border-radius:8px;flex-basis:28%;background:#11151b;border-color:#ffffff1a}.reel-card img{filter:brightness(.7) saturate(.7)}.reel-label{font-size:.875rem;letter-spacing:0}.reel-toolbar{font-size:.875rem}
.vision{position:relative;z-index:10;display:grid;grid-template-columns:1fr 2.4fr;gap:2rem;background:#101318;color:#f4f4f1;padding:7rem var(--pad);border-top:1px solid #ffffff1f}.vision-text{margin:0;font-size:clamp(3.2rem,6.6vw,7.5rem);line-height:1.05;letter-spacing:-.055em;max-width:none}.vision-text span{color:#657080}.vision-text span.active{color:#f4f4f1}.vision-text .accent.active{color:#ff7b4d}.vision-note{grid-column:2;max-width:38rem;color:#b2bac5;font-size:1.05rem;line-height:1.7;margin:1rem 0 0}
.services{position:relative;z-index:11;background:#101318;color:#f4f4f1;padding:3rem var(--pad) 7rem}.services-head{grid-template-columns:1.2fr 1fr;gap:3rem}.services .display{font-size:clamp(3rem,5.5vw,6rem);line-height:1.03}.services-head p{color:#a5afbd;font-size:1rem}.service-list{border-color:#fff3;margin-top:3rem}.service{border-color:#fff2;grid-template-columns:4rem 1fr auto;padding:1.8rem 0}.service h3{font-weight:400;font-size:clamp(1.6rem,3vw,3.2rem)}.service small{font-size:.875rem;color:#818fa2}.service b{color:#ff7b4d}
.clients{position:relative;z-index:12;background:#080a0d;padding:7rem var(--pad)}.clients .display,.team .display{font-size:clamp(3rem,6vw,6.6rem);line-height:1.04;letter-spacing:-.055em}.client-grid{background:transparent;gap:0;border-top:1px solid #fff2;border-bottom:1px solid #fff2;margin-top:3rem}.client{background:transparent}.client:hover{background:#131a24}.client img{opacity:.9}
.team{position:relative;z-index:13;background:#11151a;padding:7rem var(--pad)}.team-intro p{font-size:1rem;color:#aeb7c4}.portrait-grid{margin-top:3rem;gap:2rem}.person{aspect-ratio:4/5;border-radius:14px}.person-copy h3{font-weight:500;font-size:clamp(1.8rem,3vw,3.5rem)}.signature{margin-top:4rem}.signature h3{font-size:clamp(2.6rem,5vw,5.8rem);line-height:1.1}.signature h3 span{font-size:.7em;letter-spacing:-.045em;color:#a3afc0}.signature p{font-size:1.4rem}
.finale{position:relative;z-index:14;background:#d8e1ec;color:#070809;height:auto;min-height:95svh;padding:7rem var(--pad) 2rem;gap:5rem}.finale h2{font-size:clamp(3.4rem,8vw,9rem);line-height:1.02;letter-spacing:-.065em;max-width:13ch}.finale h2 em{color:#36495f}.finale-logo{opacity:.13;width:50vw;right:-5%;bottom:10%;pointer-events:none}.finale>div{position:relative;z-index:2}.actions a{font-size:.875rem;letter-spacing:0;text-transform:none;min-height:48px}.finale footer{font-size:.8rem;letter-spacing:0;text-transform:none}.wa-float{background:#e4eaf2;color:#070809;min-height:44px;font-size:.875rem;text-transform:none;letter-spacing:0;padding:.8rem 1rem}.gallery{padding:5rem var(--pad);background:#101318}.gallery-art figure{margin:0}.gallery-art img{width:100%}
@media(max-width:800px){
 .nav{grid-template-columns:1fr auto;padding-top:max(1rem,env(safe-area-inset-top))}.nav-links{display:none}.nav-logo{width:3.4rem}.nav a{font-size:.875rem}.nav-cta{padding:.65rem 1rem!important}
 .immersive-story{height:380svh}.immersive-stage{min-height:580px;perspective:900px}.logo-rig{left:10%;width:80%;top:23%}.logo-mirror{filter:none}.stage-lottie{inset:10% -40%}.scene-copy{bottom:19%;left:1.3rem;right:1.3rem}.scene-copy h1,.scene-copy h2{font-size:clamp(2.9rem,10.8vw,5rem);line-height:1.04}.scene-copy p{font-size:.75rem;letter-spacing:.06em;max-width:30ch;margin-bottom:1rem}.scene-copy>span{margin-top:.8rem}.scene-two{bottom:23%}.scene-three{bottom:25%}.scene-three h2{font-size:clamp(4rem,16vw,7rem)}.scene-three a{font-size:.875rem;margin-top:1.1rem}
 .orbit-film{width:52vw}.orbit-a{left:-24%;top:17%}.orbit-b{right:-24%;top:20%;width:53vw}.orbit-c{right:-16%;bottom:30%;width:47vw}.orbit-film>img{box-shadow:0 10px 25px #0009}.orbit-film .film-reflection{opacity:.16}.light-sweep{width:50vw}
 .story-status{bottom:5.5rem;left:1.3rem;right:1.3rem;grid-template-columns:1fr auto;gap:1rem;font-size:.875rem}.chapter-meter{position:absolute;bottom:-1.2rem;left:0;right:0}.chapter-caption{font-size:.7rem;letter-spacing:.02em}.scroll-prompt i{margin-left:.2rem}
 .work-title{padding-top:3.5rem;display:block}.work-title .display{font-size:clamp(3rem,10.8vw,4.8rem)}.reel-total{display:block;margin-top:1.4rem}.theater{width:calc(100% - 1.5rem)}.cinema-screen{border-radius:9px}.play-symbol{width:3.6rem;height:3.6rem}.screen-caption,.screen-play{font-size:.875rem}.screen-halo{filter:blur(22px)}.film-reel{gap:.8rem}.reel-card{flex-basis:78%;min-width:210px}.reel-label{font-size:.875rem}
 .vision{display:block;padding:4.5rem var(--pad)}.vision-text{margin-top:2rem;font-size:clamp(2.7rem,10.7vw,5rem)}.vision-note{margin-top:2rem}.services{padding-top:1rem;padding-bottom:4.5rem}.services-head{grid-template-columns:1fr;gap:1rem}.services .display{font-size:clamp(2.8rem,10vw,4.5rem)}.service{grid-template-columns:2rem 1fr auto;gap:.7rem}.service h3{font-size:clamp(1.35rem,5.5vw,1.8rem)}.clients,.team{padding-block:4.5rem}.clients .display,.team .display{font-size:clamp(2.7rem,10vw,4.6rem)}.portrait-grid{gap:1.5rem}.person{aspect-ratio:4/5}.signature h3{font-size:clamp(2.5rem,8vw,4rem)}.finale{padding-top:5rem;min-height:90svh}.finale-logo{width:85vw;bottom:20%}.finale h2{font-size:clamp(3rem,11vw,5rem)}.wa-float{bottom:max(.7rem,env(safe-area-inset-bottom))}
}
@media(max-width:360px){.scene-copy h1,.scene-copy h2{font-size:2.8rem}.scene-three h2{font-size:4rem}.story-status{font-size:.75rem}.chapter-caption{font-size:.65rem}.scene-copy p{font-size:.75rem}.logo-rig{top:24%}}
@media(max-height:550px) and (orientation:landscape){.immersive-stage{min-height:360px}.logo-rig{left:48%;width:40%;top:26%}.scene-copy{bottom:18%;right:40%}.scene-copy h1,.scene-copy h2{font-size:clamp(2rem,8vh,3rem)}.scene-copy p{font-size:.7rem;margin-bottom:.5rem}.scene-copy>span{display:none}.scene-three a{margin-top:.6rem;padding:.5rem .8rem;font-size:.8rem}.story-status{bottom:1rem;font-size:.75rem}.chapter-meter{position:static}.story-status{grid-template-columns:1fr 1fr 1fr}.orbit-film{width:24vw}.orbit-c{bottom:10%}.orbit-a{left:-8%}.orbit-b{right:-7%}.chapter-caption{font-size:.7rem}.scene-three{right:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.immersive-story{height:auto}.immersive-stage{position:relative;min-height:760px;height:100svh}.scene-one{opacity:1!important;transform:none!important}.scene-two,.scene-three,.orbit-films,.stage-lottie,.light-sweep,.scene-curtain,.chapter-meter,.logo-mirror{display:none}.logo-rig{transform:rotateY(-15deg) rotateZ(-5deg)!important}.logo-solid i{opacity:1!important}.logo-solid i:last-child,.scroll-prompt i{animation:none}.story-status{display:none}.scene-one{bottom:12%}.theater,.nav-logo,.vision,.services,.clients,.team,.finale,.person img,.finale-logo{transform:none!important;clip-path:none!important}}
/* Local brand artwork keeps the composition complete while remote posters load. */
.orbit-film,.orbit-film .film-reflection{background:#0d131c url('./assets/canal7-kinetic-hero.png') center/cover no-repeat;border-radius:6px}
.orbit-a,.orbit-a .film-reflection{background-position:20% center}.orbit-b,.orbit-b .film-reflection{background-position:80% center}.orbit-c,.orbit-c .film-reflection{background-position:55% center}
.portal-scene{background:#070809 url('./assets/canal7-kinetic-hero.png') center/cover no-repeat}
.cinema-screen,.reel-card img{background:#10141b url('./assets/canal7-kinetic-hero.png') center/cover no-repeat}
@media(max-height:550px) and (orientation:landscape){.nav-links{display:none}.nav{grid-template-columns:1fr auto}.story-status{right:20rem;grid-template-columns:1fr auto}.chapter-meter{display:none}.chapter-caption{display:none}}