.hero{min-height:calc(100svh - var(--head-h));padding-block:clamp(8px,1.4vw,20px) clamp(48px,7vw,104px);display:flex}.hero>.wrap{flex-direction:column;width:100%;display:flex}.hero-mark{display:none}.hero-body{margin-block:auto}.sentence{text-wrap:pretty;max-width:15.5em;margin:0;font-size:clamp(38px,6.6vw,108px);line-height:1.04}.sentence .hi{color:var(--fg2)}.pill{vertical-align:baseline;background:var(--card);isolation:isolate;width:1.9em;height:.76em;box-shadow:var(--shadow-rest);border-radius:.38em;display:inline-block;position:relative;overflow:hidden;transform:translateY(.07em)}.pill-web .reel{animation:reel 14s var(--ease-io) infinite;flex-direction:column;display:flex;position:absolute;inset:0}.pill-web .reel img{object-fit:cover;object-position:50% 0;flex:0 0 100%;width:100%;height:100%}@keyframes reel{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-100%)}50%,68%{transform:translateY(-200%)}75%,93%{transform:translateY(-300%)}to{transform:translateY(-400%)}}.pill-motion{box-shadow:none;background:0 0;border-radius:0;overflow:visible}.pill-motion svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.pill-motion .cap{fill:var(--ink)}.sentence .nw,.mw,.mword{white-space:nowrap}.mword .l{transform-origin:50% 80%;display:inline-block}.mword .l:before{content:attr(data-ch)}.sentence .accent{margin-right:.1em}.doors{flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:clamp(32px,4vw,56px);display:flex}.door{border:1.5px solid var(--fg);min-height:56px;font-family:var(--display);font-weight:var(--dw);letter-spacing:-.01em;transition:transform var(--t-press) var(--ease-out), background-color var(--t-ui) ease, color var(--t-ui) ease;border-radius:999px;align-items:center;gap:12px;padding:12px 24px;font-size:clamp(18px,1.8vw,24px);text-decoration:none;display:inline-flex}.door .ic{transition:transform var(--t-ui) var(--ease-out)}.door:active{transform:scale(.97)}@media (hover:hover) and (pointer:fine){.door:hover{background:var(--fg);color:var(--bg)}.door:hover .ic{transform:translate(4px)}}.doors .quiet{color:var(--fg2);margin-left:6px;font-size:15px}.door-motion{isolation:isolate;position:relative;overflow:hidden}.door-motion:before{content:"";z-index:-2;border-radius:inherit;transition:opacity var(--t-ui) ease;position:absolute;inset:0}@media (prefers-reduced-motion:no-preference){.door-motion{animation:doorShape 28s var(--ease-io) infinite}.door-motion:before{animation:doorFill 28s var(--ease-io) infinite}}@keyframes doorShape{0%,21%{border-radius:30px}25%,46%{border-radius:30px 10px}50%,71%{border-radius:16px}75%,96%{border-radius:10px 30px}to{border-radius:30px}}@keyframes doorFill{0%,21%{background-color:#0000}25%,46%{background-color:var(--accent)}50%,71%{background-color:var(--c-mint)}75%,96%{background-color:var(--c-sand)}to{background-color:#0000}}.door-motion:hover,.door-motion:hover:before{animation-play-state:paused}.door-motion:hover:before,.door-motion:focus-visible:before{opacity:0}.door-shapes{z-index:-1;pointer-events:none;position:absolute;inset:0}.door-shapes i{left:var(--x);top:var(--y);width:var(--w,9px);height:var(--h,9px);margin:calc(var(--h,9px) / -2) 0 0 calc(var(--w,9px) / -2);opacity:0;transform:translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.8);transition:transform .22s var(--ease-io), opacity .16s ease;position:absolute}.door-shapes i:before{content:"";background:var(--c);border-radius:var(--br,0);clip-path:var(--clip,none);position:absolute;inset:0}.door-shapes i:first-child{--x:11%;--y:24%;--c:var(--accent);--br:50%;--fx:-34px;--fy:-26px;--fr:-60deg;--d:0s;--bx:2px;--by:-2px;--r:20deg}.door-shapes i:nth-child(2){--x:30%;--y:81%;--w:8px;--h:8px;--c:var(--c-mint);--br:2px;--fx:-14px;--fy:34px;--fr:80deg;--d:50ms;--bx:-2px;--by:2px;--r:-35deg}.door-shapes i:nth-child(3){--x:57%;--y:17%;--w:11px;--h:10px;--c:var(--c-sand);--clip:polygon(50% 0, 100% 100%, 0 100%);--fx:12px;--fy:-32px;--fr:-120deg;--d:.1s;--bx:2px;--by:2px;--r:30deg}.door-shapes i:nth-child(4){--x:77%;--y:83%;--w:17px;--h:4px;--c:var(--ground);--br:2px;--fx:30px;--fy:30px;--fr:60deg;--d:.15s;--bx:-3px;--by:-1px;--r:-12deg}.door-shapes i:nth-child(5){--x:90%;--y:22%;--w:10px;--h:10px;--c:radial-gradient(circle, transparent 2.5px, var(--accent) 3px);--br:50%;--fx:34px;--fy:-24px;--fr:90deg;--d:.2s;--bx:-2px;--by:2px;--r:0deg}@keyframes hold{to{transform:translate(var(--bx), var(--by)) rotate(var(--r))}}@media (hover:hover) and (pointer:fine){.door-motion:hover .door-shapes i{opacity:1;transition:transform .62s var(--ease-back) var(--d), opacity .2s ease var(--d);transform:none}.door-motion:hover .door-shapes i:before{animation:hold 2.6s var(--ease-io) calc(var(--d) + .62s) infinite alternate}}.door-motion:focus-visible{background:var(--fg);color:var(--bg)}.door-motion:focus-visible .door-shapes i{opacity:1;transform:none}@media (prefers-reduced-motion:reduce){.pill-web .reel{animation:none!important}.door{transform:none!important}.door-shapes i{transition:opacity .2s!important;transform:none!important}.door-shapes i:before{animation:none!important}}.pill-motion .mp{fill:var(--accent);transition:fill .75s var(--ease-io)}.sentence{text-align:center;text-wrap:balance;margin-inline:auto}.doors{justify-content:center}@media (max-width:760px){.hero{padding-block:0}.hero>.wrap{justify-content:space-evenly}.hero-mark{color:var(--ink);align-self:center;line-height:0;display:block}.hero-mark svg{width:auto;height:72px;overflow:visible}.sentence{font-size:clamp(38px,11.2vw,64px)}.hero-body{margin:0}.doors .quiet{margin-left:0}}
.work-intro{padding-block:clamp(40px,6vw,80px) clamp(20px,2.4vw,32px)}.work-intro+.room{align-items:flex-start;min-height:0;padding-top:clamp(4px,1.2vw,16px)}.work-intro h2{margin:0;font-size:clamp(30px,3.6vw,48px);line-height:1.05}
.room{align-items:center;min-height:100svh;padding-block:clamp(80px,13vh,160px);display:flex;position:relative;overflow:clip}.room>.wrap{z-index:1;width:100%;position:relative}.room-head{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;gap:16px 48px;margin-bottom:clamp(32px,4.4vw,64px);display:grid}.room-name{container-type:inline-size}.room-title{text-wrap:balance;margin:0;font-size:min(clamp(44px,7.4vw,124px),14cqi);line-height:.95}.room-line{color:var(--fg2);max-width:40ch;margin:0}.room-link{align-items:center;gap:6px;min-height:44px;margin-top:8px;font-weight:600;text-decoration:none;display:inline-flex}.cap{max-width:min(1080px,90%);margin:0;position:relative}.room.even .cap{margin-left:auto}.cap-desk{aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:var(--radius);background:var(--card);width:100%;box-shadow:0 40px 80px -40px #00000073,0 0 0 1px #0000000f}.cap-phone{aspect-ratio:390/844;object-fit:cover;object-position:50% 0;border:3px solid var(--ink);background:var(--ink);border-radius:13.5%/6.23815%;width:clamp(96px,19%,214px);position:absolute;bottom:-7%;right:-2%;box-shadow:0 30px 60px -24px #00000080}.room.even .cap-phone{left:-2%;right:auto}@supports (corner-shape:squircle){.cap-phone{corner-shape:squircle;border-radius:22%/10.1659%}}.props{inset-block:0;inset-inline:max(-1 * var(--gutter), (100% - 100vw) / 2);pointer-events:none;position:absolute}.prop{z-index:-1;--y0:0px;--y1:0px;transition:opacity var(--room-fade) var(--ease-calm);position:absolute}.prop.front{z-index:1}.prop img,.prop video{border-radius:14px;width:100%;height:auto;display:block;box-shadow:0 28px 56px -26px #0000006b}.prop.arch img{border-radius:999px 999px 14px 14px}.prop.cutout img,.prop.cutout video{box-shadow:none;border-radius:0}.prop.cutout video{-webkit-mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000),linear-gradient(#0000,#000 8% 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000),linear-gradient(#0000,#000 8% 92%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.prop svg{width:100%;height:auto;display:block}[data-rooms] .room:not([data-on]) .prop{opacity:0}[data-rooms] .room:not([data-on]) .prop-in{animation-play-state:paused}.d1{--y0:70px;--y1:-70px}.d2{--y0:170px;--y1:-170px}.d3{--y0:260px;--y1:-260px}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.prop{animation:linear both drift;animation-timeline:view();animation-range:cover}.room-title{animation:linear both rise;animation-timeline:view();animation-range:entry 5% cover 30%}.cap-desk{animation:linear both capIn;animation-timeline:view();animation-range:entry cover 42%}.cap-phone{animation:linear both float;animation-timeline:view();animation-range:cover}}}@media (prefers-reduced-motion:no-preference){.prop:not(.ground)>.prop-in{animation:idle 4s var(--ease-io) infinite alternate}.prop:nth-child(2)>.prop-in{animation-duration:4.8s;animation-direction:alternate-reverse;animation-delay:-1.7s}.prop:nth-child(3)>.prop-in{animation-duration:3.4s;animation-delay:-2.9s}}@media (prefers-reduced-motion:reduce){.prop{transition-duration:1ms}}@keyframes drift{0%{transform:translate3d(var(--x0,0px), var(--y0), 0) rotate(var(--r0,0deg))}to{transform:translate3d(var(--x1,0px), var(--y1), 0) rotate(var(--r1,0deg))}}@keyframes idle{0%{transform:translateY(-3px)rotate(-.7deg)}to{transform:translateY(3px)rotate(.7deg)}}@keyframes rise{0%{opacity:.25;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes capIn{0%{transform:translateY(9%)scale(.93)}to{transform:none}}@keyframes float{0%{transform:translateY(26%)}to{transform:translateY(-12%)}}@media (max-width:760px){.room{min-height:0}.room-head{grid-template-columns:1fr}.cap-phone{border-width:2px;width:30%;bottom:-10%;right:3%}.room.even .cap-phone{left:3%}.room .cap{max-width:none;margin-bottom:12%}.d1{--y0:40px;--y1:-40px}.d2{--y0:90px;--y1:-90px}.d3{--y0:140px;--y1:-140px}.prop:not(.front):not(.ground){display:none}}
.services{padding-block:clamp(64px,9vw,128px)}.svc{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) 7.5rem;align-items:center;gap:8px 40px;padding-block:clamp(20px,2.6vw,32px);text-decoration:none;display:grid}.svc:last-of-type{border-bottom:1px solid var(--line)}.svc-name{align-items:baseline;gap:14px;margin:0;font-size:clamp(32px,4.6vw,68px);line-height:1;display:inline-flex}.svc-name .ic{opacity:0;transition:transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease;font-size:.5em;transform:translate(-6px)}@media (hover:hover) and (pointer:fine){.svc:hover .svc-name .ic{opacity:1;transform:none}}.svc-name .tag{background:var(--accent);color:var(--ink);font-family:var(--text);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;align-self:flex-start;margin:.5em 0 0 -4px;padding:4px 10px 3px;font-size:12.5px;font-weight:600;line-height:1.2}.svc p{color:var(--fg2);max-width:44ch;margin:0}.svc-price{font-variant-numeric:tabular-nums;white-space:nowrap;justify-self:end;font-weight:600}@media (max-width:760px){.svc{grid-template-columns:1fr}.svc-price{justify-self:start}}.proof{margin-top:clamp(36px,5vw,64px)}.proof h3{letter-spacing:-.01em;text-wrap:balance;margin:0 0 clamp(12px,1.6vw,20px);font-size:clamp(20px,1.9vw,26px);line-height:1.2}.logos{grid-template-columns:repeat(8,minmax(0,1fr));gap:0 12px;margin:0 -2%;padding:0;list-style:none;display:grid}.logos li{aspect-ratio:1;place-items:center;display:grid}.logos img{opacity:.72;width:70%}@media (max-width:760px){.logos{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 -4%}.logos img{width:76%}}
