/* Readable baseline: CSS variables + Flexbox without gap; no sticky/pinned scenes.
   Defaults also work when JavaScript is unavailable. All overrides are scoped. */
:root.compat-basic{--pad:24px;--gutter:24px;--hud:64px;--compat-height:100vh}
:root.compat-basic body{margin:0;overflow-x:hidden;overflow-y:auto;position:static;height:auto;touch-action:auto}
:root.compat-basic .entry,:root.compat-basic .entry-pin,:root.compat-basic .hero{width:100%;height:100vh;height:var(--compat-height);min-height:0;max-height:none;margin:0;padding:0;position:relative;top:auto;left:auto;transform:none;overflow:hidden}
:root.compat-basic .hero{display:flex;padding:90px 24px 36px;box-sizing:border-box}
:root.compat-basic .hero-mid{width:100%;height:100%;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
:root.compat-basic .hero-mid>*{flex-shrink:0;margin:0 0 22px}
:root.compat-basic .hero-top{padding:0;display:block;max-width:100%}
:root.compat-basic .hero-eyebrow{font-size:11px;line-height:1.5;letter-spacing:.09em;display:block;color:inherit;text-align:center}
:root.compat-basic .hero-eyebrow .bar{display:none}
:root.compat-basic .liquid-stage{width:88%;max-width:1040px;height:auto;aspect-ratio:auto}
:root.compat-basic svg.logo{width:100%;height:auto;display:block;filter:none!important;animation:none;transform:none}
:root.compat-basic[data-theme=white] svg.logo{filter:invert(1)!important}
:root.compat-basic #logoGroup{filter:none}
:root.compat-basic .hero-sub{font-size:20px;line-height:1.4;max-width:90%;color:inherit;background:none;-webkit-text-fill-color:currentColor}
:root.compat-basic .hero-sub b{color:inherit;background:none;-webkit-text-fill-color:currentColor}
:root.compat-basic .scrollcue{position:static;transform:none;font-size:12px;line-height:1.4;color:inherit;padding:12px}
:root.compat-basic .scrollcue .line{display:none}
:root.compat-basic #heroGrid,:root.compat-basic .portal,:root.compat-basic .portal-label,:root.compat-basic .studio-world,:root.compat-basic .studio-wash,:root.compat-basic .boot,:root.compat-basic .depth,:root.compat-basic .section-arrows,:root.compat-basic .hud-bot,:root.compat-basic .hud::before,:root.compat-basic .hud::after,:root.compat-basic #themeToggle,:root.compat-basic #sectionNavTitle,:root.compat-basic #workToolbar,:root.compat-basic #workBottomBar,:root.compat-basic #workWall,:root.compat-basic #workEmpty,:root.compat-basic .mobile-panel-nav{display:none!important}
:root.compat-basic .hud{position:fixed;height:64px;left:0;right:0;top:0;bottom:auto;color:#f0eeea;background:#080808;z-index:40}
:root.compat-basic .hud-top{position:static;display:flex;align-items:center;justify-content:space-between;height:64px;margin:0;padding:0 24px;color:#f0eeea!important}
:root.compat-basic .hud-brand{position:static;display:block;width:36px;min-width:36px;height:40px;min-height:0;margin-right:16px;padding:0}
:root.compat-basic .hud-dots{width:32px;height:36px;display:block;opacity:1;transform:none}
:root.compat-basic .hud-wordmark{display:none}
:root.compat-basic .top-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0;font-size:14px;line-height:1.3;opacity:1;visibility:visible}
:root.compat-basic .top-links a{display:block;padding:12px 0;margin-left:20px;white-space:nowrap}
:root.compat-basic .editorial{width:100%;height:auto!important;min-height:0;max-height:none;margin:0;padding:80px 24px;overflow:visible;transform:none;scroll-margin-top:64px}
:root.compat-basic .hold-content{position:static;height:auto;min-height:0;transform:none;padding:0!important;opacity:1}
:root.compat-basic #studio{padding:0;background:var(--cream);color:var(--blue)}
:root.compat-basic[data-theme=white] #studio{background:#101010;color:#f0eeea}
:root.compat-basic .studio-room{position:relative;width:100%;height:auto;min-height:0;margin:0;padding:90px 24px;opacity:1;transform:none;background:var(--cream)}
:root.compat-basic .studio-message{position:static;display:block;transform:none;inset:auto;text-align:center}
:root.compat-basic .studio-definition{justify-content:center;font-size:11px;margin-bottom:20px}
:root.compat-basic .studio-definition>span{margin:0 3px}
:root.compat-basic .studio-room .statement{position:static;transform:none;width:auto;font-size:52px;line-height:1.1;letter-spacing:-.045em;margin:0}
:root.compat-basic .statement .taste-line,:root.compat-basic .statement .offset{height:auto;font-size:inherit;line-height:1.1;white-space:normal;display:block;margin:0}
:root.compat-basic .studio-introduction{position:static;transform:none;font-size:18px;line-height:1.6;width:auto;max-width:760px;margin:28px auto 0}
:root.compat-basic #capabilities{padding:64px 24px 80px}
:root.compat-basic [data-reveal]{opacity:1;visibility:visible;transform:none}
:root.compat-basic .practice-intro{display:block;margin-bottom:32px}
:root.compat-basic h2,:root.compat-basic .practice-intro h2,:root.compat-basic .team-intro h2,:root.compat-basic .protocol-layout>h2{font-size:42px;line-height:1.1;letter-spacing:-.04em;position:static}
:root.compat-basic .practice-intro p{font-size:17px;line-height:1.5;margin-top:24px}
:root.compat-basic .practice summary{display:flex;align-items:center;padding:22px 0}
:root.compat-basic .practice-number{margin-right:18px}
:root.compat-basic .practice h3{font-size:28px;line-height:1.2}
:root.compat-basic .practice-kind{display:none}
:root.compat-basic .practice .toggle{margin-left:auto}
:root.compat-basic .practice-content{display:block;padding:0 0 24px}
:root.compat-basic .practice-content p,:root.compat-basic .practice-content>span{display:block;font-size:16px;line-height:1.6;max-width:none}
:root.compat-basic .work-stage{position:static;height:auto;min-height:0;overflow:visible;padding:0}
:root.compat-basic #workList{display:flex!important;flex-wrap:wrap;width:auto;height:auto;margin:0 -16px;gap:0;transform:none;overflow:visible}
:root.compat-basic #workList .project{width:50%;flex:0 0 50%;padding:0 16px 48px;box-sizing:border-box;opacity:1;transform:none}
:root.compat-basic [hidden],:root.compat-basic #workList .project[hidden]{display:none!important}
:root.compat-basic .project-image{display:block;position:relative;width:100%;height:300px;min-height:0;border:0;overflow:hidden;background:#191919;padding:0;cursor:pointer}
:root.compat-basic .project-image img{display:block;width:100%;height:100%;object-fit:cover;padding:0}
:root.compat-basic .project-jordain-portfolio .project-image img{object-fit:contain;padding:50px}
:root.compat-basic .project-heading{display:block;margin:18px 0 12px}
:root.compat-basic .project-heading h3{font-size:28px;line-height:1.2}
:root.compat-basic .project-heading>span{display:block;font-size:12px;margin-top:9px}
:root.compat-basic .project-summary,:root.compat-basic .project-services,:root.compat-basic .project-credits{font-size:16px;line-height:1.6;margin-top:12px}
:root.compat-basic .project-source a{font-size:14px;display:inline-block;margin-top:12px;border:1px solid currentColor;padding:12px}
:root.compat-basic .team-intro,:root.compat-basic .team-grid,:root.compat-basic .team-name{display:block}
:root.compat-basic .team-intro{margin-bottom:36px}
:root.compat-basic .team-intro p{font-size:17px;line-height:1.6;margin-top:20px}
:root.compat-basic .team-member{max-width:650px;margin:0 auto 64px}
:root.compat-basic .team-portrait{height:420px;display:block;aspect-ratio:auto}
:root.compat-basic .team-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
:root.compat-basic .team-role{font-size:11px;line-height:1.4}
:root.compat-basic .team-name h3{font-size:32px;line-height:1.1}
:root.compat-basic .team-bio,:root.compat-basic .team-credits{font-size:16px;line-height:1.6}
:root.compat-basic .team-credits{display:block}
:root.compat-basic .team-credits li{margin:12px 0}
:root.compat-basic .protocol-layout{display:block}
:root.compat-basic .protocol-steps{margin-top:35px}
:root.compat-basic .protocol-steps article{display:block;margin-bottom:32px}
:root.compat-basic .protocol-steps h3{font-size:28px;line-height:1.2}
:root.compat-basic .protocol-steps p{font-size:17px;line-height:1.6}
:root.compat-basic .brand-track,:root.compat-basic .brand-group{display:flex;flex-wrap:wrap;width:100%;animation:none}
:root.compat-basic .brand-group[aria-hidden=true]{display:none}
:root.compat-basic .brand-item{width:25%;height:110px;animation:none;padding:20px}
:root.compat-basic .brand-item img{max-width:100%;height:65px;object-fit:contain}
:root.compat-basic .contact-section h2{font-size:60px;line-height:1.05}
:root.compat-basic .contact-link{font-size:26px;line-height:1.3;margin-top:28px}
:root.compat-basic .contact-bottom{display:block;margin-top:40px;font-size:14px;line-height:1.6}
:root.compat-basic .contact-bottom>*{display:block;margin:20px 0}
:root.compat-basic .compat-filters{margin:25px 0 35px;display:flex;flex-wrap:wrap}
:root.compat-basic .compat-filters button{font:inherit;font-size:14px;color:inherit;background:transparent;border:1px solid currentColor;padding:10px 14px;margin:0 8px 8px 0;cursor:pointer}
:root.compat-basic .compat-filters button[aria-pressed=true]{font-weight:bold;text-decoration:underline}
:root.compat-basic .compat-settings{margin:35px 0;font-size:14px;line-height:1.6}
:root.compat-basic .compat-settings a{display:inline-block;margin:0 18px 8px 0;text-decoration:underline}
:root.compat-basic .compat-detail{margin-top:24px;padding:24px 0;border-top:1px solid currentColor}
:root.compat-basic .compat-detail img{display:block;width:100%;height:auto;max-width:900px;margin:16px 0}
:root.compat-basic .compat-detail .project-image{height:350px}
:root.compat-basic dialog{display:none!important}
@media(max-width:600px){
 :root.compat-basic .hud-top{padding:0 14px}
 :root.compat-basic .top-links{font-size:12px}
 :root.compat-basic .top-links a{margin-left:13px}
 :root.compat-basic .hero{padding:84px 18px 28px}
 :root.compat-basic .liquid-stage{width:100%}
 :root.compat-basic .hero-sub{font-size:17px}
 :root.compat-basic .studio-room .statement{font-size:34px}
 :root.compat-basic .studio-introduction{font-size:16px}
 :root.compat-basic h2,:root.compat-basic .practice-intro h2,:root.compat-basic .team-intro h2{font-size:34px}
 :root.compat-basic #workList .project{width:100%;flex-basis:100%}
 :root.compat-basic .project-image{height:260px}
 :root.compat-basic .team-portrait{height:320px}
 :root.compat-basic .brand-item{width:50%}
 :root.compat-basic .contact-section h2{font-size:42px}
}
@media(max-height:500px){:root.compat-basic .hero{padding:74px 24px 10px}:root.compat-basic .hero-mid>*{margin-bottom:10px}:root.compat-basic .liquid-stage{width:52%;max-width:600px}:root.compat-basic .hero-eyebrow{font-size:9px}:root.compat-basic .hero-sub{font-size:16px}}

:root.compat-basic .project-image .tn-logo{width:84%;height:auto;object-fit:contain}
:root.compat-basic .project-image .tn-object{width:auto;height:88%;object-fit:contain}
:root.compat-basic div.project-image{cursor:default}
:root.compat-basic div.project-image .visit-mark,:root.compat-basic div.project-image .play-mark{display:none}
:root.compat-basic .editor-custom{display:block;min-height:0}
:root.compat-basic .editor-custom img{display:block;max-width:100%;height:auto;margin-top:24px}
:root.compat-basic .team-credits p{margin:12px 0}
:root.compat-basic .team-member,:root.compat-basic .project{scroll-margin-top:80px}
:root.compat-basic .compat-filter-status{font-size:14px;margin-bottom:24px}
:root.compat-basic .contact-section h2{white-space:pre-line}
:root.compat-basic{scroll-behavior:auto}
:root.compat-basic *,:root.compat-basic *::before,:root.compat-basic *::after{animation:none!important;transition:none!important}
:root.compat-basic .archive-open{display:none}
:root.compat-basic .team-portrait-caption{display:none}
:root.compat-basic .team-member,.compat-basic .project{overflow-wrap:break-word}
@supports(height:100dvh){:root.compat-basic{--compat-height:100dvh}}

:root.compat-basic:not(.compat-ready) .project[data-hide-from-all="true"]{display:none}

/* Baked mesh: no live geometry work on compatibility devices. The poster also
   remains visible with JavaScript disabled or autoplay unavailable. */
.compat-mesh{display:none}
:root.compat-basic .compat-mesh{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:#000 url("assets/compat-mesh-landscape.jpg") center/cover no-repeat;mix-blend-mode:screen;opacity:.42}
:root.compat-basic .compat-mesh-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
:root.compat-basic .hero-mid{position:relative;z-index:1}
:root.compat-basic[data-theme=blue] .compat-mesh{opacity:.56}
:root.compat-basic[data-theme=white] .compat-mesh{filter:invert(1);mix-blend-mode:multiply;opacity:.42}
@media(max-width:600px) and (orientation:portrait){:root.compat-basic .compat-mesh{background-image:url("assets/compat-mesh-portrait.jpg");opacity:.38}:root.compat-basic[data-theme=blue] .compat-mesh{opacity:.46}}