/* ==========================================================================
   VIBEO — design system
   Principles: typography first · hairlines over boxes · one accent · motion with purpose
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-tight-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-tight-greek-wght-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/noto-serif-display-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Serif Display';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/noto-serif-display-greek-wght-italic.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jetbrains-mono-greek-wght-normal.woff2) format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

/* ---------- Tokens ---------- */
:root{
  color-scheme:dark;
  --bg:#0b0b0c; --bg-2:#121214; --bg-3:#1a1a1d;
  --fg:#ece8df; --fg-2:rgba(236,232,223,.72); --fg-3:rgba(236,232,223,.54);
  --line:rgba(236,232,223,.13); --line-2:rgba(236,232,223,.3);
  --accent:#ff5a2d; --on-accent:#0b0b0c;
  --danger:#ff9478;
  --grain:.045;

  --f-sans:'Inter Tight',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-serif:'Noto Serif Display','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --gutter:clamp(20px,4.2vw,64px);
  --gap:clamp(16px,2vw,32px);
  --max:1720px;
  --header-h:72px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.7,0,.2,1);

  --fs-display:clamp(3.1rem,1rem + 8.4vw,10rem);
  --fs-h2:clamp(2rem,1rem + 3.4vw,4.5rem);
  --fs-lead:clamp(1.125rem,1rem + .55vw,1.5rem);
}
:root[data-theme='light']{
  color-scheme:light;
  --bg:#f2eee5; --bg-2:#ebe6da; --bg-3:#e2dccd;
  --fg:#16150f; --fg-2:rgba(22,21,15,.74); --fg-3:rgba(22,21,15,.6);
  --line:rgba(22,21,15,.14); --line-2:rgba(22,21,15,.32);
  --accent:#d83e14; --on-accent:#fff;
  --danger:#b3260e;
  --grain:.06;
}

/* project identity (each project sets --p-*-d / --p-*-l inline; neutral fallback otherwise) */
.tone{--p-bg:var(--p-bg-d,var(--bg-2));--p-ink:var(--p-ink-d,var(--fg));--p-accent:var(--p-accent-d,var(--accent))}
:root[data-theme='light'] .tone{--p-bg:var(--p-bg-l,var(--bg-2));--p-ink:var(--p-ink-l,var(--fg));--p-accent:var(--p-accent-l,var(--accent))}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
/* app-like feel on phones: no rubber-band bounce or pull-to-refresh jolt, no double-tap zoom, no grey tap flash */
html,body{overscroll-behavior:none}
html{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* phones: drop the effects that repaint on every scroll frame (fixed blend-mode grain, blurred header) so scrolling stays glass-smooth */
@media (hover:none) and (pointer:coarse){
  body{min-height:100svh}
  body::after{display:none}
  .site-header.is-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.55 var(--f-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:clip;text-rendering:optimizeLegibility}
body::after{ /* film grain: one static layer, no animation */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:200;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
::selection{background:var(--accent);color:var(--on-accent)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--fg);color:var(--bg);padding:12px 18px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
main:focus{outline:none}
.i{width:1.15em;height:1.15em;flex:none;transition:transform .45s var(--ease)}

html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease!important}

/* ---------- Type ---------- */
.mono{font-family:var(--f-mono);font-size:.75rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;font-weight:450}
.display{font-size:var(--fs-display);line-height:.92;letter-spacing:-.045em;font-weight:500}
.h2{font-size:var(--fs-h2);line-height:1;letter-spacing:-.035em;font-weight:500}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--fg-2);max-width:42ch;letter-spacing:-.005em}
em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.display em,.h2 em{padding-right:.04em}
.kicker{display:flex;align-items:center;gap:.9em;color:var(--fg-3)}
.kicker__n{color:var(--accent)}
.kicker span+span::before{content:none}
.link-arrow{display:inline-flex;align-items:center;gap:.6em;font-weight:560;padding-block:.35em;border-bottom:1px solid var(--line-2);transition:border-color .3s,color .3s}
.link-arrow:hover{border-color:var(--accent);color:var(--accent)}
.link-arrow:hover .i{transform:translateX(4px)}
.link-inline{border-bottom:1px solid var(--line-2);transition:border-color .3s}
.link-inline:hover{border-color:var(--accent)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,11vw,176px)}
.section--tight{padding-block:clamp(32px,5vw,80px)}
.section-head{display:grid;gap:clamp(14px,2vw,24px);margin-bottom:clamp(36px,5vw,72px);grid-template-columns:1fr auto;align-items:end}
.section-head .kicker{grid-column:1/-1}
.section-head__link{justify-self:end}
.page-head{padding-top:calc(var(--header-h) + clamp(56px,10vw,150px));padding-bottom:clamp(28px,5vw,72px)}
.page-head .kicker{margin-bottom:clamp(18px,2.4vw,32px)}
.page-head__lead{margin-top:clamp(22px,3vw,44px)}
.page-head__title em{color:var(--fg)}

/* ---------- Buttons ---------- */
.btn{--h:52px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.8em;min-height:var(--h);padding:0 1.6rem;border:1px solid var(--fg);font:600 .9375rem/1 var(--f-sans);letter-spacing:.005em;white-space:nowrap;transition:color .35s,border-color .35s;border-radius:0;cursor:pointer}
.btn::before{content:'';position:absolute;inset:0;background:var(--accent);transform:translateY(102%);transition:transform .5s var(--ease);z-index:-1}
.btn--primary{background:var(--fg);color:var(--bg)}
.btn--line{color:var(--fg);border-color:var(--line-2)}
.btn--lg{--h:60px;padding:0 2rem;font-size:1rem}
.btn--sm{--h:42px;padding:0 1.15rem;font-size:.875rem}
.btn:focus-visible::before{transform:none}
.btn:focus-visible{color:var(--on-accent);border-color:var(--accent)}
@media (hover:hover){
  .btn:hover::before{transform:none}
  .btn:hover{color:var(--on-accent);border-color:var(--accent)}
  .btn:hover .i{transform:translateX(5px)}
}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);display:flex;align-items:center;gap:clamp(16px,3vw,48px);padding-inline:var(--gutter);view-transition-name:site-header;transition:background-color .4s,border-color .4s,transform .5s var(--ease);border-bottom:1px solid transparent}
.site-header.is-scrolled{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
.brand{display:flex;align-items:baseline;gap:14px;min-height:44px;align-items:center}
.wordmark{height:clamp(24px,2.1vw,30px);width:auto;color:var(--fg);overflow:visible}
.brand__sig{display:none;font:italic 400 1.0625rem/1 var(--f-serif);color:var(--fg-2);padding-left:14px;border-left:1px solid var(--line-2);letter-spacing:-.01em;margin-top:2px}
.site-nav{margin-left:auto}
.site-nav ul{display:none;gap:clamp(20px,2.6vw,44px)}
.site-nav__link{display:flex;align-items:baseline;gap:.5em;padding:12px 0;font-weight:500;font-size:.96875rem;position:relative}
.site-nav__link__idx{font:450 .625rem/1 var(--f-mono);color:var(--fg-3);letter-spacing:.06em}
.site-nav__link::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.site-nav__link:hover::after,.site-nav__link[aria-current='page']::after{transform:scaleX(1)}
.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.site-header__cta{display:none;margin-right:10px}
.theme-toggle,.menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:50%}
.theme-toggle{color:var(--fg)}
.theme-toggle .moon{width:22px;height:22px;transition:transform .7s var(--ease)}
.moon__cut{transition:cx .6s var(--ease),cy .6s var(--ease)}
:root[data-theme='light'] .moon{transform:rotate(180deg)}
@media (hover:hover){.theme-toggle:hover .moon{transform:rotate(-18deg)}:root[data-theme='light'] .theme-toggle:hover .moon{transform:rotate(162deg)}}
.menu-toggle{gap:10px;padding:0 6px 0 10px;border-radius:0;font:500 .9375rem/1 var(--f-sans)}
.menu-toggle__bars{position:relative;width:22px;height:10px}
.menu-toggle__bars i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .45s var(--ease),top .45s var(--ease)}
.menu-toggle__bars i:first-child{top:0}.menu-toggle__bars i:last-child{top:8.5px}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:first-child{top:4.25px;transform:rotate(45deg)}
.menu-toggle[aria-expanded='true'] .menu-toggle__bars i:last-child{top:4.25px;transform:rotate(-45deg)}
@media (min-width:600px){.brand__sig{display:block}}
@media (min-width:960px){
  .site-nav ul{display:flex}
  .site-header__actions{margin-left:0}
  .site-header__cta{display:inline-flex}
  .menu-toggle{display:none}
}
@media (max-width:959px){.site-nav{display:none}}
@media (min-width:600px) and (max-width:1180px){.brand__sig{display:none}}
@media (min-width:1181px){.brand__sig{display:block}}

/* mobile menu */
.menu{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--header-h) + 24px) var(--gutter) max(28px,env(safe-area-inset-bottom));clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease-io),visibility 0s .6s;overflow-y:auto}
.menu.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--ease-io),visibility 0s}
.menu__link{display:flex;align-items:baseline;gap:16px;padding:12px 0;font-size:clamp(2.6rem,12vw,5rem);line-height:1;letter-spacing:-.04em;font-weight:500;border-bottom:1px solid var(--line)}
.menu__link__idx{font:450 .75rem/1 var(--f-mono);color:var(--accent);letter-spacing:.06em}
.menu__link[aria-current='page']{font-family:var(--f-serif);font-style:italic;font-weight:400}
.menu__foot{display:grid;gap:18px;margin-top:32px}
.menu__sig{color:var(--fg-3)}
.menu__foot .btn{width:100%}
body.menu-open{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:var(--header-h)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3;touch-action:pan-y}
.hero__fallback{position:absolute;z-index:-3;right:max(4vw,16px);top:calc(var(--header-h) + 3vh);height:74vh;width:auto;opacity:.16;display:none;color:var(--fg)}
.no-webgl .hero__fallback{display:block}
.no-webgl .hero{background:radial-gradient(55% 50% at 72% 58%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.hero__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 34%,transparent 62%),
  linear-gradient(0deg,var(--bg) 0%,transparent 26%)}
.hero__inner{padding-bottom:clamp(40px,9vh,112px);padding-top:clamp(48px,9vh,96px)}
.hero__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.7em 1em;color:var(--fg-2);margin-bottom:clamp(18px,2.6vw,36px)}
.hero__eyebrow i{width:28px;height:1px;background:var(--line-2)}
.hero__eyebrow span:first-child{color:var(--fg);font-weight:600}
.hero__sig{font:italic 400 1.0625rem/1 var(--f-serif);letter-spacing:-.01em;text-transform:none;color:var(--fg-2)}
.hero__title{font-size:clamp(2.7rem,.8rem + 6.4vw,8rem);line-height:.93;letter-spacing:-.05em;font-weight:500;max-width:15ch}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero__title .line__in{display:block}
.hero__title em{color:var(--accent);padding-right:.06em}
.hero__lede{margin-top:clamp(22px,2.6vw,36px);max-width:44ch;font-size:var(--fs-lead);line-height:1.45;color:var(--fg-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,44px)}
.hero__now{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;grid-template-areas:'k go' 't go' 'd go';gap:2px 24px;margin:0 var(--gutter) max(24px,env(safe-area-inset-bottom));padding:16px 0 0;border-top:1px solid var(--line-2);transition:border-color .3s}
.hero__now-k{grid-area:k;color:var(--accent)}
.hero__now-t{grid-area:t;font-size:1.5rem;letter-spacing:-.03em;font-weight:560;line-height:1.1}
.hero__now-d{grid-area:d;color:var(--fg-3)}
.hero__now-go{grid-area:go;align-self:center;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);transition:background .3s,border-color .3s,color .3s}
.hero__now:hover .hero__now-go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (min-width:900px){
  .hero__now{position:absolute;right:var(--gutter);bottom:clamp(40px,9vh,112px);margin:0;width:min(340px,26vw);min-width:280px}
  .hero__inner{padding-right:0}
}
/* load choreography: lines rise once, everything is interactive immediately */
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .hero__title .line__in{animation:rise 1.05s var(--ease) both}
  .js .hero__title .line:nth-child(2) .line__in{animation-delay:.09s}
  .js .hero__title .line:nth-of-type(2) .line__in{animation-delay:.09s}
  .js .hero__eyebrow,.js .hero__lede,.js .hero__cta,.js .hero__now{animation:fade-up .9s var(--ease) both}
  .js .hero__eyebrow{animation-delay:.02s}
  .js .hero__lede{animation-delay:.3s}
  .js .hero__cta{animation-delay:.4s}
  .js .hero__now{animation-delay:.6s}
}

/* ---------- Frames & media placeholders ---------- */
.frame{position:relative;display:block;aspect-ratio:var(--ratio,16/9);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame--empty{--mk:color-mix(in srgb,var(--p-ink,var(--fg)) 55%,transparent);color:var(--p-ink,var(--fg));border-color:color-mix(in srgb,var(--p-ink,var(--fg)) 16%,transparent);background:color-mix(in srgb,var(--p-accent,var(--fg)) 5%,var(--p-bg,var(--bg-2)))}
.frame--empty::before{ /* architectural corner markers */
  content:'';position:absolute;inset:clamp(10px,1.4vw,18px);pointer-events:none;
  background:
   linear-gradient(var(--mk),var(--mk)) 0 0/16px 1px no-repeat,linear-gradient(var(--mk),var(--mk)) 0 0/1px 16px no-repeat,
   linear-gradient(var(--mk),var(--mk)) 100% 0/16px 1px no-repeat,linear-gradient(var(--mk),var(--mk)) 100% 0/1px 16px no-repeat,
   linear-gradient(var(--mk),var(--mk)) 0 100%/16px 1px no-repeat,linear-gradient(var(--mk),var(--mk)) 0 100%/1px 16px no-repeat,
   linear-gradient(var(--mk),var(--mk)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--mk),var(--mk)) 100% 100%/1px 16px no-repeat;
  transition:inset .6s var(--ease)}
.frame--empty::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.1;background-image:radial-gradient(circle at 1px 1px,currentColor 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent)}
.frame__label{position:absolute;left:clamp(18px,2vw,28px);bottom:clamp(16px,1.8vw,26px);right:18px;z-index:1;font:450 clamp(.625rem,.55rem + .25vw,.75rem)/1.4 var(--f-mono);letter-spacing:.14em;color:color-mix(in srgb,var(--p-ink,var(--fg)) 66%,transparent)}
.frame--art{background:var(--p-bg);border-color:transparent}

/* ---------- Poster (code-generated launch artwork) ---------- */
.poster{position:absolute;inset:0;container-type:size;background:var(--p-bg);color:var(--p-ink);overflow:hidden}
.poster__wave{position:absolute;left:0;right:0;top:12%;width:100%;height:46%}
.poster__top{position:absolute;left:4cqw;right:4cqw;top:4cqw;display:flex;justify-content:space-between;gap:12px;font-size:max(10px,1.25cqw);letter-spacing:.14em;color:color-mix(in srgb,var(--p-ink) 74%,transparent)}
.poster__top span:first-child{color:var(--p-accent)}
.poster__tag{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:max(13px,2cqw)}
.poster__title{position:absolute;left:3.4cqw;bottom:12cqh;font-size:min(15cqw,38cqh);line-height:.8;font-weight:620;letter-spacing:-.06em;text-transform:uppercase;white-space:nowrap}
.poster__bottom{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.poster__date{font-size:max(14px,2.8cqw);font-weight:560;letter-spacing:-.02em;line-height:1}
.poster__platforms{font-size:max(10px,1.2cqw);letter-spacing:.14em;color:color-mix(in srgb,var(--p-ink) 74%,transparent)}
@media (max-width:640px){
  .frame--art{--ratio:4/5!important}
  .poster__wave{top:16%;height:34%}
  .poster__title{font-size:min(18cqw,24cqh)}
  .poster__tag{display:none}
}

/* ---------- Work grid ---------- */
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(48px,7vw,120px)}
.work-item{grid-column:1/-1;min-width:0}
.work-item__link{display:block}
.work-item__media{overflow:hidden;background:var(--p-bg)}
.work-item__media .frame{transition:transform 1.1s var(--ease)}
.work-item__meta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px clamp(14px,2vw,28px);align-items:start;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.work-item__idx{color:var(--fg-3);padding-top:.5em}
.work-item__title{font-size:clamp(1.6rem,1.1rem + 1.8vw,3rem);line-height:1;letter-spacing:-.04em;font-weight:520}
.work-item--feature .work-item__title{font-size:clamp(2rem,1.2rem + 3vw,4.75rem)}
.work-item__sub{margin-top:.8em;color:var(--fg-3)}
.work-item__sub span{opacity:.6}
.work-item__end{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.work-item__badge{padding:5px 9px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.work-item__badge--draft{border-style:dashed;color:var(--fg-3)}
.work-item__go{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);transition:background .35s,border-color .35s,color .35s}
.work-item__go .i{transition:transform .5s var(--ease)}
.work-item__link:focus-visible .work-item__go,
.work-item__link:hover .work-item__go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover){
  .work-item__link:hover .work-item__media .frame{transform:scale(1.02)}
  .work-item__link:hover .work-item__go .i{transform:rotate(45deg)}
  .work-item__link:hover .frame--empty::before{inset:clamp(6px,.9vw,12px)}
}
@media (max-width:640px){.work-item__meta{grid-template-columns:minmax(0,1fr) auto}.work-item__idx{display:none}}
@media (min-width:900px){
  .work-item:nth-child(2){grid-column:1/8}
  .work-item:nth-child(3){grid-column:9/13;margin-top:clamp(120px,16vw,280px)}
  .work-item:nth-child(4){grid-column:3/10}
  .work-item:nth-child(5){grid-column:10/13;margin-top:clamp(60px,8vw,140px)}
  .work-item:nth-child(n+6){grid-column:1/8}
  .work-item:nth-child(3) .work-item__meta,.work-item:nth-child(5) .work-item__meta{grid-template-columns:minmax(0,1fr) auto}
  .work-item:nth-child(3) .work-item__idx,.work-item:nth-child(5) .work-item__idx{display:none}
  .work-item:nth-child(3) .work-item__end .work-item__badge:not(.work-item__badge--draft){display:none}
}
.next-slot{margin-top:clamp(64px,9vw,140px);padding-top:28px;border-top:1px solid var(--line);display:grid;gap:18px;justify-items:start}
.next-slot__title{font-size:var(--fs-h2);line-height:1;letter-spacing:-.04em;font-weight:500;max-width:14ch}

/* ---------- Home sections ---------- */
.section--statement{padding-block:clamp(64px,10vw,160px)}
.statement{display:grid;gap:clamp(22px,3vw,40px)}
.statement__text{font-size:clamp(1.9rem,.9rem + 3.6vw,4.6rem);line-height:1.04;letter-spacing:-.04em;font-weight:480;max-width:22ch}
.statement__text em{color:var(--accent)}
.points{display:grid;gap:0 var(--gap);margin-top:clamp(32px,5vw,80px);grid-template-columns:repeat(3,minmax(0,1fr))}
.points li{padding-top:18px;border-top:1px solid var(--line-2);display:grid;gap:12px;align-content:start}
.points__n{color:var(--accent)}
.points h3{font-size:1.375rem;letter-spacing:-.025em;font-weight:560;line-height:1.15}
.points p{color:var(--fg-2);max-width:34ch}
@media (max-width:820px){.points{grid-template-columns:1fr;gap:28px}}

.svc-list{border-bottom:1px solid var(--line-2)}
.svc-row{border-top:1px solid var(--line-2)}
.svc-row a{display:grid;grid-template-columns:3rem minmax(0,1.1fr) minmax(0,1fr) 44px;gap:8px clamp(14px,2.4vw,40px);align-items:center;padding-block:clamp(22px,3vw,40px);transition:padding .5s var(--ease),background-color .4s}
.svc-row__idx{color:var(--fg-3)}
.svc-row__title{font-size:clamp(1.5rem,1rem + 1.7vw,2.9rem);line-height:1.02;letter-spacing:-.04em;font-weight:500}
.svc-row__lead{color:var(--fg-2);max-width:40ch}
.svc-row__go{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);transition:background .35s,border-color .35s,color .35s}
.svc-row a:focus-visible .svc-row__go,.svc-row a:hover .svc-row__go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover){.svc-row a:hover{padding-inline:clamp(8px,1.2vw,20px);background:var(--bg-2)}}
@media (max-width:760px){.svc-row a{grid-template-columns:2.2rem minmax(0,1fr) 44px}.svc-row__lead{grid-column:2/3;grid-row:2}.svc-row__go{grid-column:3;grid-row:1/3}}

.studio-teaser__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end}
.studio-teaser__grid .kicker{margin-bottom:22px}
.studio-teaser__grid .lead{margin-bottom:28px}
@media (max-width:820px){.studio-teaser__grid{grid-template-columns:1fr}}

.cta-band{border-top:1px solid var(--line);padding-block:clamp(72px,11vw,176px);background:var(--bg-2)}
.cta-band__inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end}
.cta-band .display{font-size:clamp(2.8rem,1rem + 6.4vw,8rem)}
.cta-band__side{display:grid;gap:28px;justify-items:start}
@media (max-width:900px){.cta-band__inner{grid-template-columns:1fr}}

/* ---------- Launch announcement ---------- */
.launch{background:var(--p-bg);color:var(--p-ink);padding-block:clamp(48px,7vw,104px);margin-block:clamp(40px,6vw,96px);border-block:1px solid color-mix(in srgb,var(--p-ink) 14%,transparent)}
.launch .kicker{color:var(--p-accent)}
.launch__inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:end}
.launch__date{font-size:clamp(2.4rem,.8rem + 6.2vw,7.4rem);line-height:.9;letter-spacing:-.05em;font-weight:560;margin-top:.35em;text-transform:none}
.launch__coming{display:block;font:italic 400 .36em/1.2 var(--f-serif);letter-spacing:0;color:var(--p-accent);margin-bottom:.3em}
.launch__date time{display:block}
.launch__platforms{margin-top:1.6em;color:color-mix(in srgb,var(--p-ink) 74%,transparent)}
.launch__side{display:grid;gap:22px;justify-items:start}
.launch__stores{display:flex;gap:10px;flex-wrap:wrap}
.launch__note{color:color-mix(in srgb,var(--p-ink) 66%,transparent);max-width:34ch;text-transform:none;letter-spacing:.02em}
.launch .btn--line{color:var(--p-ink);border-color:color-mix(in srgb,var(--p-ink) 36%,transparent)}
.launch .link-arrow{border-color:color-mix(in srgb,var(--p-ink) 36%,transparent)}
.launch .link-arrow:hover{color:var(--p-accent);border-color:var(--p-accent)}
.countdown{display:flex;gap:clamp(18px,3vw,40px)}
.countdown div{display:grid;gap:6px}
.countdown b{font:560 clamp(2.6rem,1.4rem + 4vw,5.5rem)/.9 var(--f-sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.countdown span{font:450 .6875rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--p-ink) 66%,transparent)}
@media (max-width:860px){.launch__inner{grid-template-columns:1fr}}

/* ---------- Project page ---------- */
.project-head{padding-top:calc(var(--header-h) + clamp(32px,6vw,88px));padding-bottom:clamp(28px,4vw,56px)}
.crumbs{display:flex;gap:.8em;color:var(--fg-3);margin-bottom:clamp(28px,4vw,56px)}
.crumbs a{border-bottom:1px solid var(--line-2)}
.crumbs a:hover{color:var(--accent);border-color:var(--accent)}
.project-head__title{font-size:clamp(3.4rem,1rem + 10.5vw,12rem);letter-spacing:-.06em;line-height:.86}
.project-head__tag{font:italic 400 clamp(1.4rem,1rem + 1.6vw,2.6rem)/1.15 var(--f-serif);color:var(--p-accent);margin-top:clamp(14px,2vw,28px);letter-spacing:-.015em}
.meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px var(--gap);margin-top:clamp(32px,5vw,72px);padding-top:20px;border-top:1px solid var(--line-2)}
.meta-grid dt{color:var(--fg-3);margin-bottom:8px}
.meta-grid dd{font-weight:500;line-height:1.35}
@media (max-width:760px){.meta-grid{grid-template-columns:1fr 1fr}}
.project-hero .frame{border-color:transparent}
.project-intro__text{font-size:clamp(1.6rem,1rem + 2.4vw,3.4rem);line-height:1.12;letter-spacing:-.035em;font-weight:480;max-width:26ch;margin-left:auto}
@media (max-width:900px){.project-intro__text{margin-left:0}}
.previews{display:grid;gap:var(--gap)}
.previews--desktop{grid-template-columns:repeat(12,minmax(0,1fr))}
.previews--desktop>div:nth-child(odd){grid-column:1/10}
.previews--desktop>div:nth-child(even){grid-column:4/13}
@media (max-width:760px){.previews--desktop>div:nth-child(n){grid-column:1/-1}}
.previews--mobile{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;margin-inline:auto}
/* fewer than three phones: keep them the same size and centre the row */
.previews--mobile:not(:has(> :nth-child(3))){grid-template-columns:repeat(auto-fit,minmax(0,calc((min(1100px,100%) - 2 * var(--gap)) / 3)));justify-content:center}
@media (max-width:640px){
  .previews--mobile{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:thin}
  .previews--mobile>div{flex:0 0 62%;scroll-snap-align:start}
}
.previews--gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.previews--gallery{grid-template-columns:1fr}}
.project-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,96px);padding-top:28px;border-top:1px solid var(--line-2)}
.project-about__body{display:grid;gap:20px;justify-items:start;font-size:var(--fs-lead);line-height:1.5;color:var(--fg-2);max-width:48ch}
@media (max-width:760px){.project-about{grid-template-columns:1fr}}
.outcomes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--gap);margin-top:24px}
.outcomes dd{font-size:clamp(2.4rem,1rem+4vw,5rem);letter-spacing:-.05em;line-height:1;font-weight:520}
.outcomes dt{color:var(--fg-3);margin-top:8px}
.next-project{margin-top:clamp(48px,8vw,120px)}
.next-project a{display:grid;grid-template-columns:1fr auto;grid-template-areas:'k go' 't go';gap:8px 24px;padding-block:clamp(24px,4vw,56px);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);align-items:center}
.next-project .mono{grid-area:k;color:var(--fg-3)}
.next-project__title{grid-area:t;font-size:clamp(2.2rem,1rem + 5vw,6rem);line-height:.95;letter-spacing:-.05em;font-weight:500}
.next-project__go{grid-area:go;display:grid;place-items:center;width:clamp(48px,6vw,80px);height:clamp(48px,6vw,80px);border:1px solid var(--line-2);transition:background .35s,color .35s,border-color .35s}
.next-project a:hover .next-project__go{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* ---------- Services & studio ---------- */
.svc-detail-list{border-bottom:1px solid var(--line-2)}
.svc-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--gap) clamp(28px,6vw,120px);padding-block:clamp(36px,5vw,72px);border-top:1px solid var(--line-2)}
.svc-detail__head{display:grid;gap:18px;align-content:start}
.svc-detail__idx{color:var(--accent)}
.svc-detail__title{max-width:12ch}
.svc-detail__body{display:grid;gap:22px;justify-items:start;max-width:56ch}
.svc-detail__lead{font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.015em;color:var(--fg);font-weight:480}
.svc-detail__why{color:var(--fg-2)}
.ticks{display:grid;gap:0;width:100%}
.ticks li{padding:12px 0 12px 28px;border-top:1px solid var(--line);position:relative}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{content:'';position:absolute;left:0;top:1.35em;width:12px;height:1px;background:var(--accent)}
@media (max-width:820px){.svc-detail{grid-template-columns:1fr}.svc-detail__title{max-width:none}}
.steps,.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--gap)}
.principles{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,5vw,64px) var(--gap)}
.steps li,.principles li{padding-top:18px;border-top:1px solid var(--line-2);display:grid;gap:12px;align-content:start}
.steps__n,.principles__n{color:var(--accent)}
.steps h3,.principles h3{font-size:clamp(1.35rem,1.1rem + .6vw,1.75rem);letter-spacing:-.03em;font-weight:540;line-height:1.1}
.steps p,.principles p{color:var(--fg-2);max-width:34ch}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps,.principles{grid-template-columns:1fr}}
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,112px);align-items:end}
.founder__media .frame{max-width:560px}
.founder__text{display:grid;gap:18px;align-content:end}
.founder__role{color:var(--fg-3)}
.founder__bio{display:grid;gap:16px;max-width:52ch;color:var(--fg-2);font-size:var(--fs-lead);line-height:1.5;margin-top:10px}
.note-empty{border:1px dashed var(--line-2);padding:22px;color:var(--fg-3);letter-spacing:.14em}
@media (max-width:820px){.founder{grid-template-columns:1fr}.founder__media .frame{max-width:none}}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap);margin-top:clamp(32px,5vw,64px)}
.team h3{font-size:1.25rem;margin-top:14px;letter-spacing:-.02em}
.team .mono{color:var(--fg-3)}
.team--future{opacity:.7}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,6vw,120px);align-items:start}
.contact__aside{display:grid;gap:32px;position:sticky;top:calc(var(--header-h) + 24px)}
.contact__details li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line)}
.contact__details .mono{color:var(--fg-3)}
.contact__details a{font-size:1.25rem;letter-spacing:-.02em;border-bottom:1px solid transparent;justify-self:start}
.contact__details a:hover{border-color:var(--accent)}
.contact__note{color:var(--fg-3);line-height:1.7}
.contact__note span{color:var(--accent)}
@media (max-width:900px){.contact{grid-template-columns:1fr}.contact__aside{position:static}}
.form{display:grid;gap:clamp(18px,2vw,28px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px)}
@media (max-width:640px){.form__row{grid-template-columns:1fr}}
.form__setup{border:1px dashed var(--accent);color:var(--accent);padding:12px 14px;text-transform:none;letter-spacing:.02em}
.form__setup code{font:inherit;color:var(--fg)}
.field{display:grid;gap:8px;align-content:start}
.field__label{font-size:.875rem;font-weight:560;color:var(--fg-2);letter-spacing:.005em}
.input,.select select{width:100%;min-height:56px;padding:14px 16px;font:400 1rem/1.4 var(--f-sans);color:var(--fg);background:transparent;border:1px solid var(--line-2);border-radius:0;transition:border-color .25s,background-color .25s;-webkit-appearance:none;appearance:none}
.input--area{min-height:176px;resize:vertical}
.input:hover,.select select:hover{border-color:var(--fg-3)}
.input:focus,.select select:focus{outline:none;border-color:var(--accent);background:var(--bg-2);box-shadow:0 0 0 1px var(--accent)}
.select{position:relative}
.select::after{content:'';position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--fg-2);border-bottom:1.5px solid var(--fg-2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select select option{background:var(--bg);color:var(--fg)}
.field.is-invalid .input,.field.is-invalid .select select{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.field__error{color:var(--danger);font-size:.875rem;font-weight:500}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:6px}
.form__privacy{color:var(--fg-3);border-bottom:1px solid var(--line-2)}
.form__status{min-height:1.5em;font-weight:520}
.form__status[data-state='success']{color:var(--fg);border-left:2px solid var(--accent);padding-left:14px}
.form__status[data-state='error']{color:var(--danger);border-left:2px solid var(--danger);padding-left:14px}
.notfound{min-height:80svh;display:grid;align-content:center;justify-items:start;gap:28px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-top:clamp(48px,7vw,96px);overflow:hidden}
.footer__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(auto-fit,minmax(150px,1fr));gap:36px var(--gap)}
.footer__line{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);letter-spacing:-.04em;line-height:1.05;font-weight:500;margin-bottom:22px;max-width:14ch}
.footer__col h2{color:var(--fg-3);margin-bottom:14px}
.footer__col li a{display:inline-block;padding:7px 0;font-weight:500;border-bottom:1px solid transparent}
.footer__col li a:hover{border-color:var(--accent)}
.footer__col li{line-height:1.5}
.footer__mark{padding-inline:var(--gutter);margin-top:clamp(40px,6vw,88px);max-width:var(--max);margin-inline:auto}
.wordmark--giant{width:100%;height:auto;color:var(--fg)}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px 28px;color:var(--fg-3);border-top:1px solid var(--line);margin-top:clamp(24px,3vw,40px)}
.footer__base span{color:var(--accent)}
.footer__base a{color:inherit}
.footer__legal{order:3;flex-basis:100%;opacity:.8}
/* legal pages (privacy) */
.legal__updated{margin-top:18px;color:var(--fg-3)}
.legal{display:grid;gap:clamp(28px,4vw,48px);max-width:820px}
.legal__block{display:grid;gap:12px;padding-top:clamp(20px,3vw,32px);border-top:1px solid var(--line)}
.legal__h{display:flex;gap:16px;align-items:baseline;font-size:clamp(1.3rem,1rem + 1vw,1.8rem);letter-spacing:-.02em;font-weight:500}
.legal__h .mono{color:var(--accent)}
.legal p{color:var(--fg-2);font-size:1.0625rem;line-height:1.65;max-width:68ch}
.footer__top:hover{color:var(--fg)}
.preview-flag{position:fixed;left:12px;bottom:12px;z-index:150;padding:7px 10px;background:var(--accent);color:var(--on-accent);font-size:.6875rem;pointer-events:none}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]:not(.work-item){opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .js [data-reveal].is-in:not(.work-item){opacity:1;transform:none}
  .js .work-item[data-reveal] .work-item__media{clip-path:inset(0 0 14% 0);transition:clip-path 1.2s var(--ease)}
  .js .work-item[data-reveal] .work-item__meta{opacity:0;transform:translateY(12px);transition:opacity .9s .25s var(--ease),transform .9s .25s var(--ease)}
  .js .work-item[data-reveal].is-in .work-item__media{clip-path:inset(0)}
  .js .work-item[data-reveal].is-in .work-item__meta{opacity:1;transform:none}

  /* page transitions (cross-document View Transitions, progressive enhancement) */
  @view-transition{navigation:auto}
  ::view-transition-group(site-header){animation-duration:0s}
  ::view-transition-old(root){animation:vt-out .55s var(--ease-io) both}
  ::view-transition-new(root){animation:vt-in .7s var(--ease-io) both}
  @keyframes vt-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
  @keyframes vt-out{from{transform:none;opacity:1}to{transform:translateY(-4%);opacity:.5}}
  ::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--ease-io)}
  ::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* hero: keep the "now showing" card legible over the particle field */
@media (min-width:900px){.hero__now{padding:16px 18px;background:color-mix(in srgb,var(--bg) 78%,transparent);border:1px solid var(--line-2)}}

/* launch typography details */
.poster__platforms,.launch__platforms{text-transform:none}
.poster__date,.launch__date time{text-transform:uppercase}
.poster__date{letter-spacing:.005em}
.launch__date{font-size:clamp(2.2rem,.6rem + 4.8vw,5.8rem)}
.poster__title{bottom:15cqh}

/* hero on small screens: text sits on a solid-ish base, buttons are full-width thumb targets */
@media (max-width:899px){
  .hero__scrim{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 90%,transparent) 52%,transparent 84%)}
  .hero__cta .btn{flex:1 1 100%}
  .hero__inner{padding-top:clamp(180px,34vh,320px)}
  .preview-flag{font-size:.5625rem;padding:5px 8px;left:8px;bottom:8px}
}

/* ==========================================================================
   v1.1 — team, expanded services, photo slots, office map
   ========================================================================== */

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li,.chips--nav a{display:inline-block;padding:7px 12px;border:1px solid var(--line-2);font:450 .75rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2);transition:border-color .3s,color .3s,background-color .3s}
.chips--nav{margin-top:clamp(28px,4vw,48px)}
.chips--nav a:hover,.chips--nav a:focus-visible{border-color:var(--accent);color:var(--fg)}

/* photo mosaic (office / behind the scenes) */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.mosaic__a{grid-column:1/5}
.mosaic__b{grid-column:5/10;margin-top:clamp(48px,9vw,160px)}
.mosaic__c{grid-column:10/13;margin-top:clamp(16px,3vw,56px)}
@media (max-width:760px){.mosaic__a{grid-column:1/8}.mosaic__b{grid-column:1/-1;margin-top:0}.mosaic__c{grid-column:8/13;margin-top:clamp(40px,12vw,80px);grid-row:1}}

/* home: statement photo + studio photos */
.statement__lead{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr);gap:clamp(24px,5vw,96px);align-items:end}
.statement__photo{max-width:420px;width:100%;justify-self:end}
@media (max-width:820px){.statement__lead{grid-template-columns:1fr}.statement__photo{justify-self:stretch;max-width:none}.statement__photo .frame{aspect-ratio:4/3!important}}
/* decorative loop videos (slots with an .mp4, project `ambient`) */
.frame--ambient video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.notfound__film{margin-top:clamp(32px,5vw,64px);max-width:860px}

/* home: the two founders, side by side at every width */
.studio-teaser__founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);max-width:900px;margin:clamp(36px,5vw,72px) 0 0 auto}
.founder-card{display:grid;gap:6px;text-decoration:none;color:var(--fg)}
.founder-card .frame{margin-bottom:8px;transition:transform .8s var(--ease)}
.founder-card__name{font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);letter-spacing:-.02em;font-weight:500}
.founder-card__role{color:var(--fg-3);font-size:.68rem}
@media (hover:hover){.founder-card:hover .frame{transform:translateY(-4px)}.founder-card:hover .founder-card__name{color:var(--accent)}}
@media (max-width:820px){.studio-teaser__founders{max-width:none;margin-left:0}}
.studio-teaser__photos{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--gap);margin-top:clamp(36px,5vw,72px);align-items:end}
@media (max-width:760px){.studio-teaser__photos{grid-template-columns:1fr 1fr}.studio-teaser__photos>div:first-child{grid-column:1/-1}}

/* services: visuals + cyber security sub-services */
.svc-detail__media{margin-top:clamp(12px,2vw,28px);max-width:440px;width:100%}
.svc-detail__note{text-transform:none;letter-spacing:.01em;color:var(--fg-2);border-left:2px solid var(--accent);padding-left:14px;line-height:1.6}
.svc-detail--cyber{border-top-color:var(--accent)}
.svc-sub{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gap);margin-top:clamp(12px,2vw,28px)}
.svc-sub li{padding:18px 0 28px;border-top:1px solid var(--line-2);display:grid;gap:10px;align-content:start}
.svc-sub .mono{color:var(--accent)}
.svc-sub h3{font-size:1.2rem;letter-spacing:-.02em;font-weight:560;line-height:1.15}
.svc-sub p{color:var(--fg-2);font-size:.96875rem;max-width:30ch}
@media (max-width:1100px){.svc-sub{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-sub{grid-template-columns:1fr}}

/* team */
.member-list{display:grid}
.member{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,112px);padding-block:clamp(36px,6vw,96px);border-top:1px solid var(--line-2);align-items:end}
.member:last-child{border-bottom:1px solid var(--line-2)}
.member:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.member:nth-child(even) .member__photo{order:2}
.member__photo .frame{max-width:520px}
.member:nth-child(even) .member__photo .frame{margin-left:auto}
.member__text{display:grid;gap:16px;align-content:end}
.member__idx{display:flex;gap:16px;color:var(--fg-3)}
.member__idx span:first-child{color:var(--accent)}
.member__partner{border:1px solid var(--accent);color:var(--accent);padding:2px 8px}
.member__name{font-size:clamp(2.4rem,1.2rem + 4.4vw,6rem);line-height:.92;letter-spacing:-.05em;font-weight:500}
.member__role{font:italic 400 clamp(1.25rem,1rem + 1vw,1.9rem)/1.2 var(--f-serif);color:var(--fg-2);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.member__born{font-style:normal;color:var(--fg-3)}
.member__bio{display:grid;gap:14px;max-width:54ch;color:var(--fg-2);font-size:1.125rem;line-height:1.55}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gap);margin-top:10px;padding-top:20px;border-top:1px solid var(--line)}
.facts dd{font-size:clamp(1.8rem,1.2rem + 1.8vw,3rem);letter-spacing:-.045em;line-height:1;font-weight:520}
.facts dt{color:var(--fg-3);margin-top:8px;line-height:1.4}
@media (max-width:820px){
  .member,.member:nth-child(even){grid-template-columns:1fr}
  .member:nth-child(even) .member__photo{order:0}
  .member__photo .frame{max-width:380px}
}

/* office + map */
.office{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--gap);align-items:stretch}
.office__side{display:grid;gap:var(--gap);align-content:start}
.office__address{font-style:normal;font-size:clamp(1.4rem,1.1rem + 1vw,2rem);letter-spacing:-.03em;line-height:1.15;font-weight:500;padding-bottom:20px;border-bottom:1px solid var(--line)}
.office__address .mono{display:block;margin-top:14px;font-weight:450;letter-spacing:.04em;text-transform:none;color:var(--fg-3);line-height:1.5}
@media (max-width:900px){.office{grid-template-columns:1fr}}
.office__map{min-width:0}
.map{position:relative;aspect-ratio:16/11;min-height:320px;width:100%;height:auto;overflow:hidden;border:1px solid var(--line-2);background:var(--bg-2);isolation:isolate}
.map__viewport{position:absolute;inset:0;z-index:-1}
.map__frame{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);border:0;pointer-events:none;filter:invert(1) hue-rotate(180deg) saturate(.3) brightness(1.55) contrast(.95)}
:root[data-theme='light'] .map__frame{filter:grayscale(1) contrast(1.06) brightness(1.03) sepia(.22)}
.map.is-active .map__frame{pointer-events:auto}
.map__tint{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 70% at 50% 50%,transparent 40%,color-mix(in srgb,var(--bg) 78%,transparent) 100%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%)}
.map__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.map__pin{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.map__pin::before,.map__pin::after{content:'';position:absolute;background:color-mix(in srgb,var(--accent) 55%,transparent)}
.map__pin::before{left:-150vw;width:300vw;top:0;height:1px}
.map__pin::after{top:-150vh;height:300vh;left:0;width:1px}
.map__pin b{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 28%,transparent)}
.map__pin i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border:1px solid var(--accent);border-radius:50%;opacity:0}
@media (prefers-reduced-motion:no-preference){.map__pin i{animation:ping 3s var(--ease) infinite}}
@keyframes ping{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.map__hud{position:absolute;left:14px;top:14px;display:grid;gap:4px;padding:10px 12px;background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid var(--line-2);pointer-events:none;max-width:calc(100% - 28px)}
.map__hud span:first-child{color:var(--accent)}
.map__hud span:not(:first-child){color:var(--fg-2)}
.map__actions{position:absolute;right:14px;bottom:14px;left:14px;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.map__toggle,.map__open{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;background:color-mix(in srgb,var(--bg) 88%,transparent);border:1px solid var(--line-2);color:var(--fg);transition:border-color .3s,background-color .3s}
.map__toggle:hover,.map__open:hover,.map__toggle[aria-pressed='true']{border-color:var(--accent)}
@media (max-width:640px){.map{aspect-ratio:4/5}}

/* device-specific photo slots: some frames exist only on laptops, others only on phones */
.only-mobile{display:none}
@media (max-width:899px){.only-desktop{display:none}.only-mobile{display:block}}
.page-head__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(24px,5vw,96px);align-items:end}
.page-head__photo{width:100%;max-width:520px;justify-self:end}
@media (max-width:899px){.page-head__row{grid-template-columns:1fr}.page-head__photo{max-width:none;justify-self:stretch;margin-top:12px}}
.next-slot{justify-items:stretch}
.next-slot__text{display:grid;gap:18px;justify-items:start}
@media (min-width:900px){.next-slot{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--gap);align-items:end}}
.wide-photo{margin-top:clamp(40px,6vw,96px)}
.break-photo{padding-bottom:clamp(8px,2vw,32px)}
.contact__photo{max-width:340px;width:100%}

/* ---------- Device frames: screenshots are presented, never pasted ---------- */
.frame--device{background:var(--p-bg,var(--bg-2));border-color:color-mix(in srgb,var(--p-ink,var(--fg)) 10%,transparent);display:grid;place-items:center;padding:clamp(14px,3.2%,40px) clamp(14px,4%,56px)}
.frame--device::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 100%,color-mix(in srgb,var(--p-accent,var(--accent)) 14%,transparent),transparent 70%)}
.frame--window{align-items:end}
.device{position:relative;width:100%;max-height:100%;overflow:hidden;display:flex;flex-direction:column;background:#0d0d0f;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--p-ink,var(--fg)) 14%,transparent)}
.device--window{border-radius:10px 10px 0 0;height:100%}
.frame--window .device__screen{flex:1;min-height:0;overflow:hidden;background:#0d0d0f}
.device__bar{flex:none;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#17171a;border-bottom:1px solid rgba(255,255,255,.07)}
.device__bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.device__url{margin-left:auto;margin-right:auto;font:450 .5625rem/1 var(--f-mono);letter-spacing:.08em;color:rgba(255,255,255,.4);text-transform:lowercase;padding:5px 12px;background:rgba(255,255,255,.05);border-radius:6px}
.device__screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.frame--phone{padding:clamp(14px,7%,32px) clamp(16px,11%,48px)}
.device--phone{width:auto;height:100%;border-radius:clamp(22px,9%,40px);padding:clamp(5px,2.4%,9px);background:#0d0d0f;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.06)}
/* one screen size for every phone so a row of three lines up; screenshots are anchored to the top */
.device--phone .device__screen{height:100%;aspect-ratio:9/16;border-radius:clamp(18px,8%,32px);overflow:hidden;position:relative}
.device--phone .device__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
:root[data-theme='light'] .device{box-shadow:0 30px 60px -24px rgba(20,16,10,.35),0 0 0 1px color-mix(in srgb,var(--p-ink,var(--fg)) 14%,transparent)}
.project-about__note{text-transform:none;letter-spacing:.02em;color:var(--fg-3)}
/* work grid: let the window breathe on the feature slot */
.work-item--feature .frame--window{padding-inline:clamp(16px,6%,96px)}
@media (hover:hover){.work-item__link:hover .frame--device .device{transform:translateY(-4px)}.frame--device .device{transition:transform 1s var(--ease)}}

/* clients: logo cards under the hero. Logos are shown as one-colour marks (white on dark, black on light) so mixed
   brand colours read as one set; a client without a logo file shows its name set in the serif. Linked cards lead to the case study. */
.clients{padding-block:clamp(40px,6vw,88px)}
.clients__k{color:var(--fg-3);margin:0 0 clamp(18px,2.4vw,28px)}
.clients__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.client{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;padding:clamp(12px,9%,28px);border:1px solid var(--line);border-radius:14px;background:var(--bg-2);text-decoration:none;color:var(--fg-2);transition:background-color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.client__logo{display:block;max-width:100%;max-height:60%;width:auto;height:auto;object-fit:contain;transition:opacity .5s var(--ease)}
.client__logo--mono{filter:grayscale(1) brightness(0) invert(1);opacity:.82}
:root[data-theme='light'] .client__logo--mono{filter:grayscale(1) brightness(0);opacity:.78}
.client__name{font-family:var(--f-serif);font-size:clamp(1.05rem,1.6vw,1.45rem);line-height:1.15;letter-spacing:-.01em;text-align:center}
a.client .client__name{color:var(--fg)}
@media (hover:hover){
  .client:hover{background:var(--bg-3);border-color:var(--line-2);transform:translateY(-3px)}
  .client:hover .client__logo--mono{opacity:1}
  .client:hover .client__name{color:var(--fg)}
  a.client:hover{border-color:var(--accent)}
}
a.client:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* project film (vertical promo): text beside a phone-proportioned player */
.project-film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(24px,6vw,112px);align-items:end}
.project-film__text{display:grid;gap:18px;max-width:46ch}
.project-film__lead{font-size:clamp(1.25rem,1rem + .9vw,1.75rem);line-height:1.35;color:var(--fg)}
.project-film__meta{color:var(--fg-3)}
.project-film__media{width:min(380px,100%);height:auto;justify-self:end;border-radius:18px;background:#000}
.project-film__media video{object-fit:cover}
@media (max-width:899px){.project-film{grid-template-columns:1fr}.project-film__media{justify-self:center;width:min(340px,100%)}}

/* before/after compare (visual studio). --pos is the wipe position in %, driven by site.js */
.ba{position:relative;margin:0;aspect-ratio:var(--ratio,4/3);overflow:hidden;border-radius:var(--radius,4px);background:var(--bg-2);--pos:50%;user-select:none;touch-action:pan-y}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.ba__handle i{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ba__handle i::before,.ba__handle i::after{content:'';position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.ba__handle i::before{left:9px;border-right-color:#16150f}
.ba__handle i::after{right:9px;border-left-color:#16150f}
.ba__tag{position:absolute;top:12px;padding:4px 8px;border-radius:2px;background:rgba(12,12,12,.62);color:#f4efe6;font-size:.62rem;pointer-events:none;transition:opacity .3s}
.ba__tag--before{left:12px}
.ba__tag--after{right:12px}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba:has(.ba__range:focus-visible) .ba__handle i{outline:2px solid var(--accent);outline-offset:3px}
.visual-note{margin-top:14px;color:var(--fg-3)}

/* two founders: side by side, each portrait above its own text */
.member-list--duo{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,72px);border-top:1px solid var(--line-2)}
.member-list--duo .member,.member-list--duo .member:nth-child(even){grid-template-columns:1fr;gap:clamp(20px,2.4vw,32px);border:0;padding-block:clamp(28px,4vw,56px) 0;align-items:start;align-content:start}
.member-list--duo .member:nth-child(even) .member__photo{order:0}
.member-list--duo .member__photo .frame,.member-list--duo .member:nth-child(even) .member__photo .frame{max-width:none;margin-left:0}
.member-list--duo .member__text{align-content:start}
.member-list--duo .member__name{font-size:clamp(2rem,1rem + 2.6vw,3.6rem)}
@media (max-width:899px){.member-list--duo{grid-template-columns:1fr}.member-list--duo .member + .member{border-top:1px solid var(--line-2);margin-top:clamp(28px,6vw,48px)}}

/* "Assembly" film in the Who We Are header: the symbol forms out of light, the motto fades in while it holds (--cap set by assembly.js) */
.page-head__media{max-width:600px}
.film{position:relative;margin:0;aspect-ratio:3/2;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 50% 38%,var(--bg-3),var(--bg-2) 70%)}
.film__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film__cap{position:absolute;left:6%;right:6%;bottom:9%;display:grid;justify-items:center;gap:.55em;text-align:center;pointer-events:none}
.film__k,.film__motto{opacity:var(--cap,0);transform:translateY(calc((1 - var(--cap,0)) * 8px))}
.film__k{color:var(--fg-3)}
.film__motto{font-family:var(--f-serif);font-size:clamp(1.2rem,2.1vw,1.75rem);line-height:1.15;letter-spacing:-.01em;color:var(--fg);filter:blur(calc((1 - var(--cap,0)) * 3px))}
@media (max-width:899px){.page-head__media{max-width:none}.film{aspect-ratio:16/10}.film__k{font-size:.62rem}}
@media (max-width:899px){.clients__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.client{border-radius:12px;aspect-ratio:2/1}}