/* Native-scroll storytelling; static reading flow is the default fallback. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
main { position:relative; z-index:1; }
.carry-surface { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.carry-surface > .carry-graphic { position:absolute; left:var(--carry-left); right:auto; top:var(--carry-top); width:var(--carry-width); height:var(--carry-height); pointer-events:none; }
.carry-active .hero, .carry-active main > .intro, .carry-active .intro-stage, .carry-active .process-story { background:transparent; }
.carry-active .studio-stream { opacity:0; }
.graphics-link { position:relative; z-index:2; display:flex; align-items:center; min-height:44px; width:fit-content; margin-top:28px; font-size:12px; color:var(--lime); border-bottom:1px solid #737f66; }
.studio-step { color: var(--lime); font-size: 10px; letter-spacing: .12em; }
.intro-stage { position:relative; }
.hinge-intro .sr-only { position:absolute; width:1px; height:1px; margin:-1px; }
.hinge-mechanism { list-style:none; padding:0; margin:0; }
.hinge-arm { position:relative; padding:35px 0; border:0; }
.hinge-arm strong { display:block; font:650 clamp(28px,8.6vw,168px)/.97 Syne,Arial,sans-serif; letter-spacing:-.065em; color:var(--paper); }
.hinge-arm strong span { display:block; }
.hinge-accent { color:var(--lime); }
.story-motion .hinge-intro { height:500svh; margin-top:-100svh; padding:0; overflow:visible; border:0; pointer-events:none; }
.story-motion main > .hinge-intro { background:transparent; }
.story-motion .intro-stage { position:sticky; top:0; height:100svh; padding:0; overflow:hidden; }
.story-motion .hinge-mechanism { position:absolute; left:6vw; right:6vw; top:50%; height:0; }
.story-motion .hinge-arm { position:absolute; right:0; top:0; width:100%; padding:0; translate:0 -50%; transform-origin:100% 50%; transform:rotate(-72deg); opacity:0; will-change:transform,opacity; }
@media(max-width:700px) {
  .hinge-arm strong { font-size:clamp(32px,11.6vw,80px); }
}
.website-wire { position:absolute; width:80%; height:105%; right:-23%; top:0; object-fit:contain; opacity:.65; pointer-events:none; }
.culture-title { font-size:clamp(80px,10vw,150px); }
.process-story { background:var(--night); color:var(--paper); }
.process-stage { position:relative; padding:65px 6vw; overflow:hidden; isolation:isolate; border-block:1px solid #3b4054; }
.process-top,.process-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:9px; letter-spacing:.08em; color:#acb3ce; }
.process-top { margin-bottom:55px; }
.process-counter { color:var(--lime); }
.process-copy { position:relative; z-index:3; }
.story-chapter { padding-block:35px; max-width:620px; }
.story-chapter .overline { color:#aab3cf; }
.story-chapter h3 { font:650 clamp(42px,5.6vw,88px)/1.04 Syne,Arial,sans-serif; letter-spacing:-.065em; margin:28px 0; }
.story-chapter em { color:var(--lime); font-style:normal; }
.story-chapter p { color:#b7bed5; font-size:14px; line-height:1.9; max-width:330px; }
.device-space { position:relative; height:520px; }
.device-camera { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
#morph-scene { display:block; width:100%; height:100%; overflow:visible; }
.process-bottom { margin-top:50px; }
.process-progress { width:120px; height:1px; background:#535b73; overflow:hidden; }
.process-progress i { display:block; height:100%; background:var(--lime); transform-origin:left; }
.brand-story { background:var(--night); color:var(--paper); }
.brand-stage { position:relative; min-height:520px; padding:50px 6vw; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border-top:1px solid #3b4054; }
.brand-story-top,.brand-story-bottom { position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand-story-top { font-size:9px; letter-spacing:.09em; color:#aeb9d0; }
.brand-assembly { width:min(86vw,1700px); align-self:center; margin-block:80px; }
#assembled-brand { width:100%; height:auto; display:block; overflow:visible; fill:var(--paper); }
#brand-dots { fill:var(--lime); }
.brand-story-bottom p { font:500 clamp(25px,3vw,45px)/1.1 Syne,Arial,sans-serif; letter-spacing:-.05em; margin:0; }
.brand-story-bottom em { color:var(--lime); font-style:normal; }
.brand-story-bottom>span { font-size:8px; letter-spacing:.06em; color:#b2bfd5; }
.story-motion .hero-scroll { height:145svh; position:relative; }
.story-motion .hero-scroll .hero { position:sticky; top:0; height:100svh; min-height:0; max-height:none; }
.story-motion .process-story { height:400svh; }
.story-motion .process-stage { position:sticky; top:0; height:100svh; padding:40px 6vw; }
.story-motion .process-top { position:absolute; top:40px; left:6vw; right:6vw; margin:0; }
.story-motion .process-bottom { position:absolute; left:6vw; right:6vw; bottom:35px; margin:0; z-index:4; }
.story-motion .process-copy { position:absolute; left:6vw; top:50%; width:48%; transform:translateY(-50%); }
.story-motion .story-chapter { position:absolute; left:0; width:100%; top:50%; transform:translateY(-50%); padding:0; opacity:0; }
.story-motion .story-chapter:first-child { opacity:1; visibility:visible; }
.story-motion .device-space { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.story-motion .process-top,.story-motion .process-bottom { opacity:calc(1 - var(--frame-expand,0)); }
.story-motion .brand-story { height:260svh; }
.story-motion .brand-stage { position:sticky; top:0; min-height:0; height:100svh; padding:40px 6vw; }
.story-motion .brand-assembly { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; }
.story-motion .brand-story-top { position:absolute; top:40px; left:6vw; right:6vw; }
.story-motion .brand-story-bottom { position:absolute; bottom:40px; left:6vw; right:6vw; }
.story-motion #brand-letters { filter:url(#brand-soften); }
@media(max-width:1000px) { .story-chapter h3 { font-size:6vw; }.story-chapter p { font-size:12px; max-width:270px; } }
@media(max-width:700px) {
  .culture-title { font-size:15vw; }.website-wire { width:125%; right:-53%; opacity:.5; }.studio-step { font-size:7px; }
  .process-stage { padding:40px 6vw; }.process-top { font-size:7px; }.process-top>span:first-child { max-width:190px; }
  .story-chapter h3 { font-size:40px; margin:22px 0; }.story-chapter p { font-size:12px; max-width:310px; }
  .process-bottom { font-size:6px; }.process-bottom>span:last-child { display:none; }.process-progress { width:65px; }
  .brand-stage { min-height:420px; padding:35px 6vw; }.brand-story-top { font-size:6px; }.brand-story-bottom>span { font-size:6px; max-width:115px; text-align:right; }.brand-story-bottom p { font-size:27px; }
  .story-motion .hero-scroll { height:140svh; }.story-motion .hero-scroll .hero { min-height:0; }
  .story-motion .process-story { height:360svh; }.story-motion .process-stage { padding:30px 6vw; }.story-motion .process-top { top:30px; }
  .story-motion .process-copy { top:17%; transform:none; width:88%; }.story-motion .story-chapter { top:0; transform:none; }.story-motion .story-chapter h3 { font-size:39px; margin-block:17px; }
  .story-motion .process-bottom { bottom:25px; }
  .story-motion .brand-story { height:220svh; }.story-motion .brand-story-top { top:30px; }.story-motion .brand-story-bottom { bottom:30px; }
}
@media(max-width:360px) { .story-motion .story-chapter h3 { font-size:33px; }.story-chapter p { font-size:11px; }.brand-story-bottom p { font-size:24px; } }