/* Preview only: viewport-based art direction, continuous backdrop. */
:root{--stage-gutter:clamp(18px,2vw,96px);--preview-radius:clamp(8px,.55vw,20px)}
body{background:#000}
#ambient-preview{position:fixed;inset:-10%;width:120%;height:120%;filter:blur(clamp(70px,8vw,240px)) brightness(.38) saturate(.9);pointer-events:none;z-index:0}
main,footer{position:relative;z-index:1}
#work{background:transparent}
.case{isolation:auto;overflow:visible;background:transparent;display:block;height:130svh;min-height:0;padding:12svh var(--stage-gutter) 10svh}
.case:after,.case>.case-bg{display:none}
.case .case-open{--cover-max-height:76svh;position:sticky;top:12svh;width:min(75vw,calc(76svh * var(--shot-ratio,1.77778)))!important;max-width:none!important;margin:0 auto;border-radius:var(--preview-radius);clip-path:inset(0 round var(--preview-radius));overflow:hidden;aspect-ratio:var(--shot-ratio,1.77778)}
.case.portrait .case-open{width:min(75vw,calc(76svh * var(--shot-ratio,.7)))!important}
.case .case-open>img,.case .case-open>video{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:inherit}
.case-info{left:var(--stage-gutter);right:var(--stage-gutter);bottom:3svh;font-size:clamp(14px,1vw,32px)}
.cursor{width:clamp(8px,.5vw,18px);height:clamp(8px,.5vw,18px)}
.cursor-label{font-size:clamp(14px,1vw,32px);padding:.55em .85em;border-radius:.32em;max-width:calc(100vw - 40px)}
@media(min-width:1600px){.hero-copy{left:12.5%;right:12.5%}.hero-copy h1{font-size:clamp(44px,2.6vw,100px)}.site-header{padding:clamp(24px,1.6vw,64px)}.site-header .header-logo img{width:clamp(60px,2.1vw,80px);height:auto}.site-header .header-contact{font-size:clamp(18px,1vw,32px)}}
@media(max-width:700px){.case{height:auto;min-height:85svh;padding:12svh 18px 14svh;display:flex;align-items:center}.case .case-open{position:relative;top:auto;width:min(100%,calc(64svh * var(--shot-ratio,1.77778)))!important}.case-info{bottom:5svh;font-size:12px}.cursor,.cursor-label{display:none}}
@media(prefers-reduced-motion:reduce){.case{height:auto;min-height:100svh}.case .case-open{position:relative;top:auto}}
.hero{mask-image:linear-gradient(to bottom,#000 0%,#000 88%,transparent 100%)}
/* Screen-height case composition on desktop. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 html{scroll-padding:0}

 .case{height:100svh;min-height:100svh;padding:0 var(--stage-gutter);display:flex;align-items:center;justify-content:center}
 .case .case-open{position:relative;top:auto;flex-shrink:0}
}
.cursor{width:8px;height:8px}
.cursor-label{font-size:clamp(14px,.78vw,20px);padding:.5em .8em}

/* Persistent desktop header. */
@media(min-width:701px){

 .site-header .header-logo,.site-header .header-contact,
 .site-header.nav-hidden .header-logo,.site-header.nav-hidden .header-contact{opacity:1;translate:0;visibility:visible;pointer-events:auto}
 .site-header .header-contact{font-size:clamp(16px,.78vw,20px);line-height:1.25;padding:.8em 1.7em;min-height:0;border-radius:1.1em}
 .site-header .header-contact .talk-window{height:auto;line-height:1.25}
}

/* Opaque, diffuse colour field; captions follow the artwork width. */
#ambient-preview{filter:blur(clamp(90px,10vw,280px)) brightness(.78) saturate(.72)}
@media(min-width:701px){
 .case-info{left:50%;right:auto;width:min(75vw,calc(76svh * var(--caption-ratio,1.77778)));transform:translateX(-50%);bottom:auto;top:calc(50% + min(75vw / var(--caption-ratio,1.77778),76svh) / 2 + clamp(18px,2svh,40px));font-size:clamp(14px,.78vw,20px)}
}

/* Hero hierarchy is independent of artwork scaling. */
.hero{mask-image:none}
@media(min-width:701px){
 .hero-copy{left:12.5%;right:12.5%;bottom:clamp(108px,9svh,180px);max-width:1800px}
 .hero-copy h1{font-size:clamp(28px,2vw,56px);line-height:1.22}
 .hero .scroll{left:var(--stage-gutter);bottom:clamp(24px,3svh,60px);font-size:clamp(16px,.85vw,24px);padding:12px 18px;background:#0006;border:1px solid #ffffff30;border-radius:12px;backdrop-filter:blur(16px)}
 #pause{right:var(--stage-gutter);bottom:clamp(24px,3svh,60px);width:clamp(48px,3vw,72px);height:clamp(48px,3vw,72px);background:#0006;border:1px solid #ffffff30;border-radius:12px;backdrop-filter:blur(16px)}
 #pause::before,#pause:not([data-paused="true"])::before{height:20px;width:12px;border-left-width:4px;border-right-width:4px}
 #pause[data-paused="true"]::before{height:0;width:0;border-right:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:15px solid currentColor}
}
.reel-open::after{content:'▶  Showreel';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font:400 clamp(16px,1vw,26px)/1.25 Mona,Arial,sans-serif;white-space:nowrap;padding:.85em 1.5em;border:1px solid #ffffff50;border-radius:1em;background:#0007;color:#fff;backdrop-filter:blur(20px);transition:background .2s,color .2s}
.reel-open:hover::after,.reel-open:focus-visible::after{background:#fff;color:#000}
@media(max-width:700px){.reel-open::after{top:36%;font-size:16px}}
@media(min-width:701px) and (max-height:650px){.hero-copy h1{font-size:clamp(24px,2vw,34px)}.hero-copy{bottom:100px}.reel-open::after{top:35%}}
/* Keep the reel clickable without a central badge. */
.reel-open::after{content:none}
@media(min-width:701px){.hero-copy{left:50%;right:var(--stage-gutter);max-width:none}}
/* Shared control geometry, independent from media geometry. */
:root{--preview-control-radius:12px;--preview-radius:8px}
.site-header .header-logo img{width:68.8px;height:auto}
@media(min-width:1600px){.site-header .header-logo img{width:clamp(69px,2.415vw,92px)}}
.site-header .header-contact,.hero .scroll,#pause,.idea-input-row button,#contact-dialog #email-draft{border-radius:var(--preview-control-radius)}
.site-header .header-contact,.idea-input-row button,#contact-dialog #email-draft{padding:.8em 1.7em;line-height:1.25}
.hero .scroll{padding:12px 26px}
.idea-input-row{border-radius:calc(var(--preview-control-radius) + 12px)}
@media(max-width:700px){.site-header .header-logo img{width:55.2px}.hero .scroll{padding:10px 22px}}

/* Round the artwork bounds, not the letterboxing around differently shaped shots. */
.case .case-open>img,.case .case-open>video{width:auto;height:auto;max-width:100%;max-height:76svh;border-radius:var(--case-media-radius);clip-path:inset(0 round var(--case-media-radius))}
@media(max-width:700px){.case .case-open>img,.case .case-open>video{max-height:64svh}}

.case .case-frame{width:min(75vw,calc(76svh * var(--caption-ratio,1.77778)));max-width:100%;flex-shrink:0}
.case .case-frame .case-open{width:100%!important;position:relative;top:auto}
.case .case-frame .case-info{position:static;inset:auto;transform:none;width:100%;font-size:clamp(14px,.78vw,20px)}
@media(max-width:700px){.case .case-frame{width:min(100%,calc(64svh * var(--caption-ratio,1.77778)))}.case .case-frame .case-info{font-size:12px}}

/* Uniform 16:9 landscape stage, regardless of each source shot's proportions. */
.case:not(.portrait) .case-frame{width:min(75vw,calc(76svh * 16 / 9))}
.case:not(.portrait) .case-frame .case-open{aspect-ratio:16/9!important;width:100%!important;max-width:none!important}
.case:not(.portrait) .case-frame .case-open>img,.case:not(.portrait) .case-frame .case-open>video{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:700px){.case:not(.portrait) .case-frame{width:min(100%,calc(64svh * 16 / 9))}}

#ambient-grain{display:none}
.case::before{display:none}

/* Shared responsive artboards: landscape 16:9, portrait matches Blush (45:64). */
.case{--stage-height:78svh;--stage-width:88vw}
.case:not(.portrait) .case-frame{width:min(var(--stage-width),calc(var(--stage-height) * 16 / 9))}
.case.portrait .case-frame{width:min(var(--stage-width),calc(var(--stage-height) * 45 / 64))}
.case .case-frame .case-open{width:100%!important;max-width:none!important;max-height:none;flex:none}
.case.portrait .case-frame .case-open{aspect-ratio:45/64!important}
.case .case-frame .case-open>img,.case .case-frame .case-open>video{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.case.portrait .case-frame .case-open>img,.case.portrait .case-frame .case-open>video{object-fit:cover}
@media(max-width:700px){.case{--stage-height:64svh;--stage-width:100%}}

/* Media must fill the stage box, not retain intrinsic pixel dimensions. */
.case{--stage-width:92vw;--stage-height:82svh}
.case .case-frame .case-open{position:relative;overflow:hidden}
.case .case-frame .case-open>img,.case .case-frame .case-open>video{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain}
.case.portrait .case-frame .case-open>img,.case.portrait .case-frame .case-open>video{object-fit:cover}
@media(max-width:700px){.case{--stage-width:100%;--stage-height:76svh}}

/* Hero typography and controls share explicit breakpoint rules. */
.hero-copy{bottom:clamp(116px,12svh,220px)}
.hero-copy h1{white-space:pre-line;font-size:clamp(34px,2.5vw,64px);line-height:1.16;letter-spacing:-.025em}
.hero .scroll,#pause{bottom:24px;min-height:56px;background:#0006;border:1px solid #ffffff30;border-radius:12px;backdrop-filter:blur(16px)}
.hero .scroll{display:flex;align-items:center;padding:16px 28px;font-size:16px;line-height:22px;left:24px}
#pause{width:56px;height:56px;right:24px;padding:16px}
@media(min-width:2400px){.hero .scroll{font-size:22px;padding:18px 32px;min-height:64px}#pause{width:64px;height:64px}}
@media(min-width:701px) and (max-width:1100px){.hero-copy{left:8%;right:24px}.hero-copy h1{font-size:36px}}
@media(max-width:700px){.hero-copy{left:18px;right:18px;bottom:112px}.hero-copy h1{font-size:clamp(27px,6.7vw,38px);line-height:1.18}.hero .scroll,#pause{bottom:20px;min-height:52px}.hero .scroll{left:18px;padding:14px 24px;font-size:16px}#pause{right:18px;width:52px;height:52px;padding:14px}}
@media(max-height:500px){.hero-copy{bottom:96px}.hero-copy h1{font-size:26px}.hero .scroll,#pause{bottom:16px}}

/* Desktop hero copy and controls share a common bottom baseline. */
@media(min-width:1101px){
 .hero-copy{bottom:24px;right:calc(24px + 64px + 28px)}
}

/* Optical baseline follows the button label, above the button's lower edge. */
@media(min-width:1101px){.hero-copy{bottom:44px}.hero-copy h1{font-size:clamp(34px,2.2vw,64px)}}
@media(min-width:2400px){.hero-copy{bottom:48px}.hero-copy h1{font-size:clamp(48px,1.65vw,64px)}}

/* T2 is art-directed as one edge-to-edge 16:9 sequence. */
.case[data-project="t2-cg-style"] .case-open>img,.case[data-project="t2-cg-style"] .case-open>video{object-fit:cover!important;border-radius:inherit;clip-path:none}
.case[data-project="t2-cg-style"] .case-open{border-radius:8px;clip-path:inset(0 round 8px);overflow:hidden}

/* Editorial interlude and services: natural scroll, restrained typography. */

.studio-story{position:relative;z-index:2;background:#000;padding:clamp(90px,18svh,240px) max(24px,8vw);isolation:isolate;}
.story-copy{max-width:1600px;margin:auto;font:400 clamp(36px,4.1vw,116px)/1.25 MonaWide,Mona,Arial,sans-serif;letter-spacing:-.035em}
.story-sentence{color:rgb(255 255 255 / var(--story-light,1))}
.case .case-info{opacity:0;transition:opacity .35s ease}
.case.caption-visible .case-info{opacity:1}
.studio-services{position:relative;z-index:2;background:#000;color:#fff;padding:clamp(88px,14svh,220px) max(24px,5vw);isolation:isolate}
.services-inner{max-width:2200px;margin:auto}
.studio-services h2{font:400 clamp(14px,1vw,22px)/1.4 Mona,Arial,sans-serif;margin:0 0 clamp(36px,6svh,96px);color:#aaa}
.service-row{display:grid;grid-template-columns:40px minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,3vw,80px);align-items:baseline;padding:clamp(28px,4.5svh,72px) 0;border-top:1px solid #ffffff35}
.service-row:last-child{border-bottom:1px solid #ffffff35}
.service-number{font:400 clamp(12px,.8vw,18px)/1.4 Mona,Arial,sans-serif;color:#888}
.service-row h3{font:400 clamp(30px,3.4vw,88px)/1.12 MonaWide,Mona,Arial,sans-serif;letter-spacing:-.035em;margin:0}
.service-row p{font:400 clamp(17px,1.35vw,30px)/1.45 Mona,Arial,sans-serif;max-width:30ch;color:#aaa;margin:0}
@media(max-width:700px){
 .studio-story{padding:90px 24px}.story-copy{font-size:clamp(28px,7.5vw,48px);line-height:1.3}
 .studio-services{padding:80px 24px 100px}
 .service-row{grid-template-columns:24px minmax(0,1fr);gap:12px 16px;padding:28px 0;align-items:start}
 .service-number{padding-top:7px}.service-row h3{font-size:clamp(29px,7.5vw,46px)}
 .service-row p{grid-column:2;font-size:17px;max-width:30ch}
}
@media(prefers-reduced-motion:reduce){.story-sentence{color:#fff}.case .case-info{transition:none}}

/* Oversized service typography with a floating, square moving image. */
.case[data-project="backstage"]{display:none!important}
.story-keyword{font-style:normal;cursor:default}.story-keyword:hover{font-style:italic}
.studio-services{overflow:clip;padding-block:clamp(100px,18svh,280px)}
.services-inner{max-width:2400px}
.services-list{display:flex;flex-direction:column;gap:clamp(40px,7svh,110px)}
.service-row,.service-row:last-child{display:block;border:0;padding:0;position:relative;outline-offset:12px}
.service-row h3{font-size:clamp(54px,8.5vw,220px);line-height:1;letter-spacing:-.055em;transition:color .2s;position:relative;z-index:2}
.service-row p{font-size:clamp(17px,1.5vw,32px);margin-top:18px;max-width:none;position:relative;z-index:2}
.service-row:hover h3,.service-row:focus-visible h3{font-style:italic}
.service-row:focus-visible{outline:1px solid #00ff50}
.service-art{position:absolute;z-index:1;pointer-events:none;width:clamp(220px,24vw,620px);aspect-ratio:1;overflow:hidden;border-radius:8px;opacity:0;transform:scale(.94) rotate(-3deg);transition:opacity .2s,transform .35s;background:#111}
.service-art.is-visible{opacity:1;transform:scale(1) rotate(-3deg)}
.service-art video{width:100%;height:100%;object-fit:cover;object-position:center 58%;display:block}
@media(max-width:700px){.service-row h3{font-size:clamp(44px,10.5vw,74px)}.service-row p{font-size:17px;max-width:29ch;margin-top:14px}.services-list{gap:44px}.studio-services{padding:80px 24px 100px}.service-art{display:none}}
@media(prefers-reduced-motion:reduce){.service-art{transition:none;transform:none}}

/* Client names sit below the statement, with each name kept together. */
.story-brands{max-width:1600px;margin:clamp(40px,7svh,100px) auto 0;font:400 clamp(20px,2vw,48px)/1.65 MonaWide,Mona,Arial,sans-serif;letter-spacing:-.025em;color:#aaa;text-wrap:pretty}
.story-brand{display:inline-block;white-space:nowrap}
.brand-dot{padding-inline:.2em;color:#666}
.story-brand:last-child{color:#777}
@media(max-width:700px){.story-brands{font-size:clamp(18px,4.7vw,24px);line-height:1.7;margin-top:36px}}
/* Service descriptions form a quiet right column on desktop. */
.service-row:hover h3,.service-row:focus-visible h3{font-style:normal}
@media(min-width:701px){
 .service-row,.service-row:last-child{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,25%);gap:clamp(28px,4vw,110px);align-items:center}
 .service-row h3{font-size:clamp(46px,6.3vw,180px)}
 .service-row p{margin:0;font-size:clamp(17px,1.2vw,28px);max-width:28ch;line-height:1.45}
}

.studio-story{padding-block:clamp(130px,24svh,360px)}
.story-brands{margin-top:clamp(64px,12svh,180px)}
.reveal-ready .story-copy,.reveal-ready .story-brands{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-ready .is-revealed{opacity:1;transform:none}
@media(max-width:700px){.studio-story{padding-block:110px}.story-brands{margin-top:64px}}
@media(prefers-reduced-motion:reduce){.reveal-ready .story-copy,.reveal-ready .story-brands{opacity:1;transform:none;transition:none}}

.story-brands{font-size:clamp(18px,1.65vw,40px)}
@media(max-width:700px){.story-brands{font-size:clamp(17px,4.3vw,22px)}}

/* Small, softly rounded glyphs inside the existing generous hit target. */
#pause::before,#pause:not([data-paused="true"])::before,#pause[data-paused="true"]::before{width:16px;height:16px;border:0;border-radius:0;background:currentColor;transform:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='1' width='3' height='14' rx='1'/%3E%3Crect x='10' y='1' width='3' height='14' rx='1'/%3E%3C/svg%3E") center/contain no-repeat}
#pause[data-paused="true"]::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2 L13 8 L4 14 Z' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Stable two-column services: one selected visual and its explanation. */
.services-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(40px,8vw,180px);align-items:start}
.services-list{gap:clamp(24px,3.5vw,64px)}
.service-choice{display:block;padding:0;border:0;border-radius:0;background:none;color:#777;text-align:left;font:400 clamp(32px,4.3vw,110px)/1.12 MonaWide,Mona,Arial,sans-serif;letter-spacing:-.045em;transition:color .2s}
.service-choice[aria-pressed=true],.service-choice:hover{color:#fff}
.service-choice:focus-visible{outline:1px solid #00ff50;outline-offset:10px}
.service-detail{margin:0;min-width:0}
.service-media{aspect-ratio:1;overflow:hidden;border-radius:8px;background:#080808}
.service-media video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.service-detail figcaption{font:400 clamp(17px,1.3vw,28px)/1.45 Mona,Arial,sans-serif;color:#aaa;margin-top:22px;min-height:3em;max-width:30ch}
@media(max-width:700px){.services-layout{grid-template-columns:1fr;gap:32px}.services-list{gap:20px}.service-choice{font-size:clamp(30px,8vw,48px)}.service-detail{width:100%;max-width:440px}.service-detail figcaption{font-size:17px;margin-top:16px}}
@media(prefers-reduced-motion:reduce){.service-choice{transition:none}}

/* Six faces wrap a horizontal cylinder, cropped by the editorial window. */
.service-drum{--drum-radius:clamp(180px,23vw,580px);position:relative;height:clamp(420px,44vw,1000px);overflow:hidden;perspective:1400px;mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);touch-action:pan-x}
.service-rotor{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.25s cubic-bezier(.2,.7,.2,1)}
.service-drum-face{position:absolute;left:6%;top:50%;width:88%;height:calc(var(--drum-radius)*1.04);margin-top:calc(var(--drum-radius)*-.52);transform:rotateX(calc(var(--face)*60deg)) translateZ(var(--drum-radius));backface-visibility:hidden;overflow:hidden;border-radius:6px;background:#080808}
.service-drum-face video,.service-drum-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.service-detail{margin-top:-55px}
.service-detail figcaption{margin-top:18px}
@media(max-width:700px){.service-detail{margin-top:0;max-width:none}.service-drum{--drum-radius:52vw;height:105vw;max-height:540px;perspective:1000px}}
@media(prefers-reduced-motion:reduce){.service-rotor{transition:none}}

/* Restore screen snapping inside the work sequence only. */


/* Section links share one quiet baseline. */
.hero-section-nav{position:absolute;left:24px;bottom:24px;display:flex;gap:10px;z-index:5}
.hero-section-nav .scroll,.hero-section-nav a{position:static;display:flex;align-items:center;padding:16px 28px;min-height:56px;border:1px solid #ffffff30;border-radius:12px;background:#0006;backdrop-filter:blur(16px);font:400 16px/22px Mona,Arial,sans-serif}
#studio,#services{scroll-margin-top:0}
.service-drum{mask-image:none;perspective:1100px;--drum-radius:clamp(170px,20vw,480px);height:clamp(360px,35vw,760px)}
.service-drum-face{left:20%;width:60%;height:65%;top:17.5%;margin-top:0;transform:rotateY(calc(var(--face)*60deg)) translateZ(var(--drum-radius))}
.service-rotor{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.service-detail{margin:0;min-width:0}.service-detail figcaption{margin:24px 0 0;max-width:28ch;transition:opacity .3s}
@media(min-width:701px){
 .studio-services{height:340svh;padding:0 max(24px,5vw);overflow:clip;overflow:visible}
 .services-scene{height:100svh;position:sticky;top:0;display:flex;align-items:center;overflow:hidden}
 .services-inner{width:100%}.services-layout{grid-template-columns:1.1fr 1fr;align-items:center;gap:5vw}
 .services-list{position:relative;height:70px;display:block;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
 .service-choice{height:110px;white-space:nowrap;font-size:clamp(32px,4vw,105px);opacity:.2;transition:opacity .45s,color .45s}
 .service-choice[aria-pressed=true]{opacity:1}.service-choice:hover{opacity:1}
 .service-detail{position:relative;z-index:2;background:#000}
 .service-drum{overflow:hidden}
}
.case .case-info{transform:translateY(12px);transition:opacity .35s ease,transform .5s ease}
.case.caption-visible .case-info{transform:translateY(0)}
.story-sentence{transition:color .2s ease}
@media(max-width:700px){.hero-section-nav{left:18px;bottom:20px;gap:6px}.hero-section-nav .scroll,.hero-section-nav a{padding:14px 15px;min-height:52px;font-size:14px}.service-drum{--drum-radius:48vw;height:90vw}.services-scene{overflow:hidden}}
@media(prefers-reduced-motion:reduce){.services-list,.service-rotor,.case .case-info{transition:none}.studio-services{height:auto;padding-block:100px}.services-scene{position:relative;height:auto}.services-list{transform:none!important;height:auto}.service-choice{opacity:1}}

/* A single seamless line, equal spacing through the repeat boundary. */
.story-brands{max-width:none;margin-inline:calc(-1 * max(24px,8vw));overflow:hidden;font-size:clamp(17px,1.35vw,32px);line-height:1.3;white-space:nowrap}
.brand-track{display:flex;width:max-content;animation:brand-marquee 65s linear infinite}
.brand-run{display:flex;flex:none;align-items:center;gap:clamp(40px,5vw,120px);padding-right:clamp(40px,5vw,120px)}
.story-brand,.story-brand:last-child{display:block;flex:none;color:#aaa;white-space:nowrap}
@keyframes brand-marquee{to{transform:translateX(-50%)}}
@media(max-width:700px){.story-brands{margin-inline:-24px;font-size:18px}.brand-run{gap:44px;padding-right:44px}}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none}.story-brands{overflow-x:auto}.brand-run[aria-hidden=true]{display:none}}

/* Centered services, with a single changing editorial window. */
.studio-services{height:340svh;padding:0 24px;overflow:visible;background:#000}
.services-scene{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.services-inner{position:relative;width:100%;max-width:2200px;margin:auto}
.studio-services h2{text-align:center;margin:0 0 36px;font:400 13px/1.4 Mona,sans-serif;text-transform:uppercase;color:#777}
.services-list{display:flex;flex-direction:column;align-items:center;gap:12px;height:auto;transform:none!important}
.service-choice{display:block;width:auto;height:auto;min-height:0;padding:0 12px;font:400 clamp(48px,7.5vw,170px)/1.12 MonaWide,Mona,sans-serif;letter-spacing:-.045em;color:#fff;opacity:.3;white-space:nowrap;transition:opacity .4s;font-style:normal!important}
.service-choice[aria-pressed=true]{opacity:1}
.service-overlay{position:absolute;z-index:3;left:55%;top:40%;width:clamp(220px,25vw,620px);margin:0;pointer-events:none;transform:translateY(calc(var(--service-progress,0)*45px));transition:transform .4s}
.service-slides{position:relative;aspect-ratio:265/155;border-radius:10px;overflow:hidden;background:#080808}
.service-collection,.service-shot{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.service-collection.is-active,.service-shot.is-active{opacity:1}
.service-shot{overflow:hidden}.service-shot img,.service-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.service-hue{position:absolute;inset:0;background:#7137ff;mix-blend-mode:hue}
.service-overlay figcaption{margin:16px 0 0;padding:10px 12px;background:#000;color:#aaa;font:400 clamp(15px,1vw,22px)/1.4 Mona,sans-serif;max-width:30ch}
.brand-run{gap:0}.story-brand{display:flex!important;align-items:center}.story-brand:after{content:'·';font-size:.7em;color:#666;margin-inline:clamp(24px,3vw,72px)}.brand-run{padding-right:0}
@media(max-width:700px){.studio-services{padding-inline:16px;height:300svh}.service-choice{font-size:clamp(36px,9vw,62px);line-height:1.25}.services-list{gap:18px}.service-overlay{left:auto;right:3%;top:45%;width:55%;max-width:300px}.studio-services h2{margin-bottom:42px}.service-overlay figcaption{font-size:14px;margin-top:10px}.story-brand:after{margin-inline:24px}}
@media(prefers-reduced-motion:reduce){.studio-services{height:auto;padding-block:100px}.services-scene{position:relative;height:auto;min-height:70svh}.service-overlay{transform:none}.service-shot,.service-collection{transition:none}}

.service-overlay{top:var(--selected-top,25%);transform:none;transition:top .5s cubic-bezier(.2,.7,.2,1)}

.service-overlay figcaption{display:none}
.service-overlay{opacity:0;transform:translate(var(--card-x,0px),10px) rotate(var(--card-angle,-4deg)) scale(.96);transition:opacity .22s,transform .4s cubic-bezier(.2,.7,.2,1),top .4s}
.service-hovering .service-overlay{opacity:1;transform:translate(var(--card-x,0px),0) rotate(var(--card-angle,-4deg)) scale(1)}
@media(hover:none),(pointer:coarse){.service-overlay{opacity:1;transform:rotate(var(--card-angle,-3deg))}}
@media(prefers-reduced-motion:reduce){.service-overlay{transition:none;transform:none!important}}

/* Compact control heights; retain horizontal spacing and typography. */
.site-header .header-contact,.idea-input-row button,#contact-dialog #email-draft{padding-block:.6em;min-height:44px}
.idea-input-row button{align-self:center}
#contact-dialog #email-draft{min-height:48px}
.hero-section-nav .scroll,.hero-section-nav a{padding-block:12px;min-height:48px}
#pause{height:48px;min-height:48px;padding-block:12px}
@media(min-width:2400px){#pause{height:54px;min-height:54px}}
@media(max-width:700px){.hero-section-nav .scroll,.hero-section-nav a{padding-block:10px;min-height:44px}#pause{height:44px;min-height:44px;padding-block:10px}}

.service-overlay{left:57%;right:auto}
.studio-services[data-side=left] .service-overlay{left:15%;right:auto}
.services-alternative{position:relative;z-index:2;background:#000;padding:100px 24px;overflow:hidden}
.services-alternative h2{text-align:center;font:400 13px/1.4 Mona,sans-serif;text-transform:uppercase;color:#777;margin-bottom:40px}
.alternative-names{display:flex;flex-direction:column;align-items:center;gap:12px}
.alternative-names button{font:400 clamp(38px,6vw,140px)/1.12 MonaWide,Mona,sans-serif;color:#666;background:none;border:0;padding:0;letter-spacing:-.04em}
.alternative-names button[aria-pressed=true]{color:#fff}
.services-alternative canvas{display:block;width:min(100%,1800px);height:clamp(260px,36vw,680px);margin:20px auto 0}
@media(max-width:700px){.service-overlay{left:auto;right:2%;width:52%}.studio-services[data-side=left] .service-overlay{left:2%;right:auto}.alternative-names button{font-size:clamp(32px,8vw,56px)}.services-alternative{padding:80px 16px}}

/* Shared tighter button corners, independent of media frames. */
:root{--preview-control-radius:8px}
.hero-section-nav a,.hero-section-nav .scroll{border-radius:var(--preview-control-radius)}
@media(prefers-reduced-motion:reduce){.service-overlay{translate:none!important}}

/* Scroll-driven service cylinder: one stage, copy anchored bottom-left. */
.services-alternative{height:420svh;padding:0;overflow:visible}
.alternative-scene{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.services-alternative h2{position:absolute;top:7%;left:4%;margin:0;text-align:left}
.services-alternative canvas{position:absolute;right:-12%;top:5%;width:90%;max-width:none;height:74%;margin:0}
.alternative-copy{position:absolute;left:4%;bottom:9%;width:70%;height:clamp(150px,15vw,340px);pointer-events:none}
.alternative-copy-item{position:absolute;bottom:0;left:0;opacity:1;transform:translateY(0);transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
.alternative-copy-item[aria-hidden=true]{opacity:0;transform:translateY(24px);visibility:hidden}
.alternative-copy h3{font:400 clamp(48px,7vw,160px)/1.02 MonaWide,Mona,sans-serif;letter-spacing:-.045em;margin:0 0 22px;color:#fff}
.alternative-copy p{font:400 clamp(15px,1.2vw,25px)/1.4 Mona,sans-serif;max-width:36ch;margin:0;color:#aaa}
.alternative-progress{position:absolute;left:4%;bottom:4%;width:92%;height:1px;background:#252525}
.alternative-progress:after{content:'';display:block;height:100%;background:#aaa;transform-origin:left;transform:scaleX(var(--alternative-progress,0))}
.cylinder-fallback canvas{background-size:contain;background-position:center;background-repeat:no-repeat}
@media(max-width:700px){.services-alternative{padding:0;height:360svh}.services-alternative canvas{width:135%;right:-30%;height:54%;top:14%}.alternative-copy{left:6%;width:88%;bottom:12%;height:180px}.alternative-copy h3{font-size:clamp(42px,11vw,70px);margin-bottom:18px}.alternative-copy p{font-size:16px}.services-alternative h2{left:6%}}
@media(prefers-reduced-motion:reduce){.alternative-copy-item{transition:none}}

.services-alternative h2{top:15%;z-index:2;left:4%}

/* One diagonal service stage with a single frame per service. */
.services-alternative{height:400svh}
.services-alternative h2{left:5%;top:18%;font-size:clamp(13px,1vw,20px);color:#aaa}
.services-alternative canvas{width:125%;height:80%;right:-30%;top:3%;transform:rotate(-12deg)}
.alternative-scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.85) 12%,transparent 57%);z-index:1}
.alternative-copy{left:5%;bottom:11%;width:88%;z-index:2}
.alternative-copy h3{font-size:clamp(52px,8vw,180px)}
.alternative-progress{z-index:2;left:5%;width:90%}
@media(max-width:700px){.services-alternative canvas{width:190%;height:55%;right:-70%;top:16%;transform:rotate(-12deg)}.services-alternative h2{top:16%;left:6%}.alternative-copy{left:6%;bottom:12%;width:88%}.alternative-copy h3{font-size:clamp(42px,11vw,70px)}}

/* Camera perspective controls depth; never stretch or rotate the canvas itself. */
.services-alternative canvas{width:100%;height:100%;right:0;top:0;transform:none}
.alternative-progress{display:none}
@media(max-width:700px){.services-alternative canvas{width:150%;height:65%;right:-25%;top:8%;transform:none}}

.story-keyword,.story-keyword:hover{font-style:normal;transform:none}
.studio-story{--brand-air:clamp(100px,16svh,240px);padding-bottom:var(--brand-air)}
.story-brands{margin-top:var(--brand-air);font-size:clamp(20px,1.6vw,38px)}
.services-orbit{position:relative;isolation:isolate;overflow:hidden;background:#000;padding:120px 24px;min-height:90svh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.services-orbit h2{font:400 13px/1.4 Mona,sans-serif;text-transform:uppercase;color:#888;margin:0 0 50px}
.orbit-titles{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.orbit-titles button{font:400 clamp(42px,6.5vw,150px)/1.15 MonaWide,Mona,sans-serif;letter-spacing:-.045em;color:#fff;background:none;border:0;padding:0 12px;transition:opacity .3s;text-align:center}
.services-orbit.is-active .orbit-titles button{opacity:.38}.services-orbit.is-active .orbit-titles button[aria-pressed=true]{opacity:1}
.orbit-media{position:absolute;inset:0;z-index:1;pointer-events:none}
.orbit-media video{position:absolute;aspect-ratio:16/9;object-fit:cover;border-radius:8px;opacity:0;transition:opacity .35s,transform .55s cubic-bezier(.2,.7,.2,1);background:#111}
.orbit-near{width:clamp(220px,31vw,680px);left:2%;top:54%;transform:translate(calc(var(--orbit-x,0px) * 1.3),calc(var(--orbit-y,0px) * 1.3 + 24px)) rotate(-4deg)}
.orbit-far{width:clamp(160px,23vw,480px);right:3%;top:23%;transform:translate(calc(var(--orbit-x,0px) * -.5),calc(var(--orbit-y,0px) * -.5 + 16px)) rotate(3deg)}
.is-active .orbit-near{opacity:1;transform:translate(calc(var(--orbit-x,0px) * 1.3),calc(var(--orbit-y,0px) * 1.3)) rotate(-4deg)}
.is-active .orbit-far{opacity:.8;transform:translate(calc(var(--orbit-x,0px) * -.5),calc(var(--orbit-y,0px) * -.5)) rotate(3deg)}
.services-orbit[data-side="1"] .orbit-near{left:auto;right:2%}.services-orbit[data-side="1"] .orbit-far{right:auto;left:3%}
.orbit-description{position:relative;z-index:2;text-align:center;color:#aaa;font:400 clamp(14px,1.1vw,22px)/1.4 Mona,sans-serif;margin:42px 0 0;min-height:3em;max-width:36ch;opacity:0;transition:opacity .3s}.is-active .orbit-description{opacity:1}
@media(max-width:700px){.studio-story{--brand-air:100px}.story-brands{font-size:21px}.services-orbit{padding:90px 16px;min-height:85svh}.orbit-titles button{font-size:clamp(34px,8.8vw,58px)}.orbit-near{width:46%;top:70%;left:-5%}.orbit-far{width:35%;top:15%;right:-3%}.orbit-description{margin-top:30px}.orbit-titles{gap:20px}}
@media(prefers-reduced-motion:reduce){.orbit-media video{transform:none!important;transition:none}}

@media(min-width:701px){.hero-copy{left:50%;right:calc(var(--stage-gutter,24px) + 72px);max-width:none}}
@media(min-width:701px) and (max-width:1100px){.hero-copy h1{font-size:clamp(25px,3vw,33px)}}

/* Services continue the studio section directly after its client marquee. */
.studio-story{padding-bottom:0}
.studio-story > .services-alternative{margin-top:var(--brand-air);margin-inline:calc(-1 * max(24px,8vw));width:auto}
@media(max-width:700px){.studio-story > .services-alternative{margin-inline:-24px}}

/* Fixed heading origin: description wrapping must not move service titles. */
.alternative-copy-item{top:0;bottom:auto;width:100%}
.alternative-copy p{max-width:60ch}
@media(min-width:1101px){.alternative-copy p{white-space:nowrap;max-width:none}}

/* Footer CTA: preserve the inset and never let flex compress the button. */
footer .idea-input-row{display:flex;box-sizing:border-box;gap:16px;padding:12px 12px 12px 28px;align-items:center;border-radius:24px}
footer .idea-input-row input{flex:1 1 0%;min-width:0;width:0;height:48px;min-height:0;padding:0;box-sizing:border-box}
footer .idea-input-row button{flex:0 0 auto;align-self:center;box-sizing:border-box;min-height:48px;padding:12px 36px;border-radius:12px;white-space:nowrap;margin:0}
@media(max-width:700px){footer .idea-input-row{gap:10px;padding:10px 10px 10px 20px;border-radius:22px}footer .idea-input-row button{padding:12px 28px;min-height:48px}}

/* A shorter native-scroll sequence, with stable breathing room below the artwork. */
.services-alternative{height:300svh;}
.alternative-copy{bottom:5%;height:clamp(140px,13vw,280px)}
.alternative-copy h3{margin-bottom:clamp(20px,2vw,36px)}
.alternative-copy-item{transition:opacity .28s ease,transform .38s cubic-bezier(.2,.7,.2,1),visibility 0s}
.alternative-copy-item[aria-hidden=true]{transform:translateY(12px);transition:opacity .22s ease,transform .3s ease,visibility 0s .22s}
@media(max-width:1100px){.services-alternative{height:250svh}.alternative-copy{bottom:6%;height:170px}.alternative-copy p{white-space:normal;max-width:48ch}}
@media(max-width:700px){.services-alternative{height:230svh}.alternative-copy{bottom:5%;height:150px}.alternative-copy h3{font-size:clamp(36px,10vw,62px);margin-bottom:20px}.services-alternative canvas{top:3%;height:62%}}
@media(max-height:500px) and (orientation:landscape){.alternative-copy{bottom:5%;height:100px}.alternative-copy h3{font-size:36px;margin-bottom:12px}.alternative-copy p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.alternative-copy-item,.alternative-copy-item[aria-hidden=true]{transition:none}}

.service-swipe-hint{display:none}
@media(max-width:700px){.services-alternative{height:auto;min-height:0}.alternative-scene{position:relative;height:90svh;min-height:560px}.services-alternative canvas{width:100%;right:0;top:0;height:70%;touch-action:pan-y}.alternative-copy{bottom:5%;height:150px}.service-swipe-hint{display:block;position:absolute;top:63%;width:100%;text-align:center;color:#999;font:14px/1.4 Mona,sans-serif;pointer-events:none;transition:opacity .4s}.service-swipe-hint.used{opacity:.35}}
@media(max-height:500px) and (orientation:landscape){.alternative-scene{min-height:420px}}

/* Compact touch layouts: content defines the section, never an empty full screen. */
@media(max-width:1100px),(pointer:coarse){

 .case{height:auto;min-height:0;padding:36px 20px;display:flex;align-items:center;justify-content:center;--stage-width:100%;--stage-height:72svh;}
 .case .case-frame{max-width:100%}
 .case .case-frame .case-info{margin-top:16px;gap:16px;font-size:13px;line-height:1.35}
}
@media(max-width:700px){.case{padding:28px 16px;--stage-height:70svh}.case .case-frame .case-info{margin-top:14px;font-size:12px}.case:not(.portrait) .case-frame{width:100%}.case.portrait .case-frame{width:min(100%,calc(70svh * 45 / 64))}}

/* Phones: all services readable at once; the artwork accompanies normal scrolling. */
@media(max-width:700px){
 .alternative-scene{height:auto;min-height:0;padding:clamp(260px,50vw,500px) 6% 64px}
 .services-alternative canvas{height:clamp(260px,50vw,500px);top:0;width:100%}
 .alternative-copy{position:relative;left:auto;bottom:auto;width:100%;height:auto;display:grid;gap:32px}
 .alternative-copy-item,.alternative-copy-item[aria-hidden=true]{position:relative;top:auto;bottom:auto;opacity:1;visibility:visible;transform:none;transition:none}
 .alternative-copy h3{font-size:clamp(32px,7vw,64px);margin-bottom:10px}
 .alternative-copy p{font-size:15px;max-width:44ch}
 .service-swipe-hint{display:none}
}

/* Shared editorial type scale, independent of control sizes. */
:root{--type-caption:clamp(16px,1.05vw,28px)}
.alternative-copy p,.case .case-frame .case-info{font-size:var(--type-caption);line-height:1.45}
@media(max-width:700px){
 :root{--type-display:clamp(38px,10.3vw,60px);--type-heading:clamp(27px,7.3vw,42px);--type-client:clamp(18px,4.9vw,26px);--type-caption:14px}
 .hero-copy h1,.story-copy,footer .email,footer .contact-positioning,footer .email-address{font-size:var(--type-heading);line-height:1.2;letter-spacing:-.035em}
 .alternative-copy h3{font-size:var(--type-display);line-height:1.06;letter-spacing:-.045em}
 .story-brands{font-size:var(--type-client)}
 .alternative-copy p,.case .case-frame .case-info{font-size:var(--type-caption);line-height:1.45}
 .alternative-copy{gap:36px}
}
/* A short stagger separates list entries. The subline travels one third as far;
   both children share the entry delay and finish together after 850ms. */
@media(max-width:700px){
 .alternative-copy-item.reveal-pending h3{opacity:0;transform:translateX(24px);transition:opacity .85s cubic-bezier(.22,1,.36,1) var(--service-reveal-delay,0ms),transform .85s cubic-bezier(.22,1,.36,1) var(--service-reveal-delay,0ms)}
 .alternative-copy-item.reveal-pending p{opacity:0;transform:translateX(8px);transition:opacity .85s ease-out var(--service-reveal-delay,0ms),transform .85s cubic-bezier(.22,1,.36,1) var(--service-reveal-delay,0ms)}
 .alternative-copy-item.reveal-pending.is-revealed h3{opacity:1;transform:translateX(0)}
 .alternative-copy-item.reveal-pending.is-revealed p{opacity:1;transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){.alternative-copy-item.reveal-pending h3,.alternative-copy-item.reveal-pending p{opacity:1;transform:none;transition:none}}

.hero-copy h1,.story-copy,.alternative-copy h3,footer .email{font-family:MonaWide,Mona,Arial,sans-serif;font-weight:400}

/* Consistent text controls; icon-only close buttons remain circular. */
.site-header .header-contact,.idea-input-row button,#contact-dialog #email-draft,.hero-section-nav .scroll,#pause{border-radius:var(--preview-control-radius);box-sizing:border-box;flex-shrink:0}
.site-header .header-contact,.idea-input-row button,#contact-dialog #email-draft{padding:12px 32px;min-height:44px;line-height:20px}
#contact-dialog #email-draft{padding:12px 40px;min-width:144px}
@media(max-width:700px){.site-header .header-contact,.idea-input-row button{padding:12px 28px}}
@media(max-width:700px){.alternative-scene{padding-bottom:120px}}

footer .idea-input-row button{border-radius:var(--preview-control-radius);min-height:44px;padding:12px 32px}
footer .idea-input-row{border-radius:calc(var(--preview-control-radius) + 12px)}
@media(max-width:700px){footer .idea-input-row button{padding:12px 28px}footer .idea-input-row{border-radius:calc(var(--preview-control-radius) + 10px)}}

/* Air belongs after the entire service stage, outside its pinned scene. */
.studio-story{padding-bottom:clamp(100px,14svh,240px)}
@media(min-width:1101px) and (pointer:fine){
 .alternative-copy{perspective:1000px}
 .alternative-copy-item{transform-origin:50% 50%;backface-visibility:hidden;transform:rotateX(0deg);opacity:1;visibility:visible;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .4s ease,visibility 0s}
 .alternative-copy-item[aria-hidden=true]{transform:rotateX(-22deg) translateY(8px);opacity:0;visibility:hidden;transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s .55s}
}
@media(max-width:1100px),(pointer:coarse){.studio-story{padding-bottom:100px}}
@media(prefers-reduced-motion:reduce){.alternative-copy-item,.alternative-copy-item[aria-hidden=true]{transform:none;transition:none}}

/* Desktop typography and footer share the landscape case alignment. */
@media(min-width:1101px) and (pointer:fine){
 :root{--landscape-content-width:min(92vw,calc(82svh * 16 / 9));--desktop-heading:clamp(36px,2.2vw,64px);--desktop-display:clamp(60px,4.6vw,112px);--desktop-clients:clamp(20px,1.1vw,30px)}
 .case:not(.portrait) .case-frame{width:var(--landscape-content-width)}
 footer{padding-inline:max(24px,calc((100% - var(--landscape-content-width))/2));--footer-space:clamp(80px,8svh,160px)}
 footer .email{font-size:var(--desktop-heading);line-height:1.2;max-width:min(100%,24ch);text-wrap:pretty}
 footer .contact-positioning,footer .email-address{font-size:inherit}
 .hero-copy h1,.story-copy{font-size:var(--desktop-heading)}
 .alternative-copy h3{font-size:var(--desktop-display)}
 .story-brands{font-size:var(--desktop-clients)}
 footer .contact-socials{font-size:clamp(20px,1.1vw,28px);gap:12px 32px}
 footer .footer-bottom{font-size:var(--type-caption)}
 footer #idea-form{max-width:880px}
}

/* Larger service titles; compact spacing stays independent of typography. */
@media(min-width:1101px) and (pointer:fine){.alternative-copy h3{font-size:clamp(90px,6.9vw,168px)}.alternative-copy{height:clamp(190px,17vw,350px)}}
@media(max-width:700px){.alternative-copy h3{font-size:min(8.5vw,72px);overflow-wrap:normal;white-space:nowrap}.alternative-copy{height:auto}}
@media(max-width:700px){.alternative-copy h3{font-size:8.5vw}}

/* Tablet staging uses the same native sticky scene as desktop. */
@media(min-width:701px) and (max-width:1100px){
 .alternative-scene{min-height:0}
 .alternative-copy{height:min(170px,30svh)}
 .alternative-copy h3{font-size:min(8vw,12svh);white-space:nowrap}
}

/* The submit CTA uses the same regular face as every other CTA. */
#contact-dialog #email-draft{font-family:Mona,Arial,sans-serif;font-weight:400;font-style:normal}
#contact-dialog #email-draft .talk-label{font-family:inherit;font-weight:inherit;font-style:inherit}

/* Playback is square: equal room around its centered icon. */
#pause{width:48px;height:48px;min-width:48px;padding:12px}
@media(min-width:2400px){#pause{width:54px;height:54px;min-width:54px}}
@media(max-width:700px){#pause{width:44px;height:44px;min-width:44px;padding:10px}}

/* Desktop and tablet share one scroll-driven service, including touch devices. */
@media(min-width:701px){
 .alternative-copy{perspective:none}
 .alternative-copy-item,.alternative-copy-item[aria-hidden=true]{transform:none;transition:none;visibility:visible}
 .alternative-copy-item[aria-hidden=true]{opacity:0;pointer-events:none}
 .alternative-copy-item[aria-hidden=false]{opacity:1}
 .alternative-copy-item h3,.alternative-copy-item p{transition:none}
}

/* The client strip can be dragged without intercepting vertical page gestures. */
.story-brands{touch-action:pan-y;user-select:none;cursor:grab;overflow:hidden}
.story-brands.is-dragging{cursor:grabbing}
.brand-track{animation:none;will-change:transform}
@media(prefers-reduced-motion:reduce){.brand-run[aria-hidden=true]{display:flex}.story-brands{overflow:hidden}}

/* Client dragging must never start native text selection, including WebKit. */
.story-brands,.story-brands *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.story-brands::selection,.story-brands *::selection{background:transparent;color:inherit}

/* Editorial copy and contacts use exactly the landscape case's content column. */
:root{--content-column:calc(100vw - 32px)}
@media(min-width:1101px) and (pointer:fine){:root{--content-column:var(--landscape-content-width)}}
.story-copy{width:var(--content-column);max-width:none;margin-inline:calc((100% - var(--content-column))/2)}
footer{padding-inline:calc((100% - var(--content-column))/2)}

/* Wide displays share one centered case/text column regardless of input device. */
@media(min-width:1920px){
 :root{--landscape-content-width:min(92vw,calc(82svh * 16 / 9));--content-column:var(--landscape-content-width)}
 .case:not(.portrait) .case-frame{width:var(--content-column)}
}

/* Native case slides. The boundary controller releases the root before an
   outward gesture; the story/footer and touch layouts keep ordinary scrolling. */
html{scroll-snap-type:none;scroll-padding:0;scroll-behavior:auto}
.hero,footer,.studio-story,.studio-services,.services-alternative,.case{scroll-snap-align:none;scroll-snap-stop:normal}
@media(min-width:701px) and (pointer:fine) and (hover:hover) and (prefers-reduced-motion:no-preference){
 html.case-snap-active{scroll-snap-type:y mandatory}
 #work>.case{height:100svh;min-height:100svh;padding:0 var(--stage-gutter)}
 #work>.case{scroll-snap-align:center;scroll-snap-stop:normal;scroll-margin:0}
}
/* Compensate the display face's left sidebearing without moving the subline. */
.alternative-copy h3{position:relative;left:-.025em}

/* Consistent opening rhythm and a ten-percent lift to the two editorial texts. */
.studio-story{padding-top:clamp(100px,18svh,260px)}
.hero-copy h1{font-size:clamp(37.4px,2.75vw,70.4px)}
.story-copy{font-size:clamp(39.6px,4.51vw,127.6px)}
@media(min-width:1101px) and (pointer:fine){
 .hero-copy h1,.story-copy{font-size:clamp(39.6px,2.42vw,70.4px)}
}
@media(min-width:701px) and (max-width:1100px){.hero-copy h1{font-size:clamp(27.5px,3.3vw,36.3px)}}
@media(max-width:700px){
 .hero-copy h1,.story-copy{font-size:clamp(29.7px,8.03vw,46.2px)}
 .hero-copy{bottom:96px}
}
@media(max-height:500px){.hero-copy{bottom:96px}.hero-copy h1{font-size:28.6px}}

/* Mobile header and Projects use the same compact translucent control. */
@media(max-width:700px){
 .site-header .header-contact,.hero-section-nav .scroll{
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  padding:10px 15px;min-height:44px;border:1px solid #ffffff30;
  border-radius:var(--preview-control-radius);background:#0006;color:#fff;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  font:400 14px/22px Mona,Arial,sans-serif;
 }
 .site-header .header-contact .talk-window{height:22px;line-height:22px}
}

/* Viewport width, not pointer capability, defines the editorial column and scale. */
@media(min-width:701px){.story-copy{font-size:clamp(39.6px,2.42vw,70.4px)}}
@media(min-width:1101px){
 :root{--landscape-content-width:min(92vw,calc(82svh * 16 / 9));--content-column:var(--landscape-content-width)}
}
@media(max-width:1100px){:root{--content-column:calc(100vw - 48px)}}

@media(max-width:1100px){
 .studio-story{padding-inline:24px}
 .studio-story .story-copy{width:100%;max-width:100%;margin-inline:auto}
 .studio-story>.services-alternative{margin-inline:-24px}
}

/* Keep the hero headline on the control-label baseline at tablet and desktop widths. */
@media(min-width:701px){
 .hero-copy{bottom:40px}
 .hero-section-nav,#pause{bottom:24px}
}
@media(min-width:2400px){.hero-copy{bottom:44px}}

/* One optical text centre; discard wrappers left over from the old sliding labels. */
.site-header .header-contact,.idea-input-row button,#contact-dialog #email-draft{display:flex;align-items:center;justify-content:center}
.site-header .header-contact .talk-window,.idea-input-row button .talk-window,#contact-dialog #email-draft .talk-window{display:flex;align-items:center;justify-content:center;height:auto;padding:0;overflow:visible;line-height:inherit}
.talk-window .talk-label,.hero-section-nav .button-caption{display:block;position:relative;top:-.06em;line-height:inherit}
.talk-window .talk-label::after{content:none}

/* Keep touch captions close to the media, without inherited heading margins. */
.case .case-frame .case-info h2{margin:0;font:inherit}
@media(max-width:1100px),(pointer:coarse){.case .case-frame{row-gap:0}.case .case-frame .case-info{margin-top:16px;gap:12px}}
@media(max-width:700px){.case .case-frame .case-info{margin-top:14px}}

/* The two Let’s talk controls share one box, including the border thickness. */
:root{--talk-size:clamp(16px,.78vw,20px);--talk-leading:1.25;--talk-padding-y:10px;--talk-padding-x:26px;--talk-min-height:44px;--form-inset:8px;--footer-contact-gap:clamp(104px,10svh,208px)}
.site-header .header-contact,footer .idea-input-row button{
 font:400 var(--talk-size)/var(--talk-leading) Mona,Arial,sans-serif;
 padding:var(--talk-padding-y) var(--talk-padding-x);min-height:var(--talk-min-height);
 border:1px solid transparent;border-radius:var(--preview-control-radius);box-sizing:border-box;
}
.site-header .header-contact{border-color:#ffffff30}
footer .idea-input-row{
 padding:var(--form-inset);padding-left:calc(var(--form-inset) + 10px);gap:12px;
 border-radius:calc(var(--preview-control-radius) + var(--form-inset) + 1px);
}
footer .idea-input-row input{height:var(--talk-min-height)}
footer .contact-socials,footer .footer-bottom{margin-top:var(--footer-contact-gap)}
footer .footer-bottom{font-size:clamp(14px,.45vw,16px);line-height:1.3}
@media(max-width:700px){
 :root{--talk-size:14px;--talk-leading:22px;--talk-padding-x:20px;--form-inset:6px;--footer-contact-gap:72px}
 footer .idea-input-row{gap:8px}
 footer .footer-bottom{margin-top:32px;font-size:12px}
}

/* Phone section rhythm: footer base, 1.5x studio opening and 3x service exit. */
@media(max-width:700px){
 :root{--mobile-section-space:64px}
 footer{--footer-space:var(--mobile-section-space)}
 .studio-story{padding-top:calc(1.5 * var(--mobile-section-space));padding-bottom:calc(3 * var(--mobile-section-space))}
 .studio-story>.services-alternative{margin-top:calc(2 * var(--mobile-section-space))}
 .alternative-scene{padding-bottom:0}
}