:root { font-family:Inter,ui-sans-serif,system-ui,sans-serif; color:#132730; background:#f4f4f1; }
* { box-sizing:border-box; }
html { width:100%; min-width:320px; min-height:100%; margin:0; overflow-x:hidden; overflow-y:auto; border:0; outline:0; background:#f4f4f1; box-shadow:none; }
body { width:100%; min-width:320px; min-height:100%; margin:0; overflow:visible; border:0; outline:0; background:#f4f4f1; box-shadow:none; }

.architecture-nav { position:fixed; z-index:30; top:18px; left:50%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1120px,calc(100vw - 40px)); min-height:58px; padding:8px 12px 8px 18px; border:1px solid rgba(255,255,255,.68); border-radius:18px; background:rgba(237,240,238,.7); box-shadow:0 14px 42px rgba(25,48,59,.09),inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter:blur(22px) saturate(1.25); -webkit-backdrop-filter:blur(22px) saturate(1.25); transform:translateX(-50%); }
.header-brand { display:flex; align-items:center; gap:11px; width:fit-content; color:#18313c; font-family:ui-monospace,monospace; font-size:11px; font-weight:560; letter-spacing:.16em; text-decoration:none; }
.header-brand i { width:9px; height:9px; border:2px solid #1689bd; border-radius:50%; box-shadow:0 0 0 5px rgba(22,137,189,.09); }
.nav-links { display:flex; align-items:center; gap:5px; }
.nav-links a { position:relative; padding:13px 16px; border-radius:12px; color:rgba(20,45,57,.65); font-family:ui-monospace,monospace; font-size:10px; font-weight:520; letter-spacing:.11em; text-decoration:none; transition:color 180ms ease,background 180ms ease; }
.nav-links a:hover { color:#173746; background:rgba(255,255,255,.48); }
.nav-links a.is-active { color:#143747; background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.64); }
.mobile-menu-toggle { display:none; }
@keyframes pulse { 50% { opacity:.42; } }

.architecture-stage { position:relative; width:100%; height:100vh; min-height:620px; overflow:hidden; }
.architecture-stage::before { content:""; position:absolute; top:50%; right:-8vw; width:min(72vw,1100px); aspect-ratio:1; border:1px solid rgba(25,101,134,.025); border-radius:50%; opacity:0; transform:translateY(-50%) scale(.88); transition:opacity 1100ms ease 900ms,transform 1500ms cubic-bezier(.16,1,.3,1) 900ms; }
.architecture-stage.is-docked::before { opacity:1; transform:translateY(-50%) scale(1); }

.building-visual .equation-field { position:absolute; z-index:0; inset:12% 4% 11%; overflow:hidden; pointer-events:none; opacity:.92; -webkit-mask-image:radial-gradient(ellipse 72% 62% at center,#000 28%,rgba(0,0,0,.92) 60%,transparent 97%); mask-image:radial-gradient(ellipse 72% 62% at center,#000 28%,rgba(0,0,0,.92) 60%,transparent 97%); }
.equation { --delay:0s; --duration:16s; position:absolute; width:max-content; color:rgba(19,62,82,.46); font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive; font-size:clamp(14px,1.25vw,21px); font-weight:400; line-height:1.3; letter-spacing:.018em; white-space:nowrap; opacity:0; filter:blur(.1px); transform:translate3d(0,8px,0) rotate(var(--rotation,0deg)); transform-origin:left center; clip-path:inset(0 100% 0 0); animation:equation-cinematic var(--duration) cubic-bezier(.22,.7,.18,1) var(--delay) infinite both; }
.equation::after { content:""; position:absolute; top:8%; right:-7px; bottom:8%; width:25px; background:linear-gradient(to right,transparent,#f4f4f1 76%); opacity:.68; }
.equation sub,.equation sup { font-size:.62em; line-height:0; }
.equation-01 { --delay:0s; --rotation:-2deg; top:15%; left:7%; }
.equation-02 { --delay:-2.8s; --rotation:1.4deg; top:27%; left:18%; }
.equation-03 { --delay:-6.1s; --rotation:-1deg; top:10%; right:8%; }
.equation-04 { --delay:-9.4s; --rotation:2deg; top:37%; right:18%; }
.equation-05 { --delay:-12.6s; --rotation:-1.7deg; top:49%; left:5%; }
.equation-06 { --delay:-15.5s; --rotation:.8deg; top:63%; left:14%; }
.equation-07 { --delay:-4.3s; --rotation:-2.2deg; top:75%; right:7%; }
.equation-08 { --delay:-8.2s; --rotation:1.2deg; top:83%; left:30%; }
.equation-09 { --delay:-13.8s; --rotation:-.6deg; top:20%; right:31%; }
.equation-10 { --delay:-18.1s; --rotation:1.8deg; top:58%; right:4%; }
.equation-11 { --delay:-21.4s; --rotation:-1.5deg; top:71%; left:42%; }
.equation-12 { --delay:-24.6s; --rotation:.7deg; top:32%; left:3%; }
.equation-13 { --delay:-27.8s; --rotation:-1deg; top:43%; right:3%; font-size:clamp(13px,1.05vw,18px); }
.equation-14 { --delay:-30.9s; --rotation:1.3deg; top:88%; left:6%; font-size:clamp(12px,.95vw,16px); }
.equation-15 { --delay:-34s; --rotation:-1.2deg; top:7%; left:39%; font-size:clamp(13px,1vw,17px); }

@keyframes equation-cinematic {
  0%,6% { clip-path:inset(0 100% 0 0); opacity:0; filter:blur(1.8px); transform:translate3d(-8px,10px,0) rotate(var(--rotation,0deg)); }
  10% { opacity:.34; }
  29% { clip-path:inset(0 0 0 0); opacity:1; filter:blur(.1px); transform:translate3d(0,0,0) rotate(var(--rotation,0deg)); }
  54% { clip-path:inset(0 0 0 0); opacity:.82; transform:translate3d(10px,-3px,0) rotate(var(--rotation,0deg)); }
  74% { clip-path:inset(0 0 0 18%); opacity:.22; filter:blur(.8px); transform:translate3d(24px,-7px,0) rotate(var(--rotation,0deg)); }
  88%,100% { clip-path:inset(0 0 0 100%); opacity:0; filter:blur(2px); transform:translate3d(38px,-10px,0) rotate(var(--rotation,0deg)); }
}

.building-visual { position:absolute; z-index:4; top:50%; left:50%; display:flex; align-items:center; justify-content:center; width:min(78vw,1000px); aspect-ratio:1; opacity:0; filter:blur(14px); transform:translate(-50%,-50%) scale(.86); transition:opacity 900ms ease,filter 1100ms ease,transform 1700ms cubic-bezier(.16,1,.3,1); }
.architecture-stage.is-ready .building-visual { opacity:1; filter:blur(0); transform:translate(-50%,-50%) scale(1); }
.architecture-stage.is-docked .building-visual { transform:translate(2%,-50%) scale(1); }
.architecture-stage.is-docked[data-active-module="0"] .building-visual,
.architecture-stage.is-docked[data-active-module="1"] .building-visual,
.architecture-stage.is-docked[data-active-module="2"] .building-visual,
.architecture-stage.is-docked[data-active-module="3"] .building-visual { transform:translate(8%,-50%) scale(1); }
.building-visual video,.building-visual canvas { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; object-fit:contain; filter:brightness(.95) contrast(1.09) saturate(1.06) drop-shadow(0 30px 38px rgba(27,45,54,.12)); -webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 0,#000 76%,rgba(0,0,0,.9) 84%,rgba(0,0,0,.38) 93%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at center,#000 0,#000 76%,rgba(0,0,0,.9) 84%,rgba(0,0,0,.38) 93%,transparent 100%); transform:scale(.8); transform-origin:center; transition:opacity 360ms ease; }
.building-visual video { opacity:0; pointer-events:none; }
.building-visual.is-video-ready video { opacity:1; }
.building-visual.is-video-ready canvas { opacity:0; }
.building-visual::after { content:""; position:absolute; z-index:2; inset:-3px; background:linear-gradient(to right,#f4f4f1 0,rgba(244,244,241,.78) 5%,transparent 16%,transparent 84%,rgba(244,244,241,.78) 95%,#f4f4f1),linear-gradient(to bottom,#f4f4f1 0,rgba(244,244,241,.7) 6%,transparent 18%,transparent 70%,rgba(244,244,241,.38) 82%,#f4f4f1 100%); pointer-events:none; }

/* Keep the moving building seamlessly blended into the page in every module position. */
.architecture-stage::after { content:""; position:absolute; z-index:12; right:0; bottom:-1px; left:0; height:96px; background:linear-gradient(to bottom,transparent 0,rgba(244,244,241,.56) 58%,#f4f4f1 100%); pointer-events:none; }

.architecture-modules { position:absolute; z-index:8; top:70px; bottom:38px; left:4.5vw; width:min(47vw,650px); opacity:0; transform:translateX(-28px); transition:opacity 800ms ease,transform 1050ms cubic-bezier(.16,1,.3,1); pointer-events:none; }
.architecture-stage.is-modules-ready .architecture-modules { opacity:1; transform:translateX(0); pointer-events:auto; }
.architecture-module { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:58px 0 52px; opacity:0; visibility:hidden; transition:opacity 700ms ease,visibility 0s linear 700ms; }
.architecture-module.is-active { opacity:1; visibility:visible; transition:opacity 760ms ease; }
.architecture-module.is-active.is-leaving { opacity:0; transition:opacity 650ms ease; }
.architecture-stage .module-visual { position:relative; display:flex; flex:0 0 clamp(270px,40vh,390px); align-items:center; justify-content:center; width:min(100%,440px); height:auto; min-height:0; margin:0 auto; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; opacity:0; filter:blur(10px); transform:translateY(-22px) scale(.88); transition:opacity 720ms ease,filter 850ms ease,transform 1000ms cubic-bezier(.16,1,.3,1); }
.architecture-module.is-active .module-visual { opacity:1; filter:blur(0); transform:translateY(0) scale(1); }
.architecture-module.is-leaving .module-visual { opacity:0; filter:blur(6px); transform:translateY(-12px) scale(.96); }
.architecture-stage .module-visual video,.architecture-stage .module-visual canvas { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:100%; max-height:100%; transform:none; object-fit:contain; filter:drop-shadow(0 22px 28px rgba(27,45,54,.08)); -webkit-mask-image:radial-gradient(ellipse 50% 50% at center,#000 0,#000 76%,rgba(0,0,0,.9) 84%,rgba(0,0,0,.36) 93%,transparent 100%); mask-image:radial-gradient(ellipse 50% 50% at center,#000 0,#000 76%,rgba(0,0,0,.9) 84%,rgba(0,0,0,.36) 93%,transparent 100%); transition:opacity 300ms ease; }
.architecture-stage .module-visual video { opacity:0; pointer-events:none; }
.architecture-stage .module-visual.is-video-ready video { opacity:1; }
.architecture-stage .module-visual.is-video-ready canvas { opacity:0; }
.architecture-stage .module-visual::after { content:""; position:absolute; z-index:2; inset:-2px; background:linear-gradient(to right,#f4f4f1 0,transparent 12%,transparent 88%,#f4f4f1),linear-gradient(to bottom,#f4f4f1 0,transparent 11%,transparent 87%,#f4f4f1); pointer-events:none; }
.architecture-stage .module-copy { width:min(100%,440px); margin:0 auto; padding:0; opacity:0; transform:translateY(28px); transition:opacity 700ms ease 130ms,transform 900ms cubic-bezier(.16,1,.3,1) 130ms; }
.architecture-module.is-active .module-copy { opacity:1; transform:translateY(0); }
.architecture-module.is-leaving .module-copy { opacity:0; transform:translateY(14px); transition-delay:0s; }
.architecture-stage .copy-index { min-height:11px; margin-bottom:14px; color:rgba(18,100,139,.5); font-family:ui-monospace,monospace; font-size:9px; letter-spacing:.18em; }
.architecture-stage h1,.architecture-stage h2 { min-height:110px; margin:0; color:#12252e; font-size:clamp(38px,3.8vw,58px); font-weight:520; line-height:.94; letter-spacing:-.055em; }
.architecture-stage .module-copy p { min-height:37px; max-width:440px; margin:12px 0 14px; color:rgba(18,37,46,.54); font-size:11px; line-height:1.65; }
.copy-tags { display:flex; flex-wrap:wrap; gap:7px; opacity:0; transform:translateY(7px); transition:opacity 550ms ease,transform 700ms cubic-bezier(.16,1,.3,1); }
.architecture-module.is-typing-complete .copy-tags { opacity:1; transform:translateY(0); }
.copy-tags span { padding:7px 10px; border:1px solid rgba(25,72,94,.09); border-radius:999px; color:rgba(20,53,68,.52); font-family:ui-monospace,monospace; font-size:7px; }
.module-controls { position:absolute; z-index:12; bottom:22px; left:50%; display:flex; gap:9px; transform:translateX(-50%); }
.architecture-stage.is-relocating .module-controls { opacity:0; pointer-events:none; }
.module-controls button { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:rgba(20,72,96,.17); cursor:pointer; transition:background 180ms ease,transform 180ms ease; }
.module-controls button.is-active { background:#1689bd; transform:scale(1.35); }
.intro-label { position:absolute; z-index:10; bottom:24px; left:50%; color:rgba(20,53,68,.38); font-family:ui-monospace,monospace; font-size:8px; letter-spacing:.16em; transform:translateX(-50%); transition:opacity 500ms ease; }
.architecture-stage.is-docked .intro-label { opacity:0; }

@media (max-width:760px) {
  .architecture-stage { height:min(100svh,620px); min-height:570px; }
  .equation { color:rgba(19,62,82,.34); font-size:clamp(10px,3vw,14px); }
  .equation-02,.equation-04,.equation-06,.equation-09,.equation-11,.equation-13,.equation-14 { display:none; }
  .equation-01 { top:19%; left:5%; }.equation-03 { top:13%; right:3%; }.equation-05 { top:43%; left:2%; }.equation-07 { top:68%; right:3%; }.equation-08 { top:82%; left:14%; }.equation-10 { top:57%; right:2%; }.equation-12 { top:31%; left:4%; }.equation-15 { top:8%; left:30%; }
  .architecture-nav { top:10px; grid-template-columns:44px 1fr 44px; width:calc(100vw - 20px); min-height:56px; padding:6px 7px; border-color:rgba(255,255,255,.92); border-radius:17px; background:rgba(239,242,240,.94); box-shadow:0 12px 34px rgba(20,45,57,.12),inset 0 1px 0 #fff; backdrop-filter:blur(18px) saturate(1.08); -webkit-backdrop-filter:blur(18px) saturate(1.08); }
  .header-brand { position:absolute; left:50%; z-index:2; justify-content:center; min-width:110px; min-height:42px; font-size:13px; font-weight:650; letter-spacing:.13em; transform:translateX(-50%); }
  .header-brand i { display:none; }
  .header-brand span { display:block; }
  .nav-links { display:none; }
  .system-state { display:none; }
  .header-actions { grid-column:3; justify-self:end; }
  .mobile-menu-toggle { display:flex; position:relative; z-index:3; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:42px; height:42px; padding:0; border:1px solid rgba(37,82,101,.12); border-radius:13px; background:rgba(255,255,255,.72); box-shadow:0 3px 12px rgba(23,55,69,.06),inset 0 1px 0 #fff; }
  .mobile-menu-toggle i { display:block; width:15px; height:1.5px; background:#17445a; transition:transform 260ms ease,opacity 180ms ease; }
  .architecture-nav.is-menu-open .mobile-menu-toggle i:first-child { transform:translateY(3px) rotate(45deg); }
  .architecture-nav.is-menu-open .mobile-menu-toggle i:last-child { transform:translateY(-3px) rotate(-45deg); }
  .architecture-nav.is-menu-open .nav-links { position:absolute; top:calc(100% + 9px); right:0; left:0; display:flex; align-items:stretch; flex-direction:column; gap:0; max-height:calc(100svh - 88px); padding:14px; overflow-y:auto; border:1px solid rgba(255,255,255,.96); border-radius:20px; background:rgba(239,243,241,.985); box-shadow:0 24px 60px rgba(20,45,57,.2),inset 0 1px 0 #fff; backdrop-filter:blur(20px) saturate(1.06); -webkit-backdrop-filter:blur(20px) saturate(1.06); overscroll-behavior:contain; }
  .architecture-nav.is-menu-open .nav-links a { display:flex; align-items:center; min-height:48px; padding:13px 15px; color:#244552; font-size:14px; font-weight:580; line-height:1.35; letter-spacing:.055em; text-align:left; }
  .architecture-nav.is-menu-open .nav-links a.is-active { color:#123746; background:#fff; box-shadow:0 5px 18px rgba(20,45,57,.07),inset 0 0 0 1px rgba(28,82,105,.06); }
  .building-visual { width:min(112vw,680px); }
  .architecture-stage.is-ready .building-visual { transform:translate(-50%,-50%) scale(.78); }
  .architecture-stage.is-docked .building-visual { transform:translate(-22%,-58%) scale(.78); }
  .architecture-stage.is-docked[data-active-module="0"] .building-visual,
  .architecture-stage.is-docked[data-active-module="1"] .building-visual,
  .architecture-stage.is-docked[data-active-module="2"] .building-visual,
  .architecture-stage.is-docked[data-active-module="3"] .building-visual { transform:translate(-22%,-58%) scale(.78); }
  .architecture-modules { top:60px; right:18px; bottom:20px; left:18px; width:auto; }
  .architecture-module { justify-content:center; gap:16px; padding:66px 0 48px; transform:translateY(-18px); }
  .architecture-stage .module-visual { flex:0 0 clamp(122px,18vh,150px); width:min(42vw,160px); margin-right:auto; margin-left:8px; }
  .architecture-stage .module-visual video,.architecture-stage .module-visual canvas { width:100%; max-height:100%; }
  .architecture-stage .module-copy { width:100%; margin:0; padding:0 2px; }
  .architecture-stage .copy-index { min-height:10px; margin-bottom:8px; font-size:8px; }
  .architecture-stage h1,.architecture-stage h2 { min-height:70px; font-size:clamp(30px,9vw,36px); line-height:.96; letter-spacing:-.05em; }
  .architecture-stage .module-copy p { min-height:32px; max-width:320px; margin:10px 0 0; font-size:9.5px; line-height:1.55; }
  .architecture-stage .copy-tags { display:none; }
  .architecture-stage .module-controls { bottom:14px; }
}

@media (max-width:760px) and (max-height:620px) {
  .architecture-modules { top:48px; bottom:12px; }
  .architecture-module { gap:8px; padding:34px 0 34px; transform:translateY(-12px); }
  .architecture-stage .module-visual { flex-basis:108px; width:min(39vw,146px); }
  .architecture-stage h1,.architecture-stage h2 { min-height:55px; font-size:clamp(27px,8vw,32px); }
  .architecture-stage .module-copy p { margin-top:7px; font-size:9px; }
  .architecture-stage .module-controls { bottom:8px; }
}

@media (min-width:761px) and (max-height:700px) {
  .module-copy { position:relative; top:-16px; }
  .module-controls { bottom:0; }
}

.architecture-footer { position:relative; width:100%; padding:0 24px 24px; color:#162a33; opacity:0; transform:translateY(28px); transition:opacity 900ms ease,transform 1100ms cubic-bezier(.16,1,.3,1); }
.architecture-footer.is-visible { opacity:1; transform:translateY(0); }
.footer-shell { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(420px,1fr); gap:80px; width:min(1380px,100%); min-height:500px; margin:0 auto; padding:72px 76px 36px; overflow:hidden; border:1px solid rgba(255,255,255,.25); border-radius:34px; background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(211,220,218,.5)); box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 22px 70px rgba(26,51,61,.045); backdrop-filter:blur(28px) saturate(1.18); -webkit-backdrop-filter:blur(28px) saturate(1.18); }
.footer-shell::before { content:""; position:absolute; top:-240px; right:-160px; width:620px; height:620px; border:1px solid rgba(25,83,109,.035); border-radius:50%; box-shadow:0 0 0 90px rgba(25,83,109,.01),0 0 0 180px rgba(25,83,109,.007); opacity:.72; pointer-events:none; }
.footer-shell::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 28%,transparent 74%,rgba(255,255,255,.08)); pointer-events:none; }
.footer-intro { position:relative; z-index:1; }
.footer-kicker,.footer-navigation span,.footer-bottom { color:rgba(20,48,61,.62); font-family:ui-monospace,monospace; font-size:10px; font-weight:500; letter-spacing:.13em; }
.footer-intro strong { display:block; margin-top:32px; font-size:clamp(48px,5.6vw,82px); font-weight:520; line-height:.88; letter-spacing:-.065em; }
.footer-intro p { max-width:540px; margin:34px 0 0; color:rgba(22,42,51,.68); font-size:14px; line-height:1.7; }
.footer-navigation { position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px; padding-top:8px; }
.footer-navigation div { display:flex; flex-direction:column; align-items:flex-start; }
.footer-navigation span { margin-bottom:26px; }
.footer-navigation a { position:relative; margin:0 0 16px; color:rgba(18,39,49,.82); font-size:14px; font-weight:450; text-decoration:none; transition:color 180ms ease,transform 220ms ease; }
.footer-navigation a::after { content:""; position:absolute; right:0; bottom:-4px; left:0; height:1px; background:#1789bd; transform:scaleX(0); transform-origin:left; transition:transform 250ms ease; }
.footer-navigation a:hover { color:#102b38; transform:translateX(3px); }
.footer-navigation a:hover::after { transform:scaleX(1); }
.footer-bottom { position:absolute; right:76px; bottom:34px; left:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-top:22px; border-top:1px solid rgba(24,53,67,.1); }
.footer-bottom > :nth-child(2) { justify-self:center; }
.footer-bottom > a { justify-self:end; color:inherit; text-decoration:none; }
.footer-status { display:flex; align-items:center; gap:9px; }
.footer-status i { width:6px; height:6px; border-radius:50%; background:#1689bd; box-shadow:0 0 0 5px rgba(22,137,189,.1); animation:pulse 1.8s ease infinite; }

@media (max-width:760px) {
  .architecture-footer { padding:0 12px 12px; }
  .footer-shell { grid-template-columns:1fr; gap:52px; min-height:720px; padding:54px 28px 118px; border-radius:26px; }
  .footer-intro strong { margin-top:24px; font-size:clamp(46px,14vw,64px); }
  .footer-intro p { margin-top:26px; font-size:13px; }
  .footer-navigation { gap:28px; }
  .footer-navigation a { font-size:13px; }
  .footer-bottom { right:28px; bottom:28px; left:28px; grid-template-columns:1fr auto; row-gap:14px; }
  .footer-bottom > :nth-child(2) { display:none; }
  .footer-bottom > a { justify-self:end; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.quantin-poster-canvas {
  background-image: var(--quantin-poster);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.quantin-poster-canvas.is-rendering {
  background-image: none;
}