/* ─────────────────────────────────────────────────────────────
   aydaoz.co — built from Figma "Ayda 2026" (node 69:590)
   Fixed 1440px desktop layout, centered. All values from Figma.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Aspekta";
  src: url("assets/fonts/AspektaVF.woff2") format("woff2");
  font-weight: 50 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fbfbf9;
  --surface: #f0f0eb;
  --line: #ecece7;
  --line-strong: #e5e5e5;
  --ink: #0a0a0a;
  --ink-muted: #6b6b6b;
  --ink-faint: #989898;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
html { scroll-behavior: smooth; overflow-x: clip; overflow-y: scroll; } /* scrollbar always reserved so clientWidth (and --scale) matches on every page — no nav width jump */
body {
  font-family: "Aspekta", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; }
p { margin: 0; }
h1, h2 { font-weight: 400; } /* UA default is bold; Figma uses Regular unless stated */

.page { width: 1440px; margin: 0 auto; }
/* ≥ 900px: scale the 1440 design proportionally to the viewport (script.js sets --scale = viewport / 1440) */
@media (min-width: 900px) { .page { zoom: var(--scale, 1); } }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border-radius: 4px; white-space: nowrap;
}
.btn--sm { width: 101.97px; height: 32px; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; }
.btn--md { width: 127.95px; height: 40px; font-size: 16px; line-height: 20px; letter-spacing: -0.16px; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 10; height: 56px; background: var(--bg); border-bottom: 1px solid var(--line); }
.nav__inner {
  position: absolute; left: 24px; top: 12px; width: 1392px; height: 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__logo { display: block; width: 31px; height: 22px; }
.nav__logo img { width: 100%; height: 100%; }
.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__toggle { display: none; }
.nav__links {
  display: flex; align-items: center; gap: 24px; padding: 8px 10px;
  font-size: 13px; line-height: 16px; letter-spacing: -0.2px; white-space: nowrap; text-align: center;
}

/* ── Main stack (hero → clients → cases → footer) ──────────── */
.main { display: flex; flex-direction: column; align-items: center; gap: 121px; width: 1440px; }
.main--page { gap: 100px; padding-top: 72px; }

/* ── Hero ──────────────────────────────────────────────────── */
/* Fills the viewport below the 56px nav so the CTA stays above the fold;
   capped at Figma's 820px on tall screens. Text anchors to top/bottom, the
   portrait composition centers in its box and scales down if the box is shorter. */
.hero {
  position: relative; width: 1440px; min-height: 560px; max-height: 820px;
  /* nav (56px) + hero must equal the visible viewport. The page is zoomed by --scale, but vh/svh
     units are NOT divided by zoom, so divide here: (viewport / scale) - nav. */
  height: calc(100vh  / var(--scale, 1) - 56px);
  height: calc(100svh / var(--scale, 1) - 56px);
}
.hero__content { position: absolute; left: 24px; top: 0; width: 570px; height: 100%; }
.hero__top { position: absolute; left: 0; top: 30.12%; width: 551px; height: 216px; }   /* 247/820 */
.hero__tag {
  position: absolute; left: 0; top: 0; width: 140px; height: 32px; border-radius: 100px;
  background: rgba(67, 67, 15, 0.06);
  font-size: 13px; line-height: 16px; letter-spacing: -0.13px; white-space: nowrap;
}
.hero__tag span { position: absolute; top: 8px; }
.hero__tag .t1 { left: 12px; color: var(--ink); }
.hero__tag .t2 { left: 80px; color: var(--ink-muted); }
.hero__title {
  position: absolute; left: 0; top: 41px; width: 551px; height: 184px;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 70px; line-height: 80px; letter-spacing: -2.5px; font-weight: 400;
}
.hero__title .muted { color: var(--ink-muted); }
.hero__bottom { position: absolute; left: 0; bottom: 40px; width: 467.27px; height: 164px; } /* 40px breathing room above the fold */
.hero__desc {
  position: absolute; left: 0; top: 1px; width: 447.84px; height: 98px;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 16px; line-height: 20px; letter-spacing: -0.2px;
}
.hero__cta { position: absolute; left: 0; top: 124px; }
.hero__visual { position: absolute; left: 594px; top: 0; width: 846px; height: 100%; overflow: hidden; background: var(--surface); }
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__bg img { position: absolute; top: 0; left: -27.48%; width: 154.96%; height: 100%; max-width: none; }
.hero__overlay { position: absolute; inset: 0; background: var(--surface); }
/* composition box = 577.572 × 757 in Figma (diamond top → portrait bottom) */
.hero__figure {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);   /* portrait flush to grey box bottom */
  height: min(757px, 100%); aspect-ratio: 577.572 / 757;
}
.hero__portrait { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hero__diamond { position: absolute; left: 35.547%; top: 0; width: 28.694%; height: 31.163%; }

/* ── Plumbob: fixed silhouette, gentle bob, lights drifting inside, dots orbiting ── */
.plumbob { animation: plumbob-bob 2.6s ease-in-out infinite alternate; }
@keyframes plumbob-bob { from { translate: 0 -6px; } to { translate: 0 8px; } }

/* gem: the dot-free PNG, with glow blobs clipped to its exact alpha silhouette */
.plumbob__gem {
  position: absolute; inset: 0; z-index: 1; isolation: isolate;
  -webkit-mask: url("assets/hero-gem.png") center / 100% 100% no-repeat;
          mask: url("assets/hero-gem.png") center / 100% 100% no-repeat;
}
.plumbob__gem > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.plumbob__light {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(14px); will-change: transform;
}
.plumbob__light--a { left: -12%; top: 8%;  mix-blend-mode: screen;   opacity: .6; background: radial-gradient(circle, rgba(70,150,255,1) 0%, rgba(70,150,255,0) 65%); animation: light-a 11s ease-in-out infinite alternate; }
.plumbob__light--b { left: 38%;  top: 28%; mix-blend-mode: screen;   opacity: .55; background: radial-gradient(circle, rgba(200,160,255,1) 0%, rgba(200,160,255,0) 65%); animation: light-b 14s ease-in-out infinite alternate; }
.plumbob__light--c { left: 10%;  top: 48%; width: 62%; mix-blend-mode: multiply; opacity: .45; background: radial-gradient(circle, rgba(30,80,230,1) 0%, rgba(30,80,230,0) 65%); animation: light-c 9s ease-in-out infinite alternate; }
@keyframes light-a { from { transform: translate(0, 0) scale(1); }     to { transform: translate(38%, 48%) scale(1.25); } }
@keyframes light-b { from { transform: translate(0, 0) scale(1.1); }   to { transform: translate(-42%, -34%) scale(.9); } }
@keyframes light-c { from { transform: translate(0, 0) scale(1); }     to { transform: translate(30%, -62%) scale(1.3); } }

/* dots: slow elliptical orbits (CSS motion path); ellipse() starts at 3 o'clock, clockwise,
   so 25% = front/bottom (in front of the gem), 75% = back/top (behind it) */
.plumbob__dot {
  position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%;
  offset-rotate: 0deg; will-change: offset-distance, transform;
}
.plumbob__dot--cyan  { width: 8%;  background: radial-gradient(circle at 35% 35%, #a6f7ff, #18d6f2 60%, #0fb0d3); box-shadow: 0 0 6px rgba(40,220,255,.55); offset-path: ellipse(62% 14% at 50% 74%); animation: orbit 24s linear infinite, depth 24s linear infinite; }
.plumbob__dot--blue  { width: 9%;  background: radial-gradient(circle at 35% 35%, #5ea3ff, #1e6df5 60%, #1552d6); offset-path: ellipse(46% 11% at 50% 68%); animation: orbit 18s linear infinite -9s, depth 18s linear infinite -9s; }
.plumbob__dot--spark { width: 5%;  background: radial-gradient(circle, #ffffff, #c6ecff 70%); opacity: .85; offset-path: ellipse(76% 18% at 50% 56%); animation: orbit 34s linear infinite -22s, depth 34s linear infinite -22s; }
@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes depth {
  0%, 50%        { z-index: 3; }
  50.01%, 99.99% { z-index: 0; }
  100%           { z-index: 3; }
  25%            { transform: scale(1.1); opacity: 1; }
  75%            { transform: scale(.7);  opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .plumbob, .plumbob__light, .plumbob__dot { animation: none; } }

/* ── Clients ───────────────────────────────────────────────── */
.clients { position: relative; width: 1392px; height: 384px; } /* rows end at 295px; link sits 66px below them */
.clients__more { position: absolute; left: 50%; top: 361px; transform: translateX(-50%); font-size: 14px; line-height: 18px; letter-spacing: -0.14px; color: var(--ink-faint); white-space: nowrap; transition: color .15s ease; }
.clients__more:hover { color: var(--ink); }
.clients__title {
  position: absolute; left: calc(50% + 0.09px); top: 26.8px; transform: translate(-50%, -50%);
  width: 417.9px; height: 59.59px; display: flex; flex-direction: column; justify-content: center;
  text-align: center; font-size: 20.625px; line-height: 27.6px; letter-spacing: -0.2px; font-weight: 400;
}
.clients__title .muted { color: var(--ink-faint); }
.clients__rows { position: absolute; left: 50%; top: 115.19px; transform: translateX(-50%); width: 1392px; height: 180px; overflow: hidden; }
.clients__row { position: absolute; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 130px; }
.clients__row--1 { top: 30px; }
.clients__row--2 { top: 150px; }
.logo { position: relative; display: block; width: 125px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.logo:hover > img { opacity: .6; }
.logo > img { transition: opacity .15s ease; }
.logo > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: none; }
/* logo sizing by VISIBLE height so marks read as the same optical size:
   heavy single-line wordmarks ~26px, icon+word ~28-30px, stacked/two-line ~38-40px,
   thin serif (Rixos) and key-mark (Forte) a touch larger to compensate for light weight. */
.logo--remote > img     { height: 30px; width: auto; }
.logo--clickup > img    { height: 27px; width: auto; }
.logo--skillshare > img { height: 36px; width: auto; }
.logo--fyxer > img      { height: 27px; width: auto; }
.logo--rokt > img       { height: 23px; width: auto; }
.logo--raileurope > img { height: 36px; width: auto; }
.logo--doss > img       { height: 27px; width: auto; }
.logo--variant > img    { height: 25px; width: auto; }
.logo--forte > img      { height: 32px; width: auto; }
.logo--rixos > img      { height: 34px; width: auto; }
.logo--nickelodeon > img { width: 122px; height: auto; } /* wide wordmark */
.clients .logo--androidauthority > img { width: 118px; height: auto; } /* homepage tile is 125px */
.logo--xomarket > img { height: 30px; width: auto; }
.logo--pvptrade > img { height: 40px; width: auto; }
.logo--giza > img { height: 30px; width: auto; }
.logo--voiceflow > img { height: 24px; width: auto; }
.logo--commandai > img { width: 128px; height: auto; }
.logo--cubby > img { height: 28px; width: auto; }
.logo--rocketlawyer > img { width: 140px; height: auto; }
.logo--odeko > img { height: 30px; width: auto; }
.logo--primer > img { height: 26px; width: auto; }
.logo--clerq > img { height: 22px; width: auto; }
.logo--offblak > img { height: 28px; width: auto; }
.logo--takoon > img { width: 128px; height: auto; }
.logo--identitye2e > img { height: 30px; width: auto; }
.logo--withsurface > img { width: 140px; height: auto; }
.logo--etihad > img { width: 130px; height: auto; }
.logo--androidauthority > img { width: 140px; height: auto; }
.logo--soundguys > img { width: 140px; height: auto; }
.logo--attest > img { height: 26px; width: auto; }
.logo--kadence > img { height: 26px; width: auto; }
.logo--reclaim > img { width: 140px; height: auto; }
.logo--cadrian > img { height: 26px; width: auto; }
.logo--tcfusa > img { height: 40px; width: auto; }
.logo--sindarin > img { height: 24px; width: auto; }
.logo--deste > img { width: 92px; height: auto; }
/* masked logos: a vector fill clipped by a mask shape, as exported from Figma */
.masked { position: absolute; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.masked img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.logo--cleary .masked {
  left: 0; top: 25px; width: 125px; height: 10.08px;
  -webkit-mask-image: url("assets/client-cleary-mask.svg"); mask-image: url("assets/client-cleary-mask.svg");
  -webkit-mask-size: 125px 10px; mask-size: 125px 10px; -webkit-mask-position: 0 0.001px; mask-position: 0 0.001px;
}
.logo--goodwin .masked {
  left: 5px; top: 18.07px; width: 114px; height: 24.94px;
  -webkit-mask-image: url("assets/client-goodwin-mask.svg"); mask-image: url("assets/client-goodwin-mask.svg");
  -webkit-mask-size: 114px 25px; mask-size: 114px 25px; -webkit-mask-position: 0 -0.066px; mask-position: 0 -0.066px;
}
.logo--mannheimer .masked {
  left: 0; top: 20.1px; width: 124.93px; height: 19.36px;
  -webkit-mask-image: url("assets/client-mannheimer-mask.svg"); mask-image: url("assets/client-mannheimer-mask.svg");
  -webkit-mask-size: 125px 19.358px; mask-size: 125px 19.358px;
}
.logo--bird .masked {
  left: 0; top: 18.84px; width: 125px; height: 22.08px;
  -webkit-mask-image: url("assets/client-bird-mask.svg"); mask-image: url("assets/client-bird-mask.svg");
  -webkit-mask-size: 125px 22.077px; mask-size: 125px 22.077px; -webkit-mask-position: 0 0.001px; mask-position: 0 0.001px;
}

/* ── Case sections ─────────────────────────────────────────── */
.cases { display: flex; align-items: flex-start; gap: 15px; width: 1366px; scroll-margin-top: 96px; }
.cases__nav { position: sticky; top: 96px; } /* 56px sticky header + 40px */
.cases__col { display: flex; flex-direction: column; gap: 121px; width: 1143px; }
.case__nav { display: flex; flex-direction: column; align-items: flex-start; width: 208px; flex-shrink: 0; }
.case__link {
  position: relative; height: 34px; width: 130px; padding-top: 8px;
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 14px; line-height: 18px; letter-spacing: -0.14px; color: var(--ink-faint); white-space: nowrap;
  transition: color 0.2s ease, width 0.2s ease;
}
.case__link::before { content: ""; position: absolute; left: 0; top: -0.19px; width: 71.54%; border-top: 1px solid var(--line); transition: border-color 0.2s ease; }
.case__link--active { width: 208px; gap: 15px; color: var(--ink); }
.case__link--active::before { border-top-color: var(--ink); }
.case__grid { display: flex; flex-direction: column; gap: 24px; width: 1143px; scroll-margin-top: 96px; }

.card {
  position: relative; width: 100%; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 37px 24px 37px 18px;
  height: calc(var(--card-h) * 1px); /* unset → auto */
}
.card--w { width: calc(var(--card-w) * 1px); flex-shrink: 0; }
.card--start { align-items: flex-start; }
.card--flush { padding: 0; }
.card--p27 { padding-top: 27px; padding-bottom: 27px; }
.card--half { width: 559px; height: 313px; padding: 17.318px 11.234px 17.318px 8.425px; flex-shrink: 0; }
.card--bordered { border: 1px solid var(--line-strong); }
.row { display: flex; align-items: center; gap: 25px; width: 100%; }

.fig { position: relative; overflow: hidden; flex: 1 0 0; min-height: 1px; }
.fig--fixed { flex: 0 0 auto; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); } /* unset → auto */
.fig--full { width: 100%; }
.fig--r5 { border-radius: 5px; }
.fig--r6 { border-radius: 6px; }
.fig--bordered { border: 1px solid var(--line-strong); }
.fig > img, .fig > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; pointer-events: none; }
.fig > img.crop { inset: auto; object-fit: fill; } /* percent-positioned crops carry inline style */

/* ── Showcase: masonry of studio splashes (visuals from interfacer.co) ─── */
.showcase { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 1392px; scroll-margin-top: 96px; }
.showcase__title {
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  font-size: 20.625px; line-height: 27.6px; letter-spacing: -0.2px; font-weight: 400;
}
.showcase__title .muted { color: var(--ink-faint); }
.showcase__grid { column-count: 3; column-gap: 24px; width: 100%; }
.splash {
  margin: 0 0 24px; break-inside: avoid; border-radius: 10px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.splash video, .splash img { display: block; width: 100%; height: auto; }
.showcase__cta { margin-top: 8px; }
.splash { cursor: zoom-in; }
.splash-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(10,10,10,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 40px; }
.splash-modal.is-open { display: flex; }
.splash-modal__stage { display: flex; max-width: 92vw; max-height: 88vh; }
.splash-modal__stage video, .splash-modal__stage img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 80px rgba(0,0,0,0.5); background: #fff; }
.splash-modal__close { position: fixed; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.16); color: #fff; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.splash-modal__close:hover { background: rgba(255,255,255,0.28); }

/* ── Journal: blog index + article reader ───────────────────── */
.journal { width: 720px; max-width: 100%; }
.journal__head { padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.journal__title { font-size: 44px; line-height: 48px; letter-spacing: -1px; font-weight: 400; }
.journal__sub { margin-top: 10px; font-size: 16px; line-height: 22px; letter-spacing: -0.2px; color: var(--ink-faint); }
.journal__list { display: flex; flex-direction: column; }
.post { display: block; padding: 32px 0; border-bottom: 1px solid var(--line); }
.post__meta { font-size: 13px; line-height: 16px; letter-spacing: -0.1px; color: var(--ink-faint); }
.post__title { margin-top: 10px; font-size: 26px; line-height: 32px; letter-spacing: -0.5px; font-weight: 400; }
.post__excerpt { margin-top: 10px; font-size: 16px; line-height: 24px; letter-spacing: -0.2px; color: var(--ink-muted); }
.post__more { display: inline-block; margin-top: 14px; font-size: 14px; letter-spacing: -0.14px; color: var(--ink); }
.post:hover .post__title { text-decoration: underline; text-underline-position: from-font; }
.post__cover { margin-bottom: 16px; border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.post__cover img { display: block; width: 100%; height: auto; aspect-ratio: 1351 / 540; object-fit: cover; }
.article__cover { margin: 0 0 32px; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.article__cover img { display: block; width: 100%; height: auto; }
.article__fig { margin: 24px 0; border-radius: 8px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.article__fig img { display: block; width: 100%; height: auto; }

.article { width: 680px; max-width: 100%; }
.article__back { display: inline-block; margin-bottom: 40px; font-size: 14px; letter-spacing: -0.14px; color: var(--ink-faint); }
.article__back:hover { color: var(--ink); }
.article__head { padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.article__meta { font-size: 13px; line-height: 16px; letter-spacing: -0.1px; color: var(--ink-faint); }
.article__title { margin-top: 12px; font-size: 40px; line-height: 46px; letter-spacing: -1px; font-weight: 400; }
.article__body { font-size: 18px; line-height: 30px; letter-spacing: -0.2px; color: var(--ink); }
.article__body p { margin: 0 0 24px; }
.article__body em { color: var(--ink-muted); }
.article__body h2 { margin: 40px 0 12px; font-size: 24px; line-height: 30px; letter-spacing: -0.4px; font-weight: 500; }
.article__body h3 { margin: 32px 0 10px; font-size: 20px; line-height: 26px; letter-spacing: -0.3px; font-weight: 500; }
.article__body a { text-decoration: underline; text-underline-position: from-font; }
.article__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.article__body blockquote { margin: 24px 0; padding-left: 20px; border-left: 2px solid var(--line-strong); color: var(--ink-muted); }
.article__origin { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.article__origin-note { margin-bottom: 14px; font-size: 15px; letter-spacing: -0.15px; color: var(--ink-faint); }
.article__notfound { font-size: 18px; color: var(--ink-muted); }
.article__origin .btn { width: auto; padding: 0 22px; }   /* fit the longer label instead of the fixed 128px */

/* ── Clients page: full client list ─────────────────────────── */
.clientlist { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 1392px; }
.clientlist__title { display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 20.625px; line-height: 27.6px; letter-spacing: -0.2px; font-weight: 400; }
.clientlist__title .muted { color: var(--ink-faint); }
.clientlist__grid { display: grid; grid-template-columns: repeat(5, 150px); gap: 56px 100px; justify-content: center; }
.clientlist__more { margin-top: 8px; font-size: 14px; line-height: 18px; letter-spacing: -0.14px; color: var(--ink-faint); text-align: center; }
.clientlist .logo { width: 150px; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { display: flex; flex-direction: column; align-items: center; gap: 100px; width: 1440px; }
.about { scroll-margin-top: 96px; display: flex; align-items: flex-start; justify-content: space-between; width: 1392px; padding-right: 220px; }
.about__label { font-size: 14px; line-height: 18px; letter-spacing: -0.14px; white-space: nowrap; }
.about__body { position: relative; width: 684px; height: 696px; flex-shrink: 0; }
.about__text {
  position: absolute; left: 23px; top: -4.11px; width: 661px;
  font-size: 25px; line-height: 35.2px; letter-spacing: -0.125px;
}
.about__text b { font-weight: 500; }
.about__text a { text-decoration: underline; text-underline-position: from-font; text-decoration-skip-ink: none; }

.cta { position: relative; width: 1440px; height: 436px; overflow: hidden; }
.cta__banner { position: absolute; left: 24px; right: 24px; top: 0.23px; height: 352px; background: var(--surface); overflow: hidden; }
.cta__title {
  position: absolute; left: 567px; top: 87px; width: 732.36px; height: 130px;
  display: flex; flex-direction: column; justify-content: center;
  font-size: 47.688px; line-height: 56px; letter-spacing: -0.56px;
}
.cta__btn { position: absolute; left: 567px; top: 197px; }
.cta__mark { position: absolute; max-width: none; }
.cta__mark--a { left: 0; top: -3px; width: 303.045px; height: 353.305px; }
.cta__mark--o { left: 228.455px; top: -3px; width: 267.641px; height: 358.282px; }
.cta__mark--dot { left: 473.227px; top: 307.045px; width: 32.636px; height: 48.955px; }
.cta__links { position: absolute; left: 1113px; top: 380px; display: flex; align-items: center; gap: 34px; line-height: 19.5px; letter-spacing: -0.15px; white-space: nowrap; }
.cta__links .email { font-size: 14.648px; }
.cta__links .social { font-size: 15px; }
.cta__updated { position: absolute; left: 50px; top: 390px; transform: translateY(-50%); font-size: 15px; line-height: 19.5px; letter-spacing: -0.15px; white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────
   < 900px: stacked single-column layout (no mobile frame exists in
   Figma; this reflows the same content rather than shrinking it)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .page { width: 100%; }
  .main, .footer { width: 100%; gap: 64px; }

  .nav__inner { left: 20px; right: 20px; width: auto; }
  .nav__logo { flex-shrink: 0; }
  /* hamburger */
  .nav__toggle { display: block; position: relative; width: 40px; height: 32px; margin-left: auto; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
  .nav__toggle::before, .nav__toggle::after, .nav__toggle span { content: ""; position: absolute; left: 9px; width: 22px; height: 1.5px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
  .nav__toggle::before { top: 9px; } .nav__toggle span { top: 15.25px; } .nav__toggle::after { top: 21.5px; }
  .nav--open .nav__toggle::before { transform: translateY(6.25px) rotate(45deg); }
  .nav--open .nav__toggle span { opacity: 0; }
  .nav--open .nav__toggle::after { transform: translateY(-6.25px) rotate(-45deg); }
  /* dropdown panel: hidden until open */
  .nav__right { display: none; position: fixed; top: 56px; left: 0; right: 0; z-index: 20; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0,0,0,.06); }
  .nav--open .nav__right { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; padding: 0; font-size: 17px; line-height: 24px; letter-spacing: -0.2px; text-align: left; white-space: normal; }
  .nav__links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav__right .btn--sm { margin-top: 16px; width: 100%; height: 44px; font-size: 15px; }

  /* hero: single column. Reset the absolutely-positioned desktop wrappers so text stacks in flow. */
  .hero { width: 100%; height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .hero__content { position: static; width: auto; height: auto; padding: 40px 20px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__top, .hero__bottom { position: static; width: auto; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero__tag { position: relative; left: auto; top: auto; }
  .hero__title { position: static; width: auto; height: auto; display: block; font-size: 44px; line-height: 48px; letter-spacing: -1.5px; }
  .hero__title span { display: block; }
  .hero__desc { position: static; width: auto; height: auto; max-width: 460px; display: block; } /* keep it off the right edge on tablet */
  .hero__cta { position: static; left: auto; top: auto; }
  /* visual: full-width box; the .hero__figure composition (portrait + plumbob) centres and scales itself */
  .hero__visual { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 5 / 5.2; margin-top: 40px; overflow: hidden; }

  .clients { width: 100%; height: auto; padding: 0 20px; }
  .clients__more { position: static; transform: none; display: block; text-align: center; margin-top: 64px; }
  .clients__title { position: static; transform: none; width: auto; height: auto; margin: 0 auto 32px; }
  /* flatten the two row-wrappers into one grid: 5 columns on tablet (2 rows of 5) */
  .clientlist { width: 100%; padding: 0 20px; gap: 32px; }
  .clientlist__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; justify-items: center; }
  .clients__rows { position: static; transform: none; width: auto; height: auto; overflow: visible;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 16px; align-items: center; justify-items: center; }
  .clients__row { display: contents; }
  .clients__row--2 { margin-top: 0; }
  .logo { width: 125px; max-width: 100%; }

  .cases { width: 100%; flex-direction: column; gap: 24px; scroll-margin-top: 56px; }
  .cases__nav { position: sticky; top: 56px; z-index: 2; /* below the sticky header */ width: 100%; flex-direction: row; gap: 20px; padding: 12px 20px; background: var(--bg); overflow-x: auto; scrollbar-width: none; }
  .cases__nav::-webkit-scrollbar { display: none; }
  .case__link, .case__link--active { width: auto; height: auto; padding: 8px 0; gap: 6px; flex-shrink: 0; }
  .case__link::before { width: 100%; }
  .cases__col { width: 100%; padding: 0 20px; gap: 64px; }
  .case__grid { width: 100%; scroll-margin-top: 114px; } /* header 56 + project nav 58 */
  /* cards + figures: inline styles set desktop px sizes, so these overrides need !important.
     Images flow in normal document order at full width (no crop) instead of absolute-fill. */
  .card, .card--half { width: 100% !important; height: auto !important; padding: 12px; }
  .card--flush { padding: 0; }
  .card--p27 { padding: 12px; }
  .row { flex-direction: column; gap: 16px; }
  .fig, .fig--fixed, .fig--full { position: static; flex: none; width: 100% !important; height: auto !important; aspect-ratio: auto !important; overflow: visible; border-radius: inherit; }
  .fig > img, .fig > video { position: static !important; inset: auto !important; width: 100% !important; height: auto !important; object-fit: contain; }

  .about { width: 100%; padding: 0 20px; flex-direction: column; gap: 16px; scroll-margin-top: 72px; }
  .about__body { width: 100%; height: auto; }
  .about__text { position: static; width: auto; font-size: 20px; line-height: 28px; }

  .cta { width: 100%; height: auto; }
  .cta__banner { position: relative; left: auto; right: auto; top: auto; height: auto; margin: 0 20px; padding: 56px 24px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .cta__title { position: static; width: auto; height: auto; display: block; font-size: 32px; line-height: 38px; letter-spacing: -0.4px; }
  .cta__btn { position: static; }
  .cta__mark { opacity: 0.6; }
  .cta__mark--a { left: -8%; top: 20px; width: 50%; height: auto; }
  .cta__mark--o { left: 30%; top: 20px; width: 44%; height: auto; }
  .cta__mark--dot { display: none; }
  .cta__links { position: static; padding: 24px 20px 0; gap: 20px; flex-wrap: wrap; }
  .cta__updated { position: static; transform: none; padding: 12px 20px 40px; }

  .showcase { width: 100%; padding: 0 20px; gap: 28px; }
  .showcase__grid { column-count: 2; column-gap: 16px; }
  .splash { margin-bottom: 16px; }

  .journal, .article { width: 100%; padding: 0 20px; }
  .journal__title { font-size: 36px; line-height: 40px; }
  .article__title { font-size: 30px; line-height: 36px; }
  .article__body { font-size: 17px; line-height: 28px; }
}

/* ─── ≤600px (phones): client logos 2 per row ─────────────────── */
@media (max-width: 600px) {
  .clients__rows { grid-template-columns: repeat(2, 1fr); gap: 32px 12px; }
  .showcase__grid { column-count: 1; }
}