/* Only home and the project catalog use white; inner pages retain brand gray. */
:root{--page-bg:#F0F0F0;--page-rgb:240,240,240}
html[data-page-surface=white]{--page-bg:#FFFFFF;--page-rgb:255,255,255}
html,body{background:var(--page-bg)}
/* Shared motion rhythm: controls, content, hand-drawn artwork, and gallery. */
:root{--motion-ui:280ms;--motion-content:450ms;--motion-art:700ms;--motion-gallery:520ms;--motion-ease:cubic-bezier(.22,1,.36,1);--menu-duration:160ms;--menu-stagger:0ms;--menu-stroke-delay:0ms;--menu-footer-delay:0ms;--menu-hide-delay:160ms;--menuT:translateY(12px)}
:root.menu-open{--menu-duration:280ms;--menu-stagger:40ms;--menu-stroke-delay:100ms;--menu-footer-delay:120ms;--menu-hide-delay:0ms}
[hidden]{display:none!important}
/* The reference uses Inter's fixed optical size (14), including large text. */
html{font-optical-sizing:none}
/* Clip horizontal artwork without creating a body scroll container that breaks sticky headers. */
html,body{overflow-x:clip}
button,a,input,select{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid #3a3a3a;outline-offset:5px}
.skip-link{position:fixed;z-index:200;top:8px;left:8px;padding:12px 20px;background:#fff;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.only-compact,.filter-compact{display:none!important}
.header-utilities,.compact-header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.header-utilities{margin-left:auto}
a[href^="mailto:"]{min-width:0;max-width:100%;overflow-wrap:anywhere}
.contact-email-pill>span{display:block;min-width:0;max-width:100%;padding:0 14px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-email-menu{height:auto!important;min-height:37px;box-sizing:border-box;padding-block:8px!important}
.language-switch{display:flex;align-items:center;gap:0;flex:0 0 auto}
.language-switch a{position:relative;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 4px;box-sizing:border-box;font:400 12px/1 Inter,Arial,sans-serif;color:#3a3a3a;transition:color 300ms ease}
.language-switch a::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:5px;background:#f100b9;-webkit-mask:url(../images/brand/tilda-underline-short.svg) center/100% 100% no-repeat;mask:url(../images/brand/tilda-underline-short.svg) center/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 500ms cubic-bezier(.6,0,.2,1)}
.language-switch a[aria-current=page]{font-weight:700}
.language-switch a:is([aria-current=page],:hover,:focus-visible)::after{clip-path:inset(0)}
.language-switch a:is(:hover,:focus-visible){color:#f100b9}
.compact-header{gap:8px!important;padding-inline:12px!important}
.compact-header>a{flex:0 0 44px;min-height:44px;display:flex;align-items:center}
.compact-header>a img{width:26px!important}
.compact-page-name{flex:1 1 auto;min-width:0;font-size:clamp(16px,4.5vw,22px)!important;text-align:center;white-space:normal!important}
.compact-header-actions{gap:6px}
.compact-header-actions .language-switch a{min-width:44px}
.compact-header-actions [data-action=toggleMenu]{height:44px!important;padding-inline:10px!important;gap:7px!important;flex:0 0 auto}
.handwritten-heading{font-family:KOM-POST,Inter,sans-serif;font-weight:400!important}
.hero-subtitle{top:60%!important;font-size:clamp(32px,6.3333vw,76px)!important}
.project-works{margin-top:clamp(28px,4vw,48px)!important;transform:rotate(-3deg)!important;max-width:67%;font-size:clamp(24px,4.5vw,54px)!important}
.project-works span{white-space:normal!important;overflow-wrap:anywhere}
.project-award-row{flex:0 0 100%;display:flex;justify-content:flex-end;min-width:0}
.project-award{display:flex;align-items:flex-start;gap:12px;width:min(420px,100%);padding:16px;border:1px solid var(--award-accent);border-radius:8px;background:rgba(58,58,58,.035);text-align:left}
.project-award-icon{flex:0 0 24px;width:24px;height:24px;color:var(--award-accent)}
.project-award-copy{min-width:0}
.project-award-label{display:block;margin-bottom:5px;font-size:12px;line-height:1.3;color:#5e5e5e}
.project-award p{margin:0;font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.project-card{min-width:0;max-width:100%}
.project-card:is(:hover,:focus-within) .project-card-photo{transform:scale(1.08) translate(var(--card-x,0px),var(--card-y,0px))!important;transition:transform var(--motion-content) var(--motion-ease),filter var(--motion-content) ease!important}
.project-card:hover .project-card-overlay,.project-card:focus-within .project-card-overlay{opacity:1!important}
.project-card:hover .project-key-outline path,.project-card:focus-within .project-key-outline path{stroke-width:2.2px!important}
.project-card:is(:hover,:focus-within) .project-card-underline{clip-path:inset(0)!important}
.project-card:is(:hover,:focus-within) .project-card-arrow{transform:translateX(4px)!important}
.only-desktop header nav a:is(:hover,:focus-visible)>span,.filter-wide button:is(:hover,:focus-visible)>span[aria-hidden]{clip-path:inset(0)!important}
.filter-wide button:is(:hover,:focus-visible){color:#3a3a3a!important}
.design-state-5:is(:hover,:focus-visible)>span{transform:translateX(4px)!important}
.design-state-7:is(:hover,:focus-visible)>span{transform:translateX(-4px)!important}
.project-neighbor:is(:hover,:focus-visible) img{transform:scale(1.06)!important}
.project-neighbor:is(:hover,:focus-visible) .project-neighbor-arrow{transform:translateX(var(--neighbor-shift))!important}
.projects-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:44px!important}
.project-row-stroke{display:none;position:relative;grid-column:1/-1;justify-self:start;width:min(70%,760px);height:clamp(12px,1.6vw,20px);margin:4px 0}
.project-row-stroke.stroke-right{justify-self:end}
.project-row-stroke::before{content:"";position:absolute;inset:0;background:var(--stroke-color,#f100b9);-webkit-mask:url(../images/brand/stroke-blue.svg) center/100% 100% no-repeat;mask:url(../images/brand/stroke-blue.svg) center/100% 100% no-repeat;clip-path:inset(-20% -5% -20% -5%);transition:clip-path var(--motion-art) cubic-bezier(.6,0,.2,1)}
.project-row-stroke.reveal-ready:not(.revealed)::before{clip-path:inset(-20% 100% -20% -5%);transition:none}
.project-row-stroke.stroke-right.reveal-ready:not(.revealed)::before{clip-path:inset(-20% -5% -20% 100%)}
.projects-grid:not(.js-filtered)>article:nth-of-type(3n)+.project-row-stroke:not(:last-child){display:block}
.projects-grid.js-filtered>.project-row-stroke{display:none}
.projects-grid.js-filtered>.project-row-stroke.stroke-visible{display:block}
/* Home reuses the catalog strokes only in the phone's single-column layout. */
@media(max-width:639px){.featured-projects-grid{row-gap:44px!important}.featured-projects-grid>.project-row-stroke{display:block}}
@media(min-width:640px) and (max-width:939px){.featured-projects-grid>.project-card:last-child:nth-of-type(odd){grid-column:1/-1}}
[data-has-gallery=false] [data-requires-gallery]{display:none!important}
/* Match the reference's compact dot row; the adjacent arrows retain 44px touch targets. */
[data-action="d.onClick"]{flex:0 0 auto;min-width:24px;justify-content:center}
.project-gallery-controls{gap:clamp(8px,4vw,16px)!important}
/* Keep the reference's single dot row on narrow phones; arrows remain 44px. */
@media(max-width:389px){[data-action="d.onClick"]{min-width:16px}}
.project-gallery{touch-action:pan-y pinch-zoom}
.project-neighbor-title{max-width:100%;min-width:0}
.project-neighbor-name{min-width:0;overflow-wrap:anywhere}
.project-neighbor-arrow{flex-shrink:0}
.filter-compact [data-work]{height:auto!important;min-height:44px;padding-top:10px!important;padding-bottom:10px!important}
[data-requires-gallery] [data-action="sl.onClick"]{cursor:zoom-in!important}
.page-about [role=tabpanel]{min-width:0}
.page-about [role=tab][aria-selected=true]{opacity:1!important}
html.menu-open{overflow:hidden}
/* Prepare entry states before observing; only the reveal restores transitions. */
.page.entering,.page.entering [style*="transition:"],.reveal-ready:not(.revealed),.reveal-ready:not(.revealed) [style*="transition:"]{transition:none!important}
.page.entering{--mainOp:1;--gridOp:.35;--gridT:scale(1.01);--heroClip:inset(-30% 100% -30% -10%);--titleOp:.35;--titleT:translateY(12px);--titleBlur:none;--filtT:translateY(8px)}
[data-rv=we].reveal-ready:not(.revealed){--weOp:.35;--qMarkT:translateY(8px) scale(.94);--qUl:inset(0 100% 0 0);--weT:translateX(-12px);--weT2:translateY(12px);--weClip:inset(-20% 100% -20% -10%);--keyT:rotate(-8deg)}
[data-rv=dirs].reveal-ready:not(.revealed){--rvDirs:.35;--rtDirs:translateY(12px)}
[data-rv=stroke].reveal-ready:not(.revealed){--strokeClip:inset(-20% 100% -20% -5%)}
[data-rv=contacts].reveal-ready:not(.revealed){--rvContacts:.35;--rtContacts:translateY(12px);--ctClip:inset(0 100% 0 0)}
[data-rv=map].reveal-ready:not(.revealed){--rvMap:.35}
[data-rv=pj-specs].reveal-ready:not(.revealed){--spec-opacity:.35;--spec-transform:translateY(8px);--spec-clip:inset(0 100% 0 0)}
[data-rv=pj-stroke].reveal-ready:not(.revealed){--pjStrokeClip:inset(-20% 100% -20% -5%)}
.project-card.reveal-ready:not(.revealed) .project-card-photo{transform:scale(1.08)!important;filter:saturate(.8)!important}
.project-card.reveal-ready:not(.revealed) .project-key-outline path{stroke-dashoffset:1!important}
.project-card.reveal-ready:not(.revealed) h2,.project-card.reveal-ready:not(.revealed) .project-card-works{opacity:.35!important}
.project-card.reveal-ready:not(.revealed) h2{transform:translateY(8px)!important}
html:has(#photo-dialog[open]){overflow:hidden}
#photo-dialog{border:0;margin:0;inset:0;padding:64px 54px 50px;background:#1b1b1b;color:#fff;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;box-sizing:border-box;overflow:hidden;overscroll-behavior:contain}
#photo-dialog::backdrop{background:rgba(0,0,0,.92)}
#photo-dialog[open]{display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr);place-items:center}
#photo-dialog img{max-width:100%;max-height:100%;object-fit:contain}
#photo-dialog button{position:absolute;width:44px;height:44px;border:1px solid #ddd;border-radius:50%;background:#333;color:white;font-size:24px;cursor:pointer}
#photo-dialog button:focus-visible{outline:3px solid #fff;outline-offset:3px}
#photo-dialog [data-action=closePhoto]{top:12px;right:16px}
#photo-dialog [data-action=previousPhoto]{left:6px;top:50%}
#photo-dialog [data-action=nextPhoto]{right:6px;top:50%}
#photo-dialog p{position:absolute;bottom:10px;font:14px/1.4 Inter,Arial,sans-serif}
@media(max-width:899px),(max-height:500px) and (pointer:coarse){
  #photo-dialog{padding:calc(60px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) calc(68px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  #photo-dialog [data-action=closePhoto]{top:calc(8px + env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
  #photo-dialog [data-action=previousPhoto],#photo-dialog [data-action=nextPhoto]{top:auto;bottom:calc(12px + env(safe-area-inset-bottom))}
  #photo-dialog [data-action=previousPhoto]{left:calc(50% - 94px)}
  #photo-dialog [data-action=nextPhoto]{right:calc(50% - 94px)}
  #photo-dialog p{bottom:calc(12px + env(safe-area-inset-bottom));height:44px;line-height:44px;margin:0}
}
@media(max-width:1139px){.filter-wide{display:none!important}.filter-compact{display:flex!important}}
@media(min-width:640px) and (max-width:939px){:root{--gridCols:repeat(2,minmax(0,1fr))}}
@media(width:900px){:root{--collageCols:repeat(2,minmax(0,1fr));--collageRows:repeat(3,clamp(180px,35vh,320px));--c1Col:1 / span 2;--c2Col:1;--c2Row:3;--c3Col:2;--c3Row:3}}
@media(max-width:939px){.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.projects-grid:not(.js-filtered)>article:nth-of-type(3n)+.project-row-stroke{display:none}.projects-grid:not(.js-filtered)>article:nth-of-type(2n)+.project-row-stroke:not(:last-child){display:block}.projects-grid.js-filtered>.project-row-stroke{display:none}.projects-grid.js-filtered>.project-row-stroke.stroke-visible{display:block}}
@media(max-width:899px){.only-desktop{display:none!important}.only-compact{display:block!important}section.only-compact{display:flex!important}}
@media(max-width:383px){.project-neighbor-title{font-size:clamp(20px,6.25vw,24px)!important}}
@media(max-width:359px){.compact-header{gap:4px!important;padding-inline:10px!important}.compact-page-name{font-size:14px!important}}
@media(max-width:639px){.projects-grid{grid-template-columns:minmax(0,1fr)!important}.projects-grid:not(.js-filtered)>.project-row-stroke:not(:last-child){display:block}.projects-grid.js-filtered>.project-row-stroke{display:none}.projects-grid.js-filtered>.project-row-stroke.stroke-visible{display:block}.hero-subtitle{max-width:58%;white-space:normal!important}.project-works{margin-left:6%!important;max-width:90%}.hero-about .hero-subtitle,.hero-projects .hero-subtitle,.hero-contacts .hero-subtitle{left:45%!important;transform:translateX(-10%) rotate(-3deg)!important;font-size:clamp(32px,8vw,48px)!important}.project-award-row{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.page [data-rv].reveal-ready:not(.revealed){opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.project-card .project-card-underline{clip-path:inset(0)!important}.project-card:is(:hover,:focus-within) .project-card-photo{transform:scale(1.03)!important}}

/* A photo's frame exists before its bytes arrive; no layout change on decode. */
.media-frame{position:relative}
.media-frame[data-media-state=loading],.media-frame[data-media-state=error]{background-color:#e3e3e1!important}
.media-frame::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:52px;pointer-events:none;background:url(../images/brand/logo-mark.svg) center/32px auto no-repeat;transform:translate(-50%,-50%);opacity:0;transition:opacity 400ms ease}
.media-frame[data-media-state=loading]::before{opacity:.28;animation:media-mark-breathe 2400ms cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}
.media-frame[data-media-state=loading][data-media-visible=true]::before{animation-play-state:running}
:root[data-media-motion=paused] .media-frame::before{animation-play-state:paused}
.media-frame[data-media-state=error]::before{opacity:.1;top:calc(50% - 22px)}
/* Separate adjacent loading frames without changing the finished collage or its geometry. */
.media-frame::after{content:"";position:absolute;inset:0;box-sizing:border-box;border:1px solid #f0f0f0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 400ms ease}
.media-frame:is([data-media-state=loading],[data-media-state=error])::after{opacity:1}
#photo-dialog::after{content:none}
[data-media-image][data-media-state=loading],[data-media-image][data-media-state=error]{opacity:0!important}
[data-media-image].media-arriving{animation:media-arrive var(--motion-content) ease both}
.media-error{position:absolute;inset:50% 12px auto;display:block;text-align:center;font:400 12px/1.4 Inter,Arial,sans-serif;color:#5e5e5e;pointer-events:none}
#photo-dialog.media-frame{position:fixed}
#photo-dialog img{width:100%;height:100%;min-height:0}
#photo-dialog[data-media-state=loading],#photo-dialog[data-media-state=error]{background-color:#1b1b1b!important}
#photo-dialog .media-error{color:#ddd}
#photo-dialog.media-frame::before{filter:invert(1)}
@keyframes media-arrive{from{opacity:0}to{opacity:1}}
/* Each decoded collage photo enters in its own viewport; its frame never moves. */
/* Keep the same neutral surface through decoding and the entire photo fade. */
[data-collage-frame].media-frame{background-color:#e3e3e1!important}
.media-frame[data-media-reveal=pending]::before{opacity:.28}
.media-frame[data-media-reveal=pending]::after{opacity:1}
[data-media-reveal=pending]>[data-media-image]{opacity:0!important}
[data-media-image].collage-arriving{animation:collage-arrive var(--motion-content) var(--motion-ease) both}
:root[data-media-motion=paused] .collage-arriving{animation-play-state:paused}
@keyframes collage-arrive{from{opacity:0}to{opacity:1}}
@keyframes media-mark-breathe{0%,100%{transform:translate(-50%,calc(-50% + 2px)) rotate(-3deg) scale(.96)}50%{transform:translate(-50%,calc(-50% - 2px)) rotate(3deg) scale(1.035)}}
@media(prefers-reduced-motion:reduce){[data-media-image].media-arriving,[data-media-image].collage-arriving,.media-frame::before{animation:none}}

/* The award shares the facts grid; it no longer creates a detached full-width row. */
.project-specs.has-award{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:28px 32px!important}
.project-specs.has-award>div{min-width:0!important;max-width:none!important;width:100%}
.project-specs.has-award>div:not(.project-award-row){padding-inline:12px;box-sizing:border-box}
.project-specs.has-award>div:not(.project-award-row)>span:last-child{max-width:280px;width:100%;align-self:center!important}
.project-specs.has-award[data-spec-count="4"] .project-award-row{grid-column:span 2}
.project-specs.has-award .project-award{width:100%;box-sizing:border-box}
@media(max-width:899px){.project-specs.has-award{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px!important}}
/* Every phone project uses paired facts, with underlines aligned at the row's bottom. */
@media(max-width:639px){
  .project-specs,.project-specs.has-award{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px!important}
  .project-specs>div{min-width:0!important;max-width:none!important;width:100%;box-sizing:border-box}
  .project-specs>div:not(.project-award-row){align-self:end}
  .project-specs.has-award>div:not(.project-award-row){padding-inline:0}
  .project-specs>div:not(.project-award-row)>span:nth-child(2){max-width:100%;overflow-wrap:anywhere}
  .project-specs>div:not(.project-award-row)>span:last-child{width:100%;max-width:280px;align-self:center!important}
  /* An unpaired last fact is centered; an award always follows on its own row. */
  .project-specs>div:not(.project-award-row):last-child:nth-child(odd),.project-specs.has-award>div:nth-last-child(2):nth-child(odd),.project-specs.has-award .project-award-row{grid-column:1/-1}
}

/* Shared signature: keep the artwork fixed while the original ink is revealed. */
.intro-signature{position:relative;width:min(220px,100%);height:110px}
.intro-signature-we{position:absolute;top:18px;left:0;width:min(197px,100%);height:auto;opacity:1}
.intro-signature-enter{position:absolute;top:55px;left:clamp(20px,20%,49px);width:min(174px,80%);height:auto}
/* One shared studio-intro timeline: the quotation stays together; the key rings once at the end. */
[data-intro-scene]{--scene-key-delay:1000ms}
.signature-pen{stroke-dasharray:1;stroke-dashoffset:0}
.scene-ready .signature-ink{mask:url(#home-signature-mask)}
.scene-ready .signature-pen{stroke-dashoffset:1}
.scene-ready .intro-signature-we,.scene-ready .intro-quote,.scene-ready .intro-key{opacity:0}
.scene-ready .intro-quote-underline{clip-path:inset(0 100% 0 0)}
.scene-playing .intro-signature-we,.scene-playing .intro-quote{animation:home-scene-appear var(--motion-content) ease-out both}
.scene-playing .signature-pen{animation:signature-write var(--pen-duration) linear var(--pen-delay) both}
.scene-playing .intro-quote-mark{animation:intro-quote-mark 650ms ease-in-out both}
.scene-playing .intro-quote-underline{animation:intro-quote-line 520ms var(--motion-ease) 140ms both}
.scene-playing .intro-key{animation:home-scene-appear var(--motion-content) ease-out both,home-key-ring 1000ms ease-in-out var(--scene-key-delay) both}
.scene-paused .intro-signature-we,.scene-paused .signature-pen,.scene-paused .intro-quote,.scene-paused .intro-quote-mark,.scene-paused .intro-quote-underline,.scene-paused .intro-key{animation-play-state:paused}
@keyframes home-scene-appear{from{opacity:0}to{opacity:1}}
@keyframes signature-write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes intro-quote-mark{from{transform:rotate(-12deg) scale(.8)}60%{transform:rotate(2deg) scale(1.035)}to{transform:rotate(0) scale(1)}}
@keyframes intro-quote-line{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes home-key-ring{0%,100%{transform:rotate(0)}16%{transform:rotate(-7deg)}36%{transform:rotate(5deg)}55%{transform:rotate(-3deg)}72%{transform:rotate(1.5deg)}86%{transform:rotate(-.5deg)}}
@media(prefers-reduced-motion:reduce){.scene-ready .intro-signature-we,.scene-ready .intro-quote,.scene-ready .intro-key{opacity:1}.scene-ready .signature-ink{mask:none}.scene-ready .intro-quote-underline{clip-path:none}.intro-key,.intro-quote-mark{transform:none}}

.studio-intro{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:220px minmax(0,1fr) 62px;gap:24px clamp(20px,4vw,60px);align-items:start;padding:var(--wePad)}
.intro-quote{min-width:0;margin:0;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px);overflow-wrap:anywhere}
.intro-quote-mark{width:max-content;display:flex;align-items:center;height:clamp(34px,3.6vw,46px);font-family:'KOM-POST','Inter',Arial,sans-serif;color:#F100B9;font-size:clamp(80px,8.5vw,118px);line-height:1;transform-origin:22px 50%}
.intro-quote-copy{margin:0;font-size:clamp(19px,2.1vw,26px);font-weight:300;line-height:1.45;text-wrap:pretty}
.intro-quote-principles{margin:0;font-family:'KOM-POST';color:#3A3A3A;font-size:clamp(25px,3vw,38px);line-height:1.3;text-wrap:balance}
.intro-principle-unit{white-space:nowrap}
.intro-principle-word{position:relative;display:inline-block;max-width:calc(100% - .35em);white-space:normal}
.intro-quote-underline{position:absolute;left:-3px;right:-3px;bottom:.06em;height:.19em;background:var(--principle-color);-webkit-mask:url('/assets/enter-2026/images/brand/tilda-underline-short.svg') center/100% 100% no-repeat;mask:url('/assets/enter-2026/images/brand/tilda-underline-short.svg') center/100% 100% no-repeat}
.intro-key-frame{display:block;box-sizing:border-box;width:82px;padding:10px;margin:8px -10px 0;line-height:0}
.intro-key{display:block;width:62px;height:auto;pointer-events:none;transform-origin:50% 10%}
@media(max-width:899px){.studio-intro{grid-template-columns:minmax(0,1fr) 62px}.intro-quote{grid-column:1 / -1;grid-row:2}.intro-key-frame{grid-column:2;grid-row:1}}
@media(max-width:639px){svg[data-grid-layout="hero"]{--grid-end-scale:1.6}}