@charset "UTF-8";
:root{--paper:#f2f0e9;--ink:#15221d;--muted:#5c6259;--orange:#ed5a3b;--line:rgba(21,34,29,.2);--gutter:clamp(24px,4.5vw,88px);--ease:cubic-bezier(.22,1,.36,1);--sans:'Manrope',Arial,sans-serif;--serif:'DM Serif Display',Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.dialog-open{overflow:hidden}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button{color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button{border:0}
img{display:block;width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500}
h2{font-size:clamp(42px,5.5vw,86px);line-height:1.04;letter-spacing:-.065em}
em{font-family:var(--serif);font-weight:400;letter-spacing:-.035em}
p{line-height:1.75}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:2px solid currentColor;outline-offset:6px}
button:focus-visible{outline-offset:5px}
.skip-link{position:fixed;top:12px;left:16px;padding:16px 24px;background:var(--paper);color:var(--ink);z-index:300;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.eyebrow,.mini-label{font-size:11px;font-weight:650;letter-spacing:.1em;line-height:1.6}
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.section-pad{padding:120px var(--gutter)}
.scroll-progress{position:fixed;inset:0 auto auto 0;height:3px;width:100%;background:var(--orange);z-index:100;transform:scaleX(0);transform-origin:left}
.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;padding:12px 0;border-bottom:1px solid currentColor;font-size:13px;font-weight:600}
.text-link span{font-size:22px;transition:transform .4s var(--ease)}
.text-link:hover span{transform:translate(3px,-3px)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;padding:21px 26px;font-size:13px;font-weight:600;border-radius:2px;transition:background .3s,transform .4s var(--ease)}
.button span{font-size:24px;line-height:1;transition:transform .4s var(--ease)}
.button:hover span{transform:translate(3px,-3px)}
.button:hover{transform:translateY(-3px)}
.button-dark{background:var(--ink);color:var(--paper)}
.button-dark:hover{background:#2f4437}
/* A quiet, fixed masthead. */
.site-header{position:absolute;inset:0 0 auto;z-index:50;height:110px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;color:var(--paper);border-bottom:1px solid #ffffff30;transition:background .3s,height .3s,box-shadow .3s}
.site-header.is-scrolled{position:fixed;height:80px;background:rgba(21,34,29,.96);backdrop-filter:blur(14px);box-shadow:0 3px 20px #0000000d}
.brand{display:flex;align-items:center;gap:13px;font-size:14px;line-height:1.15;font-weight:800;letter-spacing:.1em}
.brand-mark{width:42px;height:40px}
.brand>span{position:relative}
.brand-dot{position:absolute;right:-12px;top:-2px;font-size:9px}
.desktop-nav{display:flex;align-items:center;gap:32px}
.desktop-nav a{font-size:13px;padding:10px 0;position:relative}
.desktop-nav a::after{content:'';position:absolute;bottom:3px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.desktop-nav a:hover::after{transform:scaleX(1)}
.desktop-nav a>span:not(.nav-dot){font-size:9px;vertical-align:super;margin-left:4px}
.nav-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);vertical-align:top;margin-top:4px;margin-left:2px}
.header-cta{display:flex;align-items:center;gap:36px;border:1px solid #ffffff60;border-radius:2px;padding:13px 18px;font-size:12px;transition:background .25s,color .25s}
.header-cta span{font-size:20px}
.header-cta:hover{background:var(--paper);color:var(--ink)}
.menu-toggle{display:none}
.mobile-menu{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:24px;background:var(--ink);color:var(--paper);border:0}
.mobile-menu::backdrop{background:var(--ink)}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-close,.dialog-close{background:none;color:inherit;font-size:12px;display:flex;align-items:center;gap:20px;padding:10px}
.menu-close span,.dialog-close span{font-size:30px;font-weight:400}
.mobile-menu nav{display:flex;flex-direction:column;gap:24px;padding:65px 0}
.mobile-menu nav a{font-size:clamp(28px,8vw,52px);letter-spacing:-.05em}
.mobile-menu nav sup{font-size:12px}
.menu-email{font-size:13px;border-bottom:1px solid #ffffff60;padding-bottom:10px}
/* The landscape moves at a quieter pace than the type. */
.hero{position:relative;min-height:800px;height:100svh;max-height:1200px;color:var(--paper);background:#34483c;overflow:hidden;padding:160px var(--gutter) 46px;display:flex;flex-direction:column;justify-content:space-between}
.hero-landscape,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-landscape{inset:-6% 0;will-change:transform}
.hero-landscape img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 54%;filter:saturate(.48)}
.hero-film{opacity:0;transition:opacity 1.6s linear}
.hero-film.is-showing{opacity:1}
.hero-shade{background:linear-gradient(180deg,rgba(11,24,19,.52),rgba(11,24,19,.19) 42%,rgba(11,24,19,.62)),linear-gradient(90deg,rgba(11,24,19,.25),transparent)}
.hero-topline{position:relative;display:flex;justify-content:space-between;align-items:center}
.status-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px #ed5a3b15}
.hero-coordinates{font-size:11px;letter-spacing:.12em}
.hero-title-wrap{position:relative;margin-top:30px;margin-bottom:50px}
.hero h1{font-size:clamp(75px,10.5vw,184px);line-height:1.01;letter-spacing:-.075em;font-weight:450;position:relative;z-index:1}
.title-line{display:block}
.hero h1 em{letter-spacing:-.045em}
.title-period{color:var(--orange)}
.hero-seal{position:absolute;right:4.2%;top:-45px;width:128px;height:128px;border-radius:50%;color:var(--paper);z-index:2}
.hero-seal svg{width:100%;height:100%;animation:rotate 36s linear infinite}
.hero-seal text{fill:currentColor;font-size:9.2px;font-family:var(--sans);letter-spacing:1.5px}
.hero-seal>span{position:absolute;inset:0;display:grid;place-items:center;font-size:50px;transition:transform .5s var(--ease)}
.hero-seal:hover>span{transform:rotate(45deg)}
.hero-bottom{position:relative;display:grid;grid-template-columns:1fr 1.5fr auto;align-items:end;gap:30px;padding-top:28px;border-top:1px solid #ffffff50}
.scroll-link{display:flex;align-items:center;gap:17px;font-size:10px;line-height:1.8;letter-spacing:.1em}
.circle-arrow{border:1px solid #ffffff80;border-radius:50%;width:45px;height:45px;display:grid;place-items:center;font-size:22px;transition:background .3s,color .3s}
.scroll-link:hover .circle-arrow{color:var(--ink);background:var(--paper)}
.hero-bottom p{font-size:15px;line-height:1.75}
.hero-project-link{display:flex;align-items:center;gap:35px;font-size:14px;border-bottom:1px solid #ffffff90;padding-bottom:10px}
.hero-project-link>span{font-size:25px}
.hero-side-note{position:absolute;right:20px;top:48%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.18em}
/* An editorial rhythm, with the work doing the talking. */
.studio{display:grid;grid-template-columns:25% 1fr;gap:40px;padding-top:140px;padding-bottom:140px}
.section-index{display:flex;flex-direction:column;justify-content:space-between}
.little-asterisk{font-size:120px;line-height:.8;color:var(--orange);display:block;max-width:100px;transform:rotate(var(--asterisk-rotate,0deg))}
.statement{font-size:clamp(35px,4.3vw,68px);line-height:1.19;letter-spacing:-.055em}
.word{transition:color .3s}
.word.is-muted{color:#a8aca2}
.studio-details{display:grid;grid-template-columns:1fr 2fr;gap:35px;margin-top:60px}
.mini-label{padding-top:5px}
.studio-details p{font-size:16px;max-width:480px}
.studio-details p+p{margin-top:15px;color:var(--muted)}
.studio-details .text-link{margin-top:20px}
.work{padding-top:75px;border-top:1px solid var(--line)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:60px}
.section-heading h2{margin-top:25px}
.section-heading>p{font-size:15px;max-width:300px;padding-bottom:5px}
.section-heading sup{font:11px var(--sans);letter-spacing:0;margin-left:14px;vertical-align:top;position:relative;top:10px}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px 28px}
.project-featured{grid-column:1/-1}
.project-visual{display:block;width:100%;aspect-ratio:1.12;position:relative;overflow:hidden;text-align:left;padding:0;background:var(--card,var(--card-lairds));color:var(--ink);border-radius:2px;isolation:isolate}
.project-featured .project-visual{aspect-ratio:2.05}
.project-visual-top{position:absolute;top:28px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:.12em;z-index:2}
.project-art-title{position:absolute;top:16%;left:0;right:0;text-align:center;font-size:clamp(30px,4vw,67px);font-weight:450;letter-spacing:-.055em}
.project-featured .project-art-title{top:18%;left:7%;right:auto;text-align:left;width:24%;font-size:clamp(40px,5.5vw,90px);line-height:1.05}
.project-art-title em{display:block}
.browser-frame{display:block;width:84%;position:absolute;top:43%;left:8%;border-radius:7px;overflow:hidden;box-shadow:10px 25px 50px #15221d35;transform:rotate(-4deg);transition:transform 1s var(--ease);will-change:transform;background:var(--paper)}
.browser-top{height:25px;display:flex;align-items:center;padding:0 12px;gap:4px;background:#fafaf7;color:#34483c}
.browser-top i{display:block;width:4px;height:4px;background:#bcc1b7;border-radius:50%}
.browser-top>span{font-size:5px;letter-spacing:.1em;position:absolute;left:0;right:0;text-align:center}
.project-featured .browser-frame{width:60%;left:auto;right:5%;top:21%;transform:rotate(-5deg)}
.project:where(:nth-child(even)) .browser-frame{transform:rotate(4deg)}
.project-visual:hover .browser-frame,.project-visual:focus-visible .browser-frame{transform:rotate(0) translateY(-12px) scale(1.025)}
.view-project{position:absolute;right:24px;bottom:24px;padding:12px 17px;background:var(--paper);color:var(--ink);font-size:12px;display:flex;align-items:center;gap:26px;z-index:3;border-radius:2px;transition:background .3s}
.view-project>span{font-size:23px;line-height:1}
.project-visual:hover .view-project{background:var(--ink);color:var(--paper)}
.project-caption{display:flex;justify-content:space-between;align-items:start;gap:20px;padding-top:24px}
.project-caption h3{font-size:20px;letter-spacing:-.04em;font-weight:600}
.project-caption p{margin-top:6px;font-size:14px;color:var(--muted)}
.project-type{font-size:10px;letter-spacing:.06em;line-height:1.8;padding-top:5px;text-align:right;max-width:180px}
/* Services use a native accordion, so they work without JavaScript. */
.services{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 1.1fr;gap:9vw}
.services-intro h2{font-size:clamp(42px,4.7vw,74px);margin-top:35px}
.services-intro>p{font-size:15px;color:#bfc6ba;max-width:350px;margin-top:30px}
.services-intro>.text-link{margin-top:20px}
.services-list{padding-top:5px}
.service{border-top:1px solid #ffffff30}
.service:last-child{border-bottom:1px solid #ffffff30}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.service summary{display:flex;align-items:center;gap:20px;padding:30px 0}
.service-number{font-size:11px;color:#bfc6ba;align-self:start;margin-top:6px}
.service h3{font-size:clamp(18px,1.7vw,26px);letter-spacing:-.035em;flex:1}
.details-icon{display:block;position:relative;flex:none;width:18px;height:18px}
.details-icon::before,.details-icon::after{content:'';position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor;transition:transform .3s}
.details-icon::after{transform:rotate(90deg)}
details[open] .details-icon::after{transform:rotate(0)}
.service-body{padding:0 30px 35px 35px}
.service-body p{font-size:15px;line-height:1.85;color:#bfc6ba}
.service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.service-tags>span{border:1px solid #ffffff30;border-radius:30px;font-size:11px;padding:7px 12px}
.orbit-mark{position:relative;width:110px;height:110px;margin-top:65px}
.orbit-mark>div{position:absolute;inset:0;border:1px solid #ed5a3b90;border-radius:50%;transform:rotate(-35deg) scaleX(.45)}
.orbit-mark>div:nth-child(2){transform:rotate(25deg) scaleX(.45)}
.orbit-mark>div:nth-child(3){transform:rotate(85deg) scaleX(.45)}
.orbit-mark>span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:34px;font-style:italic;color:var(--orange)}
.playground-teaser{position:relative;background:#dedfcf;padding:35px var(--gutter) 85px;overflow:hidden;isolation:isolate}
.teaser-top{display:flex;justify-content:space-between;position:relative;z-index:2}
.teaser-content{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:12%;position:relative;z-index:2;margin-top:95px}
.teaser-content h2{font-size:clamp(65px,8vw,132px);line-height:.98}
.teaser-content>div{max-width:340px}
.teaser-content p{font-size:15px;margin-bottom:25px}
.teaser-note{display:block;font-size:10px;letter-spacing:.08em;margin-top:18px}
.teaser-orbits{position:absolute;width:580px;height:580px;top:-130px;left:36%;transform:rotate(30deg);z-index:-1}
.teaser-orbits>span{position:absolute;inset:0;border:1px solid #15221d24;border-radius:50%;transform:scaleX(.24)}
.teaser-orbits>span:nth-child(2){transform:rotate(36deg) scaleX(.24)}
.teaser-orbits>span:nth-child(3){transform:rotate(72deg) scaleX(.24)}
.teaser-orbits>span:nth-child(4){transform:rotate(108deg) scaleX(.24)}
.teaser-orbits>span:nth-child(5){transform:rotate(144deg) scaleX(.24)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;margin-top:75px}
.step-number{display:flex;justify-content:space-between;font-size:13px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.step-number>span{color:var(--orange);font-size:26px;line-height:1}
.process-step h3{font-size:20px;letter-spacing:-.04em;margin:28px 0 12px}
.process-step p{font-size:14px;color:var(--muted)}
.process-step:nth-child(2){transition-delay:70ms}
.process-step:nth-child(3){transition-delay:140ms}
.process-step:nth-child(4){transition-delay:210ms}
.faq{display:grid;grid-template-columns:1fr 1.1fr;gap:9vw}
.faq-intro h2{margin-top:25px;font-size:clamp(40px,4.3vw,68px)}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px 0;font-size:16px;letter-spacing:-.01em}
.faq-list details>p{font-size:15px;color:var(--muted);padding:0 30px 28px 0}
.contact{background:var(--ink);color:var(--paper);padding-top:45px;padding-bottom:55px}
.contact-top{display:flex;justify-content:space-between;gap:25px}
.contact-top .eyebrow{font-size:11px}
.contact-heading{display:flex;justify-content:space-between;align-items:center;padding:80px 0 65px;border-bottom:1px solid #ffffff30}
.contact-heading h2{font-size:clamp(72px,10.8vw,175px);line-height:.98}
.contact-arrow{display:block;color:var(--orange);font-size:clamp(80px,13vw,200px);line-height:1;transition:transform .8s var(--ease);font-weight:400}
.contact-heading:hover .contact-arrow{transform:translate(12px,-12px)}
.contact-bottom{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:30px;font-size:14px}
.contact-bottom p{color:#bfc6ba}
.contact-bottom a{display:flex;gap:35px;align-items:center}
.contact-bottom a span{font-size:20px}
.site-footer{padding:45px var(--gutter) 24px}
.footer-wordmark{display:block;position:relative;font-size:clamp(35px,10.25vw,180px);font-weight:600;line-height:1.1;letter-spacing:-.075em;white-space:nowrap}
.footer-wordmark>span{font-size:.15em;vertical-align:top;position:relative;top:.4em;margin-left:.3em}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:11px;padding-top:35px;margin-top:25px;border-top:1px solid var(--line)}
.footer-bottom>span:nth-child(2){font-size:10px;letter-spacing:.06em}
.footer-bottom>div{display:flex;align-items:center;gap:20px}
.motion-toggle{background:none;padding:7px 0;font-size:11px}
.motion-toggle>span{display:inline-block;margin-left:3px}
.motion-toggle>span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--orange);margin:0 4px 1px 0}
.reveal{opacity:1;transform:none}
.motion-enabled .reveal.is-pending{opacity:0;transform:translateY(35px)}
.motion-enabled .reveal{transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.motion-enabled .title-line{animation:hero-in 1.15s var(--ease) both}
.motion-enabled .title-line:nth-child(2){animation-delay:.14s}
.motion-paused *, .motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
.motion-paused .hero-landscape{transform:none!important}
.motion-paused .word{color:var(--ink)!important}
.motion-paused .reveal{opacity:1!important;transform:none!important}
.motion-paused{scroll-behavior:auto}
.motion-paused *{transition-duration:0s!important}
@keyframes rotate{
  to{transform:rotate(360deg)}
}
@keyframes hero-in{
  from{opacity:0;transform:translateY(35px);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@media(min-width:1700px){
  .section-pad{padding-left:max(var(--gutter),calc((100vw - 1600px)/2));padding-right:max(var(--gutter),calc((100vw - 1600px)/2))}
}
@media(max-width:1100px){
  .desktop-nav{gap:22px}
  .desktop-nav a{font-size:12px}
  .hero{min-height:720px}
  .hero h1{font-size:10.7vw}
  .hero-seal{right:0;top:-90px;width:105px;height:105px}
  .hero-bottom{grid-template-columns:1fr 1.5fr auto;gap:20px}
  .hero-bottom p{font-size:13px}
  .hero-project-link{font-size:13px;gap:20px}
  .studio{grid-template-columns:21% 1fr;gap:30px}
  .services,.faq{gap:6vw}
  .service summary{gap:12px}
  .service-body{padding-left:26px;padding-right:10px}
  .footer-bottom>span:nth-child(2){display:none}
  .contact-top .eyebrow{font-size:10px}
  .project-caption h3{font-size:18px}
  .project-type{max-width:90px}
  .project-caption p{max-width:220px}
}
@media(max-width:800px){
  :root{--gutter:26px}
  .section-pad{padding:85px var(--gutter)}
  .site-header{height:90px}
  .desktop-nav,.header-cta{display:none}
  .menu-toggle{display:flex;align-items:center;gap:17px;background:none;color:inherit;padding:12px 0}
  .menu-label{font-size:12px}
  .menu-icon{display:flex;flex-direction:column;gap:6px;width:24px}
  .menu-icon i{display:block;height:1px;width:24px;background:currentColor}
  .hero{height:95svh;min-height:690px;max-height:1000px;padding-top:125px;padding-bottom:30px}
  .hero-coordinates{font-size:10px}
  .hero-topline .eyebrow{font-size:10px}
  .hero h1{font-size:11.4vw;line-height:1.1}
  .hero-title-wrap{margin-top:65px;margin-bottom:40px}
  .hero-seal{width:85px;height:85px;top:-100px;right:0}
  .hero-seal>span{font-size:35px}
  .hero-bottom{grid-template-columns:1fr auto;gap:30px 20px}
  .hero-bottom p{grid-column:1/-1;grid-row:1;font-size:14px}
  .hero-project-link{align-self:center}
  .hero-side-note{display:none}
  .studio{grid-template-columns:1fr;gap:40px}
  .section-index{flex-direction:row;align-items:center}
  .little-asterisk{font-size:45px;line-height:1}
  .statement{font-size:clamp(30px,5.8vw,46px)}
  .studio-details{margin-top:35px;gap:25px}
  .section-heading{align-items:start;margin-bottom:40px;gap:25px}
  .section-heading h2{font-size:clamp(38px,6vw,55px)}
  .section-heading>p{font-size:14px;max-width:180px;align-self:end}
  .section-heading .eyebrow{font-size:10px}
  .project-grid{gap:45px 20px}
  .project-featured .project-visual{aspect-ratio:1.6}
  .project-featured .project-art-title{font-size:6vw}
  .project-featured .browser-frame{top:31%;right:4%;width:65%}
  .project-visual-top{left:18px;right:18px;top:18px;font-size:9px}
  .project-art-title{font-size:30px;top:20%}
  .browser-frame{top:47%;width:86%;left:7%}
  .browser-top{height:20px}
  .project-caption{gap:12px;flex-direction:column}
  .project-caption p{max-width:none}
  .project-type{max-width:none;text-align:left;font-size:10px}
  .view-project{right:12px;bottom:12px;padding:9px 12px;font-size:11px;gap:16px}
  .services{grid-template-columns:1fr;gap:45px}
  .services-intro{position:relative}
  .services-intro h2{font-size:54px}
  .services-intro>p{max-width:60%}
  .orbit-mark{position:absolute;right:20px;bottom:0;width:120px;height:120px}
  .service summary{padding:25px 0}
  .service h3{font-size:21px}
  .service-body{padding-left:30px;max-width:550px}
  .teaser-content{grid-template-columns:1fr 1fr;gap:7%;margin-top:70px}
  .teaser-content h2{font-size:8.5vw}
  .teaser-content p{font-size:14px}
  .teaser-content .button{font-size:12px;padding:17px 18px;gap:20px}
  .teaser-note{font-size:9px}
  .teaser-orbits{width:430px;height:430px;left:30%}
  .process-grid{grid-template-columns:1fr 1fr;gap:40px;margin-top:50px}
  .faq{grid-template-columns:1fr;gap:35px}
  .faq-intro h2{font-size:50px}
  .contact{padding-top:35px;padding-bottom:40px}
  .contact-top .eyebrow:last-child{display:none}
  .contact-heading{padding:65px 0 50px}
  .contact-heading h2{font-size:11vw}
  .contact-arrow{font-size:13vw}
  .contact-bottom{flex-wrap:wrap;font-size:13px;gap:22px}
  .contact-bottom p{width:100%}
  .footer-wordmark{font-size:10vw}
  .footer-bottom{gap:15px;align-items:start;font-size:11px}
  .footer-bottom>div{flex-wrap:wrap;gap:12px;justify-content:end}
  .footer-bottom>span{flex:none}
}
@media(max-width:500px){
  :root{--gutter:22px}
  .section-pad{padding-top:70px;padding-bottom:70px}
  .brand{font-size:12px;gap:10px}
  .brand-mark{width:35px;height:34px}
  .site-header{height:80px}
  .site-header.is-scrolled{height:70px}
  .hero{min-height:680px;height:94svh;padding-top:115px}
  .hero-coordinates{display:none}
  .hero-title-wrap{margin-top:70px;margin-bottom:30px}
  .hero h1{font-size:12.2vw;line-height:1.2;letter-spacing:-.075em}
  .hero h1 .title-line:last-child{font-size:11.35vw}
  .hero-seal{width:87px;height:87px;top:-115px}
  .hero-bottom{gap:24px}
  .hero-bottom p{font-size:14px;max-width:300px}
  .hero-project-link{font-size:13px;gap:20px}
  .scroll-link{font-size:9px;gap:10px}
  .circle-arrow{width:36px;height:36px;font-size:18px}
  .hero-landscape img{object-position:41% center}
  .hero-film{object-position:48% center}
  .studio-details{grid-template-columns:1fr}
  .studio-details .mini-label{display:none}
  .statement{font-size:7.1vw;line-height:1.3}
  .studio-details p{font-size:15px}
  .section-heading{display:block}
  .section-heading h2{font-size:10vw;margin-top:22px}
  .section-heading sup{font-size:10px;margin-left:7px}
  .section-heading>p{margin-top:22px;max-width:none}
  .section-heading>p br{display:none}
  .project-grid{grid-template-columns:1fr;gap:35px}
  .project-featured{grid-column:auto}
  .project-visual,.project-featured .project-visual{aspect-ratio:1.12}
  .project-featured .project-art-title,.project-art-title{font-size:43px;top:17%;width:auto;left:0;right:0;text-align:center;line-height:1}
  .project-art-title em{display:inline}
  .project-featured .project-art-title em{display:block}
  .project-featured .browser-frame,.browser-frame{width:84%;left:8%;right:auto;top:47%}
  .project-visual-top{font-size:9px}
  .project-caption{display:flex;flex-direction:row;padding-top:19px}
  .project-caption h3{font-size:19px}
  .project-caption p{font-size:13px;max-width:230px}
  .project-type{font-size:9px;max-width:85px;text-align:right}
  .project-art-title:not(.project-featured .project-art-title){font-size:38px}
  .services-intro h2{font-size:45px}
  .services-intro>p{max-width:100%;font-size:14px}
  .orbit-mark{display:none}
  .service h3{font-size:18px}
  .service summary{gap:13px}
  .service-body p{font-size:14px}
  .service-tags{gap:5px}
  .service-tags>span{font-size:10px;padding:6px 9px}
  .playground-teaser{padding:30px var(--gutter) 50px}
  .teaser-top .eyebrow{font-size:9px}
  .teaser-top .eyebrow:last-child{display:none}
  .teaser-content{display:block;margin-top:65px}
  .teaser-content h2{font-size:20vw;max-width:340px}
  .teaser-content>div{margin-top:30px;max-width:290px}
  .teaser-content p{font-size:14px}
  .teaser-content .button{font-size:12px;padding:19px 24px;gap:36px}
  .teaser-note{font-size:9px}
  .teaser-orbits{left:40%;top:-40px;width:400px;height:400px}
  .process-grid{gap:35px 22px;margin-top:40px}
  .process-step h3{font-size:17px}
  .process-step p{font-size:13px}
  .step-number{padding-bottom:20px}
  .faq-intro .eyebrow{font-size:10px}
  .faq-intro h2{font-size:44px}
  .faq-list summary{font-size:15px;gap:20px;line-height:1.6}
  .faq-list details>p{font-size:14px}
  .contact{padding-top:30px;padding-bottom:35px}
  .contact-top .eyebrow{font-size:9px;gap:8px}
  .contact-heading{padding:50px 0 40px;position:relative}
  .contact-heading h2{font-size:12vw}
  .contact-arrow{font-size:14vw;position:absolute;right:0;top:45px}
  .contact-bottom{font-size:13px}
  .contact-bottom a{gap:20px}
  .footer-wordmark{font-size:9.7vw}
  .site-footer{padding-top:30px}
  .footer-bottom{flex-direction:column;padding-top:20px;margin-top:20px}
  .footer-bottom>div{justify-content:start;gap:20px}
  .dialog-close{gap:10px;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-landscape{transform:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .word.is-muted{color:var(--ink)}
  .browser-frame{will-change:auto}
}
/* Light-aware hero: the photograph takes on dawn, dusk or night (see css/light.css). */
.hero-shade::after{content:'';position:absolute;inset:0;background:var(--hero-tint);transition:background 1.2s}
.header-cta{gap:24px}
.project-caption p{max-width:420px}
.section-heading sup{font-family:var(--sans)}

/* Homepage ways to work with us: cards on the dark ground, orange kept for the free website and its button. */
.offers{background:var(--ink);color:var(--paper)}
.offers-top{display:flex;justify-content:space-between;gap:20px;color:#bfc6ba}
.offers-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:end;padding:52px 0 60px}
.offers-intro h2{font-size:clamp(50px,6.4vw,104px)}
.offers-intro p{font-size:16px;max-width:400px;color:#bfc6ba}
.offers-list{--offers-top:104px;--offers-peek:64px}
.visually-hidden+.offers-list{margin-top:44px}
.offer+.offer{margin-top:16px}
.offer-card{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);padding:34px clamp(24px,3vw,44px) 40px;background:#202c27;background:color-mix(in srgb,var(--paper) 5%,var(--ink));border:1px solid color-mix(in srgb,var(--paper) 10%,transparent);border-radius:6px}
/* Stacked (js/site.js): each card holds below the header, a strip of the one before still showing, and folds back as the next arrives over it. */
.offers-list.is-stacked .offer{position:sticky;top:calc(var(--offers-top) + var(--i,0) * var(--offers-peek))}
.offers-list.is-stacked .offer:nth-child(2){--i:1}
.offers-list.is-stacked .offer:nth-child(3){--i:2}
/* That room only holds the stack in place; what follows rises into it as the last card folds. */
.offers-list.is-stacked{margin-bottom:calc(-1 * var(--offers-tail,0px))}
.offers-list.is-stacked::after{content:'';display:block;height:var(--offers-tail,0px)}
.offers-list.is-stacked .offer-card{transform-origin:50% 0;transform:perspective(1400px) rotateX(calc(var(--fold,0) * -70deg)) scale(calc(1 - var(--fold,0) * .05));box-shadow:0 -22px 46px -30px #000;will-change:transform}
.offer-card::after{content:'';position:absolute;inset:-1px;border-radius:inherit;background:#050b08;opacity:calc(var(--fold,0) * .78);pointer-events:none}
/* The name stays lit on a folded card, like the tab of a file. */
.offers-list.is-stacked .offer-name{position:relative;z-index:1}
.offer-name{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:11px;font-weight:650;letter-spacing:.12em;color:#bfc6ba}
.offer-flag{display:inline-flex;align-items:center;gap:9px;color:var(--orange)}
.offer h3{font-size:clamp(30px,3vw,46px);line-height:1.08;letter-spacing:-.055em;margin-top:22px}
.offer h3 em{display:block}
.offer-price strong{display:flex;align-items:baseline;gap:12px;font-size:clamp(40px,3.6vw,56px);font-weight:450;line-height:1;letter-spacing:-.065em}
.offer-price strong em{font-size:20px;letter-spacing:-.02em;color:#bfc6ba}
.offer-featured .offer-price strong{font-size:clamp(84px,8vw,128px);color:var(--orange);letter-spacing:-.075em}
.offer-price p{margin-top:16px;font-size:14px;line-height:1.6;color:#bfc6ba;max-width:300px}
.offer-detail{display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.offer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-size:15px;line-height:1.45}
.offer li{display:flex;gap:12px}
.offer li::before{content:'↗';color:var(--orange);font-size:13px;flex:none;transform:translateY(2px)}
.offer .button{justify-content:space-between;background:var(--orange);color:var(--ink)}
.offer .button:hover{background:var(--paper)}
.offer .text-link{align-self:stretch}
.offers-foot{display:grid;grid-template-columns:1.5fr 1fr;gap:13%;margin-top:44px;font-size:14px;line-height:1.7;align-items:start;color:#bfc6ba}
.offers-foot strong{display:block;margin-bottom:3px;color:var(--paper)}
.offers-foot a{justify-self:start;border-bottom:1px solid currentColor;font-weight:650;padding-bottom:4px;color:var(--paper)}
@media(max-width:1100px){
  .offer-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:30px}
  .offer-detail{grid-column:2;grid-row:1/3}
}
@media(max-width:800px){
  .offers-intro{grid-template-columns:1fr;gap:24px;padding:45px 0 50px}
  .offers-intro h2{font-size:12vw}
  .offer-card{grid-template-columns:1fr;row-gap:26px;padding:28px 22px 30px}
  .offers-list{--offers-top:96px;--offers-peek:54px}
  .offer-detail{grid-column:auto;grid-row:auto}
  .offer h3{margin-top:18px}
  .offers-foot{grid-template-columns:1fr;gap:18px}
}
@media(max-width:600px){
  .offers-top .eyebrow:last-child{display:none}
  .offers-intro p{font-size:15px}
  .offer .button{width:100%}
  /* Phones: a tighter card, so all three can stack under the header and fold. */
  .offers-list{--offers-top:80px;--offers-peek:44px}
  .offer-card{row-gap:16px;padding:20px 20px 22px}
  .offer h3{margin-top:12px;font-size:26px}
  .offer-price strong{font-size:34px}
  .offer-price strong em{font-size:16px}
  .offer-featured .offer-price strong{font-size:64px}
  .offer-price p{margin-top:8px;font-size:13px;line-height:1.5}
  .offer-detail{gap:18px}
  .offer ul{gap:6px;font-size:14px}
  .offer .button{padding:17px 22px}
  .offer .text-link{padding:9px 0}
}
@media(max-width:600px) and (max-height:600px){
  .offers-list{--offers-peek:38px}
  .offer-card{row-gap:12px;padding-top:16px}
  .offer h3{margin-top:10px}
}

/* Contact, footer and the honest little status line. */
.contact-bottom .contact-cta{background:var(--orange);color:#15221d;padding:16px 20px;border-radius:2px;font-weight:650;transition:background .3s}
.contact-bottom .contact-cta:hover{background:var(--paper)}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:13px;margin-top:28px}
.footer-nav a{border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s}
.footer-nav a:hover{border-color:currentColor}
.footer-stats{font-size:11px;color:var(--muted);margin-top:14px;min-height:1.6em;letter-spacing:.02em}
.footer-stats b{font-weight:650;color:var(--ink)}
.light-toggle{font-size:11px}

/* Cross-page view transitions: the header holds still while pages cross-fade and shots morph. */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .6s var(--ease) both}
::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--ease)}
html.motion-paused::view-transition-group(*),html.motion-paused::view-transition-old(*),html.motion-paused::view-transition-new(*){animation:none!important}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}

/* Scroll-driven motion runs on the compositor where the browser supports it; js/site.js covers the rest. */
@supports (animation-timeline:view()){
  .motion-enabled .scroll-progress{transform:none;animation:progress linear both;animation-timeline:scroll(root)}
  .motion-enabled .hero-landscape{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  .motion-enabled .reveal{animation:reveal-up linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
  .motion-enabled .teaser-orbits{animation:orbit-turn linear both;animation-timeline:view();animation-range:cover}
}
@keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hero-drift{to{transform:translateY(16vh) scale(1.04)}}
@keyframes reveal-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes orbit-turn{from{transform:rotate(20deg)}to{transform:rotate(80deg)}}

@media(max-width:800px){
  .contact-bottom .contact-cta{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.project-caption h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.project-caption h3 a:hover{background-size:100% 1px}
.desktop-nav a[aria-current=page]::after{transform:scaleX(1)}