/* Orifacta — site styles
   Concept: one idea, many states. A single variable family (Archivo, width 62–125%)
   carries the identity; the logo spectrum is the only colour accent. */

@font-face{font-family:Archivo;src:url(/assets/fonts/archivo.woff2) format('woff2-variations'),url(/assets/fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(/assets/fonts/instrument-serif-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --alloy:#e3e5e8;--alloy-2:#d6d9de;--bright:#f6f7f8;
  --ink:#15171b;--ink-2:#4a4f58;--ink-3:#5c626b;
  --deep:#0f131b;--deep-2:#161b25;--deep-3:#1e2430;--on-deep:#e9ebef;--on-deep-2:#a3aab6;
  --line:rgba(21,23,27,.14);--line-strong:rgba(21,23,27,.3);--line-deep:rgba(233,235,239,.14);
  --orange:#fe7a2c;--rose:#f72a62;--magenta:#d6129f;--violet:#8a14c4;--blue:#2a56f8;--cyan:#0abcfc;
  --spectrum:linear-gradient(90deg,var(--orange),var(--rose) 20%,var(--magenta) 40%,var(--violet) 60%,var(--blue) 80%,var(--cyan));
  /* The same hues, deep enough to read as type on the alloy ground. */
  --spectrum-ink:linear-gradient(100deg,#d9480f,#d61449 30%,#b00c86 58%,#6d10b0 82%,#2c45d8);
  --gutter:clamp(20px,5vw,84px);--gap:clamp(16px,1.8vw,28px);
  --section:clamp(112px,13vw,208px);
  --ease:cubic-bezier(.2,.75,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --header:76px;
  /* One radius for media panels, one for fields and chips, one width for every expanded/active state. */
  --radius:12px;--radius-sm:8px;--wide:116%;
  --h3:clamp(22px,1.8vw,30px);
  /* Mockup lift: a tight contact shadow plus a short ambient one. Single large blurs
     cost hundreds of milliseconds of GPU raster on every tile they touch. */
  --lift-dark:0 .8cqw 1.6cqw rgba(0,0,0,.26),0 4cqw 5cqw -1.5cqw rgba(0,0,0,.42);
  --lift-warm:0 .8cqw 1.6cqw rgba(73,42,16,.14),0 4cqw 5cqw -1.5cqw rgba(73,42,16,.3);
  interpolate-size:allow-keywords;
}

/* The page ribbon runs in the outer margin; keep copy clear of it from tablet up. */
@media (min-width:601px){:root{--gutter:clamp(56px,5vw,84px)}}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--header) + 24px)}
html:not(.lenis){scroll-behavior:smooth}
body{margin:0;background:var(--alloy) url(/assets/grain.webp) 0 0/180px 180px;color:var(--ink);font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-size:clamp(16px,.35vw + 14.6px,18px);line-height:1.55;font-stretch:100%;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3,h4{font-weight:inherit;font-size:inherit}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img,svg,canvas{display:block;max-width:100%}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--bright)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.icon{width:1em;height:1em;flex:none}
.gutter{padding-left:var(--gutter);padding-right:var(--gutter)}
.skip-link{position:fixed;left:16px;top:12px;z-index:100;background:var(--ink);color:var(--bright);padding:12px 18px;border-radius:999px;transform:translateY(-200%);transition:transform .3s var(--ease)}
.skip-link:focus{transform:none}
body.modal-open{overflow:hidden}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* Buttons and links */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:52px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:600;font-stretch:104%;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;isolation:isolate;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.button-ink{background:var(--ink);color:var(--bright)}
.button-ink:hover{background:#2a2e36}
.button-line{border:1px solid var(--line-strong);color:var(--ink)}
.button-line:hover{background:var(--ink);border-color:var(--ink);color:var(--bright)}
.roll{display:inline-grid;overflow:hidden;line-height:1.25}
.roll>span{grid-area:1/1;transition:transform .32s var(--ease-out)}
.roll>span+span{transform:translateY(105%)}
.text-link{display:inline-block;font-weight:600;font-stretch:104%;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease-out)}
.text-link:hover{background:var(--spectrum) 0 100%/100% 2px no-repeat}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:30;height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 var(--gutter);color:var(--ink);transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .5s var(--ease-out)}
.site-header::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(227,229,232,.72);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);opacity:0;transition:opacity .4s var(--ease),background-color .4s var(--ease)}
.site-header.is-scrolled::before{opacity:1}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--line)}
.site-header.on-deep{color:var(--on-deep)}
.site-header.on-deep::before{background:rgba(15,19,27,.66)}
.site-header.on-deep.is-scrolled{box-shadow:0 1px 0 var(--line-deep)}
.site-header.on-deep .button-ink{background:var(--on-deep);color:var(--ink)}
.site-header.on-deep .button-ink:hover{background:#fff}
.site-header.is-hidden{transform:translateY(-100%)}
/* The logo lockup keeps the source proportions; the wordmark takes the header colour, so it
   inverts over dark sections while the mark keeps its own colours. */
.brand{justify-self:start;display:block;line-height:0;border-radius:6px}
.brand-lockup{display:block;height:40px;width:auto;aspect-ratio:1232/489;overflow:visible}
.desktop-nav{display:flex;gap:clamp(20px,2.6vw,40px);font-size:15px;font-weight:500}
.desktop-nav a{position:relative;padding:6px 0}
.desktop-nav a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.desktop-nav a[aria-current="true"]::after{transform:scaleX(1);transform-origin:left}
.nav-cta{justify-self:end;height:44px;padding:0 20px;font-size:14px}
.menu-toggle{display:none;justify-self:end;width:44px;height:44px;border-radius:50%;position:relative}
.menu-toggle span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .45s var(--ease-out)}
.menu-toggle span:first-child{top:18px}.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:25;background:var(--alloy);padding:calc(var(--header) + 32px) var(--gutter) 32px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.mobile-menu a{font-size:clamp(40px,12vw,64px);font-stretch:78%;font-weight:560;letter-spacing:-.018em;line-height:1.08;padding:4px 0;transition:font-stretch .5s var(--ease-out)}
.mobile-menu a:active{font-stretch:110%}
.mobile-menu .button{margin-top:auto;height:60px;font-size:17px}

/* Sculpture and page ribbon */
.opening{position:relative;isolation:isolate}
.hero-waves{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:1;pointer-events:none;opacity:0}
.no-motion .hero-waves{position:absolute;height:100svh}
.scroll-thread{position:fixed;inset:0;pointer-events:none;z-index:7;overflow:hidden;opacity:0;contain:strict}
.scroll-thread .thread-stroke{stroke-width:17;stroke-linecap:butt;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scroll-thread .thread-under{stroke-width:18;opacity:.75}
.scroll-thread .thread-highlight{stroke-width:1;opacity:.8}
#thread-tip{display:none}
.page-ribbon-canvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:7;pointer-events:none;opacity:0;contain:strict}
.ribbon-ready #scroll-thread{visibility:hidden}

/* Ruled lists: each hairline is a scalable rule, so lists can draw their lines in
   before their rows settle. --draw stays 1 without motion. */
.rules{--rule:var(--line);position:relative}
.deep .rules{--rule:var(--line-deep)}
.rules>*{position:relative}
.rules>*::before,.rules::after{content:'';position:absolute;left:0;right:0;height:1px;background:var(--rule);transform:scaleX(var(--draw,1));transform-origin:left;pointer-events:none}
.rules>*::before{top:0}
.rules::after{bottom:0}

/* Shared section rhythm */
/* One sub-heading tier for cards, stages, rows and demos. */
.project-name,.process-step h3,.price-row h3,.project-shots h3{font-size:var(--h3);font-weight:600;font-stretch:100%;letter-spacing:-.02em;line-height:1.1}
.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:24px;align-items:end;margin-bottom:clamp(56px,7vw,112px)}
.section-head h2{grid-column:1/span 8}
.section-head p{grid-column:9/-1;max-width:38ch;color:var(--ink-2);font-size:17px;padding-bottom:.4em}
.deep .section-head p{color:var(--on-deep-2)}
/* Condensed display cuts keep their dense letter texture but need wider word spaces,
   or adjacent words read as one. */
h2{font-size:clamp(42px,5.6vw,92px);line-height:.96;font-weight:560;font-stretch:80%;letter-spacing:-.029em;word-spacing:.09em;text-wrap:balance}
/* Line masks extend below tight display leading so descenders are not cut off. */
.mline-mask{padding-bottom:.16em;margin-bottom:-.16em}
.deep{position:relative;z-index:3;background:var(--deep);color:var(--on-deep)}
.deep :focus-visible{outline-color:var(--on-deep)}

/* Hero */
.hero{position:relative;z-index:2;min-height:100svh;display:grid;grid-template-rows:1fr auto auto;padding-top:calc(var(--header) + 24px);padding-bottom:28px}
.hero-title{align-self:center;display:flex;flex-direction:column;font-size:clamp(76px,12.6vw,224px);line-height:.84;letter-spacing:-.045em;margin:clamp(24px,4vh,56px) 0 clamp(32px,5vh,64px)}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.hero-title .line>span{display:inline-block;will-change:transform}
.line-idea>span{font-stretch:62%;font-weight:260}
.line-real>span{font-stretch:125%;font-weight:740;letter-spacing:-.05em}
.hero-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;align-items:end;margin-bottom:clamp(36px,6vh,72px)}
.hero-lede{position:relative;grid-column:1/span 5;max-width:40ch;font-size:clamp(17px,.5vw + 14px,20px);line-height:1.5;color:var(--ink-2)}
/* The lede sits over the strands; a soft cloud of the ground colour keeps it legible without a panel. */
.hero-lede::before{content:'';position:absolute;inset:-40px -56px;z-index:-1;background:radial-gradient(closest-side,rgba(227,229,232,.9) 55%,rgba(227,229,232,0));pointer-events:none}
.hero-actions{position:relative;grid-column:7/-1;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
.hero-actions::before{content:'';position:absolute;inset:-32px -12px -28px -48px;z-index:-1;background:radial-gradient(farthest-side,rgba(227,229,232,.92) 42%,rgba(227,229,232,0));pointer-events:none}
.hero-rail{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.discipline-list{display:flex;flex-wrap:wrap;gap:6px 28px}
/* Device story. By default (no script, paused or reduced motion) three plain sections with still
   images; with motion the stage pins and the hero's strands draw the devices behind the copy. */
.device-story{position:relative;z-index:2}
.device-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding:var(--section) var(--gutter) 0}
.device-still{grid-column:1/span 5;grid-row:1/span 2;width:100%;max-width:360px;height:auto;justify-self:center}
.device-laptop .device-still{grid-column:7/-1;max-width:640px}
.scene-title{grid-column:7/-1;margin:0;font-size:clamp(44px,6.4vw,112px);font-weight:720;font-stretch:112%;line-height:1.02;letter-spacing:-.035em;align-self:end}
.device-laptop .scene-title,.device-laptop .scene-body{grid-column:1/span 6}
.device-laptop .scene-title{font-size:clamp(40px,4.6vw,84px)}
.scene-title .line{display:block;overflow:hidden;padding:0 .06em .1em 0;margin-bottom:-.1em}
.scene-title .line>span{display:inline-block;background:var(--spectrum-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.scene-body{grid-column:7/span 5;margin:20px 0 0;max-width:40ch;line-height:1.45;color:var(--ink);font-size:clamp(17px,.5vw + 14px,20px);text-wrap:pretty;align-self:start}
.story .device-story{height:440vh;height:440svh}
.story .device-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story .device-copy{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
.story .device-still{display:none}
.story .scene-title{position:absolute;white-space:nowrap}
.story .scene-title .line>span{transform:translateY(115%)}
.story .scene-body{position:absolute;margin:0;max-width:none;opacity:0}
.story .device-stage.is-stacked .device-copy{inset:var(--stack-top) var(--gutter) auto}
.story .device-stage.is-stacked .device-laptop{top:var(--stack-top-laptop,var(--stack-top))}
.story .device-stage.is-stacked .scene-title{position:static;font-size:clamp(32px,9.4vw,52px)}
.story .device-stage.is-stacked .scene-body{position:static;margin-top:14px;font-size:16px;max-width:36ch}
.scene-body>p{margin:0}
/* The part's points: each lights, dot and line, as the device shows it. Without motion all stand lit. */
.scene-points{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.55em;font-size:max(14px,.7em);font-weight:540;line-height:1.3;color:var(--ink)}
.scene-points li{display:flex;align-items:center;gap:.75em}
.scene-points li::before{content:'';flex:none;width:.62em;height:.62em;border-radius:50%;background:var(--spectrum-ink)}
.scene-link{margin-top:1.3em;font:inherit;font-size:max(14px,.7em);font-weight:600;font-stretch:104%;color:var(--ink);border:0;padding:0 0 4px;cursor:pointer}
.story .scene-points li{color:var(--ink-3);transition:color .5s var(--ease)}
.story .scene-points li::before{opacity:.35;transform:scale(.5);transition:transform .6s var(--ease-out),opacity .4s var(--ease)}
.story .scene-points li.is-lit{color:var(--ink)}
.story .scene-points li.is-lit::before{opacity:1;transform:none}
.story .scene-body.is-shown .scene-link{pointer-events:auto}
/* Story furniture, only while the stage pins. */
.story-progress,.scene-bridge,.device-floor{display:none}
.story .story-progress{display:flex;position:absolute;left:var(--gutter);bottom:clamp(20px,4.5vh,44px);z-index:3;align-items:center;gap:12px;font-size:14px;color:var(--ink-2);opacity:0;pointer-events:none}
.story-count b{font-weight:650;color:var(--ink)}
.story-name{font-weight:600;color:var(--ink)}
.story-bar{display:flex;gap:6px;margin-left:8px}
.story-bar i{position:relative;width:44px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.story-bar i::after{content:'';position:absolute;inset:0;background:var(--spectrum);transform-origin:left;transform:scaleX(var(--p,0))}
.story .scene-bridge{display:block;position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(72px,14vh,150px);margin:0;text-align:center;font-size:clamp(30px,3.4vw,60px);font-weight:720;font-stretch:112%;letter-spacing:-.035em;line-height:1.02;white-space:nowrap;pointer-events:none}
.scene-bridge .line{display:inline-block;overflow:hidden;padding:0 .06em .1em 0;margin-bottom:-.1em;vertical-align:bottom}
.scene-bridge .line>span{display:inline-block;transform:translateY(115%)}
.scene-bridge .line+.line>span{background:var(--spectrum-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.story .device-floor{display:block;position:absolute;pointer-events:none;opacity:var(--floor,0);background:radial-gradient(closest-side,rgba(138,20,196,.26),rgba(42,86,248,.12) 55%,rgba(10,188,252,0));mix-blend-mode:multiply}
.story .device-stage.is-stacked .scene-bridge{top:var(--stack-top);bottom:auto;text-align:left;white-space:normal;font-size:clamp(30px,8.6vw,46px)}
.story .device-stage.is-stacked .story-progress{bottom:16px}
.story .device-stage.is-stacked .story-count,.story .device-stage.is-stacked .story-name{display:none}
.story .device-stage.is-stacked .scene-points,.story .device-stage.is-stacked .scene-link{font-size:15px}
.scroll-cue{display:inline-flex;align-items:center;gap:14px;font-weight:500;color:var(--ink)}
.scroll-cue i{width:48px;height:1px;background:var(--line-strong);position:relative;overflow:hidden}
.scroll-cue i::after{content:'';position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(101%)}}

.intro-pending .hero-title .line>span{transform:translateY(125%)}
.intro-pending .hero-foot>*,.intro-pending .hero-rail,.intro-pending .site-header{opacity:0}

/* Intro */
.intro{position:relative;z-index:2;min-height:100svh;display:grid;align-items:center;padding-block:var(--section)}
.intro-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.statement{grid-column:7/-1;font-size:clamp(30px,3.3vw,54px);line-height:1.08;font-weight:470;font-stretch:90%;letter-spacing:-.022em;text-wrap:pretty}
.intro-body{grid-column:7/span 5;display:grid;gap:18px;margin-top:clamp(32px,4vw,56px);color:var(--ink-2);max-width:46ch}
.intro-body .text-link{color:var(--ink);justify-self:start;margin-top:12px}
/* The mark beside the intro. With motion the hero strands draw it; this drawing stands in when they cannot. */
.intro-mark{position:absolute;display:none;pointer-events:none;overflow:visible}
.no-motion .intro-mark.is-placed,html:not(.story) .intro-mark.is-placed{display:block}

/* Services */
.services{padding-block:var(--section)}
.services-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.service-list{grid-column:1/span 7}
.service-item h3{margin:0}
.service-item button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(18px,2vw,28px) 0;text-align:left}
.service-name{font-size:clamp(30px,3.5vw,58px);line-height:1;font-weight:500;font-stretch:78%;letter-spacing:-.027em;word-spacing:.06em;color:var(--on-deep-2);transition:font-stretch .5s var(--ease-out),color .3s var(--ease)}
.service-item button:hover .service-name{color:var(--on-deep)}
.service-item.is-open .service-name{font-stretch:var(--wide);color:var(--on-deep)}
.expand-icon{position:relative;width:18px;height:18px;flex:none}
.expand-icon::before,.expand-icon::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .5s var(--ease-out)}
.expand-icon::after{transform:rotate(90deg)}
.is-open .expand-icon::after{transform:rotate(0)}
.service-panel{padding:0 0 clamp(24px,2.6vw,36px);max-width:52ch}
.service-panel p{color:var(--on-deep-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags li{font-size:13px;line-height:1;padding:9px 12px;border:1px solid var(--line-deep);border-radius:var(--radius-sm);color:var(--on-deep)}
.service-preview{grid-column:8/-1;justify-self:end;width:100%;max-width:560px;padding-left:clamp(0px,2.4vw,40px);position:sticky;top:calc(var(--header) + 32px)}
.service-art{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;container-type:size;background:radial-gradient(120% 90% at 30% 0%,#252c3a 0%,var(--deep-2) 55%,#11151d 100%);box-shadow:inset 0 0 0 1px var(--line-deep)}
.preview-caption{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:14px;color:var(--on-deep-2)}
#preview-number{font-variant-numeric:tabular-nums;color:var(--on-deep)}
/* Inactive scenes become invisible after their fade so they are never painted. */
.art-scene{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;clip-path:inset(7% 5% 7% 5% round 12px);transition:opacity .45s var(--ease),visibility 0s .45s,clip-path 0s .45s;pointer-events:none}
.service-art[data-mode="web"] .scene-web,.service-art[data-mode="app"] .scene-app,.service-art[data-mode="mobile"] .scene-mobile,.service-art[data-mode="software"] .scene-software,.service-art[data-mode="automation"] .scene-automation{opacity:1;visibility:visible;clip-path:inset(0 0 0 0 round 0);transition:opacity .45s var(--ease),clip-path 1.2s cubic-bezier(.65,0,.25,1)}

/* Preview pictures. Each scene opens from a tighter crop, the gesture of the work cards, and
   its picture settles from a closer zoom, then drifts closer for as long as it is shown. The
   rest scale leaves room for the pointer parallax (translate), so the frame never shows an
   edge. A scene snaps back to its tight crop only after it has faded out. */
.art-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;scale:1.12;translate:calc(var(--px,0) * -1.6%) calc(var(--py,0) * -1.6%);transition:scale 0s .45s,translate .9s var(--ease-out)}
.service-art[data-mode="web"] .scene-web img,
.service-art[data-mode="app"] .scene-app img,
.service-art[data-mode="mobile"] .scene-mobile img,
.service-art[data-mode="software"] .scene-software img,
.service-art[data-mode="automation"] .scene-automation img{scale:1.045;transition:scale 1.6s cubic-bezier(.45,0,.2,1),translate .9s var(--ease-out);animation:art-drift 12s var(--ease) .6s both}
@keyframes art-drift{from{transform:scale(1)}to{transform:scale(1.05)}}
.motion-paused .art-scene,.motion-paused .art-scene img{transition:none!important;clip-path:none;scale:1;translate:none}
.scene-app img{object-position:48% 50%}
.phone-island{position:absolute;top:2.2cqw;left:50%;width:13cqw;height:3.2cqw;margin-left:-6.5cqw;border-radius:2cqw;background:#07090c;z-index:1}

/* Work */
.work{position:relative;padding-block:var(--section)}
.work-note{margin-top:clamp(20px,2.5vw,32px);font-size:14px;line-height:1.5;color:var(--ink-2);max-width:80ch}
.project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(64px,7vw,112px);align-items:start}
.project-card{display:block;width:100%;text-align:left;color:inherit}
.project-architecture,.project-ada{grid-column:1/-1}
.project-ada .forma-visual{background:#fff}
.project-ada .forma-visual img{object-position:top}
.project-tempo{grid-column:1/span 5}
.project-relay{grid-column:6/-1;margin-top:clamp(0px,9vw,160px)}
.project-visual{position:relative;display:block;overflow:hidden;border-radius:var(--radius);isolation:isolate;transform:translateZ(0)}
.forma-visual{aspect-ratio:16/8.2;background:#1a3324}
.tempo-visual{aspect-ratio:4/5;background:#16386e}
.relay-visual{aspect-ratio:7/6.25;background:#16325c}
.project-info{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:24px;row-gap:4px;padding-top:20px}
.project-name{transition:font-stretch .45s var(--ease-out)}
.project-line{color:var(--ink-2)}
.project-kind{font-size:14px;color:var(--ink-3);text-align:right}
.project-card:focus-visible{outline:none}
.project-card:focus-visible .project-visual{outline:2px solid var(--ink);outline-offset:6px}

.forma-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.01);transition:transform 1.6s var(--ease-out)}

.tempo-visual{container-type:inline-size;background:radial-gradient(90% 80% at 78% 0%,#2a62b0 0%,#16386e 55%,#102848 100%)}
.tempo-phone{position:absolute;left:50%;top:8cqw;width:48cqw;margin-left:-24cqw;border-radius:15% / 7.5%;border:1.7cqw solid #12151c;background:#fff;padding:0 0 6%;overflow:hidden;box-shadow:0 18px 40px rgba(8,16,32,.28);transform:rotate(5deg);transition:transform 1.2s var(--ease-out)}
.tempo-phone img{position:relative;display:block;width:100%;height:auto}
.tempo-phone .phone-island{z-index:1;background:#12151c;width:29%;margin-left:-14.5%;top:2.4%;height:2%;border-radius:2cqw}

.relay-visual{container-type:inline-size;background:radial-gradient(90% 80% at 85% 8%,#24528f 0%,#16325c 58%,#101c30 100%)}
.relay-shot{position:absolute;left:7cqw;top:9cqw;width:108cqw;height:86cqw;object-fit:cover;object-position:left top;border-radius:1.6cqw;box-shadow:var(--lift-dark);transition:transform 1.2s var(--ease-out)}

/* Process */
.approach{padding-block:var(--section)}
.process-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.process-line{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.process-line i{position:absolute;inset:0;background:var(--spectrum);transform-origin:left;transform:scaleX(0)}
.no-motion .process-line i{transform:none}
.process-step{display:flex;flex-direction:column;padding-top:clamp(28px,3vw,44px);padding-right:clamp(0px,2vw,32px)}
.process-num{font-size:clamp(64px,7vw,124px);line-height:.85;font-weight:280;font-stretch:62%;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:clamp(28px,3vw,48px)}
.process-step h3{margin-bottom:14px}
.process-step p{color:var(--ink-2);max-width:32ch}
.process-output{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;font-weight:550;display:flex;align-items:center;gap:10px}
.process-output::before,.price-time::before{content:'';width:8px;height:8px;border-radius:50%;flex:none;background:var(--c,var(--orange))}
.process-step:nth-child(3) .process-output{--c:var(--rose)}
.process-step:nth-child(4) .process-output{--c:var(--violet)}
.process-step:nth-child(5) .process-output{--c:var(--blue)}

/* Pricing: one ruled row per service; the price is the loudest thing in each row. */
.pricing{padding-block:0 var(--section)}
.price-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:6px;align-items:baseline;padding:clamp(22px,2.2vw,32px) 0}
.price-row h3{grid-column:1/span 3}
.price-from{grid-column:4/span 3;color:var(--ink-2);font-size:15px}
.price-from b{margin-left:6px;color:var(--ink);font-size:clamp(28px,2.6vw,44px);font-weight:560;font-stretch:80%;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.price-from s{margin-left:10px;color:var(--ink-3);font-size:17px;text-decoration-thickness:1px}
.price-deal{display:block;margin-top:4px;font-size:13px;font-weight:550;color:#c4123f}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.price-time{grid-column:7/span 2;font-size:15px;font-weight:550;display:flex;align-items:center;gap:10px}
.price-row:nth-child(2) .price-time{--c:var(--rose)}
.price-row:nth-child(3) .price-time{--c:var(--magenta)}
.price-row:nth-child(4) .price-time{--c:var(--violet)}
.price-row:nth-child(5) .price-time{--c:var(--blue)}
.price-note{grid-column:9/-1;color:var(--ink-2);font-size:16px;max-width:40ch}
.price-foot{margin-top:clamp(28px,3vw,44px);color:var(--ink-2);max-width:60ch}
.price-foot .text-link{color:var(--ink)}

/* Studio */
.studio{padding-block:var(--section)}
.studio-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:72px;align-items:center}
.studio-copy{grid-column:1/span 6}
.studio-lead{margin-top:clamp(28px,3vw,44px);font-size:clamp(18px,.6vw + 14px,22px);line-height:1.5;color:var(--on-deep-2);max-width:42ch}
.studio-values{margin-top:clamp(48px,5vw,80px)}
.studio-values>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;padding:24px 0}
.studio-values h3{font-size:19px;font-weight:600;letter-spacing:-.01em}
.studio-values p{color:var(--on-deep-2);font-size:16px}
.studio-poster{grid-column:8/-1}
.poster-art{aspect-ratio:4/5;border-radius:var(--radius);background:radial-gradient(110% 80% at 20% 0%,#1d2431 0%,#0b0e14 70%);box-shadow:inset 0 0 0 1px var(--line-deep);display:flex;flex-direction:column;justify-content:center;padding:6% 7%;overflow:hidden;container-type:inline-size}
/* The logo spectrum, one row per stage, sized so the widest state of the eight-letter name still clears the frame. Weight follows width, as in the hero's
   light-condensed / heavy-wide pairing. */
.poster-art span{--w:100;display:block;font-size:17cqw;line-height:.8;letter-spacing:-.04em;font-stretch:calc(var(--w) * 1%);font-weight:calc(200 + (var(--w) - 62) * 8.9);white-space:nowrap;color:var(--c)}
.poster-art span:nth-child(1){--c:var(--orange)}
.poster-art span:nth-child(2){--c:var(--rose)}
.poster-art span:nth-child(3){--c:var(--magenta)}
.poster-art span:nth-child(4){--c:var(--violet)}
.poster-art span:nth-child(5){--c:var(--blue)}
.poster-art span:nth-child(6){--c:var(--cyan)}
.studio-poster figcaption{margin-top:16px;font-size:14px;color:var(--on-deep-2);max-width:44ch}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px;align-items:start;padding-block:var(--section)}
.faq-intro{grid-column:1/span 5;position:sticky;top:calc(var(--header) + 32px)}
.faq-intro p{margin-top:28px;color:var(--ink-2);max-width:34ch}
.faq-list{grid-column:7/-1}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(18px,1.3vw,22px);font-weight:540;letter-spacing:-.01em;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;width:16px;height:16px;flex:none}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .5s var(--ease-out)}
.faq-icon::after{transform:rotate(90deg)}
details[open] .faq-icon::after{transform:rotate(0)}
.faq-list details p{color:var(--ink-2);max-width:56ch;padding-bottom:28px}
.faq-list details a,.faq-intro a,.contact-direct a{color:var(--ink)}
/* Inline links share one underline; it thickens on hover, as .text-link does. */
.faq-list details a,.faq-intro a,.contact-direct a,.brief-download,.brief-status a,.project-visit a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .2s var(--ease)}
.faq-list details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete}
.faq-list details[open]::details-content{block-size:auto}

/* Contact */
.contact{position:relative;padding-block:var(--section) clamp(96px,10vw,160px);border-top:1px solid var(--line)}
.contact-title{font-size:clamp(52px,8.6vw,156px);line-height:.9;font-weight:600;font-stretch:72%;letter-spacing:-.036em;word-spacing:.1em;max-width:13ch}
.contact-bottom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;align-items:end;margin-top:clamp(48px,6vw,96px)}
.contact-copy{grid-column:1/span 5;display:grid;gap:20px}
.contact-copy p{color:var(--ink-2);max-width:42ch}
.contact-direct a{font-weight:600}
.contact-direct span{display:block;margin-top:4px;font-size:15px}
.contact-button{grid-column:8/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;height:clamp(80px,7vw,112px);padding:0 clamp(12px,1vw,16px) 0 clamp(28px,2.6vw,44px);border-radius:999px;background:var(--ink);color:var(--bright);font-size:clamp(22px,2.1vw,34px);font-weight:600;font-stretch:96%;letter-spacing:-.02em;transition:font-stretch .45s var(--ease-out)}
.contact-arrow{width:clamp(56px,5vw,80px);height:clamp(56px,5vw,80px);border-radius:50%;display:grid;place-items:center;background:var(--bright);color:var(--ink);font-size:.9em;transition:transform .45s var(--ease-out),background .3s var(--ease)}

/* Footer */
.footer{position:relative;z-index:3;padding-top:clamp(72px,8vw,120px);padding-bottom:28px;overflow:hidden;min-height:calc(100svh - var(--header))}
.footer-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:32px;align-items:start}
.footer-line{grid-column:1/span 4;font-size:clamp(22px,1.8vw,30px);line-height:1.15;font-weight:500;letter-spacing:-.015em}
.footer-nav{grid-column:7/span 4;display:grid;grid-template-columns:repeat(2,max-content);gap:10px 48px;font-size:16px}
.footer-nav a,.back-top,.footer-controls button{color:var(--on-deep-2);transition:color .3s var(--ease)}
.footer-nav a:hover,.back-top:hover,.footer-controls button:hover{color:var(--on-deep)}
.back-top{grid-column:12/-1;justify-self:end;font-size:16px}
.footer-mark{margin:clamp(56px,7vw,112px) 0 clamp(24px,3vw,40px);color:var(--on-deep);overflow:hidden}
.footer-mark svg{display:block;width:100%;height:auto;aspect-ratio:890/212}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line-deep);font-size:14px;color:var(--on-deep-2)}
.footer-controls{display:flex;gap:24px}

/* Cursor */
.cursor{position:fixed;left:0;top:0;z-index:40;pointer-events:none;transform:translate(-100px,-100px)}
.cursor span{display:block;translate:-50% -50%;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bright);font-size:14px;font-weight:600;white-space:nowrap;scale:.6;opacity:0;transition:scale .25s var(--ease-out),opacity .2s var(--ease)}
.cursor.is-active span{scale:1;opacity:1}
/* Hover motion only where there is a real pointer; on touch a tap would leave it stuck. */
@media (hover:hover) and (pointer:fine){
  .has-cursor .project-card{cursor:none}
  .button:hover .roll>span:first-child,.contact-button:hover .roll>span:first-child{transform:translateY(-105%)}
  .button:hover .roll>span+span,.contact-button:hover .roll>span+span{transform:none}
  .desktop-nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .project-card:hover .project-name{font-stretch:var(--wide)}
  .project-card:hover .forma-visual img{transform:scale(1.045)}
  .project-tempo:hover .tempo-phone{transform:rotate(2deg) translateY(-2cqw)}
  .project-relay:hover .relay-shot{transform:translate(-2cqw,-1.5cqw)}
  .contact-button:hover{font-stretch:var(--wide)}
  .faq-list details a:hover,.faq-intro a:hover,.contact-direct a:hover,.brief-download:hover,.brief-status a:hover,.project-visit a:hover{text-decoration-thickness:2px}
  .contact-button:hover .contact-arrow{transform:rotate(45deg);background:conic-gradient(from 210deg,var(--orange),var(--rose),var(--magenta),var(--violet),var(--blue),var(--cyan),var(--orange));color:var(--bright)}
  .dialog-close:hover{transform:rotate(90deg)}
}

/* Dialogs */
dialog{border:0;padding:0;width:calc(100vw - 32px);max-width:1100px;max-height:calc(100dvh - 32px);border-radius:16px;background:var(--bright);color:var(--ink);overscroll-behavior:contain;box-shadow:0 30px 80px rgba(8,10,14,.35);opacity:1;transform:none;transition:opacity .25s var(--ease),transform .35s var(--ease-out),overlay .35s allow-discrete,display .35s allow-discrete}
dialog:not([open]){opacity:0;transform:translateY(24px) scale(.98)}
@starting-style{dialog[open]{opacity:0;transform:translateY(24px) scale(.98)}}
dialog::backdrop{background:rgba(12,15,21,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.brief-dialog,.privacy-dialog{max-width:760px}
.dialog-close{position:sticky;top:16px;float:right;margin:16px 16px 0 0;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--alloy);font-size:20px;transition:background .2s var(--ease),transform .3s var(--ease-out)}
.dialog-close:hover{background:var(--alloy-2)}
.project-modal-inner,.brief-inner{padding:clamp(28px,4vw,56px)}
.modal-kind{font-size:14px;color:var(--ink-3);margin-bottom:12px}
.project-dialog h2,.brief-dialog h2,.privacy-dialog h2{font-size:clamp(40px,5vw,72px)}
.modal-subtitle{margin-top:12px;font-size:20px;color:var(--ink-2)}
.modal-project-visual{margin:clamp(28px,3vw,40px) 0}
.modal-project-visual .project-visual{pointer-events:none}
.visual-link{position:relative;display:block;color:inherit;text-decoration:none;cursor:pointer;border-radius:20px}
.visual-link .project-visual{transition:filter .3s var(--ease)}
.visual-link-hint .icon{width:15px;height:15px;flex:none}
.visual-link-hint{position:absolute;top:calc(7% + 14px);right:calc(5% + 14px);width:max-content;display:flex;align-items:center;gap:6px;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bright);font-size:14px;font-weight:600;white-space:nowrap;opacity:0;translate:0 8px;transition:opacity .25s var(--ease),translate .25s var(--ease-out);pointer-events:none}
.visual-link:hover .visual-link-hint,.visual-link:focus-visible .visual-link-hint{opacity:1;translate:0 0}
.visual-link:hover .project-visual,.visual-link:focus-visible .project-visual{filter:brightness(.94)}
.visual-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (hover:none){.visual-link-hint{opacity:1;translate:0 0}}
.modal-project-visual .tempo-visual{max-width:460px;margin-inline:auto}
.modal-project-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.modal-project-body h3{font-size:15px;font-weight:600;margin-bottom:10px}
.modal-project-body p{color:var(--ink-2);white-space:pre-line}
.project-visit{margin-top:28px;font-weight:600}
.project-visit a{color:var(--ink)}
.project-shots{margin-top:clamp(32px,4vw,48px)}
.project-shots h3{font-size:15px;font-weight:600;margin-bottom:16px}
.project-shots figure{margin:0}
.project-shots img{width:100%;height:auto;border-radius:12px;background:var(--alloy)}
.project-shots img.shot-phone{width:min(100%,280px);border-radius:32px}
.project-shots figcaption{margin-top:12px;color:var(--ink-2);font-size:15px;max-width:46ch}
.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.brief-intro{margin-top:16px;color:var(--ink-2);max-width:52ch}
#brief-form{margin-top:36px;display:flex;flex-direction:column}
fieldset{border:0;padding:0;margin:0 0 28px}
legend,.field-label{display:block;font-size:15px;font-weight:600;margin-bottom:12px;padding:0}
.req,.optional{font-weight:400;color:var(--ink-3);font-size:13px;margin-left:6px}
.service-options{display:flex;flex-wrap:wrap;gap:8px}
.service-options label{position:relative}
.service-options input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.service-options span{display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-strong);font-size:15px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.service-options label:hover span{border-color:var(--ink)}
.service-options input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bright)}
.service-options input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
textarea,input:not([type="checkbox"]),select{width:100%;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid transparent;background:var(--alloy);font-size:16px;transition:border-color .3s var(--ease),background .3s var(--ease)}
textarea{resize:vertical;min-height:120px;margin-bottom:24px}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--ink);background:#fff}
textarea:focus-visible,input:not([type="checkbox"]):focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::placeholder{color:#8a9099}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:44px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.form-row-single{grid-template-columns:1fr}
.phone-field{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.phone-field{grid-template-columns:1fr}}
.phone-field select{text-overflow:ellipsis}
.form-note{font-size:14px;color:var(--ink-2);margin-bottom:24px}
.brief-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.brief-submit{height:56px;padding:0 30px}
.brief-submit:disabled{opacity:.6;cursor:progress}
.brief-download{padding:8px 0;border:0;background:none;font-weight:600;cursor:pointer}
.brief-status a{font-weight:600}
.brief-thanks{padding:24px 0}
.brief-thanks h2{outline:none}
.brief-thanks p{margin:16px 0 28px;color:var(--ink-2);max-width:52ch}
.brief-status{margin-top:20px;padding:16px 18px;border-radius:var(--radius-sm);background:var(--alloy);font-size:15px}
.privacy-dialog .brief-inner p{margin-top:16px;color:var(--ink-2);max-width:60ch}
.privacy-dialog h2{margin-bottom:12px}

/* Responsive */
@media (max-width:1100px){
  .services-layout{grid-template-columns:1fr;row-gap:40px}
  .service-preview{grid-column:1;order:-1;position:relative;top:0;max-width:560px;padding-left:0;justify-self:start}
  .service-art{aspect-ratio:5/4}
  .service-list{grid-column:1}
  .process-track{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .process-line{display:none}
  .process-step{border-top:2px solid var(--line)}
  .studio-copy,.studio-poster{grid-column:1/-1}
  .studio-poster{max-width:560px}
}
@media (max-width:900px){
  .desktop-nav{display:none}
  .site-header{grid-template-columns:1fr auto auto}
  .menu-toggle{display:block}
  .section-head h2,.section-head p{grid-column:1/-1}
  .hero-lede,.hero-actions{grid-column:1/-1}
  .hero-actions{justify-content:flex-start}
  .statement,.intro-body{grid-column:5/-1}
  .project-tempo,.project-relay{grid-column:1/-1;margin-top:0}
  .tempo-visual{aspect-ratio:5/4}
  .tempo-phone{width:36cqw;margin-left:-18cqw;top:6cqw}
  .relay-visual{aspect-ratio:5/4}
  .faq-intro,.faq-list{grid-column:1/-1}
  .faq-intro{position:static}
  .contact-copy,.contact-button{grid-column:1/-1}
  .price-row h3{grid-column:1/span 4}
  .price-from{grid-column:5/span 4}
  .price-time{grid-column:9/-1}
  .price-note{grid-column:5/-1}
  .footer-line{grid-column:1/span 6}
  .footer-nav{grid-column:7/-1}
  .back-top{grid-column:1/-1;justify-self:start}
  .modal-project-body{grid-template-columns:1fr}
}
@media(max-width:600px){
  .device-copy{grid-template-columns:1fr;row-gap:20px}
  .device-still,.device-laptop .device-still{grid-column:1;grid-row:auto;max-width:300px}
  .device-laptop .device-still{max-width:100%}
  .scene-title,.scene-body,.device-laptop .scene-title,.device-laptop .scene-body{grid-column:1}
  .scene-body{margin-top:0}

  :root{--header:64px;--gutter:24px}
  .brand-lockup{height:34px}
  .nav-cta{display:none}
  .site-header{grid-template-columns:1fr auto}
  .hero{min-height:100svh;padding-bottom:20px}
  .hero-title{font-size:clamp(64px,22vw,120px);align-self:end;margin-top:clamp(160px,34vh,320px)}
  .line-real>span{font-stretch:100%}
  .hero-actions .button{flex:1}
  .hero-lede::before{inset:-32px -20px}
  .hero-rail{flex-direction:column;align-items:flex-start}
  .discipline-list{gap:6px 18px;font-size:13px}
  .scroll-cue{display:none}
  .intro{align-items:start;min-height:auto;padding-bottom:calc(var(--section) + 300px)}
  .statement,.intro-body{grid-column:1/-1}
  .statement{font-size:clamp(28px,8vw,36px)}
  .service-item.is-open .service-name{font-stretch:100%}
  .project-info{grid-template-columns:1fr;row-gap:2px}
  .project-kind{text-align:left}
  .forma-visual{aspect-ratio:16/11}
  .forma-visual img{object-position:center}
  .tempo-visual{aspect-ratio:4/5}
  .tempo-phone{width:56cqw;margin-left:-28cqw;top:8cqw}
  .relay-visual{aspect-ratio:4/5}
  .relay-shot{left:4cqw;top:8cqw;width:124cqw;height:92cqw}
  .process-track{grid-template-columns:1fr;row-gap:48px}
  .price-row{grid-template-columns:1fr auto;row-gap:4px}
  .price-row h3,.price-note{grid-column:1/-1}
  .price-from{grid-column:1}
  .price-time{grid-column:2}
  .studio-values>div{grid-template-columns:1fr;gap:6px}
  .poster-art{aspect-ratio:auto;padding:16% 7%}
  .contact-title{font-size:clamp(48px,15vw,84px)}
  .contact-button{height:76px;font-size:22px}
  .contact-arrow{width:56px;height:56px}
  .footer-line,.footer-nav{grid-column:1/-1}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .form-row{grid-template-columns:1fr}
  dialog{width:100vw;max-width:none;max-height:100dvh;height:100dvh;border-radius:0;margin:0}
  .modal-footer .button{width:100%}
}

/* The work card keeps its cropped dashboard. The dialog shows the whole screenshot. */
.modal-project-visual .relay-visual{aspect-ratio:auto;overflow:visible;max-width:none;width:100%;background:transparent}
.modal-project-visual .relay-shot{position:static;width:100%;height:auto;object-fit:contain;object-position:center;border-radius:12px;box-shadow:none}


/* Motion preferences */
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important}
.motion-paused .project-visual *{transition-duration:0s!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}