/* =====================================================================
   AVENTO — site styles
   1  Tokens            7  Media
   2  Base              8  Home sections
   3  Type              9  Inner pages
   4  Buttons & links   10 Footer
   5  Header & menu     11 Overlays (curtain, cursor, preview)
   6  Layout            12 Motion
   Units: landscape sizes are "design px" on the 1487×1058 comp
   (× --h, or × --u for the header); portrait uses × --m.
   ===================================================================== */

/* 1 ── TOKENS ─────────────────────────────────────────────────────── */
/* Manrope variable (200–800), Google Fonts' own latin + latin-ext files (Turkish ğ ş İ live in
   latin-ext), served from our host. License: assets/fonts/OFL.txt */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.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;
}

@property --fg { syntax: '<color>'; inherits: true; initial-value: #f5f8ff; }
@property --fg-2 { syntax: '<color>'; inherits: true; initial-value: #a3aec4; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, .13); }
@property --page { syntax: '<color>'; inherits: true; initial-value: #061738; }

:root {
  --ink: #f5f8ff;
  --muted: #a3aec4;
  --nav: #b5bed2;
  --strip: #8792ab;
  --pill: #ffffff;
  --pill-ink: #06112b;
  --bg: #061738;
  --bg-rgb: 6 23 56;
  --bg-deep: #040f27;
  --bg-raise: #0b2152;
  --ice: #edf1f9;
  --ice-ink: #071a40;
  --ice-muted: #4a5878;

  /* theme-aware colours (flip inside light sections) */
  --fg: var(--ink);
  --fg-2: var(--muted);
  --line: rgb(255 255 255 / .13);
  --page: var(--bg);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);

  --u: calc(100vh / 1058);
  --uw: calc(100vw / 1487);
  --h: clamp(var(--u), calc(var(--u) * .65 + var(--uw) * .35), calc(var(--u) * 1.16));

  --header-h: calc(103 * var(--u));
  --gutter: calc(75 * var(--u));
  --col-gap: calc(28 * var(--h));

  --fs-mega: calc(214 * var(--h));
  --fs-display: calc(132 * var(--h));
  --fs-h2: calc(76 * var(--h));
  --fs-h3: calc(34 * var(--h));
  --fs-xl: calc(54 * var(--h));
  --fs-lead: calc(25 * var(--h));
  --fs-body: clamp(15px, calc(18 * var(--h)), 22px);
  --fs-small: clamp(13px, calc(15 * var(--h)), 18px);
  --fs-label: clamp(11px, calc(12.5 * var(--h)), 15px);

  --space-xs: calc(12 * var(--h));
  --space-s: calc(24 * var(--h));
  --space-m: calc(48 * var(--h));
  --space-l: calc(96 * var(--h));
  --space-xl: calc(160 * var(--h));
  --section-y: calc(170 * var(--h));
}
@supports (height: 100svh) { :root { --u: calc(100svh / 1058); } }

@media (max-aspect-ratio: 11/10) {
  :root {
    --m: min(calc(100vw / 430), 1.34px);
    --u: var(--m);
    --h: var(--m);
    --header-h: calc(80 * var(--m));
    --gutter: calc(22 * var(--m));
    --col-gap: calc(14 * var(--m));
    --fs-mega: calc(96 * var(--m));
    --fs-display: calc(58 * var(--m));
    --fs-h2: calc(42 * var(--m));
    --fs-h3: calc(25 * var(--m));
    --fs-xl: calc(30 * var(--m));
    --fs-lead: calc(19 * var(--m));
    --fs-body: max(15px, calc(16.5 * var(--m)));
    --fs-small: max(13px, calc(14 * var(--m)));
    --fs-label: max(11px, calc(11.5 * var(--m)));
    --space-xs: calc(10 * var(--m));
    --space-s: calc(18 * var(--m));
    --space-m: calc(32 * var(--m));
    --space-l: calc(64 * var(--m));
    --space-xl: calc(96 * var(--m));
    --section-y: calc(104 * var(--m));
  }
}
@media (min-width: 600px) and (max-aspect-ratio: 11/10) {
  :root {
    --m: min(calc(100vw / 860), calc(100vh / 760), 1.25px);
    --header-h: calc(108 * var(--m));
    --gutter: calc(56 * var(--m));
    --col-gap: calc(22 * var(--m));
    --fs-mega: calc(170 * var(--m));
    --fs-display: calc(100 * var(--m));
    --fs-h2: calc(64 * var(--m));
    --fs-h3: calc(32 * var(--m));
    --fs-xl: calc(44 * var(--m));
    --fs-lead: calc(23 * var(--m));
    --fs-body: max(15px, calc(18 * var(--m)));
    --fs-small: max(13px, calc(15 * var(--m)));
    --space-s: calc(22 * var(--m));
    --space-m: calc(40 * var(--m));
    --space-l: calc(80 * var(--m));
    --space-xl: calc(128 * var(--m));
    --section-y: calc(140 * var(--m));
  }
}

/* 2 ── BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  transition: --fg .8s var(--ease), --fg-2 .8s var(--ease), --line .8s var(--ease), --page .8s var(--ease);
}
html.theme-light {
  --fg: var(--ice-ink);
  --fg-2: var(--ice-muted);
  --line: rgb(7 26 64 / .14);
  --page: var(--ice);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
  color: var(--fg);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid rgb(157 184 255 / .9); outline-offset: 4px; border-radius: 6px; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 200; padding: 10px 16px; border-radius: 999px;
  background: var(--pill); color: var(--pill-ink); font-weight: 600; transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

/* 3 ── TYPE ───────────────────────────────────────────────────────── */
.eyebrow {
  display: flex; align-items: center; gap: .9em;
  font-size: var(--fs-label); font-weight: 500; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2);
}
.eyebrow b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
.eyebrow b::after {
  content: ""; display: inline-block; width: calc(34 * var(--h)); height: 1px;
  margin-left: .9em; vertical-align: middle; background: currentColor; opacity: .45;
}
.display { font-size: var(--fs-display); font-weight: 400; line-height: .95; letter-spacing: -.045em; }
.mega { font-size: var(--fs-mega); font-weight: 400; line-height: .86; letter-spacing: -.055em; }
.h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; }
.h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.14; letter-spacing: -.02em; }
.lead { font-size: var(--fs-lead); line-height: 1.42; letter-spacing: -.012em; color: var(--fg-2); }
.small { font-size: var(--fs-small); }
.dim { color: var(--fg-2); }
.sup { font-size: .24em; letter-spacing: 0; vertical-align: top; color: var(--fg-2); margin-left: .15em; font-variant-numeric: tabular-nums; }
.prose p + p { margin-top: 1.1em; }
.prose p { color: var(--fg-2); }
.prose strong { color: var(--fg); font-weight: 600; }

/* 4 ── BUTTONS & LINKS ────────────────────────────────────────────── */
.roll { display: inline-block; height: 1.25em; line-height: 1.25; overflow: hidden; vertical-align: top; }
.roll > span { display: block; transition: transform .65s var(--ease); }
.roll > span::after { content: attr(data-text); display: block; }
a:hover .roll > span, button:hover .roll > span, .roll-host:hover .roll > span { transform: translateY(-50%); }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--pill); color: var(--pill-ink); border: 0; border-radius: 999px;
  font-weight: 500; line-height: 1; white-space: nowrap; overflow: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill:hover { background: #e4ebf8; }
.pill:focus-visible { border-radius: 999px; }
.pill > span { display: block; transform: translateY(calc(1 * var(--u))); }
.pill--md { height: calc(54 * var(--h)); padding: 0 calc(30 * var(--h)); font-size: max(14px, calc(18 * var(--h))); }
.pill--lg { height: calc(66 * var(--h)); padding: 0 calc(38 * var(--h)); font-size: max(15px, calc(21 * var(--h))); }
.pill--line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.pill--line:hover { background: var(--fg); color: var(--page); box-shadow: inset 0 0 0 1px var(--fg); }
html.theme-light main .pill:not(.pill--line) { background: var(--ice-ink); color: #fff; }
.pill .sup { font-size: .7em; margin-left: .1em; color: inherit; opacity: .6; vertical-align: super; }

.ghost { font-weight: 500; line-height: 1; color: #fff; white-space: nowrap; transition: opacity .25s var(--ease); }
.ghost:hover { opacity: .72; }

.link {
  position: relative; display: inline-flex; align-items: center; gap: .5em;
  font-weight: 500; line-height: 1.3; color: var(--fg);
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.28em; height: 1px;
  background: currentColor; transform: scaleX(.18); transform-origin: left;
  transition: transform .7s var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link .i-arrow { width: 1em; height: 1em; transition: transform .6s var(--ease); }
.link:hover .i-arrow { transform: translateX(.25em); }
.i-arrow { flex: none; width: 1em; height: 1em; }

.round-btn {
  display: inline-grid; place-items: center; flex: none;
  width: calc(56 * var(--h)); height: calc(56 * var(--h)); min-width: 44px; min-height: 44px;
  border-radius: 50%; border: 0; background: transparent; color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.round-btn:hover { background: var(--fg); color: var(--page); box-shadow: inset 0 0 0 1px var(--fg); }
.round-btn svg { width: 40%; height: 40%; }

.chip {
  display: inline-flex; align-items: center; gap: .45em;
  height: calc(44 * var(--h)); min-height: 38px; padding: 0 calc(20 * var(--h));
  border: 0; border-radius: 999px; background: transparent; color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-small); line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--fg-2); }
.chip[aria-pressed="true"], input:checked + .chip { background: var(--fg); color: var(--page); box-shadow: inset 0 0 0 1px var(--fg); }
input:focus-visible + .chip { outline: 2px solid rgb(157 184 255 / .9); outline-offset: 3px; }
.chip sup { font-size: .72em; opacity: .65; }

/* 5 ── HEADER & MENU ──────────────────────────────────────────────── */
.topbar {
  position: fixed; left: 0; top: 0; width: 100%; height: 0; z-index: 60;
  transition: transform .7s var(--ease);
}
.topbar::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--header-h);
  background: rgb(var(--bg-rgb) / .72);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid rgb(255 255 255 / .08);
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
html.is-scrolled .topbar::before { opacity: 1; }
html.is-header-hidden .topbar { transform: translateY(calc(-1 * var(--header-h) - 4px)); }

.brand {
  position: absolute; left: calc(75 * var(--u)); top: calc(27 * var(--u));
  width: calc(31.5 * var(--u)); height: calc(48.5 * var(--u)); display: block;
}
.brand svg { display: block; width: 100%; height: 100%; }

.links {
  position: absolute; left: 50%; top: calc(51 * var(--u)); transform: translate(-50%, -50%);
  display: flex; align-items: center; white-space: nowrap;
  font-size: calc(19 * var(--u)); font-weight: 400; line-height: 1; color: var(--nav);
}
.links a { position: relative; display: block; transition: color .25s var(--ease); }
.links a:hover, .links a[aria-current="page"] { color: var(--ink); }
.links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-8 * var(--u));
  height: max(1px, calc(1.5 * var(--u))); border-radius: 1px; background: currentColor;
}
.links a + a { margin-left: calc(24.5 * var(--u)); }
.links a:nth-child(3) { margin-left: calc(23.5 * var(--u)); }
.links a:nth-child(4) { margin-left: calc(26 * var(--u)); }

.pill-nav {
  position: absolute; right: calc(75.4 * var(--u)); top: calc(27 * var(--u));
  width: calc(175 * var(--u)); height: calc(49 * var(--u)); font-size: calc(20.6 * var(--u));
}

.burger { display: none; }
.menu { display: none; }

/* 6 ── LAYOUT ─────────────────────────────────────────────────────── */
.container { padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }

.section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; margin-bottom: var(--space-l); }
.section-head .eyebrow { grid-column: 1 / -1; margin-bottom: var(--space-m); }
.section-head .h2 { grid-column: 1 / span 8; }
.section-head .section-cta { grid-column: 10 / span 3; justify-self: end; }

.page-hero { padding-top: calc(var(--header-h) + 150 * var(--h)); padding-bottom: var(--space-l); }
.page-hero .eyebrow { margin-bottom: var(--space-m); }
.page-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
.page-hero-grid > .display, .page-hero-grid > .mega { grid-column: 1 / span 10; }
.page-hero-grid > .lead { grid-column: 1 / span 6; margin-top: var(--space-m); }
.page-hero-grid > .page-hero-aside { grid-column: 9 / span 4; justify-self: end; text-align: right; }

.hairline { height: 1px; background: var(--line); }

/* 7 ── MEDIA ──────────────────────────────────────────────────────── */
.media { position: relative; overflow: hidden; background: var(--bg-raise); isolation: isolate; }
.media-inner { position: absolute; inset: 0; transition: transform 1.3s var(--ease); }
.media img, .media video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.media[data-parallax] img, .media[data-parallax] video { top: -10%; height: 120%; }
.media.is-tinted img { filter: grayscale(1) contrast(1.08) brightness(.8); transition: filter 1.1s var(--ease); }
.media.is-tinted::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #2a4f9c 0%, #0d2a6a 100%);
  mix-blend-mode: color; opacity: .92; transition: opacity 1.1s var(--ease);
}
a:hover .media-inner, .media-hover:hover .media-inner { transform: scale(1.045); }
a:hover .media.is-tinted img, .media-hover:hover .media.is-tinted img { filter: grayscale(.15) contrast(1.04) brightness(.92); }
a:hover .media.is-tinted::after, .media-hover:hover .media.is-tinted::after { opacity: .25; }

/* team portrait placeholder: silhouette against a slit of light (echoes the hero portal) */
@property --lw { syntax: '<percentage>'; inherits: false; initial-value: 9%; }
.portrait {
  --lx: 50%; position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  background:
    linear-gradient(90deg, transparent calc(var(--lx) - var(--lw) * 2.4), rgb(198 214 255 / .5) calc(var(--lx) - var(--lw)), #f4f7ff var(--lx), rgb(198 214 255 / .5) calc(var(--lx) + var(--lw)), transparent calc(var(--lx) + var(--lw) * 2.4)) 0 14% / 100% 86% no-repeat,
    linear-gradient(180deg, #0c2457 0%, #061738 100%);
  transition: --lw 1s var(--ease);
}
.portrait svg { position: absolute; left: 50%; bottom: 0; width: 86%; transform: translateX(-50%); fill: #040f27; }
.member:hover .portrait { --lw: 16%; }

/* 8 ── HOME SECTIONS ──────────────────────────────────────────────── */
/* intro / manifesto */
.intro { padding-top: calc(var(--section-y) * 1.05); }
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.intro-grid .eyebrow { grid-column: 1 / span 3; padding-top: .9em; align-self: start; }
.manifesto { grid-column: 4 / span 9; font-size: var(--fs-xl); line-height: 1.14; letter-spacing: -.028em; }
.manifesto .w { will-change: opacity; }
.intro-side { grid-column: 8 / span 5; display: grid; gap: var(--space-m); justify-items: start; margin-top: var(--space-l); }
.intro-side p { color: var(--fg-2); max-width: 40ch; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-xl); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: var(--space-s) var(--space-s) 0 0; border-top: 1px solid var(--line); }
.stat + .stat { padding-left: var(--space-s); }
.stat-num { font-size: calc(92 * var(--h)); font-weight: 300; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat-num em { font-style: normal; color: var(--fg-2); }
.stat-label { margin-top: var(--space-s); font-size: var(--fs-small); color: var(--fg-2); }

/* featured work */
.feature-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-l); }
.pc { display: block; }
.pc .media { aspect-ratio: 16 / 11; }
.pc--a { grid-column: 1 / span 7; }
.pc--b { grid-column: 9 / span 4; margin-top: var(--space-xl); }
.pc--b .media, .pc--c .media { aspect-ratio: 4 / 5; }
.pc--c { grid-column: 2 / span 4; }
.pc--d { grid-column: 7 / span 6; margin-top: calc(var(--space-l) * -.5); }
.pc-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s);
  margin-top: var(--space-s); padding-top: var(--space-xs);
}
.pc-title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; }
.pc-info { font-size: var(--fs-small); color: var(--fg-2); text-align: right; line-height: 1.5; }

/* services list (light section) */
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.svc-row a {
  display: grid; grid-template-columns: calc(80 * var(--h)) minmax(0, 1fr) minmax(0, .9fr) calc(56 * var(--h));
  align-items: center; column-gap: var(--space-s);
  padding: calc(30 * var(--h)) 0; border-bottom: 1px solid var(--line);
  transition: opacity .5s var(--ease);
}
.svc-num { font-size: var(--fs-small); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.svc-name { font-size: calc(56 * var(--h)); line-height: 1.05; letter-spacing: -.035em; transition: transform .7s var(--ease); }
.svc-tags { font-size: var(--fs-small); color: var(--fg-2); line-height: 1.5; }
.svc-arrow {
  justify-self: end; display: grid; place-items: center;
  width: calc(56 * var(--h)); height: calc(56 * var(--h)); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s var(--ease), color .4s var(--ease), transform .7s var(--ease);
}
.svc-arrow svg { width: 38%; height: 38%; }
.svc:hover .svc-row a { opacity: .38; }
.svc .svc-row a:hover { opacity: 1; }
.svc-row a:hover .svc-name { transform: translateX(calc(22 * var(--h))); }
.svc-row a:hover .svc-arrow { background: var(--fg); color: var(--page); transform: rotate(-45deg); }

/* process */
.process-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.process-aside { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--space-m)); align-self: start; }
.process-aside .eyebrow { margin-bottom: var(--space-m); }
.process-meter { display: flex; align-items: baseline; gap: .4em; margin-top: var(--space-l); font-variant-numeric: tabular-nums; }
.process-meter b { font-size: calc(110 * var(--h)); font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.process-meter span { color: var(--fg-2); font-size: var(--fs-small); }
.process-bar { position: relative; height: 1px; margin-top: var(--space-s); background: var(--line); max-width: calc(360 * var(--h)); }
.process-bar i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0); }
.process-steps { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; }
.step { padding: var(--space-l) 0; border-top: 1px solid var(--line); opacity: .3; transition: opacity .7s var(--ease); }
.step:first-child { padding-top: 0; border-top: 0; }
.step.is-active { opacity: 1; }
.step-num { font-size: var(--fs-small); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.step .h3 { margin: var(--space-xs) 0 var(--space-s); font-size: calc(46 * var(--h)); font-weight: 400; letter-spacing: -.035em; }
.step p { color: var(--fg-2); max-width: 46ch; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--space-s) 0 0; padding: 0; }
.tags li { font-size: var(--fs-label); padding: .6em 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); line-height: 1.2; }

/* marquee */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-group { display: flex; align-items: center; flex: none; gap: calc(90 * var(--h)); padding-right: calc(90 * var(--h)); }
.clients .eyebrow { justify-content: center; margin-bottom: var(--space-m); }
.client {
  display: inline-flex; align-items: center; gap: .55em; color: var(--strip); white-space: nowrap;
  font-family: 'IpsumMark', 'Manrope', sans-serif; font-weight: 700; font-size: calc(27 * var(--h)); letter-spacing: -.02em;
  transition: color .3s var(--ease);
}
.client:hover { color: var(--fg); }
.client svg { width: 1.3em; height: 1.3em; }
.text-marquee .marquee-group { font-size: var(--fs-mega); line-height: 1.12; gap: .3em; padding-right: .3em; }
.text-marquee span { font-weight: 400; letter-spacing: -.05em; white-space: nowrap; }
.text-marquee .o { color: transparent; -webkit-text-stroke: 1px var(--fg-2); }
.text-marquee .star { flex: none; width: .26em; height: .4em; }
.tools-marquee .marquee-group { font-size: calc(104 * var(--h)); }

/* testimonials */
.quotes-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.quotes-grid .eyebrow { grid-column: 1 / span 3; padding-top: .9em; align-self: start; }
.quote-stage { grid-column: 4 / span 9; display: grid; }
.quote { grid-area: 1 / 1; visibility: hidden; }
.quote.is-active { visibility: visible; }
.quote-text { font-size: calc(52 * var(--h)); line-height: 1.14; letter-spacing: -.03em; text-indent: -.42em; }
.quote figcaption { display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-m); }
.quote-avatar { flex: none; width: calc(56 * var(--h)); height: calc(56 * var(--h)); min-width: 40px; min-height: 40px; border-radius: 50%; aspect-ratio: 1; }
.quote-avatar svg { width: 100%; }
.quote-name { display: block; font-weight: 600; }
.quote-role { display: block; color: var(--fg-2); font-size: var(--fs-small); }
.quote-nav { grid-column: 4 / span 9; display: flex; align-items: center; gap: var(--space-s); margin-top: var(--space-l); }
.quote-index { font-size: var(--fs-small); color: var(--fg-2); font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.quote-progress { position: relative; flex: 1; height: 1px; background: var(--line); }
.quote-progress i { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(0); }

/* promises ("Sözümüz" list; the .award* names date from the old awards list) */
.awards-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.awards-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-m)); align-self: start; }
.awards-head .eyebrow { margin-bottom: var(--space-m); }
.awards-list { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.award {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 7em; align-items: baseline; column-gap: var(--space-s);
  padding: calc(28 * var(--h)) 0; border-bottom: 1px solid var(--line);
}
/* slide with transform, not padding: padding narrows the columns and re-wraps the description */
.award > .aw-name, .award > .aw-what { transition: transform .6s var(--ease); }
.award:hover > .aw-name, .award:hover > .aw-what { transform: translateX(calc(18 * var(--h))); }
.aw-name { font-size: calc(28 * var(--h)); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.aw-what, .aw-year { color: var(--fg-2); font-size: var(--fs-small); }
.aw-year { font-variant-numeric: tabular-nums; text-align: right; }

/* 9 ── INNER PAGES ────────────────────────────────────────────────── */
/* work archive */
.work-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); padding-block: var(--space-s); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.view-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.view-toggle .chip { box-shadow: none; height: calc(38 * var(--h)); min-height: 34px; }
.archive { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-l); padding-top: var(--space-l); }
.work-item { display: block; grid-column: span 6; }
.work-item[hidden] { display: none; }
.work-item.is-offset { margin-top: var(--space-xl); }
.work-item .media { aspect-ratio: 4 / 3; }
.wi-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-s); row-gap: 4px; margin-top: var(--space-s); }
.wi-title { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.wi-client { grid-column: 1; grid-row: 2; color: var(--fg-2); font-size: var(--fs-small); }
.wi-cat { grid-column: 2; grid-row: 1; color: var(--fg-2); font-size: var(--fs-small); text-align: right; align-self: center; }
.wi-year { grid-column: 2; grid-row: 2; color: var(--fg-2); font-size: var(--fs-small); text-align: right; font-variant-numeric: tabular-nums; }
.archive[data-view="list"] { display: block; padding-top: 0; }
.archive[data-view="list"] .work-item {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) calc(90 * var(--h)); align-items: center; column-gap: var(--space-s);
  margin-top: 0; padding: calc(30 * var(--h)) 0; border-bottom: 1px solid var(--line); transition: opacity .5s var(--ease);
}
.archive[data-view="list"] .work-item[hidden] { display: none; }
.archive[data-view="list"] .media { display: none; }
.archive[data-view="list"] .wi-meta { display: contents; }
.archive[data-view="list"] .wi-title { grid-column: 1; grid-row: 1; font-size: calc(46 * var(--h)); font-weight: 400; letter-spacing: -.035em; transition: transform .7s var(--ease); }
.archive[data-view="list"] .wi-client { grid-column: 2; grid-row: 1; }
.archive[data-view="list"] .wi-cat { grid-column: 3; grid-row: 1; text-align: left; }
.archive[data-view="list"] .wi-year { grid-column: 4; grid-row: 1; }
.archive[data-view="list"]:hover .work-item { opacity: .38; }
.archive[data-view="list"] .work-item:hover { opacity: 1; }
.archive[data-view="list"] .work-item:hover .wi-title { transform: translateX(calc(20 * var(--h))); }
.archive-empty { padding-block: var(--space-l); color: var(--fg-2); }

/* case study */
.case-hero { padding-top: calc(var(--header-h) + 130 * var(--h)); }
.case-hero .mega { margin-top: var(--space-m); }
.case-hero .lead { max-width: 30ch; margin-top: var(--space-m); color: var(--fg); }
.meta-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--space-l); border-top: 1px solid var(--line); padding-top: var(--space-s); }
.meta-grid dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.meta-grid dd { margin-top: .6em; font-size: var(--fs-small); line-height: 1.5; }
.case-cover { margin-top: var(--space-l); height: calc(100vh - var(--header-h)); min-height: 360px; }
.case-cover .media { height: 100%; }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-m); }
.split .eyebrow { grid-column: 1 / span 3; align-self: start; padding-top: .9em; }
.split > .h2 { grid-column: 4 / span 9; }
.split-cols { grid-column: 4 / span 9; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-l); row-gap: var(--space-m); }
.split-cols h3 { font-size: var(--fs-small); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: var(--space-s); }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--col-gap); }
.g-full { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.g-half { grid-column: span 6; aspect-ratio: 4 / 5; }
.g-wide { grid-column: 1 / span 8; aspect-ratio: 16 / 10; }
.g-side { grid-column: 9 / span 4; align-self: end; }
.g-side p { color: var(--fg-2); }
.g-side .h3 { margin-bottom: var(--space-s); }
.results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split > .credits { grid-column: 4 / span 9; }
.credits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-m); }
.credits dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.credits dd { margin-top: .6em; }
.next { display: block; position: relative; padding-block: var(--space-xl); border-top: 1px solid var(--line); overflow: hidden; }
.next .eyebrow { margin-bottom: var(--space-m); }
.next-title { display: flex; align-items: center; gap: .25em; font-size: var(--fs-mega); line-height: .9; letter-spacing: -.055em; position: relative; z-index: 2; transition: transform .9s var(--ease); }
.next-title svg { width: .6em; height: .6em; transition: transform .8s var(--ease); }
.next:hover .next-title { transform: translateX(calc(30 * var(--h))); }
.next:hover .next-title svg { transform: rotate(-45deg); }
.next-media { position: absolute; right: var(--gutter); top: 50%; width: calc(420 * var(--h)); aspect-ratio: 4 / 3; transform: translateY(-50%) scale(.85); opacity: 0; transition: opacity .7s var(--ease), transform 1s var(--ease); z-index: 1; }
.next:hover .next-media { opacity: 1; transform: translateY(-50%) scale(1); }

/* services page */
.svc-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: var(--space-l); border-top: 1px solid var(--line); scroll-margin-top: var(--header-h); }
.svc-block-aside { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--space-m)); align-self: start; }
.svc-block-aside .svc-num { display: block; margin-bottom: var(--space-s); }
.svc-block-aside .h2 { font-size: calc(64 * var(--h)); }
.svc-block-body { grid-column: 7 / span 6; }
.svc-block-body .lead { color: var(--fg); }
.deliverables { columns: 2; column-gap: var(--space-m); list-style: none; padding: 0; margin: var(--space-m) 0 0; }
.deliverables li { break-inside: avoid; padding: .75em 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.svc-block-body .media { aspect-ratio: 16 / 10; margin-top: var(--space-m); }
.svc-facts { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-m); }
.svc-facts dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.svc-facts dd { margin-top: .4em; }
.models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
.model { padding-top: var(--space-s); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-s); }
.model .h3 { font-size: calc(40 * var(--h)); font-weight: 400; letter-spacing: -.03em; }
.model p { color: var(--fg-2); }
.model ul { list-style: none; padding: 0; margin: 0; }
.model li { padding: .7em 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.model .model-foot { margin-top: auto; padding-top: var(--space-s); color: var(--fg-2); font-size: var(--fs-small); }

/* accordion */
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.faq-grid > .faq-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--space-m)); align-self: start; }
.faq-grid > .faq-head .eyebrow { margin-bottom: var(--space-m); }
.faq-grid > .faq-head p { margin-top: var(--space-m); color: var(--fg-2); max-width: 30ch; }
.accordion { grid-column: 6 / span 7; border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); width: 100%;
  padding: calc(28 * var(--h)) 0; border: 0; background: none; text-align: left;
  font-size: calc(28 * var(--h)); line-height: 1.25; letter-spacing: -.02em;
}
.acc-icon { position: relative; flex: none; width: calc(44 * var(--h)); height: calc(44 * var(--h)); min-width: 34px; min-height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: background-color .4s var(--ease), transform .7s var(--ease); }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .6s var(--ease); }
.acc-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc-item.is-open .acc-icon { transform: rotate(180deg); }
.acc-item.is-open .acc-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc-panel { height: 0; overflow: hidden; }
.acc-panel > div { padding-bottom: calc(30 * var(--h)); max-width: 62ch; color: var(--fg-2); }

/* about page */
.about-cover { height: calc(90vh - var(--header-h)); min-height: 340px; }
.about-cover .media { height: 100%; }
.values { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.value { display: grid; grid-template-columns: calc(80 * var(--h)) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-s); align-items: baseline; padding: calc(40 * var(--h)) 0; border-bottom: 1px solid var(--line); }
.value .svc-num { align-self: start; padding-top: .6em; }
.value h3 { font-size: calc(54 * var(--h)); font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
.value p { color: var(--fg-2); max-width: 44ch; }
.hscroll { overflow: hidden; }
.hscroll-track { display: flex; width: max-content; padding-inline: var(--gutter); gap: var(--space-l); }
.milestone { width: calc(380 * var(--h)); padding-left: var(--space-s); border-left: 1px solid var(--line); }
.milestone .milestone-year { font-size: calc(124 * var(--h)); margin: 0; color: var(--fg); font-weight: 300; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.milestone h3 { margin-top: var(--space-m); font-size: calc(26 * var(--h)); font-weight: 500; letter-spacing: -.02em; }
.milestone p { margin-top: var(--space-xs); color: var(--fg-2); font-size: var(--fs-small); }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-l); }
.member h3 { margin-top: var(--space-s); font-size: calc(24 * var(--h)); font-weight: 500; letter-spacing: -.02em; }
.member p { color: var(--fg-2); font-size: var(--fs-small); }
.member:nth-child(4n + 2), .member:nth-child(4n + 4) { margin-top: var(--space-l); }
.drift-wrap { overflow: hidden; }
.drift { display: flex; gap: var(--col-gap); width: max-content; padding-inline: var(--gutter); }
.drift .media { width: calc(460 * var(--h)); aspect-ratio: 4 / 3; flex: none; }
.drift .media:nth-child(even) { aspect-ratio: 3 / 4; width: calc(300 * var(--h)); }
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.role a { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) calc(56 * var(--h)); align-items: center; column-gap: var(--space-s); padding: calc(30 * var(--h)) 0; border-bottom: 1px solid var(--line); }
.role-title { font-size: calc(36 * var(--h)); letter-spacing: -.03em; line-height: 1.1; transition: transform .7s var(--ease); }
.role-meta { color: var(--fg-2); font-size: var(--fs-small); }
.role a:hover .role-title { transform: translateX(calc(18 * var(--h))); }
.role a:hover .svc-arrow { background: var(--fg); color: var(--page); transform: rotate(-45deg); }

/* contact page */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--space-l); }
.contact-form { grid-column: 1 / span 7; }
.contact-aside { grid-column: 9 / span 4; display: grid; gap: var(--space-l); align-content: start; }
.big-mail { display: inline-flex; align-items: center; gap: .4em; font-size: calc(46 * var(--h)); letter-spacing: -.035em; line-height: 1.1; }
/* the address stays on one line and shrinks to its column when it would not fit (8.2cqi ≈ column width ÷ the address's 11.9em) */
.contact-aside > .info-block { container-type: inline-size; }
@supports (width: 1cqi) { .big-mail { font-size: min(calc(46 * var(--h)), 8.2cqi); } }
.copy-btn { margin-top: var(--space-s); }
.copy-btn[data-state="copied"] { background: var(--fg); color: var(--page); }
.fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-m); row-gap: var(--space-s); }
.field { position: relative; padding-top: calc(26 * var(--h)); }
.field--full { grid-column: 1 / -1; }
.fields--after { margin-top: var(--space-s); }
.field input, .field textarea, .field select {
  display: block; width: 100%; padding: calc(12 * var(--h)) 0 calc(16 * var(--h)); border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: transparent; color: var(--fg); font-size: max(16px, calc(24 * var(--h))); letter-spacing: -.015em;
  outline: none; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: calc(140 * var(--h)); line-height: 1.4; }
.field select { cursor: pointer; }
.field select option { background: var(--bg-deep); color: var(--ink); }
.field label {
  position: absolute; left: 0; top: calc(38 * var(--h)); color: var(--fg-2); font-size: max(16px, calc(24 * var(--h)));
  transform-origin: left top; pointer-events: none; transition: transform .5s var(--ease), color .3s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select + label { transform: translateY(calc(-34 * var(--h))) scale(.58); color: var(--fg-2); }
.field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.field-error { display: none; margin-top: 8px; font-size: var(--fs-label); letter-spacing: .04em; color: #ffb4b4; }
.was-validated .field :invalid ~ .field-error { display: block; }
.was-validated .field :invalid { border-bottom-color: #ff8f8f; }
.choice { border: 0; margin: var(--space-m) 0 0; padding: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: var(--space-s); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--space-m); font-size: var(--fs-small); color: var(--fg-2); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: #f5f8ff; flex: none; }
.consent a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin-top: var(--space-m); }
.form-note { font-size: var(--fs-small); color: var(--fg-2); }
.btn-send.is-loading { pointer-events: none; opacity: .7; }
.form-success { display: none; padding-top: var(--space-m); }
.contact-form.is-sent .form-body { display: none; }
.contact-form.is-sent .form-success { display: block; }
.form-success .h2 { margin-bottom: var(--space-s); }
.info-block h2 { font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: var(--space-s); }
.info-block p, .info-block li { line-height: 1.55; }
.info-block ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.office + .office { margin-top: var(--space-s); }
.office time { color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* legal */
.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.legal-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--space-m)); align-self: start; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-small); }
.legal-toc a { color: var(--fg-2); transition: color .3s; }
.legal-toc a:hover { color: var(--fg); }
.legal-body { grid-column: 5 / span 7; }
.legal-body h2 { font-size: calc(40 * var(--h)); font-weight: 400; letter-spacing: -.03em; margin: var(--space-l) 0 var(--space-s); scroll-margin-top: calc(var(--header-h) + 20px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: var(--fs-body); font-weight: 600; margin: var(--space-m) 0 .6em; }
.legal-body p, .legal-body li { color: var(--fg-2); }
.legal-body p + p { margin-top: 1em; }
.legal-body ul { padding-left: 1.2em; margin: .8em 0 0; display: grid; gap: .4em; }

/* 404 */
.lost { isolation: isolate; position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: end; padding-bottom: var(--space-l); overflow: hidden; }
.lost-video { position: absolute; inset: 0; z-index: -1; }
.lost-video video { width: 100%; height: 100%; object-fit: cover; }
.lost-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / .35), rgb(var(--bg-rgb) / .55) 55%, var(--bg)); }
.lost .mega { font-size: calc(260 * var(--h)); }
.lost .lead { max-width: 30ch; margin: var(--space-s) 0 var(--space-m); color: var(--fg); }

/* 10 ── FOOTER ────────────────────────────────────────────────────── */
.footer { position: relative; padding-top: var(--section-y); overflow: hidden; }
.footer-cta { padding-bottom: var(--space-xl); }
.footer-cta .eyebrow { margin-bottom: var(--space-m); }
.footer-big { display: flex; width: fit-content; align-items: flex-end; gap: .2em; font-size: var(--fs-display); line-height: .95; letter-spacing: -.05em; }
.footer-big svg { width: .62em; height: .62em; transition: transform .8s var(--ease); }
.footer-big:hover svg { transform: rotate(-45deg); }
.footer-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-m); }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, minmax(0, 1fr)) 1.6fr; column-gap: var(--col-gap); row-gap: var(--space-m); padding-block: var(--space-l); border-top: 1px solid var(--line); }
.footer-about svg { width: calc(30 * var(--h)); height: auto; margin-bottom: var(--space-s); }
.footer-about p { color: var(--fg-2); font-size: var(--fs-small); max-width: 32ch; }
.footer-h { margin-bottom: var(--space-s); font-size: var(--fs-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--fs-small); }
.footer-list a { color: var(--fg); transition: color .3s; }
.footer-list a:hover { color: var(--fg-2); }
.newsletter p { color: var(--fg-2); font-size: var(--fs-small); margin-bottom: var(--space-s); }
.nl-field { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.nl-field input { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: transparent; color: var(--fg); font-size: max(16px, var(--fs-small)); outline: none; }
.nl-field .round-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.nl-msg { min-height: 1.4em; margin-top: 10px; font-size: var(--fs-label); color: var(--fg-2); }
.footer-mark {
  display: flex; justify-content: center; margin-top: var(--space-s); overflow: hidden;
  font-size: calc((100vw - 2 * var(--gutter)) * .262); font-weight: 600; line-height: .8; letter-spacing: -.065em;
  user-select: none; pointer-events: none; padding-right: .065em;
}
.footer-mark span {
  display: inline-block;
  background: linear-gradient(180deg, #f5f8ff 0%, #b8c3da 42%, rgb(163 174 196 / .08) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* equal outer columns keep the legal links centred on the page */
.footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-s); padding-block: var(--space-s); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--fg-2); }
.footer-bottom nav { display: flex; gap: var(--space-s); }
.footer-bottom > :last-child { justify-self: end; }
.footer-bottom a:hover { color: var(--fg); }
.to-top { display: inline-flex; align-items: center; gap: .5em; border: 0; background: none; color: var(--fg); font-size: var(--fs-small); padding: 0; }
.to-top svg { width: 1em; height: 1em; transform: rotate(-90deg); transition: transform .6s var(--ease); }
.to-top:hover svg { transform: rotate(-90deg) translateX(.25em); }

/* 11 ── OVERLAYS ──────────────────────────────────────────────────── */
.curtain {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--bg-deep); transform: translateY(101%); visibility: hidden;
}
html.is-curtained .curtain { transform: none; visibility: visible; }
.curtain-inner { display: grid; justify-items: center; gap: calc(22 * var(--h)); }
.curtain-mark { width: calc(40 * var(--h)); height: calc(62 * var(--h)); min-width: 30px; min-height: 46px; }
.curtain-label { font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.curtain-count { position: absolute; right: var(--gutter); bottom: calc(34 * var(--h)); font-size: calc(110 * var(--h)); font-weight: 300; line-height: 1; letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; opacity: 0; }
html.is-first-visit .curtain-count { opacity: 1; }
.curtain-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; }

.cursor { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; }
.cursor-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fg); box-shadow: inset 0 0 0 1px var(--fg);
  transition: left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), background-color .35s var(--ease), opacity .35s;
}
.cursor.is-link .cursor-dot { left: -22px; top: -22px; width: 44px; height: 44px; background: transparent; }
.cursor.is-label .cursor-dot { left: -48px; top: -48px; width: 96px; height: 96px; }
.cursor-label { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--page); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.cursor.is-label .cursor-label { opacity: 1; }
.cursor.is-hidden .cursor-dot, .cursor.is-field .cursor-dot { opacity: 0; }
.cursor.is-down .cursor-dot { transform: scale(.8); }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .chip { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

.hover-preview { position: fixed; left: 0; top: 0; z-index: 40; width: calc(330 * var(--h)); aspect-ratio: 4 / 5; pointer-events: none; visibility: hidden; }
.hover-preview .media { width: 100%; height: 100%; }

/* 12 ── MOTION ────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(calc(14 * var(--u))); } }
@keyframes riseNav {
  from { opacity: 0; transform: translate(calc(-50% + 0 * var(--u)), calc(-50% + 14 * var(--u))); }
  to { opacity: 1; transform: translate(calc(-50% + 0 * var(--u)), -50%); }
}
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .brand, .pill-nav, .burger { animation: rise .8s var(--ease) both; }
  .links { animation: riseNav .8s var(--ease) both; }
}
html.is-curtained .topbar *, html.is-curtained .stage * { animation-play-state: paused !important; }

/* scroll-reveal targets start hidden only when JS + motion are available */
html.js:not(.no-motion) [data-split],
html.js:not(.no-motion) [data-reveal],
html.js:not(.no-motion) [data-stagger] > *,
html.js:not(.no-motion) [data-img-reveal] { visibility: hidden; }
.split-line { padding-bottom: .06em; margin-bottom: -.06em; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-split], html.js [data-reveal], html.js [data-stagger] > *, html.js [data-img-reveal] { visibility: visible !important; }
  .menu, .menu-eyebrow, .menu-list li, .menu-foot, .burger i { transition-duration: .001s !important; transition-delay: 0s !important; }
  .roll > span, .media-inner { transition: none !important; }
}

/* 13 ── PORTRAIT / NARROW ─────────────────────────────────────────── */
@media (max-aspect-ratio: 11/10) {
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    height: auto; padding: calc(16 * var(--m)) calc(22 * var(--m)); padding-top: calc(16 * var(--m) + env(safe-area-inset-top));
  }
  .topbar::before { height: 100%; }
  .brand { position: relative; left: auto; top: auto; width: calc(31.5 * var(--m)); height: calc(48.5 * var(--m)); }
  .links, .pill-nav { display: none; }

  .burger {
    position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    gap: calc(6.6 * var(--m)); width: max(58px, calc(62 * var(--m))); height: max(42px, calc(44 * var(--m)));
    padding: 0; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
    color: var(--ink); -webkit-tap-highlight-color: transparent;
  }
  .burger:focus-visible { border-radius: 999px; }
  .burger i { display: block; width: calc(20 * var(--m)); height: 2px; border-radius: 2px; background: currentColor; transition: transform .42s var(--ease); }
  html.menu-open .burger i:first-child { transform: translateY(calc(4.3 * var(--m))) rotate(45deg); }
  html.menu-open .burger i:last-child { transform: translateY(calc(-4.3 * var(--m))) rotate(-45deg); }

  .menu {
    position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top) + 112 * var(--m)) calc(env(safe-area-inset-right) + 22 * var(--m)) calc(env(safe-area-inset-bottom) + 34 * var(--m)) calc(env(safe-area-inset-left) + 22 * var(--m));
    background: linear-gradient(to bottom, rgb(var(--bg-rgb) / .78) 0%, rgb(var(--bg-rgb) / .9) 55%, rgb(var(--bg-rgb) / .97) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
    color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .42s var(--ease), visibility 0s linear .42s;
  }
  html.menu-open .menu { opacity: 1; visibility: visible; transition: opacity .42s var(--ease), visibility 0s; }
  .menu-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .menu-eyebrow, .menu-list li, .menu-foot { opacity: 0; transform: translateY(calc(14 * var(--m))); transition: opacity .42s var(--ease), transform .42s var(--ease); }
  html.menu-open .menu-eyebrow, html.menu-open .menu-list li, html.menu-open .menu-foot { opacity: 1; transform: none; }
  html.menu-open .menu-eyebrow { transition-delay: .06s; }
  html.menu-open .menu-list li:nth-child(1) { transition-delay: .10s; }
  html.menu-open .menu-list li:nth-child(2) { transition-delay: .16s; }
  html.menu-open .menu-list li:nth-child(3) { transition-delay: .22s; }
  html.menu-open .menu-list li:nth-child(4) { transition-delay: .28s; }
  html.menu-open .menu-foot { transition-delay: .34s; }
  .menu-eyebrow { margin: 0 0 calc(14 * var(--m)); font-size: max(12px, calc(13 * var(--m))); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .menu-list { margin: 0; padding: 0; list-style: none; }
  .menu-list li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .menu-list a { display: flex; align-items: center; justify-content: space-between; padding: calc(17 * var(--m)) 0; font-size: max(25px, calc(31 * var(--m))); line-height: 1.1; letter-spacing: .01em; color: var(--ink); }
  .menu-list a[aria-current="page"] { color: var(--muted); }
  .menu-list a::after { content: ""; width: calc(8 * var(--m)); height: calc(8 * var(--m)); margin-right: calc(4 * var(--m)); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .45; }
  .menu-foot { display: flex; align-items: center; gap: calc(24 * var(--m)); margin-top: auto; padding-top: calc(28 * var(--m)); }
  .menu-foot .pill { height: max(44px, calc(50 * var(--m))); padding: 0 calc(28 * var(--m)); font-size: calc(18 * var(--m)); }
  .menu-foot .ghost { font-size: calc(18 * var(--m)); }

  /* layout collapses */
  .section-head .h2, .section-head .section-cta { grid-column: 1 / -1; justify-self: start; }
  .section-head .section-cta { margin-top: var(--space-m); }
  .page-hero { padding-top: calc(var(--header-h) + 70 * var(--m)); }
  .page-hero-grid > .display, .page-hero-grid > .mega, .page-hero-grid > .lead { grid-column: 1 / -1; }
  .page-hero-grid > .page-hero-aside { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: var(--space-m); }

  .intro-grid .eyebrow, .manifesto, .intro-side { grid-column: 1 / -1; }
  .intro-grid .eyebrow { margin-bottom: var(--space-m); padding-top: 0; }
  .intro-side { margin-top: var(--space-m); }
  .stats { grid-template-columns: 1fr 1fr; row-gap: var(--space-m); }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat-num { font-size: calc(54 * var(--m)); }

  .feature-grid { row-gap: var(--space-m); }
  .pc--a, .pc--b, .pc--c, .pc--d { grid-column: 1 / -1; margin-top: 0; }
  .pc--b .media, .pc--c .media { aspect-ratio: 4 / 4.4; }

  .svc-row a { grid-template-columns: calc(34 * var(--m)) minmax(0, 1fr) calc(40 * var(--m)); row-gap: 6px; padding: calc(22 * var(--m)) 0; }
  .svc-name { grid-column: 2; font-size: calc(28 * var(--m)); }
  .svc-tags { grid-column: 2; grid-row: 2; }
  .svc-arrow { grid-column: 3; grid-row: 1 / span 2; width: calc(40 * var(--m)); height: calc(40 * var(--m)); }
  .svc:hover .svc-row a { opacity: 1; }

  .process-aside, .process-steps { grid-column: 1 / -1; position: static; }
  .process-meter, .process-bar { display: none; }
  .process-steps { margin-top: var(--space-l); }
  .step { opacity: 1; padding: var(--space-m) 0; }
  .step .h3 { font-size: calc(30 * var(--m)); }

  .quotes-grid .eyebrow, .quote-stage, .quote-nav { grid-column: 1 / -1; }
  .quotes-grid .eyebrow { margin-bottom: var(--space-m); padding-top: 0; }
  .quote-text { font-size: calc(27 * var(--m)); }

  .awards-head, .awards-list { grid-column: 1 / -1; position: static; }
  .awards-list { margin-top: var(--space-l); }
  .award { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .aw-name { font-size: calc(21 * var(--m)); }
  .aw-what { grid-column: 1; grid-row: 2; }
  .aw-year { grid-column: 2; grid-row: 1; }

  .archive { row-gap: var(--space-m); }
  .work-item { grid-column: 1 / -1; }
  .work-item.is-offset { margin-top: 0; }
  .archive[data-view="list"] .work-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding: calc(20 * var(--m)) 0; }
  .archive[data-view="list"] .wi-title { font-size: calc(26 * var(--m)); }
  .archive[data-view="list"] .wi-client { grid-column: 1; grid-row: 2; }
  .archive[data-view="list"] .wi-cat { display: none; }
  .archive[data-view="list"] .wi-year { grid-column: 2; grid-row: 1; }

  .meta-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-s); }
  .case-cover { height: 62vh; }
  .split .eyebrow, .split > .h2, .split-cols { grid-column: 1 / -1; }
  .split-cols { grid-template-columns: 1fr; }
  .g-full { aspect-ratio: 4 / 3; }
  .g-half, .g-wide, .g-side { grid-column: 1 / -1; }
  .results { grid-template-columns: 1fr 1fr; row-gap: var(--space-m); }
  .credits { grid-template-columns: 1fr 1fr; }
  .split > .credits { grid-column: 1 / -1; }
  .next-media { display: none; }

  .svc-block-aside, .svc-block-body { grid-column: 1 / -1; position: static; }
  .svc-block-aside { margin-bottom: var(--space-m); }
  .svc-block-aside .h2 { font-size: var(--fs-h2); }
  .deliverables { columns: 1; }
  .models { grid-template-columns: 1fr; row-gap: var(--space-l); }
  .faq-grid > .faq-head, .accordion { grid-column: 1 / -1; position: static; }
  .accordion { margin-top: var(--space-l); }
  .acc-btn { font-size: calc(20 * var(--m)); }

  .value { grid-template-columns: calc(34 * var(--m)) minmax(0, 1fr); row-gap: var(--space-xs); }
  .value h3 { font-size: calc(30 * var(--m)); }
  .value p { grid-column: 2; }
  .hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .hscroll::-webkit-scrollbar { display: none; }
  .milestone { width: calc(270 * var(--m)); }
  .milestone .milestone-year { font-size: calc(72 * var(--m)); }
  .team { grid-template-columns: 1fr 1fr; row-gap: var(--space-m); }
  .member:nth-child(4n + 2), .member:nth-child(4n + 4) { margin-top: 0; }
  .member:nth-child(even) { margin-top: var(--space-m); }
  .drift .media { width: calc(260 * var(--m)); }
  .drift .media:nth-child(even) { width: calc(180 * var(--m)); }
  .role a { grid-template-columns: minmax(0, 1fr) calc(40 * var(--m)); row-gap: 4px; }
  .role-title { font-size: calc(24 * var(--m)); }
  .role-meta { grid-column: 1; }
  .role .svc-arrow { grid-column: 2; grid-row: 1 / span 3; width: calc(40 * var(--m)); height: calc(40 * var(--m)); }

  .contact-form, .contact-aside { grid-column: 1 / -1; }
  .fields { grid-template-columns: 1fr; }
  .big-mail { font-size: calc(28 * var(--m)); }
  @supports (width: 1cqi) { .big-mail { font-size: min(calc(28 * var(--m)), 8.2cqi); } }

  .legal-toc, .legal-body { grid-column: 1 / -1; position: static; }
  .legal-toc { margin-bottom: var(--space-l); }
  .legal-body h2 { font-size: calc(28 * var(--m)); }

  .lost .mega { font-size: calc(150 * var(--m)); }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about, .newsletter { grid-column: 1 / -1; }
  .footer-bottom { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .footer-bottom > :last-child { justify-self: start; }
  .hover-preview { display: none; }
}

@media (min-width: 600px) and (max-aspect-ratio: 11/10) {
  .topbar { padding: calc(30 * var(--m)) calc(56 * var(--m)); padding-top: calc(30 * var(--m) + env(safe-area-inset-top)); }
  .menu { padding-left: calc(env(safe-area-inset-left) + 56 * var(--m)); padding-right: calc(env(safe-area-inset-right) + 56 * var(--m)); padding-top: calc(env(safe-area-inset-top) + 140 * var(--m)); }
  .menu-list a { font-size: calc(40 * var(--m)); padding: calc(20 * var(--m)) 0; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: var(--space-s); }
  .stat:first-child { padding-left: 0; }
  .pc--a, .pc--d { grid-column: 1 / -1; }
  .pc--b { grid-column: 1 / span 6; }
  .pc--c { grid-column: 7 / span 6; margin-top: var(--space-l); }
  .work-item { grid-column: span 6; }
  .work-item.is-offset { margin-top: var(--space-l); }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member:nth-child(even) { margin-top: 0; }
  .models { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}