@font-face{font-family:DM;src:url('/assets/dm-sans-latin.woff2') format('woff2');font-weight:100 1000;font-display:swap}
/* Start page only. Two containers: .wide (top bar, film, closing block) and .inner (text and cards). --accent is the single second colour. */
:root{--bg:#080808;--fg:#f3f2ed;--quiet:#a6a6a6;--soft:#c8c8c8;--accent:#7a6bff;--line:#ffffff2e;--card:#141414;--radius:18px;--gutter:clamp(20px,3.2vw,60px);--wide:max(var(--gutter),7.5vw);--inner:max(var(--gutter),15vw);--ease:cubic-bezier(.22,1,.36,1);color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:100px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1;letter-spacing:-.055em}
a{color:inherit;text-decoration:none}
button{border:0;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
button:disabled{opacity:.5}
::selection{background:var(--accent);color:#17110e}
[hidden]{display:none!important}
.wide,.inner{max-width:1800px;margin-inline:auto}
.wide{padding-inline:var(--wide)}
.inner{padding-inline:var(--inner)}
.jump{position:fixed;top:-70px;left:20px;z-index:100;background:#fff;color:#111;padding:12px 20px}
.jump:focus{top:10px}
.arrow{display:block;width:22px;height:22px;flex-shrink:0;transition:transform .45s var(--ease)}
.label,.eyebrow{font-size:12px;letter-spacing:.035em;color:var(--quiet)}
.dot{font-style:normal;color:var(--accent)}

/* Top bar: wordmark left, three links and one button right. It leaves when scrolling down and comes back when scrolling up. */
.masthead{position:fixed;z-index:40;top:0;left:0;right:0;transition:transform .55s var(--ease),opacity .3s,background .4s}
.masthead.scrolled{background:#080808e0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.masthead.away{transform:translateY(-100%);opacity:0}
.nav-shell{display:flex;align-items:center;gap:44px;max-width:1800px;margin-inline:auto;padding:22px var(--wide)}
.wordmark{margin-right:auto;font-size:20px;font-weight:800;letter-spacing:-.065em;line-height:.93}
.wordmark>span{display:block;color:var(--accent)}
.top-links{display:flex;gap:40px;font-size:16px}
.top-links a{display:inline-block;padding:10px 0}
.nav-trigger,.small-nav{display:none}
.menu-lines{position:relative;width:20px;height:12px}
.menu-lines:before,.menu-lines:after{content:'';position:absolute;left:0;width:20px;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-lines:before{top:3px}
.menu-lines:after{top:9px}
.nav-trigger[aria-expanded=true] .menu-lines:before{top:6px;transform:rotate(45deg)}
.nav-trigger[aria-expanded=true] .menu-lines:after{top:6px;transform:rotate(-45deg)}
.small-nav a{display:block;padding:11px 0;font-size:18px;border-top:1px solid #ffffff17;color:var(--soft);transition:transform .3s var(--ease),color .3s}
.small-nav a:hover{transform:translateX(8px);color:#fff}

/* Buttons are full pills; .mag is the magnetic field around one (main.js). A button rests in the colour of its ground. On hover a wave in the
   opposite colour (--wave) rises from below with a round crest that flattens on arrival, the label rolls up one line – its second copy already
   carries the new ink (--ink) – and once the wave has landed the button swells a little and settles. All CSS, so it reverses cleanly. */
.pill{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;min-height:56px;padding:0 28px;border-radius:999px;font-size:16px;line-height:1.3;white-space:nowrap}
.pill-line{background:var(--bg);color:var(--fg)}
.top-cta .pill{min-height:48px;padding:0 24px;font-size:15px}
.mag{display:inline-block;padding:22px;margin:-22px}
.mag-body{will-change:transform}
.mag-label{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:space-between;gap:inherit;width:100%;transition:color .3s .22s;will-change:transform}
.fill-hover{position:relative;overflow:hidden;isolation:isolate;--wave:var(--fg);--ink:#0b0b0b}
.mag-fill{position:absolute;inset:-1px;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.mag-fill:before{content:'';position:absolute;inset:0;background:var(--wave);border-radius:50% 50% 0 0/100% 100% 0 0;transform:translateY(102%);transition:transform .8s cubic-bezier(.4,0,0,1),border-radius .8s cubic-bezier(.4,0,0,1)}
.pill.fill-hover{border:1px solid var(--fg)}
.mag-label>.arrow{transition:transform .45s var(--ease)}
/* Rolling label (main.js builds it): the same words twice in a one-line window. */
.roll{display:inline-block;vertical-align:top;height:1.3em;line-height:1.3em;overflow:hidden}
.roll>span{display:block;height:1.3em;white-space:nowrap;transition:transform .8s cubic-bezier(.4,0,0,1)}
.fill-hover .roll>span{color:var(--rest,var(--fg))}
.fill-hover .roll>span+span{color:var(--ink)}
.fill-hover:focus-visible .mag-fill:before{border-radius:0;transform:none}
.fill-hover:focus-visible .mag-label{color:var(--ink)}
.fill-hover:focus-visible .roll>span{transform:translateY(-100%)}
@media(hover:hover){.top-links a:hover .roll>span,.fill-hover:hover .roll>span{transform:translateY(-100%)}
.fill-hover:hover .mag-fill:before{border-radius:0;transform:none}
.fill-hover:hover .mag-label{color:var(--ink)}
.fill-hover:hover .mag-label>.arrow{transform:translateX(4px)}
.fill-hover:hover{animation:pill-swell 1.15s var(--ease)}}
@keyframes pill-swell{0%,50%{scale:1}72%{scale:1.05}100%{scale:1}}

/* Opening: slogan and claim, centred, nothing else. The button sits in the top bar; on phones, where the bar folds into a menu, it appears here. */
.opening{padding-top:clamp(140px,19vh,190px);padding-bottom:56px;text-align:center}
.opening h1{font-size:clamp(40px,6.5vw,118px);font-weight:800;line-height:.94;letter-spacing:-.067em;text-wrap:balance}
.headline-line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.headline-line>span{display:block}
.opening-claim{margin-top:30px;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--soft)}
.opening-actions{display:none}

/* The film: four live designs gliding past in one rounded screen. It grows into place with the first scroll (--grow, main.js). */
.reel-frame{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border-radius:calc(var(--radius) + 28px*(1 - var(--grow,1)));background:var(--card);transform:scale(calc(.88 + .12*var(--grow,1)));transform-origin:50% 100%}
.reel-scene{position:absolute;inset:0;overflow:hidden;visibility:hidden;background:var(--card)}
.reel-scene.is-on{visibility:visible;z-index:2}
.reel-scene.is-leaving{visibility:visible;z-index:3}
.reel-scene iframe,.preview-window iframe{display:block;width:1440px;max-width:none;border:0;transform-origin:0 0;pointer-events:none}
.reel-scene iframe{height:810px}
.preview-window iframe{height:1920px}
/* Under the film: one pill per design, lined up with the film's edges while it grows (--grow). The running pill fills with white from
   the left while its scene plays (--t, main.js) and its label turns dark exactly where the fill has reached; a click picks a design. */
.reel-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;width:calc((.88 + .12*var(--grow,1))*100%);margin:18px auto 0;font-size:13px;color:var(--quiet)}
.reel-tabs{display:flex;flex-wrap:wrap;gap:8px}
.reel-tabs button{position:relative;display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:none;font-size:14px;line-height:1.3;color:var(--quiet);white-space:nowrap;transition:border-color .3s,color .3s}
.reel-tabs b{margin-right:5px;font-weight:600;letter-spacing:.02em;color:var(--fg)}
.tab-fill{position:absolute;inset:-1px;display:flex;align-items:center;padding:0 21px;border-radius:inherit;background:var(--fg);color:#3d3d3d;clip-path:inset(0 calc((1 - var(--t,0))*100%) 0 0 round 999px);opacity:0;transition:opacity .45s;pointer-events:none}
.tab-fill b{color:#0b0b0b}
.reel-tabs button[aria-pressed=true] .tab-fill{opacity:1;transition:none}
.reel-tabs button:hover,.reel-tabs button[aria-pressed=true]{border-color:#ffffff66;color:var(--fg)}
.still .reel-tabs button[aria-pressed=true] .tab-fill{clip-path:none}

/* Every design surface (film and cards) is one big button. Mouse users get the round "Öffnen" pointer instead of the chip. */
.design-surface{position:relative}
.project-launch{position:absolute;inset:0;z-index:3;display:flex;align-items:end;padding:16px;border-radius:inherit;background:linear-gradient(transparent 72%,#0006);color:#fff;text-align:left}
.project-launch:focus-visible{outline-offset:-7px}
.project-launch>span{padding:9px 14px;border:1px solid #ffffff37;border-radius:999px;background:#171717c7;font-size:12px;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
@media(hover:hover) and (pointer:fine){.animated .project-launch{cursor:none;background:none}
.animated .project-launch>span{opacity:0}
.animated .project-launch:focus-visible>span{opacity:1}}

/* Who and what: a small label left, one paragraph right, then the services as stacked cards of which one is open. */
.about{padding-top:clamp(70px,8vw,120px)}
.about-intro{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 22px;margin-bottom:clamp(44px,5vw,76px)}
.about-intro .label{grid-column:1/3;padding-top:.8em}
.about-intro h2{grid-column:3/8;max-width:680px;font-size:clamp(21px,1.75vw,27px);font-weight:400;line-height:1.36;letter-spacing:-.02em}
.service-stack{position:relative;display:grid;gap:10px;align-content:start}
.service{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--fg);color:#0b0b0b;--open:1}
.service h3{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:34px clamp(24px,3.6vw,54px);font-size:clamp(26px,2.7vw,40px);font-weight:500;line-height:1.05;letter-spacing:-.045em}
.service-number{font-size:16px;font-weight:400;letter-spacing:0;opacity:.64}
.service-body{position:relative;z-index:1}
.service-body p{max-width:min(calc(540px + 2*clamp(24px,3.6vw,54px)),64%);padding:0 clamp(24px,3.6vw,54px) 44px;font-size:18px;line-height:1.6;opacity:calc(min(1,var(--open)*1.6)*.84);transform:translateY(calc((1 - var(--open))*16px))}
.service-art{position:absolute;right:0;top:0;width:min(54%,660px);height:100%;pointer-events:none}
.service-art path{vector-effect:non-scaling-stroke}
/* With main.js the cards open along the scroll (--open runs from 0 to 1 per card) and the stack keeps the height of its open state. */
.is-ready{min-height:calc(var(--stack-h,0)*1px)}
.is-ready .service{background:var(--card);color:var(--fg);transition:background .4s var(--ease),color .4s var(--ease)}
.is-ready .service.is-light{background:var(--fg);color:#0b0b0b}
.is-ready .service-body{height:calc(var(--h,0)*var(--open)*1px);overflow:hidden}
/* The graphic is as tall as the open stack and shifted up by the card's own position (--offset), so the slices line up into one pyramid. */
.is-ready .service-art{height:calc(var(--stack-h,0)*1px);transform:translateY(calc(var(--offset,0)*-1px))}

/* The designs: two columns of tall cards, the right one set lower and drifting a little against the scroll (--drift, main.js). */
.work{padding-block:clamp(80px,9vw,140px) clamp(60px,7vw,110px)}
.work-head{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 22px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.work-head h2{grid-column:1/5;font-size:clamp(38px,5vw,78px);font-weight:800;line-height:.96}
.work-head p{grid-column:5/8;justify-self:end;max-width:330px;font-size:15px;line-height:1.6;color:var(--quiet)}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,7.5vw,120px);align-items:start}
.work-col{display:grid;gap:clamp(44px,6vw,90px)}
.work-col+.work-col{padding-top:clamp(60px,9.4vw,150px);transform:translateY(calc(var(--drift,0)*1px))}
.project-card{min-width:0}
.project-visual{aspect-ratio:3/4;overflow:hidden;isolation:isolate;border-radius:var(--radius);background:var(--card)}
.preview-window{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:transform 1.3s var(--ease)}
.arrive.waiting .preview-window{transform:scale(1.1)}
.project-label{display:flex;align-items:baseline;gap:12px;padding-top:16px}
.project-label h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
.project-label p{font-size:15px;color:var(--quiet)}

/* Three steps as tiles, each led by a large numeral that rises in with its tile. */
.process{padding-block:clamp(40px,5vw,80px) clamp(70px,8vw,120px)}
.process-head{margin-bottom:clamp(36px,4vw,60px)}
.process-head .label{margin-bottom:20px}
.process-head h2{font-size:clamp(38px,5vw,78px);font-weight:800;line-height:.96}
.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.journey-stop{padding:30px 30px 36px;border-radius:var(--radius);background:var(--card)}
.journey-stop>span{display:block;margin-bottom:clamp(36px,4.4vw,72px);font-size:clamp(54px,5.2vw,88px);font-weight:800;line-height:.86;letter-spacing:-.06em;transition:transform 1.1s var(--ease) .2s,opacity .7s .2s}
.journey-stop.waiting>span{transform:translateY(34%);opacity:0}
.journey-stop h3{min-height:2.24em;margin-bottom:14px;font-size:24px;font-weight:500;line-height:1.12;letter-spacing:-.04em}
.journey-stop p{font-size:16px;line-height:1.65;color:var(--quiet)}

/* Native disclosure controls keep common questions usable with keyboard and without JavaScript. */
.faq{display:grid;grid-template-columns:2fr 3fr;gap:clamp(28px,4vw,64px);align-items:start;padding-block:clamp(24px,3vw,48px) clamp(40px,5vw,80px)}
.faq h2{font-size:clamp(38px,5vw,78px);font-weight:800;line-height:.96}
.faq-list{display:grid;gap:10px;min-width:0}
.faq details{border-radius:var(--radius);background:var(--card)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;padding:24px;list-style:none;cursor:pointer;font-size:18px;line-height:1.35;font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:var(--radius)}
.faq-toggle{position:relative;flex:none;width:20px;height:20px}
.faq-toggle:before,.faq-toggle:after{content:"";position:absolute;background:currentColor;top:9px;left:3px;width:14px;height:2px}
.faq-toggle:after{transform:rotate(90deg)}
.faq details[open] .faq-toggle:after{display:none}
.faq-answer{padding:0 24px 26px;color:var(--soft);font-size:17px;line-height:1.65}
@media(max-width:800px){.faq{grid-template-columns:minmax(0,1fr)}.faq summary{padding:22px;font-size:17px}.faq-answer{padding:0 22px 24px}}

/* Light closing panel that arrives with a round edge (--cap, main.js); the contact parts, pills included, are in contact.css. */
.invitation{position:relative;margin-top:17vh;padding-block:56px 44px;background:var(--fg);color:#0b0b0b;overflow-x:clip}
.closing-cap{position:absolute;left:-4%;bottom:calc(100% - 1px);width:108%;height:calc(17vh*var(--cap,0));background:var(--fg);border-radius:50% 50% 0 0/100% 100% 0 0}
.invitation h2{margin:0 0 clamp(20px,2.2vw,34px);font-size:clamp(48px,8vw,144px);font-weight:800;line-height:.93;letter-spacing:-.075em}
.invitation .dot{color:inherit}
.invitation ::selection{background:#0b0b0b;color:var(--fg)}
.ending{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:26px max(var(--wide),calc(50% - 900px + var(--wide))) 34px;border-top:1px solid #0b0b0b26;background:var(--fg);color:#4a4a4a;font-size:13px}
.ending>div{display:flex;flex-wrap:wrap;gap:26px}
.ending button{padding:0;background:none;color:inherit;font:inherit}
.ending a:hover,.ending button:hover{color:#000}

/* The dialog with the interactive design. */
dialog{border:1px solid #ffffff32;background:#161616;color:var(--fg);padding:25px;border-radius:var(--radius);max-height:calc(100dvh - 30px);box-shadow:0 30px 100px #0008}
dialog::backdrop{background:#000b;backdrop-filter:blur(14px)}
body.locked{overflow:hidden}
.project-modal{width:min(1440px,calc(100% - 36px));overflow:hidden}
.modal-heading{display:flex;justify-content:space-between;gap:25px;align-items:center}
.modal-heading h2{font-size:31px;font-weight:500;margin-top:9px}
.modal-heading .eyebrow{font-size:12px}
.dismiss{padding:11px 20px;border:1px solid #ffffff40;border-radius:999px;background:transparent;font-size:14px}
.dismiss:hover{background:#fff;color:#111}
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:22px 0 17px}
.view-controls{display:flex;padding:3px;border:1px solid #ffffff30;border-radius:999px;gap:3px}
.view-controls button{padding:8px 20px;background:none;border-radius:999px;color:var(--quiet);font-size:13px}
.view-controls button[aria-pressed=true]{background:#eee;color:#111}
.preview-toolbar>a{display:flex;align-items:center;gap:12px;font-size:13px}
.preview-toolbar>a:hover>.arrow{transform:translateX(4px)}
.preview-toolbar .arrow{width:18px;height:18px}
.device-surround{position:relative;height:calc(100dvh - 230px);max-height:800px;min-height:260px;display:flex;justify-content:center;background:#0a0a0a;border:1px solid #ffffff20;border-radius:10px;padding:0;overflow:hidden}
.live-demo{position:absolute;top:0;width:100%;height:100%;border:0;transform-origin:top left;background:#151616}

/* Motion: greeting curtain, trailing pointer, rising words, arriving blocks. "Bewegung pausieren" and reduced motion switch all of it off. */
.curtain{display:none;position:fixed;inset:0;z-index:90;place-items:center;background:#141414;will-change:transform}
.curtain-on .curtain{display:grid;animation:curtain-failsafe .01s 8s forwards}
.curtain-word{display:flex;align-items:center;gap:16px;font-size:clamp(34px,4.2vw,58px);font-weight:500;letter-spacing:-.04em;animation:content-enter .5s var(--ease) both}
.curtain-word i{width:11px;height:11px;border-radius:50%;background:var(--accent)}
.curtain-curve{position:absolute;top:calc(100% - 1px);left:-25%;width:150%;height:24vh;background:#141414;border-radius:0 0 50% 50%/0 0 100% 100%;transform-origin:50% 0}
@keyframes curtain-failsafe{to{visibility:hidden}}
/* The pointer is a white disc blended as "difference": whatever lies under it shows through in inverted colours, like a lens.
   The arrow is black inside the disc, so it shows the page as it is. The blend has to sit on the fixed element itself. */
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;opacity:0;mix-blend-mode:difference;transition:opacity .3s;will-change:transform}
.cursor.live{opacity:1}
.cursor span{display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#fff;color:#000;transform:scale(.105);transition:transform .45s var(--ease)}
.cursor svg{width:30px;height:30px;opacity:0;transform:translate(-7px,7px);transition:opacity .25s,transform .45s var(--ease)}
.cursor.on span{transform:scale(1)}
.cursor.on svg{opacity:1;transform:none}
.cursor.quiet span{transform:scale(0)}
.rise .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .05em .14em;margin:-.1em -.05em -.14em}
.rise .w>span{display:inline-block;transition:transform .9s var(--ease);transition-delay:calc(min(var(--i),14)*26ms)}
.animated .rise:not(.in) .w>span{transform:translateY(118%)}
.arrive{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.arrive.waiting{opacity:0;transform:translateY(48px)}
.work-col+.work-col .arrive{transition-delay:.12s}
.journey-stop:nth-child(2){transition-delay:.08s}
.journey-stop:nth-child(3){transition-delay:.16s}
.animated .headline-line>span{animation:headline-enter 1.1s var(--ease) both}
.animated .headline-line:nth-child(2)>span{animation-delay:.12s}
.animated .opening-claim,.animated .opening-actions{animation:content-enter .9s var(--ease) .35s both}
.animated .reel{animation:content-enter 1.1s var(--ease) .5s both}
@keyframes headline-enter{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes content-enter{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
.still{scroll-behavior:auto}
.still *,.still *:before,.still *:after{animation:none!important;transition:none!important}
.still .waiting{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.arrive.waiting{opacity:1;transform:none}}

@media(max-width:1100px){:root{--inner:var(--wide)}}
@media(max-width:960px){.reel-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.reel-tabs button{justify-content:center;padding:0 4px}
.reel-tabs b{margin-right:0}
.reel-tabs .tab-label span{display:none}
.tab-fill{justify-content:center;padding:0 5px}}
@media(max-width:800px){:root{--wide:var(--gutter);--inner:var(--gutter)}
.masthead{top:16px;left:var(--gutter);right:auto;width:238px;border:1px solid #ffffff26;border-radius:14px;background:#202020ab;box-shadow:inset 0 1px #ffffff16,0 12px 40px #0003;backdrop-filter:blur(28px) saturate(120%);-webkit-backdrop-filter:blur(28px) saturate(120%)}
.masthead.scrolled{background:#202020ab}
.masthead.away{transform:translateY(calc(-100% - 40px))}
.nav-shell{gap:15px;padding:10px 14px}
.wordmark{font-size:19px;padding-block:5px}
.top-links,.top-cta{display:none}
.nav-trigger{display:flex;align-items:center;gap:12px;min-height:44px;padding:0;background:none;font-size:12px}
.small-nav{display:block;padding:4px 14px 12px}
.opening{padding-top:128px;padding-bottom:40px}
.opening-actions{display:flex;justify-content:center;margin-top:28px}
.about-intro,.work-head{grid-template-columns:minmax(0,1fr)}
.about-intro .label,.about-intro h2,.work-head h2,.work-head p{grid-column:auto}
.about-intro .label{padding-top:0;margin-bottom:16px}
.work-head p{justify-self:start;max-width:none;margin-top:18px}
.journey{grid-template-columns:minmax(0,1fr)}
.journey-stop>span{margin-bottom:24px}
.journey-stop h3{min-height:0}
.ending{display:block}
.ending>div{margin-top:8px;gap:0 20px}
.ending>div>a,.ending>div>button{display:inline-flex;align-items:center;min-height:44px}}
@media(max-width:600px){:root{--radius:14px;scroll-padding-top:105px}
.opening h1{font-size:12.4vw;line-height:.98;letter-spacing:-.065em}
.headline-line{overflow:visible}
.opening-claim{text-wrap:balance}
.opening-claim br{display:none}
.reel-frame{aspect-ratio:4/3}
.reel-scene iframe,.preview-window iframe{width:1100px}
.reel-bar{margin-top:14px}
.reel-tabs{gap:6px}
.reel-tabs button{font-size:12px}
.service h3{padding-block:26px}
.service-body p{padding-bottom:32px;font-size:17px}
.service-body p{max-width:none}
.service-art{width:86%;opacity:.5}
.work-grid{grid-template-columns:minmax(0,1fr);gap:44px}
.work-col+.work-col{padding-top:0;transform:none}
.project-visual{aspect-ratio:4/5}
.journey-stop{padding:24px 22px 28px}
.invitation{margin-top:9vh;padding-block:42px 34px}
.closing-cap{height:calc(9vh*var(--cap,0))}
.invitation h2{margin-bottom:20px;font-size:13.4vw}
.project-modal{width:calc(100% - 16px);padding:15px;max-height:calc(100dvh - 16px)}
.modal-heading{gap:16px}
.modal-heading .eyebrow{line-height:1.4}
.modal-heading h2{font-size:26px}
.dismiss{min-height:44px;padding:9px 16px;font-size:13px}
.preview-toolbar{margin:17px 0 13px}
.view-controls button{min-height:40px;padding:7px 13px;font-size:12px}
.preview-toolbar>a{gap:5px;font-size:11px}
.preview-toolbar .arrow{width:15px;height:15px}
.device-surround{height:calc(100dvh - 198px);min-height:220px}}