@font-face{font-family:Hanken;src:url('assets/hanken.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --carbon:#141414;
  --panel:#1B1C1E;
  --white:#fff;
  --orange:#FB6A34;
  --steel:#8C9096;
  --studio:#F4F4F2;
  --ink-soft:#5B5F64;
  --gutter:clamp(20px,4.4vw,80px);
  --header:88px;
  --font:Hanken,'Trebuchet MS',sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--carbon)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--carbon);color:var(--white);font:400 17px/1.55 var(--font);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0;padding:0}
h1,h2,h3{font-weight:500;letter-spacing:-.045em;line-height:1;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--carbon)}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.skip{position:fixed;top:12px;left:12px;z-index:100;background:var(--white);color:var(--carbon);padding:12px 16px;transform:translateY(-160%)}
.skip:focus{transform:none}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;background:var(--orange);color:var(--carbon);font-size:15px;font-weight:600;border:0;border-radius:2px;cursor:pointer;transition:transform .4s var(--ease-out),background .3s}
.button:hover{transform:translateY(-2px)}
.button--dark{background:var(--carbon);color:var(--white)}

/* Shared section opening: a big statement and a short supporting line. */
.section-head{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end}
.section-head h2{font-size:clamp(46px,6.2vw,112px);font-weight:600;letter-spacing:-.055em;line-height:.94}
.section-head p{font-size:clamp(17px,1.3vw,21px);line-height:1.4;max-width:30ch;opacity:.82}

/* ---------- Header: ink follows the ground beneath it ---------- */
.header{position:fixed;inset:0 0 auto;z-index:50;height:var(--header);display:flex;align-items:center;gap:36px;padding:0 var(--gutter);color:var(--white);transition:color .3s}
.header:is([data-ink=dark],[data-ink=orange]){color:var(--carbon)}
.brand{display:grid;width:clamp(140px,11vw,180px);margin-right:auto}
.brand-logo{grid-area:1/1;width:100%;height:auto;transition:opacity .3s,filter .3s}
.brand-logo--dark,.header:is([data-ink=dark],[data-ink=orange]) .brand-logo--light{opacity:0}
.header:is([data-ink=dark],[data-ink=orange]) .brand-logo--dark{opacity:1}
/* On the orange ground the orange "10" would vanish: the mark goes fully dark. */
.header[data-ink=orange] .brand-logo--dark{filter:brightness(0)}
.header[data-ink=orange] .header-cta{background:var(--carbon);color:var(--white)}
.nav{display:flex;gap:30px;font-size:14px;font-weight:500}
.nav a{position:relative;padding:8px 0}
.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)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header-cta{background:var(--orange);color:var(--carbon);font-size:14px;font-weight:600;padding:12px 20px;border-radius:2px;transition:transform .4s var(--ease-out),background .3s,color .3s}
.header-cta:hover{transform:translateY(-2px)}
/* Outside the film, content scrolls under a soft backdrop matched to the ground. */
.header::before{content:'';position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:linear-gradient(180deg,#141414 55%,#14141400)}
.header[data-ink=dark]::before{background:linear-gradient(180deg,var(--studio) 55%,#f4f4f200)}
.header[data-ink=dark][data-ground=white]::before{background:linear-gradient(180deg,#fff 55%,#fff0)}
.header[data-ink=orange]::before{background:linear-gradient(180deg,#FB6A34 55%,#FB6A3400)}
.cine .header:not(.in-film)::before{opacity:1}
.film-progress{position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff18;opacity:0;transition:opacity .4s}
.film-progress i{display:block;height:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
.header.in-film .film-progress{opacity:1}
.header[data-ink=dark] .film-progress{background:#14141418}

/* ---------- Film: static document by default ---------- */
.film-stage{position:relative;background:var(--carbon);display:flex;flex-direction:column}
.hero-copy{order:-1;padding:150px var(--gutter) 70px;max-width:1100px}
.kicker{font-size:15px;color:var(--steel);margin-bottom:26px}
.hero-copy h1{font-size:clamp(50px,7.6vw,132px);font-weight:600;letter-spacing:-.058em;line-height:.93}
.hero-sub{font-size:clamp(17px,1.35vw,21px);line-height:1.4;max-width:30ch;margin-top:30px;color:#d6d7d9}
.scroll-cue{display:none}
.sheet{padding:0 var(--gutter) 90px}
.sheet-media{position:relative;aspect-ratio:4/3;max-height:80vh;overflow:hidden;background:#1a1a1a;margin-bottom:28px}
.sheet-media .parallax{position:absolute;inset:0}
.sheet-media .frame{width:100%;height:100%;object-fit:contain}
.media-photo .frame{object-fit:cover}
.media-render{background:var(--studio)}
.plan-grid{position:absolute;inset:-40px;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 45%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 70% at 60% 45%,#000 30%,transparent 80%)}
.dims,.scan,.scrim,.grain{display:none}
.phase{font-size:14px;color:var(--orange);margin-bottom:16px;font-weight:500}
.sheet-text h2{font-size:clamp(38px,4.6vw,78px);font-weight:600;letter-spacing:-.05em}
.sheet-text p:not(.phase){font-size:clamp(16px,1.2vw,19px);line-height:1.45;max-width:34ch;margin-top:18px;color:#d6d7d9}
.sheet-text .confidential{font-size:13px!important;color:var(--steel)!important;margin-top:22px!important}
.titleblock{margin:0 var(--gutter) 90px;display:flex;align-items:stretch;border:1px solid #ffffff38;width:fit-content;font-size:12px}
.tb-mark{display:grid;place-items:center;padding:10px 14px;border-right:1px solid #ffffff38}
.tb-x{grid-area:1/1;width:26px;height:26px;object-fit:contain;transition:opacity .3s}
.tb-x--dark{opacity:0}
.titleblock dl{display:flex}
.titleblock dl>div{padding:9px 16px;border-right:1px solid #ffffff38;min-width:92px}
.titleblock dl>div:last-child{border-right:0}
.titleblock dt{color:var(--steel);font-size:10px;line-height:1.4}
.titleblock dd{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Film: cinematic mode ---------- */
.cine .film-stage{display:block;height:100svh;min-height:560px;overflow:hidden;color:var(--white);transition:color .35s}
.cine .film-stage[data-ink=dark]{color:var(--carbon)}
.cine .layers{position:absolute;inset:0;will-change:transform}
.cine .sheet{position:absolute;inset:0;padding:0}
.cine .sheet-media{position:absolute;inset:0;aspect-ratio:auto;max-height:none;margin:0;background:transparent;transform-origin:0 0;will-change:transform,opacity}
.cine .sheet-media .frame{position:absolute;max-width:none;width:auto;height:auto;object-fit:fill}
.cine .media-plan{background:var(--carbon)}
.cine .media-render{background:var(--studio);clip-path:inset(0 100% 0 0)}
.cine .media-photo{background:var(--carbon)}
.cine .sheet[data-sheet="3"] .sheet-media,.cine .sheet[data-sheet="4"] .sheet-media{opacity:0;visibility:hidden}
.cine .media-photo .frame{filter:saturate(.78) contrast(1.06) brightness(.8)}
.cine [data-frame=expo] .frame{filter:saturate(.72) contrast(1.06) brightness(.7)}
.cine .scrim{display:block;position:absolute;inset:0;background:linear-gradient(180deg,#141414b8 0%,#14141400 22%),linear-gradient(90deg,#141414f0 0%,#141414a8 30%,#14141400 58%),linear-gradient(0deg,#141414eb 0%,#14141400 45%)}
.cine .dims{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#ffffff8c;stroke-width:1;pointer-events:none}
.cine .dims .d,.cine .dims .t{stroke-dasharray:1;stroke-dashoffset:0}
.cine .dims .mark{stroke:var(--orange)}
.cine .dims text{fill:#ffffffb3;stroke:none;font:500 11px var(--font);letter-spacing:.02em}
.cine .scan{display:block;position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--orange);opacity:0;visibility:hidden;box-shadow:0 0 24px 2px #fb6a3466;z-index:2}
.cine .scan span{position:absolute;top:46%;left:10px;background:var(--orange);color:var(--carbon);font-size:11px;font-weight:600;padding:5px 9px;white-space:nowrap}
.cine .grain{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cine .sheet-text{position:absolute;z-index:4;left:var(--gutter);bottom:15vh;max-width:min(36rem,40vw);opacity:0;visibility:hidden}
.cine .sheet-text p:not(.phase){color:inherit;opacity:.82}
.cine .hero-copy{position:absolute;z-index:4;left:var(--gutter);bottom:12vh;padding:0;max-width:min(64rem,62vw)}
.cine .scroll-cue{display:flex;align-items:center;gap:14px;margin-top:42px;font-size:13px;color:var(--steel)}
.cine .scroll-cue i{position:relative;width:1px;height:42px;background:#ffffff26;overflow:hidden}
.cine .scroll-cue i::after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--orange);animation:cue 2.2s var(--ease-out) infinite}
@keyframes cue{to{top:100%}}
.cine .titleblock{position:absolute;z-index:5;right:var(--gutter);bottom:34px;margin:0;background:#14141473;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .35s,border-color .35s}
.cine .film-stage[data-ink=dark] .titleblock{background:#f4f4f2b3;border-color:#14141433}
.cine .film-stage[data-ink=dark] .titleblock :is(.tb-mark,dl>div){border-color:#14141433}
.cine .film-stage[data-ink=dark] .tb-x--light{opacity:0}
.cine .film-stage[data-ink=dark] .tb-x--dark{opacity:1}
.cine .film-stage[data-ink=dark] .kicker,.cine .film-stage[data-ink=dark] .titleblock dt{color:var(--ink-soft)}

/* ---------- Projects: one case per card, stacking as you scroll ---------- */
.projects{background:var(--carbon);padding:18vh var(--gutter) 14vh}
.projects .section-head{margin-bottom:10vh}
.projects .section-head p{color:#cfd0d2;opacity:1}
.case-stack{display:grid;gap:28px}
.case{display:grid;grid-template-columns:1.18fr 1fr;background:var(--panel);border:1px solid #ffffff12;overflow:hidden;transform-origin:50% 0}
.case-media{position:relative;min-height:320px;overflow:hidden;background:#232426}
.case-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-media figcaption{position:absolute;left:18px;top:18px;font-size:12px;color:#d6d7d9;background:#141414b3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:6px 11px;border-radius:2px}
.case-body{display:flex;flex-direction:column;padding:clamp(28px,3.6vw,60px)}
.case-meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--steel)}
.case-meta span:first-child{color:var(--orange);font-weight:500}
.case h3{font-size:clamp(32px,3.3vw,58px);font-weight:600;letter-spacing:-.05em;margin-top:18px}
.case-facts{display:grid;gap:22px;margin-top:auto;padding-top:40px}
.case-facts>div{border-top:1px solid #ffffff1f;padding-top:14px}
.case-facts dt{font-size:13px;color:var(--steel);margin-bottom:4px}
.case-facts dd{font-size:clamp(16px,1.25vw,20px);line-height:1.38;letter-spacing:-.01em;max-width:34ch}
.case--next{grid-template-columns:1fr;background:var(--orange);color:var(--carbon);border:0}
.case--next .case-body{justify-content:center;align-items:flex-start;gap:22px}
.case--next h3{font-size:clamp(40px,5.2vw,92px);margin:0;max-width:14ch}
.case--next p{font-size:clamp(17px,1.4vw,22px);max-width:34ch}

/* ---------- Statement ---------- */
.statement{background:var(--white);color:var(--carbon);padding:20vh var(--gutter) 16vh}
.statement h2{font-size:clamp(34px,4.9vw,86px);font-weight:500;letter-spacing:-.048em;line-height:1.04;max-width:20ch}
.cine .statement h2 .w{opacity:.14}
.facts{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-top:16vh;max-width:1400px}
.facts-title{font-size:15px;color:var(--ink-soft)}
.facts ol{list-style:none;counter-reset:fact}
.facts li{counter-increment:fact;position:relative;display:grid;grid-template-columns:44px 1fr 1.3fr;gap:20px;align-items:baseline;border-top:1px solid #1414142e;padding:22px 0}
.facts li::before{content:counter(fact);font-size:13px;color:var(--orange);font-weight:600;font-variant-numeric:tabular-nums}
.facts strong{font-size:clamp(20px,1.7vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.facts span{color:var(--ink-soft);font-size:16px}
.rule{display:none}
.cine .facts li{border-top-color:transparent}
.cine .rule{display:block;position:absolute;top:-1px;left:0;right:0;height:1px;background:currentColor;opacity:.2}

/* ---------- Services: three drawing sheets on the dark table ---------- */
.capabilities{background:var(--carbon);padding:16vh 0}
.cap-track{display:grid;gap:70px;padding:0 var(--gutter)}
.cap-intro h2{font-size:clamp(46px,5.8vw,104px);font-weight:600;letter-spacing:-.055em}
.cap-intro p{font-size:clamp(17px,1.3vw,21px);color:#cfd0d2;max-width:28ch;margin-top:26px;line-height:1.4}
.cap-visual{aspect-ratio:4/3;background:var(--studio);margin-bottom:26px;display:grid;place-items:center;padding:6%}
.cap-visual svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--carbon);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.cap-visual .thin{stroke-width:.9;opacity:.7}
.cap-visual .link path{stroke-dasharray:3 4;opacity:.45}
.cap-visual .accent{stroke:var(--orange);stroke-width:1.6}
.cap-visual .solid>*{fill:var(--studio)}
.cap-visual .dim{stroke:var(--orange);stroke-width:1}
.cap-visual .dim text{fill:var(--orange);stroke:none;font:600 12px var(--font);text-anchor:middle}
.cap-visual .center path{stroke:var(--orange);stroke-width:.8;stroke-dasharray:10 3 2 3}
.cap-visual .tb-text text{fill:var(--carbon);stroke:none;font:500 8.5px var(--font)}
.cap-visual .label text{fill:var(--carbon);stroke:none;font:500 13px var(--font);text-anchor:middle}
.cap-visual .flow-lines path{stroke:var(--orange);stroke-width:1.6;stroke-dasharray:6 6;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.cine .cap-visual .draw{stroke-dasharray:1;stroke-dashoffset:1}
.cap h3{font-size:clamp(26px,2.3vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.08}
.cap p{color:#c4c6c9;margin-top:14px;max-width:36ch;font-size:16px}

/* ---------- Process: four steps joined by a line that fills as you read ---------- */
.process{background:var(--studio);color:var(--carbon);padding:18vh var(--gutter)}
.process .section-head p{color:var(--ink-soft);opacity:1}
.steps-wrap{position:relative;margin-top:13vh}
.steps-line{position:absolute;top:22px;left:22px;right:0;height:1px;background:#14141426}
.steps-line i{display:block;height:100%;background:var(--orange);transform:scaleX(1);transform-origin:left}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px);position:relative}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--carbon);background:var(--studio);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .4s,border-color .4s,color .4s}
.steps li.is-on .step-n,html:not(.cine) .step-n{background:var(--orange);border-color:var(--orange)}
.steps h3{font-size:clamp(22px,1.9vw,32px);font-weight:600;letter-spacing:-.04em;margin-top:30px}
.steps p{color:var(--ink-soft);margin-top:12px;font-size:16px;max-width:28ch}
.cine .steps-line i{transform:scaleX(0)}

/* ---------- Contact ---------- */
.contact{background:var(--orange);color:var(--carbon);padding:18vh var(--gutter) 16vh;display:grid;grid-template-columns:1.1fr 1fr;gap:6vw;align-items:end}
.contact h2{font-size:clamp(48px,6.4vw,120px);font-weight:600;letter-spacing:-.06em;line-height:.92}
.contact-copy>p{font-size:clamp(19px,1.6vw,26px);letter-spacing:-.02em;line-height:1.3;max-width:28ch;margin-top:36px}
.contact-email{display:inline-block;margin-top:44px;font-size:clamp(24px,2.6vw,44px);font-weight:500;letter-spacing:-.04em;border-bottom:2px solid currentColor;padding-bottom:6px;transition:padding .5s var(--ease-out)}
.contact-email:hover{padding-left:14px}
.idea-form{background:var(--carbon);color:var(--white);padding:clamp(28px,3.4vw,52px);display:grid;gap:22px}
.idea-form label:not(.consent){display:grid;gap:6px}
.idea-form label>span{font-size:13px;color:var(--steel)}
.idea-form em{font-style:normal;opacity:.7}
.idea-form input:not([type=checkbox]),.idea-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #ffffff38;border-radius:0;padding:8px 0 12px;font-size:17px;outline:none;transition:border-color .3s}
.idea-form textarea{resize:vertical;min-height:110px;line-height:1.45}
.idea-form textarea::placeholder{color:#ffffff59}
.idea-form :is(input,textarea):focus-visible{border-bottom-color:var(--orange);box-shadow:0 1px 0 var(--orange)}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:#d6d7d9;cursor:pointer}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--orange);flex:none}
.consent a{text-decoration:underline;text-underline-offset:3px}
.idea-form .button{width:100%;margin-top:6px}
.form-note{font-size:13px;color:var(--steel)}

/* ---------- Footer ---------- */
.footer{background:var(--carbon);padding:90px var(--gutter) 34px}
.footer-logo{width:min(100%,1100px)}
.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:70px;padding-top:30px;border-top:1px solid #ffffff2e}
.footer-grid>div{display:grid;gap:8px;align-content:start}
.footer-label{font-size:13px;color:var(--steel);margin-bottom:6px}
.footer-grid a{font-size:16px;width:fit-content;transition:color .3s}
.footer-grid a:hover,.footer-base a:hover{color:var(--orange)}
.footer-base{display:flex;justify-content:space-between;gap:20px;margin-top:70px;font-size:13px;color:var(--steel)}

/* ---------- Legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:150px var(--gutter) 120px}
.legal h1{font-size:clamp(40px,5vw,72px);font-weight:600;letter-spacing:-.05em}
.legal h2{font-size:24px;margin-top:48px}
.legal p,.legal li{color:#d6d7d9;margin-top:14px}
.legal ul{padding-left:20px}
.legal .pending{color:var(--orange)}
.legal-header{position:static}

/* ---------- Static header when there is no cinematic mode ---------- */
html:not(.cine) .header{background:var(--carbon);color:var(--white)}
html:not(.cine) .header .brand-logo--light{opacity:1}
html:not(.cine) .header .brand-logo--dark{opacity:0}
html:not(.cine) .header .header-cta{background:var(--orange);color:var(--carbon)}

/* ---------- Wide screens: horizontal services, stacking cases ---------- */
@media (min-width:801px){
  .cine .capabilities{padding:0}
  .cine .cap-pin{height:100svh;display:flex;align-items:center;overflow:hidden}
  .cine .cap-track{display:flex;align-items:flex-end;gap:5vw;width:max-content;padding:0 var(--gutter);will-change:transform}
  .cine .cap-intro{width:34vw;align-self:center}
  .cine .cap{width:min(40vw,640px)}
  .cine .cap-visual{aspect-ratio:auto;height:min(50vh,470px)}
  html:not(.cine) .cap-track{grid-template-columns:repeat(3,1fr)}
  html:not(.cine) .cap-intro{grid-column:1/-1}
  .case{min-height:min(72vh,640px)}
  .cine .case-stack{gap:34vh}
  .cine .case{position:sticky;top:calc(var(--header) + 22px + var(--i,0) * 16px);height:min(calc(100svh - var(--header) - 90px),600px);min-height:0}
  .cine .case:nth-child(2){--i:1}
  .cine .case:nth-child(3){--i:2}
  .cine .case:nth-child(4){--i:3}
}

/* ---------- Narrow screens ---------- */
@media (max-width:800px){
  :root{--header:70px}
  .header{gap:14px}
  .nav{display:none}
  .header-cta{font-size:13px;padding:10px 14px}
  .section-head{grid-template-columns:1fr;gap:22px}
  .cine .hero-copy{bottom:7vh;max-width:none;right:var(--gutter)}
  .hero-copy h1{font-size:clamp(40px,11vw,64px)}
  .kicker{font-size:13px;margin-bottom:18px}
  .hero-sub{margin-top:20px}
  .cine .scroll-cue{margin-top:26px}
  .cine .sheet-text{bottom:9vh;max-width:none;right:var(--gutter)}
  .cine .media-photo .frame{-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
  .cine .scrim{background:linear-gradient(0deg,#141414f2 0%,#141414b3 30%,#14141400 55%)}
  .cine .dims text{display:none}
  .cine .titleblock{top:82px;bottom:auto;left:var(--gutter);right:var(--gutter);width:auto}
  .titleblock{font-size:11px}
  .tb-mark{padding:8px 10px}
  .tb-x{width:20px;height:20px}
  .titleblock dl{flex:1}
  .titleblock dl>div{min-width:0;flex:1;padding:7px 9px}
  .titleblock dl>div:first-child{display:none}
  .projects{padding:14vh var(--gutter) 10vh}
  .case{grid-template-columns:1fr}
  .case-media{min-height:0;aspect-ratio:4/3}
  .case-facts{padding-top:30px}
  .case--next .case-body{padding:40px 28px}
  .facts{grid-template-columns:1fr;gap:18px}
  .facts li{grid-template-columns:32px 1fr;gap:6px 12px}
  .facts span{grid-column:2}
  .steps{grid-template-columns:1fr;gap:40px}
  .steps li{display:grid;grid-template-columns:44px 1fr;column-gap:20px}
  .steps li>:not(.step-n){grid-column:2}
  .steps h3{margin-top:8px}
  .steps-line{top:22px;bottom:22px;left:22px;right:auto;width:1px;height:auto}
  .steps-line i{height:100%;width:1px;transform-origin:top}
  .cine .steps-line i{transform:scaleY(0)}
  .contact{grid-template-columns:1fr;gap:56px;padding:14vh var(--gutter) 12vh}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-base{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}