:root{--cream:#fff3d0;--gold:#ffd966;--night:#281f4c;--rose:#f15962;--orange:#fb874d;--blue:#7d94f6;--prune:#770e59;--ink:#281f4c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#17131e;color:var(--ink);font-family:'DM Mono',monospace}.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}header{position:fixed;z-index:30;inset:0 0 auto;padding:20px 3vw;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;color:#fff;mix-blend-mode:difference}header a{color:inherit;text-decoration:none}section{position:relative;min-height:100vh;padding:108px 6vw 76px;overflow:hidden}.cream{background:var(--cream)}.no{font-size:10px;letter-spacing:.08em;margin:0 0 48px}h1,h2,h3,.type-display{font-family:'DM Serif Display',serif;font-weight:400}.hero{min-height:100svh;color:var(--cream);display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(150deg,#171323 0%,#34203c 30%,#a94b5d 58%,#f18a58 78%,#ffd966 100%)}.hero h1{font-size:clamp(104px,15.5vw,250px);line-height:.68;letter-spacing:-.065em;margin:0;position:relative;z-index:3}.meta{position:absolute;top:118px;left:6vw;font-size:10px}.promise{font-family:'DM Serif Display',serif;font-size:clamp(24px,2.6vw,42px);line-height:1.04;margin:42px 0 0;position:relative;z-index:3}.clock{position:absolute;right:6vw;bottom:50px;font-size:10px}.hero-sun{position:absolute;width:min(60vw,850px);aspect-ratio:1;border-radius:50%;right:-10vw;top:6vh;background:radial-gradient(circle,#fff7c7 0 18%,#ffd966 47%,rgba(255,217,102,.08) 69%,transparent 70%)}.hero-window{position:absolute;width:24vw;height:52vh;right:11vw;bottom:13vh;border:1px solid rgba(255,243,208,.65);border-radius:50% 50% 3px 3px;overflow:hidden;z-index:2}.horizon{width:100%;height:100%;background:radial-gradient(circle at 62% 59%,#fff4b6 0 7%,transparent 8%),linear-gradient(#bb6678,#f39a6c 49%,#4a2c50 50%,#21172d)}.intro-title{display:flex;align-items:flex-end;justify-content:space-between}.intro h2,.portal h2,.matter h2,.digital h2,.social h2{font-size:clamp(70px,9.5vw,150px);line-height:.8;letter-spacing:-.045em;margin:0;color:var(--rose)}.vinyl{width:150px;aspect-ratio:1;border:2px solid var(--ink);border-radius:50%;position:relative}.vinyl:after{content:'';position:absolute;width:18%;aspect-ratio:1;border:1px solid var(--ink);border-radius:50%;inset:41%}.intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:9vw;margin-top:80px}.lead{font-family:'DM Serif Display',serif;font-size:clamp(27px,3vw,47px);line-height:1.13;margin:0}.credits{display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:11px;line-height:1.65}.credits p{margin:0}.credits b{display:block;font-weight:400;opacity:.55;margin-bottom:15px}.golden{min-height:125vh;background:linear-gradient(#f89b62 0%,#ffd966 68%,#fff3d0 100%)}.golden-center{max-width:950px;text-align:center;margin:12vh auto}.golden-center small{font-size:10px}.golden h2{font-size:clamp(130px,19vw,300px);line-height:.62;letter-spacing:-.075em;color:var(--rose);margin:35px 0 75px}.golden-center>p{max-width:650px;margin:auto;font-size:16px;line-height:1.7}.dayline{position:absolute;left:6vw;right:6vw;bottom:70px;display:flex;align-items:center;gap:18px;font-size:10px}.dayline i{height:1px;background:var(--ink);flex:1}.portal{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:8vw}.portal>.no{position:absolute;top:108px;left:6vw}.portal-copy p{max-width:520px;line-height:1.7;margin-top:42px}.portal-art{position:relative;display:grid;place-items:center}.portal-frame{width:min(100%,650px);height:72vh;border-radius:48% 48% 3px 3px;overflow:hidden;border:2px solid var(--rose);box-shadow:12px 12px 0 var(--gold);background:#fff}.portal-frame img{width:100%;height:100%;object-fit:cover;object-position:center}.spark{position:absolute;right:-1vw;top:8%;font-size:90px;color:var(--rose)}.system{background:#f9ead0}.system-title{display:grid;grid-template-columns:1.15fr .65fr;gap:9vw;align-items:end}.system-title h2{font-size:clamp(72px,10vw,155px);line-height:.78;color:var(--rose);margin:0}.system-title>p{line-height:1.7}.type-row{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;margin:100px 0 70px}.type-display{font-size:clamp(115px,17vw,260px);line-height:.62;letter-spacing:-.06em;color:var(--rose);text-shadow:7px 7px 0 var(--gold)}.mono{font-size:15px;line-height:1.6}.palette{display:grid;grid-template-columns:repeat(6,1fr);height:290px;gap:10px}.palette span{background:var(--c);border-radius:100px 100px 4px 4px;padding:20px 12px;display:flex;align-items:flex-end;font-size:8px}.matter{background:#c88b69}.matter-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center}.matter h2{color:var(--cream)}.matter p{max-width:520px;line-height:1.7;margin-top:40px}.matter figure{margin:0;height:75vh;overflow:hidden;border-radius:260px 260px 8px 8px}.matter img{width:100%;height:100%;object-fit:cover}.digital-head{display:grid;grid-template-columns:1.15fr .65fr;gap:8vw;align-items:end}.digital-head p{line-height:1.7}.web-stage{width:90%;margin:130px auto 0}.web-label{font-size:9px;margin-bottom:12px}.screen{height:72vh;border-radius:14px;overflow:hidden;box-shadow:0 35px 90px rgba(40,31,76,.18);background:#fff}.screen img{width:100%;height:100%;object-fit:cover;object-position:center}.web-stage.second{margin-top:100px}.service-proto{min-height:68vh;border-radius:14px;background:var(--night);color:var(--cream);padding:6vw;position:relative;overflow:hidden}.service-proto:after{content:'';position:absolute;width:38vw;aspect-ratio:1;border-radius:50%;background:var(--gold);right:-10vw;top:-13vw;opacity:.95}.service-proto>p{font-size:10px}.service-proto h3{font-size:clamp(50px,6.8vw,105px);line-height:.88;max-width:1000px;margin:70px 0;position:relative;z-index:2}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative;z-index:2}.service-grid span{border:1px solid rgba(255,243,208,.45);padding:25px;border-radius:100px;font-size:10px}.service-proto small{display:block;margin-top:50px;opacity:.5}.social{background:linear-gradient(#f8ead0 0%,#f3b375 70%,#9e5163 100%)}.social-head{display:grid;grid-template-columns:1fr .65fr;gap:8vw;align-items:end}.social-head p{line-height:1.7}.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:90px}.social-grid figure{margin:0;height:68vh;border-radius:10px;overflow:hidden}.social-grid img{width:100%;height:100%;object-fit:cover}.night{min-height:110vh;background:linear-gradient(#4b2d51,#281f4c 45%,#151221);color:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.night .no{position:absolute;top:108px;left:6vw}.night h2{font-size:clamp(120px,18vw,280px);line-height:.62;letter-spacing:-.06em;margin:0;position:relative;z-index:2}.night>p:last-child{max-width:520px;line-height:1.7;position:relative;z-index:2}.night-disc{width:42vw;aspect-ratio:1;border-radius:50%;position:absolute;background:radial-gradient(circle,#fff0b7 0 5%,#ffd966 6% 15%,#ad5366 43%,transparent 70%);filter:blur(1px)}.next{min-height:80vh;background:#121116;color:var(--cream);display:flex;flex-direction:column;justify-content:center}.next p{font-size:10px}.next a{font-family:'DM Serif Display',serif;font-size:clamp(110px,17vw,260px);line-height:.75;color:var(--cream);text-decoration:none}.next a span{color:var(--orange)}
@media(max-width:760px){header{padding:17px 18px}header span{display:none}section{padding:86px 18px 55px}.no{margin-bottom:30px}.meta{top:86px;left:18px;right:18px;line-height:1.5}.hero h1{font-size:26vw}.hero-window{width:53vw;height:39vh;right:-8vw;bottom:22vh;opacity:.7}.hero-sun{width:105vw;right:-40vw;top:12vh}.promise{font-size:21px;margin-top:30px}.clock{right:18px;bottom:24px}.intro-title{display:block}.intro h2,.portal h2,.matter h2,.digital h2,.social h2{font-size:17vw}.vinyl{display:none}.intro-grid,.portal,.system-title,.type-row,.matter-grid,.digital-head,.social-head{grid-template-columns:1fr}.intro-grid{gap:45px;margin-top:55px}.lead{font-size:28px}.credits{gap:18px}.golden{min-height:110svh}.golden-center{margin-top:10vh}.golden h2{font-size:29vw}.golden-center>p{font-size:14px}.dayline{left:18px;right:18px}.portal{padding-top:125px}.portal>.no{top:86px;left:18px}.portal-frame{height:58vh;margin-top:35px}.spark{font-size:55px;right:0}.system-title{gap:35px}.system-title h2{font-size:17vw}.type-row{gap:40px;margin:65px 0 50px}.type-display{font-size:26vw}.palette{height:210px;gap:4px}.palette span{padding:10px 4px;font-size:6px;writing-mode:vertical-rl}.matter-grid{gap:45px}.matter figure{height:54vh;border-radius:180px 180px 7px 7px}.web-stage{width:100%;margin-top:70px}.screen{height:48vh}.web-stage.second{margin-top:65px}.service-proto{min-height:58vh;padding:28px}.service-proto:after{width:70vw;right:-25vw;top:-20vw}.service-proto h3{font-size:13vw;margin:60px 0}.service-grid{grid-template-columns:1fr}.service-grid span{padding:16px}.social-grid{grid-template-columns:1fr;gap:14px;margin-top:55px}.social-grid figure{height:55vh}.night{min-height:95svh}.night .no{top:86px;left:18px}.night h2{font-size:28vw}.night-disc{width:95vw}.next{min-height:65svh}.next a{font-size:27vw}}

/* V24 — Glirock is the identity typeface. The page uses a locally installed copy when available. */
:root{--glirock:'Glirock','Glirock Regular','DM Serif Display',serif}
h1,h2,h3,.type-display,.promise,.next a{font-family:var(--glirock)}
.hero h1,.intro h2,.portal h2,.matter h2,.digital h2,.social h2,.golden h2,.system-title h2,.type-display,.night h2,.service-proto h3{letter-spacing:-.025em}

/* Brand-guideline images: preserve the complete composition and all text. */
.portal-frame{height:auto;aspect-ratio:1/1.08;padding:18px;background:#fff8df}
.portal-frame img,.matter img,.social-grid img{object-fit:contain!important;object-position:center!important}
.matter figure{height:auto;aspect-ratio:1.12/1;background:#fff3d0;padding:18px;border-radius:220px 220px 8px 8px}
.social-grid figure{height:auto;aspect-ratio:16/10;background:#fff3d0;padding:10px}

/* First site: real interface states animated through a sticky scroll sequence. */
.site-one-story{min-height:235vh;margin-top:110px;position:relative}
.site-one-story>.web-label{position:absolute;top:0;left:5%;z-index:5}
.site-one-sticky{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:.34fr .66fr;gap:4vw;align-items:center;padding:80px 5% 54px;overflow:hidden}
.site-one-copy{align-self:end;padding-bottom:9vh;position:relative;z-index:3}
.site-one-copy span{font-size:9px;letter-spacing:.08em}
.site-one-copy p{font-size:13px;line-height:1.65;max-width:360px;margin:18px 0 0}
.site-one-frame{position:relative;width:100%;aspect-ratio:1440/1108;background:#241c3f;border-radius:16px;overflow:hidden;box-shadow:0 36px 100px rgba(40,31,76,.22);transform:translateZ(0)}
.site-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff3d0;opacity:0;transform:scale(.985);will-change:opacity,transform}
.site-shot.shot-rays{opacity:1}
.site-progress{position:absolute;right:5%;bottom:38px;width:26%;display:flex;gap:12px;align-items:center;font-size:8px}
.site-progress i{height:1px;background:rgba(40,31,76,.3);flex:1;position:relative;overflow:hidden}
.site-progress i:after{content:'';position:absolute;inset:0;background:var(--rose);transform-origin:left;transform:scaleX(var(--progress,0))}

@media(max-width:760px){
  .portal-frame{aspect-ratio:1/1.05;padding:8px;margin-top:28px}
  .matter figure{aspect-ratio:1/1.1;padding:8px;border-radius:120px 120px 7px 7px}
  .social-grid figure{aspect-ratio:1/1;padding:6px}
  .site-one-story{min-height:205vh;margin-top:70px}
  .site-one-sticky{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:82px 18px 46px;gap:20px}
  .site-one-copy{align-self:start;padding:0}
  .site-one-copy p{font-size:11px;max-width:none;margin-top:10px}
  .site-one-frame{width:100%;align-self:center;border-radius:10px}
  .site-progress{right:18px;left:18px;width:auto;bottom:22px}
}

/* V25 — rhythm, readable Glirock, phosphene sparkles and reliable website sequence */
.hero h1{line-height:.79;letter-spacing:-.012em}
.intro h2,.portal h2,.matter h2,.digital h2,.social h2{line-height:.88;letter-spacing:-.012em}
.golden h2{line-height:.74;letter-spacing:-.018em}
.system-title h2{line-height:.86;letter-spacing:-.012em}
.type-display{line-height:.76;letter-spacing:-.018em}
.night h2{line-height:.74;letter-spacing:-.015em}
.service-proto h3{line-height:.96;letter-spacing:-.008em}
.next a{line-height:.88}
.portal-frame img,.matter img,.social-grid img{max-width:100%;max-height:100%;object-fit:contain!important}

.web-label--row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-link{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap}
.service-proto .site-link{color:var(--cream)}

/* Shorter, native scroll sequence: no giant dead zone, no CDN dependency. */
.site-one-story{min-height:160vh;margin-top:90px;position:relative;padding-top:28px}
.site-one-story>.web-label{position:absolute;top:0;left:5%;right:5%;z-index:5}
.site-one-sticky{position:sticky;top:8vh;height:84vh;display:grid;grid-template-columns:.31fr .69fr;gap:4vw;align-items:center;padding:54px 5% 44px;overflow:hidden}
.site-one-copy{align-self:center;padding:0;position:relative;z-index:3}
.site-one-copy p{font-size:13px;line-height:1.7;max-width:360px;margin:18px 0 0}
.site-one-frame{position:relative;width:100%;height:min(70vh,760px);aspect-ratio:auto;background:#241c3f;border-radius:16px;overflow:hidden;box-shadow:0 28px 80px rgba(40,31,76,.18)}
.site-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff3d0;opacity:0;transform:scale(.985);transition:opacity .45s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.site-shot.is-active{opacity:1;transform:scale(1)}
.site-progress{position:absolute;right:5%;bottom:24px;width:24%;display:flex;gap:12px;align-items:center;font-size:8px}
.site-progress i{height:1px;background:rgba(40,31,76,.24);flex:1;position:relative;overflow:hidden}
.site-progress i:after{content:'';position:absolute;inset:0;background:var(--rose);transform-origin:left;transform:scaleX(var(--progress,0));transition:transform .12s linear}

/* Four-point stars, derived from Belle Époque's own sparkle language but animated like phosphene after-images. */
.phosphene-stars{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.pstar{position:absolute;width:42px;aspect-ratio:1;background:var(--rose);clip-path:polygon(50% 0,58% 34%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 34%);opacity:.38;filter:blur(.15px) drop-shadow(0 0 18px rgba(255,217,102,.18));animation:starFloat 10s ease-in-out infinite alternate}
.pstar--1{left:8vw;top:24vh;background:var(--rose);transform:scale(.65);animation-duration:11s}
.pstar--2{right:11vw;top:58vh;background:var(--gold);transform:scale(1.15);animation-duration:14s;animation-delay:-4s}
.pstar--3{left:64vw;top:14vh;background:var(--blue);transform:scale(.48);animation-duration:12s;animation-delay:-7s}
.pstar--4{left:20vw;top:76vh;background:var(--orange);transform:scale(.38);animation-duration:13s;animation-delay:-2s}
.pstar--5{right:28vw;top:35vh;background:var(--prune);transform:scale(.52);animation-duration:15s;animation-delay:-9s}
@keyframes starFloat{0%{translate:0 0;rotate:-4deg;opacity:.16}45%{opacity:.42}100%{translate:18px -24px;rotate:7deg;opacity:.22}}

@media(max-width:760px){
  .hero h1{line-height:.82}.intro h2,.portal h2,.matter h2,.digital h2,.social h2{line-height:.91}.golden h2{line-height:.77}.system-title h2{line-height:.9}.type-display{line-height:.8}.night h2{line-height:.78}.service-proto h3{line-height:1}
  .site-one-story{min-height:145vh;margin-top:64px;padding-top:34px}
  .site-one-story>.web-label{left:0;right:0}
  .web-label--row{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .site-link{font-size:8px}
  .site-one-sticky{top:7vh;height:86vh;grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:50px 0 38px;gap:18px}
  .site-one-copy p{font-size:11px;line-height:1.6;max-width:none;margin-top:8px}
  .site-one-frame{height:auto;aspect-ratio:1.12/1;border-radius:10px}
  .site-progress{right:0;left:0;width:auto;bottom:12px}
  .pstar{width:28px;opacity:.28}.pstar--4,.pstar--5{display:none}
}
@media(prefers-reduced-motion:reduce){.pstar{animation:none}.site-shot{transition:none}}

/* V26 — hero logo, compact typography sample, shorter site sequence and visible CTAs */
.hero-logo{position:relative;z-index:3;width:min(70vw,900px);height:auto;display:block;margin:0 0 12px;object-fit:contain;object-position:left center}
.type-row--compact{grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin:72px 0 62px}
.type-sample{border-top:1px solid rgba(40,31,76,.35);padding:22px 0 8px;min-height:180px}
.type-sample>span{display:block;font-size:9px;letter-spacing:.08em;margin-bottom:24px;opacity:.62}
.type-sample>p{font-family:var(--glirock);font-size:clamp(27px,3.1vw,48px);line-height:1.08;letter-spacing:-.008em;max-width:680px;margin:0}
.type-sample.mono>p{font-family:'DM Mono',monospace;font-size:15px;line-height:1.7;letter-spacing:0}

/* Start the website motion earlier and finish it sooner. */
.site-one-story{min-height:128vh;margin-top:72px;padding-top:22px}
.site-one-story>.web-label{position:absolute;top:0;left:5%;right:5%;z-index:5}
.site-one-sticky{top:10vh;height:76vh;grid-template-columns:.32fr .68fr;padding:46px 5% 34px;gap:4vw}
.site-one-copy{align-self:center;display:flex;flex-direction:column;align-items:flex-start}
.site-one-copy>span,.second-site-copy>span{font-size:9px;letter-spacing:.08em;line-height:1.45}
.site-one-copy p,.second-site-copy p{font-size:13px;line-height:1.72;max-width:390px;margin:18px 0 0}
.site-link--button{display:inline-block;margin-top:24px;font-size:10px;line-height:1.2;padding:0 0 5px;border-bottom:1px solid currentColor;position:relative;z-index:9}
.site-one-frame{height:min(64vh,700px)}
.site-progress{bottom:16px}

.web-stage.second{width:90%;margin-top:70px}
.second-site-layout{display:grid;grid-template-columns:.3fr .7fr;gap:4vw;align-items:center;margin-top:24px}
.second-site-copy{align-self:center;display:flex;flex-direction:column;align-items:flex-start}
.service-proto{min-height:60vh}

@media(max-width:760px){
  .hero-logo{width:92vw;margin-bottom:8px}
  .type-row--compact{grid-template-columns:1fr;gap:18px;margin:52px 0 46px}
  .type-sample{min-height:0;padding-top:18px}
  .type-sample>span{margin-bottom:16px}
  .type-sample>p{font-size:28px;line-height:1.12}
  .type-sample.mono>p{font-size:13px;line-height:1.65}
  .site-one-story{min-height:112vh;margin-top:52px;padding-top:28px}
  .site-one-sticky{top:8vh;height:78vh;grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:42px 0 26px;gap:14px}
  .site-one-copy p,.second-site-copy p{font-size:11px;line-height:1.65;margin-top:10px;max-width:none}
  .site-link--button{margin-top:16px;font-size:9px}
  .site-one-frame{height:auto;aspect-ratio:1.12/1}
  .site-progress{bottom:4px}
  .web-stage.second{width:100%;margin-top:52px}
  .second-site-layout{grid-template-columns:1fr;gap:26px;margin-top:18px}
  .service-proto{min-height:52vh}
}

/* V27 — compact logo, paired site stories, phosphene glows */
.hero-logo{width:min(38vw,520px)!important;max-height:132px;margin:0 0 18px!important;border:0!important;outline:0!important;box-shadow:none!important;filter:none!important}

/* Soft after-images instead of literal stars. */
.phosphene-stars{display:none!important}.phosphene-glows{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.pglow{position:absolute;border-radius:50%;opacity:.2;filter:blur(32px);animation:glowDrift 12s ease-in-out infinite alternate;will-change:transform,opacity}
.pglow--1{width:74px;height:74px;left:9vw;top:22vh;background:#f15962;animation-duration:11s}
.pglow--2{width:96px;height:96px;right:10vw;top:57vh;background:#ffd966;animation-duration:15s;animation-delay:-5s}
.pglow--3{width:58px;height:58px;left:63vw;top:16vh;background:#7d94f6;animation-duration:13s;animation-delay:-8s}
.pglow--4{width:70px;height:70px;left:23vw;top:78vh;background:#fb874d;animation-duration:14s;animation-delay:-3s}
@keyframes glowDrift{0%{transform:translate3d(-8px,8px,0) scale(.75);opacity:.08}45%{opacity:.27}100%{transform:translate3d(22px,-28px,0) scale(1.18);opacity:.12}}

/* Both website stories now share exactly the same rhythm and proportions. */
.digital{padding-bottom:70px}
.site-story{min-height:106vh;margin-top:54px;padding-top:20px;position:relative}
.site-story>.web-label{position:absolute;top:0;left:5%;right:5%;z-index:5}
.site-story-sticky{position:sticky;top:9vh;height:76vh;display:grid;grid-template-columns:.32fr .68fr;gap:4vw;align-items:center;padding:40px 5% 30px;overflow:hidden}
.site-story-copy{align-self:center;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:3}
.site-story-copy>span{font-size:9px;letter-spacing:.08em;line-height:1.45}
.site-story-copy p{font-size:13px;line-height:1.72;max-width:390px;margin:18px 0 0}
.site-story-frame{position:relative;width:100%;height:min(62vh,680px);background:#241c3f;border-radius:16px;overflow:hidden;box-shadow:0 28px 80px rgba(40,31,76,.18)}
.site-story .site-progress{right:5%;bottom:12px}
.site-two-story{margin-top:24px}

.second-shot{position:absolute;inset:0;padding:7%;display:flex;flex-direction:column;justify-content:center;color:var(--cream);opacity:0;transform:scale(1.025);transition:opacity .5s ease,transform .7s ease}
.second-shot.is-active{opacity:1;transform:scale(1)}
.second-shot small{font-size:9px;letter-spacing:.1em;position:absolute;top:7%;left:7%}
.second-shot h3{font-family:var(--glirock);font-weight:400;font-size:clamp(48px,5.7vw,92px);line-height:.92;letter-spacing:-.01em;margin:0;position:relative;z-index:2}
.second-shot--1{background:linear-gradient(145deg,#281f4c 0 58%,#770e59 100%)}
.second-shot--1:after{content:'';position:absolute;width:34%;aspect-ratio:1;border-radius:50%;background:#ffd966;right:-8%;top:-12%;filter:blur(1px)}
.second-shot--2{background:#ffd966;color:#281f4c}
.second-shot--3{background:linear-gradient(155deg,#f15962,#fb874d 55%,#ffd966)}
.mini-pill{display:inline-flex;align-self:flex-start;margin-top:36px;border:1px solid currentColor;border-radius:999px;padding:12px 18px;font-size:9px;letter-spacing:.06em}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:38px}.mini-grid span{border-top:1px solid currentColor;padding-top:12px;font-size:9px}

/* Kill the older oversized story rules. */
.site-one-story{min-height:106vh!important;margin-top:54px!important;padding-top:20px!important}
.site-one-sticky{top:9vh!important;height:76vh!important;padding:40px 5% 30px!important}
.site-one-frame{height:min(62vh,680px)!important}
.web-stage.second,.second-site-layout,.service-proto{display:none!important}

@media(max-width:760px){
  .hero-logo{width:min(64vw,330px)!important;max-height:86px;margin-bottom:12px!important}
  .pglow{filter:blur(24px)}.pglow--1{width:48px;height:48px}.pglow--2{width:64px;height:64px}.pglow--3{width:42px;height:42px}.pglow--4{display:none}
  .digital{padding-bottom:46px}
  .site-story,.site-one-story{min-height:98vh!important;margin-top:34px!important;padding-top:22px!important}
  .site-story>.web-label{left:0;right:0}
  .site-story-sticky,.site-one-sticky{top:7vh!important;height:76vh!important;grid-template-columns:1fr!important;grid-template-rows:auto 1fr;padding:34px 0 24px!important;gap:12px!important}
  .site-story-copy p{font-size:11px;line-height:1.62;max-width:none;margin-top:8px}
  .site-story-frame,.site-one-frame{height:auto!important;aspect-ratio:1.12/1;border-radius:10px}
  .site-story .site-progress{left:0;right:0;width:auto;bottom:2px}
  .site-two-story{margin-top:12px!important}
  .second-shot{padding:8%}.second-shot small{top:8%;left:8%}.second-shot h3{font-size:11vw;line-height:.96}.mini-pill{margin-top:20px;padding:9px 12px;font-size:7px}.mini-grid{margin-top:20px}.mini-grid span{font-size:7px}
}
@media(prefers-reduced-motion:reduce){.pglow{animation:none}}

/* V28 — editorial social-media sequence */
.social-editorial{background:linear-gradient(180deg,#fff3d0 0%,#ffd966 30%,#f08a5f 60%,#6f3b5d 82%,#281f4c 100%);min-height:auto;padding-bottom:130px;color:var(--night)}
.social-intro{display:grid;grid-template-columns:1.15fr .65fr;gap:8vw;align-items:end}
.social-kicker{display:block;font-size:9px;letter-spacing:.12em;margin-bottom:22px}
.social-editorial h2{color:var(--rose);font-size:clamp(72px,10vw,150px);line-height:.84;letter-spacing:-.02em}
.social-copy{padding-bottom:10px}.social-copy p{font-size:14px;line-height:1.75;max-width:500px;margin:0 0 26px}
.social-instagram{display:inline-block;color:var(--night);font-size:10px;letter-spacing:.04em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px}
.social-collage{position:relative;height:1220px;max-width:1240px;margin:90px auto 0}
.social-card{position:absolute;display:block;text-decoration:none;color:var(--cream);z-index:2;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.social-card:hover{transform:translateY(-9px) rotate(0deg)!important;z-index:6}
.social-card img{display:block;width:100%;height:auto;object-fit:contain!important;box-shadow:0 24px 70px rgba(40,31,76,.18)}
.social-card span{display:flex;justify-content:space-between;gap:15px;margin-top:12px;font-size:9px;line-height:1.4;letter-spacing:.03em}.social-card span b{font-weight:400;white-space:nowrap;opacity:.7}
.social-card--mirage{width:37%;left:2%;top:40px;transform:rotate(-2deg)}
.social-card--plaque{width:31%;right:6%;top:0;transform:rotate(2.5deg);z-index:4}
.social-card--time{width:27%;left:24%;top:660px;transform:rotate(2deg)}
.social-card--ferme{width:34%;right:1%;top:560px;transform:rotate(-1.5deg)}
.social-orbit{position:absolute;width:46%;aspect-ratio:1;border:1px solid rgba(255,243,208,.45);border-radius:50%;left:30%;top:300px;z-index:0}
.social-halo{position:absolute;border-radius:50%;filter:blur(55px);opacity:.5;z-index:1;pointer-events:none;animation:socialHalo 8s ease-in-out infinite alternate}
.social-halo--a{width:190px;height:190px;background:#fff3d0;left:8%;top:560px}.social-halo--b{width:150px;height:150px;background:#7d94f6;right:15%;top:390px;animation-delay:-4s}
@keyframes socialHalo{from{transform:scale(.75) translate(-10px,12px);opacity:.22}to{transform:scale(1.15) translate(18px,-18px);opacity:.55}}
@media(max-width:760px){.social-editorial{padding-bottom:80px}.social-intro{grid-template-columns:1fr;gap:30px}.social-editorial h2{font-size:18vw}.social-copy p{font-size:12px}.social-collage{height:auto;margin-top:58px;display:grid;grid-template-columns:1fr 1fr;gap:34px 10px;align-items:start}.social-card{position:relative!important;inset:auto!important;width:auto!important;transform:none!important}.social-card--plaque{margin-top:70px}.social-card--time{margin-top:-15px}.social-card--ferme{margin-top:45px}.social-card span{display:block;font-size:7px;color:var(--cream)}.social-card span b{display:block;margin-top:4px}.social-orbit{width:90%;left:5%;top:25%;opacity:.45}.social-halo--a{left:-12%;top:38%}.social-halo--b{right:-10%;top:67%}}
@media(prefers-reduced-motion:reduce){.social-halo{animation:none}.social-card{transition:none}}

/* V29 — clean logo, soft portal, live second site */
.hero-logo{width:min(31vw,410px)!important;max-height:98px!important}
.belle-enter{position:fixed;inset:0;z-index:200;background:linear-gradient(155deg,#281f4c,#4a2c50 58%,#f15962 135%);display:grid;place-items:center;pointer-events:none;animation:belleEnterOut .72s cubic-bezier(.2,.75,.2,1) .18s both}
.belle-enter img{position:relative;z-index:2;width:min(410px,52vw);height:auto;animation:belleEnterLogo .62s ease both}
.belle-enter__glow{position:absolute;width:46vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff2cc 0 8%,#ffd966 27%,rgba(241,89,98,.18) 58%,transparent 72%);filter:blur(12px)}
@keyframes belleEnterOut{0%,56%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes belleEnterLogo{0%{opacity:.2;transform:translateY(12px) scale(.985);filter:blur(5px)}100%{opacity:1;transform:none;filter:blur(0)}}
.portal-frame{position:relative;border:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;border-radius:50% 50% 3px 3px!important;overflow:hidden!important}
.portal-frame img{width:100%;height:100%;object-fit:cover!important;object-position:center!important}
.portal-frame:after{content:"";position:absolute;inset:-25%;background:radial-gradient(circle at 45% 42%,rgba(255,242,204,.72) 0 2%,rgba(255,217,102,.26) 3%,transparent 12%);filter:blur(9px);mix-blend-mode:screen;opacity:.25;animation:portalGlimmer 5.5s ease-in-out infinite;pointer-events:none}
@keyframes portalGlimmer{0%,100%{transform:translate(-10%,8%) scale(.75);opacity:.08}45%{transform:translate(18%,-12%) scale(1.25);opacity:.5}70%{opacity:.16}}
.second-site-live{background:#fff!important;position:relative}
.second-site-live iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.live-badge{position:absolute;left:14px;bottom:14px;z-index:4;background:rgba(40,31,76,.92);color:#fff2cc;padding:9px 12px;border-radius:999px;font-size:8px;letter-spacing:.07em;pointer-events:none;backdrop-filter:blur(8px)}
.iframe-fallback{position:absolute;inset:auto 16px 16px auto;z-index:2;font-size:9px;color:#281f4c;background:#fff2cc;padding:9px 12px;border-radius:999px;display:none}
.site-two-story .site-progress{display:none!important}
@media(max-width:760px){.hero-logo{width:min(58vw,280px)!important;max-height:72px!important}.belle-enter img{width:62vw}.portal-frame{aspect-ratio:.72/1!important}.second-site-live{aspect-ratio:.72/1!important}.live-badge{left:8px;bottom:8px;font-size:6px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.belle-enter{animation:none;display:none}.portal-frame:after{animation:none;opacity:.18}}

/* V30 — ribbon hero, live sites, sunset progression */
.hero--ribbon{background:#281f4c!important;isolation:isolate}
.hero--ribbon .hero-logo{filter:none;z-index:5}
.hero-ribbon{position:absolute;inset:-12% -15%;z-index:1;pointer-events:none;transform:rotate(-7deg);filter:drop-shadow(0 25px 55px rgba(0,0,0,.16))}
.hero-ribbon i{position:absolute;left:-8%;width:116%;height:clamp(44px,7vw,105px);border-radius:50%;transform-origin:center;animation:ribbonFloat 8s ease-in-out infinite alternate}
.hero-ribbon i:nth-child(1){top:27%;background:#f15962;transform:rotate(5deg) skewX(-12deg)}
.hero-ribbon i:nth-child(2){top:39%;background:#fb874d;transform:rotate(-3deg) skewX(9deg);animation-delay:-2.6s}
.hero-ribbon i:nth-child(3){top:51%;background:#ffd966;transform:rotate(4deg) skewX(-8deg);animation-delay:-5.2s}
.hero-glow{position:absolute;z-index:2;width:42vw;aspect-ratio:1;border-radius:50%;right:5vw;top:16vh;background:radial-gradient(circle,rgba(255,242,204,.45),rgba(255,217,102,.12) 36%,transparent 70%);filter:blur(28px);mix-blend-mode:screen;animation:heroGlow 7s ease-in-out infinite alternate}
@keyframes ribbonFloat{to{translate:0 18px;scale:1.015}}
@keyframes heroGlow{to{transform:translate(-28px,18px) scale(1.12);opacity:.65}}
.golden{--sunset:0;background:linear-gradient(180deg,color-mix(in srgb,#f89b62 calc(100% - var(--sunset)*45%),#6b3d67 calc(var(--sunset)*45%)) 0%,color-mix(in srgb,#ffd966 calc(100% - var(--sunset)*60%),#f15962 calc(var(--sunset)*60%)) 58%,color-mix(in srgb,#fff3d0 calc(100% - var(--sunset)*65%),#281f4c calc(var(--sunset)*65%)) 100%)!important;transition:background .08s linear}
.site-live,.second-site-live{background:#fff!important;position:relative}
.site-live iframe,.second-site-live iframe{width:100%;height:100%;border:0;display:block;background:#fff;pointer-events:auto}
.site-one-story,.site-two-story{min-height:auto!important;margin-top:70px!important;padding-top:0!important}
.site-story-sticky,.site-one-sticky{position:relative!important;top:auto!important;height:min(76vh,760px)!important;min-height:560px;grid-template-columns:minmax(220px,.42fr) minmax(0,1.58fr)!important;padding:36px 0!important}
.site-story-frame,.site-one-frame{height:100%!important}
.site-progress{display:none!important}
@media(max-width:760px){.hero-ribbon{inset:-4% -45%;transform:rotate(-11deg)}.hero-ribbon i{height:56px}.hero-ribbon i:nth-child(1){top:30%}.hero-ribbon i:nth-child(2){top:42%}.hero-ribbon i:nth-child(3){top:54%}.hero-glow{width:80vw;right:-22vw;top:18vh}.site-one-story,.site-two-story{margin-top:42px!important}.site-story-sticky,.site-one-sticky{height:auto!important;min-height:0;grid-template-columns:1fr!important;grid-template-rows:auto auto!important;padding:20px 0!important}.site-story-frame,.site-one-frame,.second-site-live{height:62svh!important;aspect-ratio:auto!important}.golden{min-height:110vh}}
@media(prefers-reduced-motion:reduce){.hero-ribbon i,.hero-glow{animation:none}}

/* V31 — real Belle Époque ribbon, delayed golden-hour sunset, mirrored outro */
.hero--ribbon{background:var(--night)!important}
.hero-ribbon{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;transform:none!important;filter:none!important}
.hero-ribbon img{position:absolute;width:max(118vw,1280px);height:auto;left:-22vw;top:14vh;transform:translate3d(calc(var(--hero-ribbon-x,0) * 1vw),calc(var(--hero-ribbon-y,0) * 1vh),0) rotate(-4deg);transform-origin:center;will-change:transform;filter:drop-shadow(0 28px 55px rgba(20,12,30,.18))}
.hero-ribbon i{display:none!important}
.hero-glow{width:34vw!important;right:8vw!important;top:19vh!important;opacity:.56}

/* Keep the Golden Hour golden until its section actually reaches the top. */
.golden{--sunset:0;min-height:138vh;background:linear-gradient(180deg,
  color-mix(in srgb,#f89b62 calc(100% - var(--sunset)*24%),#d86a6e calc(var(--sunset)*24%)) 0%,
  color-mix(in srgb,#ffd966 calc(100% - var(--sunset)*34%),#f15962 calc(var(--sunset)*34%)) 58%,
  color-mix(in srgb,#fff3d0 calc(100% - var(--sunset)*28%),#d37a79 calc(var(--sunset)*28%)) 100%)!important}

.night{isolation:isolate}
.night-disc{opacity:.72;z-index:0}
.night-ribbon{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.night-ribbon img{position:absolute;width:max(120vw,1320px);height:auto;left:-16vw;top:42%;transform:translate3d(calc(var(--night-ribbon-x,0) * 1vw),calc(var(--night-ribbon-y,0) * 1vh),0) rotate(5deg);will-change:transform;filter:drop-shadow(0 30px 60px rgba(0,0,0,.22));opacity:.96}
.night-logo{position:relative;z-index:3;width:min(37vw,500px);height:auto;display:block;margin:0 0 34px;filter:none!important}
.night>p:last-child{z-index:3;font-size:14px;line-height:1.75}
.night>p:last-child strong{font-weight:500;color:var(--gold)}

@media(max-width:760px){
  .hero-ribbon img{width:205vw;left:-70vw;top:22vh;transform:translate3d(calc(var(--hero-ribbon-x,0) * 1.35vw),calc(var(--hero-ribbon-y,0) * 1vh),0) rotate(-7deg)}
  .hero-glow{width:78vw!important;right:-25vw!important;top:21vh!important}
  .golden{min-height:124svh}
  .night-ribbon img{width:215vw;left:-75vw;top:44%;transform:translate3d(calc(var(--night-ribbon-x,0) * 1.35vw),calc(var(--night-ribbon-y,0) * 1vh),0) rotate(7deg)}
  .night-logo{width:min(66vw,310px);margin-bottom:26px}
  .night>p:last-child{font-size:12px;max-width:86vw}
}

@media(prefers-reduced-motion:reduce){.hero-ribbon img,.night-ribbon img{transform:none!important}}

/* V32 — ribbon behaves like a flowing thread, enters on scroll, and bridges outro */
.hero-ribbon{opacity:0;transition:opacity .22s linear}
.hero-ribbon img{
  left:-58vw!important;
  top:9vh!important;
  width:max(148vw,1500px)!important;
  transform:translate3d(var(--hero-ribbon-x,0px),var(--hero-ribbon-y,0px),0) rotate(var(--hero-ribbon-r,-10deg)) scale(var(--hero-ribbon-s,.98))!important;
  transform-origin:50% 50%;
}
.hero--ribbon.is-ribbon-visible .hero-ribbon{opacity:1}

.outro-flow{position:relative;overflow:hidden;background:#121116}
.outro-ribbon{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible;opacity:var(--outro-ribbon-opacity,0)}
.outro-ribbon img{
  position:absolute;
  width:max(148vw,1500px);
  height:auto;
  left:-55vw;
  top:42%;
  transform:translate3d(var(--outro-ribbon-x,0px),var(--outro-ribbon-y,0px),0) rotate(var(--outro-ribbon-r,8deg)) scale(var(--outro-ribbon-s,.98));
  transform-origin:center;
  will-change:transform,opacity;
  filter:drop-shadow(0 28px 58px rgba(0,0,0,.22));
}
.outro-flow .night,.outro-flow .next{position:relative;z-index:2}
.outro-flow .night{overflow:visible}
.outro-flow .next{overflow:visible}

.next{min-height:58vh;padding-top:70px;padding-bottom:70px}
.next a{
  font-family:"Inter",system-ui,sans-serif!important;
  font-weight:900;
  text-transform:uppercase;
  font-size:clamp(68px,10.5vw,160px)!important;
  line-height:.82!important;
  letter-spacing:-.055em;
}
.next a span{font-family:inherit;font-weight:700}

@media(max-width:760px){
  .hero-ribbon img{width:280vw!important;left:-132vw!important;top:20vh!important}
  .outro-ribbon img{width:285vw;left:-135vw;top:43%}
  .next{min-height:50svh;padding-top:54px;padding-bottom:54px}
  .next a{font-size:clamp(54px,18vw,92px)!important;line-height:.86!important}
}

@media(prefers-reduced-motion:reduce){
  .hero-ribbon{opacity:.78!important}
  .hero-ribbon img,.outro-ribbon img{transform:none!important}
  .outro-ribbon{opacity:.65!important}
}

/* V33 — the ribbon flows along its own SVG path instead of moving as one block */
.hero-ribbon,
.outro-ribbon{overflow:visible!important}
.hero-ribbon{opacity:1!important;transition:none!important}
.hero-ribbon .ribbon-svg{
  position:absolute;
  inset:-7vh -7vw;
  width:114vw;
  height:114vh;
  overflow:visible;
  filter:drop-shadow(0 22px 46px rgba(20,12,30,.16));
}
.hero-ribbon .ribbon-path,
.outro-ribbon .ribbon-path{
  stroke-dasharray:0 1000;
  stroke-dashoffset:0;
  will-change:stroke-dasharray,stroke-dashoffset;
}
.outro-ribbon{opacity:1!important}
.outro-ribbon .ribbon-svg{
  position:absolute;
  width:116vw;
  height:100%;
  left:-8vw;
  top:0;
  overflow:visible;
  filter:drop-shadow(0 28px 58px rgba(0,0,0,.2));
}
/* Sunset now stays still until the section reaches the top, then visibly warms toward dusk. */
.golden{
  --sunset:0;--sun-y:16%;--sun-a:.82;--sun-b:.52;
  --top-a:100%;--top-b:0%;--mid-a:100%;--mid-b:0%;--bot-a:100%;--bot-b:0%;
  background:
    radial-gradient(circle at 50% var(--sun-y),rgba(255,244,185,var(--sun-a)) 0 8%,rgba(255,217,102,var(--sun-b)) 18%,transparent 37%),
    linear-gradient(180deg,
      color-mix(in srgb,#f89b62 var(--top-a),#df6674 var(--top-b)) 0%,
      color-mix(in srgb,#ffd966 var(--mid-a),#f15962 var(--mid-b)) 58%,
      color-mix(in srgb,#fff3d0 var(--bot-a),#704064 var(--bot-b)) 100%)!important;
}
@media(max-width:760px){
  .hero-ribbon .ribbon-svg{width:175vw;height:110vh;left:-48vw;top:-2vh}
  .outro-ribbon .ribbon-svg{width:180vw;left:-52vw;height:100%}
}
@media(prefers-reduced-motion:reduce){
  .hero-ribbon .ribbon-path,.outro-ribbon .ribbon-path{stroke-dasharray:1000 0!important;stroke-dashoffset:0!important}
}


/* V34 — mobile palette legibility + clean ribbon exit */
@media(max-width:760px){
  .palette{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    height:auto!important;
    gap:8px!important;
  }
  .palette span{
    min-height:86px;
    padding:12px!important;
    border-radius:18px!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    align-items:flex-end!important;
    justify-content:flex-start!important;
    font-size:8px!important;
    line-height:1.2!important;
    letter-spacing:.035em;
    overflow-wrap:anywhere;
  }
}

/* V36 — full-bleed photographic matter + lighter web video */
.matter--video{background:#c88b69;padding:0!important;min-height:0!important;overflow:hidden}
.matter-split{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;align-items:stretch}
.matter-media{position:relative;min-height:100svh;overflow:hidden;background:#281f4c}
.matter-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:auto}
.matter-media:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 67% 38%,rgba(255,243,204,.24),transparent 29%),linear-gradient(110deg,rgba(241,89,98,.07),transparent 42%,rgba(255,217,102,.09));mix-blend-mode:screen}
.matter-video-glow{position:absolute;width:34vw;height:34vw;right:-17vw;top:16%;border-radius:50%;background:rgba(255,217,102,.25);filter:blur(72px);opacity:.64;pointer-events:none;animation:matterGlow 8s ease-in-out infinite alternate;transform:translateZ(0)}
.matter-copy{display:flex;flex-direction:column;justify-content:center;padding:7vw;position:relative;z-index:2}
.matter-copy .no{margin:0 0 42px;align-self:flex-start}
.matter-copy h2{margin:0;color:var(--cream);font-size:clamp(64px,8.2vw,132px);line-height:.82}
.matter-copy>p:last-child{max-width:500px;margin:42px 0 0;line-height:1.7}
@keyframes matterGlow{to{transform:translate3d(-2.2vw,2vh,0) scale(1.06);opacity:.84}}
@media(max-width:760px){
  .matter-split{grid-template-columns:1fr;min-height:0}
  .matter-media{min-height:0;aspect-ratio:4/3}
  .matter-copy{padding:54px 18px 72px}
  .matter-copy .no{margin-bottom:32px}
  .matter-copy h2{font-size:17vw}
  .matter-copy>p:last-child{margin-top:30px}
  .matter-video-glow{width:70vw;height:70vw;right:-35vw;filter:blur(52px)}
}
@media(prefers-reduced-motion:reduce){.matter-video-glow{animation:none}}

/* V37 — rhythm, lighter motion and cleaner hierarchy */
/* Finer grain: preserve texture without softening the hero/logo. */
.grain{opacity:.028!important;background-size:145px 145px!important}

/* The header describes the discipline; it is intentionally not a jump link. */
header>span:last-child{font-size:10px;letter-spacing:.08em}

/* Intro: the vinyl becomes a cropped punctuation at the bottom edge, not a competing icon. */
.intro{position:relative;padding-bottom:118px}
.vinyl--edge{position:absolute!important;width:clamp(120px,15vw,220px)!important;height:auto;aspect-ratio:1;right:7vw;bottom:calc(clamp(120px,15vw,220px) / -2);z-index:3;background:transparent;pointer-events:none}

/* Let each chapter borrow another Belle Époque colour. */
.system-title h2{color:var(--orange)!important}
.digital-head h2{color:var(--blue)!important}

/* Site sequence labels now belong to the copy column and share its left edge. */
.site-story>.web-label{display:none!important}
.site-seq{display:block!important;font-size:9px!important;letter-spacing:.09em!important;line-height:1.4!important;opacity:.58;margin:0 0 34px!important}
.site-story-copy>span:not(.site-seq){display:block;margin-bottom:0}

/* Avoid extra compositor work over the video. */
.matter-media video{will-change:auto!important;transform:none!important;backface-visibility:hidden}
.matter-video-glow{filter:blur(58px)!important;animation-duration:11s!important}

@media(max-width:760px){
  header>span:last-child{display:block;font-size:8px;max-width:110px;text-align:right;line-height:1.25}
  .intro{padding-bottom:82px}
  .vinyl--edge{width:118px!important;right:18px;bottom:-59px}
  .site-seq{margin-bottom:18px!important;font-size:8px!important}
  .matter-video-glow{filter:blur(42px)!important}
}

/* V38 — smaller windowed video + local ultra-fine grain */
.grain{opacity:0!important}
.hero--ribbon::after,.night::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:8;
  opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  background-size:86px 86px;
  mix-blend-mode:soft-light;
}
.hero--ribbon>*{position:relative;z-index:3}
.hero--ribbon .hero-ribbon,.hero--ribbon .hero-glow{position:absolute;z-index:1}
.night>*{position:relative;z-index:3}
.night .night-disc{position:absolute;z-index:0}
.outro-ribbon{z-index:1!important}

.matter--video{
  background:#c88b69;
  padding:0!important;
  min-height:0!important;
}
.matter-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:92svh;
  align-items:center;
}
.matter-visual{
  position:relative;
  min-height:92svh;
  display:grid;
  place-items:center;
  overflow:visible;
  padding:7vh 6vw;
}
.matter-window{
  position:relative;
  width:min(72%,500px);
  aspect-ratio:.72/1;
  border-radius:48% 48% 4px 4px;
  overflow:hidden;
  background:var(--night);
  box-shadow:0 28px 70px rgba(40,31,76,.20);
  z-index:2;
}
.matter-window video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.matter-window::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(130deg,rgba(255,243,204,.08),transparent 42%,rgba(241,89,98,.05));
  mix-blend-mode:screen;
}
.matter-video-glow{
  position:absolute!important;
  width:min(58vw,620px)!important;
  aspect-ratio:1;
  left:50%;
  top:50%;
  right:auto!important;
  height:auto!important;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,102,.30),rgba(241,89,98,.13) 38%,transparent 70%)!important;
  filter:blur(54px)!important;
  opacity:.72!important;
  transform:translate(-50%,-50%) scale(1)!important;
  animation:matterWindowGlow 9s ease-in-out infinite alternate!important;
  pointer-events:none;
  z-index:1;
}
@keyframes matterWindowGlow{
  from{transform:translate(-52%,-50%) scale(.96);opacity:.58}
  to{transform:translate(-47%,-47%) scale(1.06);opacity:.82}
}
.matter-copy{
  align-self:center;
  padding:7vw 8vw 7vw 4vw!important;
}
.matter-copy .no{margin-bottom:38px!important}

@media(max-width:760px){
  .matter-split{grid-template-columns:1fr;min-height:0;padding:76px 18px 72px}
  .matter-visual{min-height:0;padding:0 0 52px;overflow:visible}
  .matter-window{width:min(72vw,330px);aspect-ratio:.75/1}
  .matter-video-glow{width:82vw!important;filter:blur(42px)!important}
  .matter-copy{padding:0!important}
  .matter-copy .no{margin-bottom:28px!important}
  .hero--ribbon::after,.night::after{opacity:.016;background-size:72px 72px}
}
@media(prefers-reduced-motion:reduce){.matter-video-glow{animation:none!important}}

/* V39 — final Belle Époque polish */
/* The hour label no longer floats in the hero. */
.clock{display:none!important}

/* Project intro: body copy now sits in the same rational typographic register as role/context. */
.intro-grid{grid-template-columns:1fr 1fr;gap:7vw;align-items:start}
.lead--mono{
  font-family:'DM Mono',monospace!important;
  font-size:clamp(12px,1.05vw,15px)!important;
  line-height:1.72!important;
  letter-spacing:-.012em;
  max-width:620px;
  margin:0!important;
}

/* Use Marie's exact Belle Époque capsule SVG as the video silhouette. */
.matter-window--capsule{
  width:min(69%,446px)!important;
  aspect-ratio:446/614!important;
  border-radius:0!important;
  box-shadow:none!important;
  -webkit-mask:url('assets/capsule.svg') center/contain no-repeat;
  mask:url('assets/capsule.svg') center/contain no-repeat;
}
.matter-window--capsule::after{
  -webkit-mask:url('assets/capsule.svg') center/contain no-repeat;
  mask:url('assets/capsule.svg') center/contain no-repeat;
}
.matter-copy h2 span{white-space:nowrap}

/* Restore the closing ribbon above the section backgrounds; it still exits via its SVG path. */
.outro-ribbon{z-index:4!important}
.outro-flow .night,.outro-flow .next{z-index:2!important}

@media(max-width:760px){
  .intro-grid{grid-template-columns:1fr;gap:34px;margin-top:48px}
  .lead--mono{font-size:11px!important;line-height:1.72!important;max-width:92%}
  .matter-window--capsule{width:min(68vw,300px)!important;aspect-ratio:446/614!important}
  .matter-copy h2 span{white-space:nowrap}
}

/* V40 — hero alignment, project facts, reliable capsule video */
/* Keep the discipline line on the same left axis as the page copy. */
.hero .meta{
  left:6vw!important;
  right:auto!important;
  transform:none!important;
  margin:0!important;
}

/* About / role / context now share one typographic system. */
.intro-grid--facts{
  display:grid!important;
  grid-template-columns:1.35fr .72fr .85fr!important;
  gap:5.2vw!important;
  align-items:start!important;
  margin-top:72px!important;
}
.intro-fact{
  margin:0!important;
  font-family:'DM Mono',monospace!important;
  font-size:11px!important;
  line-height:1.68!important;
  letter-spacing:0!important;
  max-width:520px;
}
.intro-fact b{
  display:block;
  font-weight:400;
  opacity:.55;
  margin-bottom:15px;
}

/* The supplied SVG is a true vertical capsule: reproduce that exact silhouette
   with a pill radius so the video remains visible reliably in Safari/local previews. */
.matter-window--capsule{
  width:min(69%,446px)!important;
  aspect-ratio:446/614!important;
  border-radius:999px!important;
  -webkit-mask:none!important;
  mask:none!important;
  clip-path:none!important;
  overflow:hidden!important;
  background:var(--night)!important;
}
.matter-window--capsule::after{
  -webkit-mask:none!important;
  mask:none!important;
  border-radius:inherit!important;
}
.matter-window--capsule video{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

@media(max-width:760px){
  .hero .meta{left:18px!important}
  .intro-grid--facts{
    grid-template-columns:1fr!important;
    gap:28px!important;
    margin-top:46px!important;
  }
  .intro-fact{font-size:10.5px!important;line-height:1.66!important;max-width:96%}
  .intro-fact b{margin-bottom:10px}
  .matter-window--capsule{width:min(68vw,300px)!important}
}

/* V41 — optical hero alignment */
/* DM Mono has no left overhang while the large Glirock promise does: nudge the
   discipline line onto the same visible left edge. */
.hero .meta{left:calc(6vw - 7px)!important}
@media(max-width:760px){.hero .meta{left:14px!important}}

/* V42 — discipline line belongs to the promise block, not the logo */
.hero .meta{
  position:relative!important;
  top:auto!important; left:auto!important; right:auto!important;
  transform:none!important;
  align-self:flex-start!important;
  margin:14px 0 22px!important;
  z-index:5;
  font-size:10px;
  line-height:1.5;
}
.hero .promise{margin-top:0!important;}
@media(max-width:760px){
  .hero .meta{position:relative!important;top:auto!important;left:auto!important;right:auto!important;margin:10px 0 16px!important;font-size:8px;line-height:1.5;}
  .hero .promise{margin-top:0!important;}
}

/* V67: shared navigation only. Belle keeps its approved page styles isolated. */
.project-nav{position:fixed;z-index:80;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(18px,4vw,58px);pointer-events:none;font-family:"Inter",system-ui,sans-serif;color:#fff2cc}
.project-nav>*{pointer-events:auto}.project-nav__brand,.project-nav__back,.project-nav__menu{font-size:11px;text-transform:uppercase;letter-spacing:.12em}.project-nav__brand{font-family:"Unbounded","Inter",sans-serif;font-weight:800;letter-spacing:-.035em}.project-nav__back{opacity:.72}.project-nav__menu{display:flex;gap:22px}.project-burger{display:none;border:0;background:none;color:inherit;padding:8px;margin:-8px}.project-burger span{display:block;width:24px;height:1px;background:currentColor;margin:6px 0}.project-mobile-menu{display:none}
@media(max-width:850px){.project-nav{padding:18px}.project-nav__back,.project-nav__menu{display:none}.project-burger{display:block}.project-mobile-menu{position:fixed;z-index:75;inset:0;background:#281f4c;color:#fff2cc;padding:110px 22px 30px;display:flex;flex-direction:column;gap:22px;transform:translateY(-110%);transition:.35s cubic-bezier(.7,0,.2,1)}.project-nav.menu-open+.project-mobile-menu{transform:translateY(0)}.project-mobile-menu a{font-family:"Inter",system-ui,sans-serif;font-size:clamp(36px,11vw,64px);letter-spacing:-.05em}.project-nav.menu-open .project-burger span:first-child{transform:translateY(3.5px) rotate(45deg)}.project-nav.menu-open .project-burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}}

/* V73 — mobile type safety: keep Belle's expressive scale without clipping words. */
@media(max-width:760px){
  .intro h2,.portal h2,.matter h2,.digital h2,.social-editorial h2{font-size:clamp(42px,13.2vw,62px)!important;line-height:.92!important;letter-spacing:-.015em!important;max-width:100%!important}
  .system-title h2{font-size:clamp(44px,13.5vw,64px)!important;line-height:.92!important;max-width:100%!important}
  .golden h2{font-size:clamp(72px,20vw,104px)!important;line-height:.78!important;letter-spacing:-.025em!important}
  .matter-copy h2 span{white-space:normal!important}
  .digital-head,.social-intro,.system-title{min-width:0!important}
  .digital-head h2,.social-intro h2,.system-title h2,.portal-copy h2,.matter-copy h2{overflow-wrap:normal!important;word-break:normal!important}
}

/* V80 — ship the brand font so mobile devices do not depend on a local install. */
@font-face{font-family:'Glirock';src:url('assets/Glirock-Regular.woff') format('woff'),url('assets/Glirock-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}