/* =========================================================
   BytGlen — Creative Technology Studio
   Design tokens are expressed in "design units" (--u) measured
   from a 1920px-wide desktop layout, so the whole page scales
   proportionally with the viewport.
   ========================================================= */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --u: calc(100vw / 1920);
  --pad: calc(var(--u) * 96);
  --gap: calc(var(--u) * 40);

  --bg: #f0f1fa;
  --ink: #050507;
  --ink-2: #2b2e3a;
  --pill: #e4e6ef;
  --white: #ffffff;
  --blue: #1a2ffb;
  --blue-2: #5172fc;
  --navy: #101d99;
  --night: #020416;
  --black: #000000;
  --cyan: #4fe6f2;
  --band: #121416;
  --dot: #c5c8f5;
  --muted: #686c80;   /* 4.6:1 on the page background (WCAG AA for small text) */

  --font: 'Geist', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --radius: calc(var(--u) * 24);
}
@media (max-width: 1099px) { :root { --u: calc(100vw / 1300); } }
@media (max-width: 699px)  { :root { --u: calc(100vw / 760); --pad: 20px; --gap: 16px; --radius: 14px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
html { overscroll-behavior-y: none; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--font);
  font-size: calc(var(--u) * 28);
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}
@media (max-width: 699px) { body { font-size: 16px; } }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
::selection { background: var(--blue); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- utility type ---------- */
.caps { text-transform: uppercase; font-size: calc(var(--u) * 17); font-weight: 500; letter-spacing: 0.01em; line-height: 1.35; }
@media (max-width: 699px) { .caps { font-size: 11px; } }
.h-xxl { font-size: calc(var(--u) * 192); line-height: 0.98; letter-spacing: -0.035em; font-weight: 400; }
.h-xl  { font-size: calc(var(--u) * 158); line-height: 1.0; letter-spacing: -0.03em; font-weight: 400; }
.h-l   { font-size: calc(var(--u) * 140); line-height: 1.0; letter-spacing: -0.03em; font-weight: 400; }
.h-m   { font-size: calc(var(--u) * 72);  line-height: 1.05; letter-spacing: -0.02em; font-weight: 400; }
@media (max-width: 699px) {
  .h-xxl { font-size: 15vw; } .h-xl { font-size: 12.5vw; } .h-l { font-size: 12.5vw; } .h-m { font-size: 9vw; }
}
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* ---------- WebGL world (one canvas behind the DOM) ---------- */
.gl-world { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: block; }
main, .site-footer, .next-page { position: relative; z-index: 2; }
html.gl [data-gl-bg], html.gl .hero__stage, html.gl [data-gl-image], html.gl [data-gl-fill] { background: transparent !important; }
html.gl [data-gl-image] img { opacity: 0; }
html.no-gl .gl-world { display: none; }
html.no-gl .immersive { background: #000; }
html.no-gl .hero__stage { background: #0b0c12 url(../img/logoBlue.jpg) center/cover; }

/* ---------- Header ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--u) * 176);
  padding: 0 var(--pad);
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none; color: var(--ink);
  transition: color .5s var(--ease-out);
}
.hdr > * { pointer-events: auto; }
.hdr.is-light { color: #fff; }
.logo {
  margin-top: calc(var(--u) * 64);
  display: inline-flex; align-items: center; gap: calc(var(--u) * 14); height: calc(var(--u) * 48);
  font-weight: 500; letter-spacing: 0.06em; font-size: calc(var(--u) * 34); line-height: 1;
}
.logo .mark { height: 100%; width: auto; will-change: transform; }
.logo__word { display: inline-block; }
.nav { margin-top: calc(var(--u) * 61); display: flex; align-items: center; gap: calc(var(--u) * 20); position: relative; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14);
  height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 26);
  border-radius: 999px; font-size: calc(var(--u) * 16); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--pill); color: var(--ink); white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
  transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.pill::before { /* hover fill wipe */
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); z-index: -1;
  transform: translateY(101%); transition: transform .55s var(--ease-out);
}
.pill:hover::before { transform: translateY(0); }
.pill:hover { color: #fff; }
.pill--dark { background: var(--blue); color: #fff; }
.pill--dark::before { background: var(--ink-2); }
.pill--white { background: #fff; color: var(--ink); box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 24) rgba(20, 24, 60, .06); }
.pill .dot { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: currentColor; flex: none; }
.pill--wa { background: #25D366; color: #fff; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 24) rgba(37, 211, 102, .28); }
.pill--wa::before { background: #128C7E; }
.pill--wa:hover { color: #fff; }
.pill--wa .wa-ico { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; fill: currentColor; display: block; }
.hdr.is-light .pill--wa, .hdr.is-light .pill--wa:hover { background: #25D366; color: #fff; }
.pill .dots { display: inline-flex; gap: calc(var(--u) * 3); }
.pill .dots i { width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; background: currentColor; display: block; transition: transform .4s var(--ease-out); }
.pill-label { display: inline-block; position: relative; top: .035em; overflow: hidden; height: 1.2em; line-height: 1.2em; }   /* caps sit optically centred */
.pill-label span { display: block; transition: transform .5s var(--ease-out); }
.pill-label span + span { position: absolute; left: 0; top: 100%; }
.pill:hover .pill-label span { transform: translateY(-100%); }
.call-btn { width: calc(var(--u) * 54); padding: 0; }
.call-btn svg { width: 48%; height: auto; overflow: visible; transition: transform .5s var(--ease-out); }
.call-btn path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.call-btn:hover svg { transform: rotate(-12deg) scale(1.06); }
@media (max-width: 699px) { .call-btn { display: none; } }   /* phones: hidden (desktop & tablet keep it) */
.hdr.is-light .pill:not(.pill--dark) { background: rgba(255,255,255,.92); color: var(--ink); }
.hdr.is-light .pill:not(.pill--dark):hover { color: #fff; }

.hdr-tagline {
  position: absolute; left: calc(var(--u) * 538); top: calc(var(--u) * 62);
  font-size: calc(var(--u) * 44); line-height: 1.18; letter-spacing: -0.012em; max-width: calc(var(--u) * 700);
  pointer-events: none;
}
@media (max-width: 1099px) { .hdr-tagline { display: none; } }

/* Menu dropdown */
.menu {
  position: absolute; top: calc(var(--u) * 70); right: 0; width: calc(var(--u) * 372);
  display: flex; flex-direction: column; gap: calc(var(--u) * 10);
  pointer-events: none; color: var(--ink);
}
.menu.is-open { pointer-events: auto; }
.menu__card { background: #fff; border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 30) calc(var(--u) * 36); box-shadow: 0 calc(var(--u)*20) calc(var(--u)*60) rgba(10,14,40,.12); }
.menu__card:not(.is-shown) { visibility: hidden; }
.menu__links a { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 30); line-height: 1; padding: calc(var(--u) * 12) 0; text-transform: uppercase; letter-spacing: -0.005em; }
.menu__links a .bullet { width: calc(var(--u) * 8); height: calc(var(--u) * 8); background: var(--ink); border-radius: 50%; transform: scale(0); transition: transform .4s var(--ease-out); }
.menu__links a:hover .bullet, .menu__links a[aria-current="page"] .bullet { transform: scale(1); }
.menu__news h4 { font-weight: 400; font-size: calc(var(--u) * 40); line-height: 1.12; margin-bottom: calc(var(--u) * 24); letter-spacing: -0.015em; }
.menu__cta { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; font-size: calc(var(--u) * 26); }
.menu__cta svg { width: calc(var(--u) * 22); }
@media (max-width: 699px) {
  .hdr { height: 76px; }
  .logo { margin-top: 20px; height: 30px; font-size: 18px; gap: 8px; }
  .nav { margin-top: 18px; gap: 8px; }
  .pill { height: 38px; padding: 0 16px; font-size: 11px; gap: 8px; }
  .pill .dot, .pill .dots i { width: 4px; height: 4px; }
  .pill--wa .wa-ico { width: 16px; height: 16px; }
  .menu { top: 48px; width: min(86vw, 340px); gap: 8px; }
  .menu__card { padding: 20px 22px; border-radius: 12px; }
  .menu__links a { font-size: 22px; padding: 9px 0; }
  .menu__links a .bullet { width: 6px; height: 6px; }
  .menu__news h4 { font-size: 26px; margin-bottom: 16px; }
  .menu__cta { font-size: 18px; } .menu__cta svg { width: 16px; }
}

/* Email field (menu + footer) */
.email-field { display: flex; align-items: center; background: var(--bg); border-radius: calc(var(--u) * 14); height: calc(var(--u) * 84); padding: 0 calc(var(--u) * 26); }
.email-field input { flex: 1; background: transparent; border: 0; outline: 0; font-size: calc(var(--u) * 22); min-width: 0; }
.email-field input::placeholder { color: #a9adc4; }
.email-field button { width: calc(var(--u) * 40); height: calc(var(--u) * 40); display: grid; place-items: center; transition: transform .4s var(--ease-out); }
.email-field button:hover { transform: translateX(calc(var(--u) * 6)); }
.email-field button svg { width: calc(var(--u) * 24); }
@media (max-width: 699px) { .email-field { height: 52px; border-radius: 10px; padding: 0 16px; } .email-field input { font-size: 15px; } .email-field button { width: 28px; height: 28px; } .email-field button svg { width: 18px; } }

/* ---------- Loader & transitions ---------- */
.loader { position: fixed; inset: 0; z-index: 200; background: #06070d; color: #fff; overflow: hidden; --lh: min(24vmin, 230px); }
.loader.is-off { visibility: hidden; pointer-events: none; }
.loader__glow { position: absolute; left: 50%; top: 46%; width: 90vmax; height: 90vmax; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(49, 80, 255, .30), rgba(26, 47, 251, .10) 38%, rgba(26, 47, 251, 0) 68%); animation: loader-breathe 4.5s ease-in-out infinite; }
@keyframes loader-breathe { 50% { opacity: .72; } }
.loader__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .35s ease-out; }
.loader.is-3d .loader__gl { opacity: 1; }   /* the 3D logo fades in once its first frame is drawn */
.loader__mark { position: absolute; left: 50%; top: 46%; height: var(--lh); aspect-ratio: 82.5 / 100; transform: translate(-50%, -50%); color: #dfe3fb; opacity: 0; }
.loader__mark .mark { width: 100%; height: 100%; display: block; }
.loader.no-3d .loader__mark { opacity: 1; }   /* flat mark only when WebGL is unavailable — never swapped with the 3D one */
.loader__meta, .loader__place { position: absolute; top: calc(var(--u) * 72); color: rgba(255, 255, 255, .55); }
.loader__meta { left: var(--pad); } .loader__place { right: var(--pad); }
.loader__progress { position: absolute; left: 50%; top: calc(46% + var(--lh) / 2 + 76px); transform: translateX(-50%); width: 132px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.loader__count { display: inline-flex; align-items: baseline; gap: 3px; color: #fff; font-size: 26px; font-weight: 300; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.loader__count b { font-weight: 300; display: inline-block; min-width: 2ch; text-align: right; }
.loader__count em { font-style: normal; font-size: .46em; font-weight: 400; color: rgba(255, 255, 255, .55); letter-spacing: .04em; }
.loader__line { position: relative; width: 100%; height: 1px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.loader__line i { position: absolute; inset: 0; background: linear-gradient(90deg, #5172fc, #dfe3fb); transform-origin: left; transform: scaleX(0); }
.loader.is-nav .loader__progress { visibility: hidden; }   /* the percentage belongs to the page that is loading, not to the cover on the way out */
.loader__progress { opacity: 0; }                                /* revealed by the loader script */
html:not(.from-transition):not(.visited) .loader:not(.is-short) .loader__meta, html:not(.from-transition):not(.visited) .loader:not(.is-short) .loader__place { opacity: 0; }
html.is-transitioning .loader { pointer-events: auto; }
@media (max-width: 699px) { .loader { --lh: 34vw; } .loader__meta, .loader__place { top: 26px; } .loader__progress { width: 112px; top: calc(46% + var(--lh) / 2 + 60px); gap: 16px; } .loader__count { font-size: 22px; } }

/* ---------- Generic sections ---------- */
.section { position: relative; padding-left: var(--pad); padding-right: var(--pad); }
.plus-row { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 64); font-weight: 500; }
.plus-row .plus { width: calc(var(--u) * 20); height: calc(var(--u) * 20); position: relative; }
.plus-row .plus::before, .plus-row .plus::after { content: ''; position: absolute; background: currentColor; }
.plus-row .plus::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.plus-row .plus::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
@media (max-width: 699px) { .plus-row { height: 44px; } .plus-row .plus { width: 12px; height: 12px; } .plus-row .hide-m { display: none; } }

/* ---------- HOME: hero ---------- */
.hero { padding-top: calc(var(--u) * 258); }
.hero__stage { position: relative; height: calc(var(--u) * 546); border-radius: var(--radius); overflow: hidden; background: #0b0c12; }
.hero__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__stage .hero__hint { position: absolute; left: calc(var(--u) * 32); bottom: calc(var(--u) * 28); color: rgba(255,255,255,.55); }
.hero__tag-m { display: none; }
@media (max-width: 1099px) { .hero { padding-top: calc(var(--u) * 200); } .hero__tag-m { display: block; font-size: calc(var(--u) * 54); line-height: 1.15; margin-bottom: calc(var(--u)*40); max-width: 15em; } }
@media (max-width: 699px) { .hero { padding-top: 96px; } .hero__tag-m { font-size: 26px; margin-bottom: 22px; } .hero__stage { height: 62vh; } }

/* ---------- HOME: bold ideas ---------- */
.bold { padding-top: calc(var(--u) * 300); padding-bottom: calc(var(--u) * 80); }
.bold__title .l1 { padding-left: calc(var(--u) * 292); }
.bold__title { font-size: calc(var(--u) * 200); }
.bold__grid { display: grid; grid-template-columns: calc(var(--u) * 774) 1fr; gap: calc(var(--u) * 110); margin-top: calc(var(--u) * 150); align-items: start; }
.bold__media { aspect-ratio: 774 / 436; border-radius: var(--radius); margin-top: calc(var(--u) * 120); position: relative; }
/* showreel card: the reel plays in full colour in the WebGL plane underneath; this is its quiet player chrome */
.sreel { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; color: #fff; pointer-events: none; will-change: opacity, transform; }
.sreel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 3, 12, 0) 55%, rgba(2, 3, 12, .5) 100%); }
.sreel__top { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); position: absolute; left: calc(var(--u) * 30); right: calc(var(--u) * 30); top: calc(var(--u) * 26); display: flex; justify-content: space-between; color: rgba(255, 255, 255, .78); }
.sreel__live { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); }
.sreel__live i { width: 6px; height: 6px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, .55); animation: sreel-rec 1.8s ease-out infinite; }
@keyframes sreel-rec { 70% { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }
.sreel__bot { position: absolute; left: calc(var(--u) * 30); right: calc(var(--u) * 30); bottom: calc(var(--u) * 40); display: flex; align-items: center; gap: calc(var(--u) * 20); }
.sreel__play { pointer-events: auto; flex: none; width: calc(var(--u) * 64); height: calc(var(--u) * 64); min-width: 44px; min-height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff;
  transition: background .4s var(--ease-out), color .4s var(--ease-out); }
.sreel__play svg { width: 34%; fill: currentColor; margin-left: 8%; }
.sreel__play:hover { background: #fff; color: var(--ink); }
.sreel__meta { display: flex; flex-direction: column; gap: 4px; }
.sreel__time { color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.sreel__bar { position: absolute; left: calc(var(--u) * 30); right: calc(var(--u) * 30); bottom: calc(var(--u) * 22); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.sreel__bar i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
html.no-gl .bold__media { background: #05060c url(../img/reel2-poster.webp) center/cover; }
.bold__copy { max-width: calc(var(--u) * 830); }
.bold__copy p { margin-bottom: calc(var(--u) * 60); }
@media (max-width: 699px) {
  .bold { padding-top: 120px; }
  .bold__title { font-size: calc((100vw - 2 * var(--pad)) / 5.3); }   /* "Intelligence." (the widest word) fills the line exactly */
  .bold__title .l1 { padding-left: 0; }                              /* phones: all three lines start on the same left edge */
  .tw { white-space: nowrap; }                                       /* split-text words never break mid-word on phones */
  .bold__grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .bold__media { order: 2; margin-top: 0; }
  .sreel__top { left: 16px; right: 16px; top: 14px; } .sreel__bot { left: 16px; right: 16px; bottom: 24px; gap: 12px; } .sreel__bar { left: 16px; right: 16px; bottom: 12px; }
}

/* ---------- HOME: reel ---------- */
.reel { height: 260vh; position: relative; }
.reel__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.reel__box { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--u) * 120); bottom: calc(var(--u) * 120); }
.reel__plus { position: absolute; left: var(--pad); right: var(--pad); }
.reel__plus.top { top: calc(var(--u) * 56); } .reel__plus.bot { bottom: calc(var(--u) * 56); }
.reel__ui { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 70); color: #fff; z-index: 7; pointer-events: none; }
.reel__word { font-size: calc(var(--u) * 150); letter-spacing: -0.02em; line-height: 1; will-change: transform; }
.reel__play { pointer-events: auto; width: calc(var(--u) * 176); height: calc(var(--u) * 112); border-radius: 999px; background: #fff; display: grid; place-items: center; transform: scale(0); }
.reel__play svg { width: calc(var(--u) * 30); fill: var(--ink); margin-left: 6%; }
@media (max-width: 699px) { .reel { height: 180vh; } .reel__box { top: 24vh; bottom: 24vh; } .reel__word { font-size: 13vw; } .reel__play { width: 74px; height: 48px; } .reel__play svg { width: 14px; } }

.video-modal { position: fixed; inset: 0; z-index: 120; background: rgba(5,5,10,.94); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility .5s; }
.video-modal.is-open { opacity: 1; visibility: visible; }
.video-modal video { width: min(90vw, 160vh); border-radius: var(--radius); }
.video-modal .pill { position: absolute; top: calc(var(--u) * 61); right: var(--pad); }

/* ---------- HOME: featured work ---------- */
.work { padding-top: calc(var(--u) * 110); padding-bottom: calc(var(--u) * 220); }
.work__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: calc(var(--u) * 52); }
.work__head .caps { max-width: calc(var(--u) * 410); text-align: left; margin-bottom: calc(var(--u) * 30); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: calc(var(--u) * 92); }
.card { display: block; position: relative; }
.card__media { position: relative; aspect-ratio: 844 / 550; border-radius: var(--radius); overflow: hidden; background: #dcdff0; transform: translateZ(0); }
.card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.12); }
.card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.12)); opacity: 0; transition: opacity .6s; }
.card:hover .card__media::after { opacity: 1; }
.card__tags { margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 15); }
.card__title { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 54); line-height: 1.1; letter-spacing: -0.015em; font-weight: 400; display: flex; align-items: center; gap: calc(var(--u)*16); }
.card__title .arrow { width: calc(var(--u) * 34); opacity: 0; transform: translateX(-30%); transition: all .5s var(--ease-out); }
.card:hover .card__title .arrow { opacity: 1; transform: none; }
.card--cta { text-align: left; cursor: pointer; width: 100%; }
.card--cta .card__media { background: var(--blue); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--u) * 48); }
.cta__mark { width: calc(var(--u) * 92); display: block; transition: transform 1.2s var(--ease-out); }
.cta__mark .mark { width: 100%; height: auto; }
.card--cta:hover .cta__mark { transform: rotate(120deg); }
.cta__text { font-size: calc(var(--u) * 84); line-height: 1; letter-spacing: -0.03em; }
@media (max-width: 699px) { .card--cta .card__media { padding: 24px; } .cta__mark { width: 52px; } .cta__text { font-size: 38px; } }
.work__more { display: flex; justify-content: center; margin-top: calc(var(--u) * 116); }
@media (max-width: 699px) {
  .work__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .work__head .caps { margin: 0; max-width: 32em; }
  .grid-2 { grid-template-columns: 1fr; row-gap: 40px; }
  .card__tags { margin-top: 14px; font-size: 10px; }
  .card__title { font-size: 26px; }
  .work__more { margin-top: 48px; }
}

/* ---------- HOME: creative ideas + tablet ---------- */
.creative { padding-top: calc(var(--u) * 260); }
.creative__title { position: relative; z-index: 2; }
.tablet-wrap { height: 340vh; position: relative; }
.tablet-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1800px; }
.tablet-layout { position: absolute; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-46%); display: grid; grid-template-columns: calc(var(--u) * 884) 1fr; gap: calc(var(--u) * 150); align-items: center; }
.tablet { position: relative; aspect-ratio: 884 / 632; border-radius: calc(var(--u) * 46); background: #121317; padding: calc(var(--u) * 20); box-shadow: 0 calc(var(--u)*40) calc(var(--u)*80) rgba(10, 12, 30, .25), inset 0 0 0 2px #2b2d33; transform-style: preserve-3d; will-change: transform; z-index: 3; }
.tablet::before { content: ''; position: absolute; left: calc(var(--u) * -4); top: 18%; width: calc(var(--u) * 4); height: 8%; background: #2b2d33; border-radius: 2px; }
.tablet__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--u) * 28); overflow: hidden; background: #000; }
.tablet__screen video { width: 100%; height: 100%; object-fit: cover; }
.tablet-copy { max-width: calc(var(--u) * 560); transform-origin: left center; will-change: transform; }
.tablet-copy p + p { margin-top: calc(var(--u) * 40); }
.tablet-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 4; }
html.gl .tablet-sticky.is-gl-black .tablet-layout, html.gl .tablet-sticky.is-gl-black .tablet-black { visibility: hidden; }
@media (max-width: 699px) {
  .creative { padding-top: 120px; }
  .tablet-wrap { height: auto; }
  .tablet-sticky { position: relative; height: auto; overflow: visible; padding: 40px 0 80px; }
  .tablet-layout { position: relative; top: 0; transform: none; grid-template-columns: 1fr; gap: 28px; left: 0; right: 0; padding: 0 var(--pad); }
  .tablet { border-radius: 22px; padding: 10px; } .tablet__screen { border-radius: 14px; }
  .tablet-black { display: none; }
}

/* ---------- HOME: immersive / warp ---------- */
.immersive { position: relative; height: 560vh; background: #000; color: #fff; }
.immersive__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.immersive__sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.step-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-transform: uppercase; font-size: calc(var(--u) * 112); line-height: 1.12; letter-spacing: -0.01em; pointer-events: none; z-index: 2; }
.step-text .row { display: flex; gap: .26em; justify-content: center; white-space: nowrap; }
.step-text { color: #fff; text-shadow: 0 0 calc(var(--u) * 28) rgba(0, 0, 0, .65); }
.step-text .w { display: inline-block; will-change: transform; }
.together { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 2; pointer-events: none; }
.together__kicker { position: absolute; top: calc(var(--u) * 200); left: 0; right: 0; }
.together__title { font-size: calc(var(--u) * 200); line-height: 1; letter-spacing: -0.03em; }
.together__title .w { display: inline-block; }
.together .plus-row { position: absolute; top: calc(var(--u) * 196); left: calc(var(--u) * 386); right: calc(var(--u) * 386); }
.continue { position: absolute; bottom: calc(var(--u) * 46); left: 50%; transform: translateX(-50%); pointer-events: auto; z-index: 3; }
.continue svg { width: calc(var(--u) * 16); }
@media (max-width: 699px) {
  .immersive { height: 420vh; }
  .step-text { font-size: 6.6vw; }
  .together__title { font-size: 17vw; }
  .together__kicker { top: 120px; padding: 0 20px; }
  .together .plus-row { left: 20px; right: 20px; top: 112px; }
  .continue { bottom: 28px; } .continue svg { width: 12px; }
}

/* ---------- Footer & next page ---------- */
.site-footer { background: #fff; padding: calc(var(--u) * 300) var(--pad) calc(var(--u) * 60); }
.footer__grid { display: grid; grid-template-columns: calc(var(--u) * 442) calc(var(--u) * 442) 1fr; font-size: calc(var(--u) * 23); line-height: 1.45; }
.footer__col > * + * { margin-top: calc(var(--u) * 54); }
.footer__col a:not(.pill) { position: relative; display: inline-block; }
.footer__col a:not(.pill)::after, .ulink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out); }
.footer__col a:not(.pill):hover::after, .ulink:hover::after { transform: scaleX(1); transform-origin: left; }
.ulink { position: relative; display: inline-block; }
.footer__news h3 { font-size: calc(var(--u) * 64); line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; margin-bottom: calc(var(--u) * 40); }
.footer__news .email-field { max-width: calc(var(--u) * 646); }
.footer__ctas { display: flex; gap: calc(var(--u) * 14); flex-wrap: wrap; }
.footer__bottom { margin-top: calc(var(--u) * 190); display: grid; grid-template-columns: calc(var(--u) * 884) calc(var(--u) * 442) 1fr auto; align-items: center; font-size: calc(var(--u) * 18); }
.footer__bottom .heart { color: #ff3b6b; }
.to-top { width: calc(var(--u) * 72); height: calc(var(--u) * 72); border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: background .4s; }
.to-top:hover { background: var(--blue); }
.to-top svg { width: 34%; }
@media (max-width: 699px) {
  .site-footer { padding: 90px var(--pad) 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 16px; font-size: 14px; }
  .footer__news { grid-column: 1 / -1; order: -1; }
  .footer__news h3 { font-size: 34px; margin-bottom: 20px; }
  .footer__col > * + * { margin-top: 24px; }
  .footer__bottom { margin-top: 60px; grid-template-columns: 1fr auto; gap: 10px; font-size: 12px; }
  .to-top { width: 48px; height: 48px; grid-row: 1 / span 3; grid-column: 2; }
}

.next-page { background: var(--band); color: #fff; height: 100vh; }
.next-page__inner { position: sticky; top: 0; height: calc(var(--u) * 400); padding: calc(var(--u) * 92) var(--pad) 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; }
.next-page__kicker { grid-column: 1 / -1; }
.next-page__title { align-self: center; font-size: calc(var(--u) * 64); text-transform: uppercase; letter-spacing: -0.01em; }
.next-page__link { align-self: center; display: flex; align-items: center; gap: calc(var(--u) * 22); }
.next-page__line { width: calc(var(--u) * 196); height: 1px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.next-page__line i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.next-page__link svg { width: calc(var(--u) * 22); }
.next-page .plus-row { grid-column: 1 / -1; }
@media (max-width: 699px) { .next-page { height: 70vh; } .next-page__inner { height: 240px; padding-top: 48px; } .next-page__title { font-size: 34px; } .next-page__line { width: 70px; } .next-page__link svg { width: 14px; } }

/* ---------- Contact drawer ---------- */
.talk { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.talk.is-open { pointer-events: auto; }
.talk__scrim { position: absolute; inset: 0; background: rgba(5, 6, 20, .62); opacity: 0; transition: opacity .6s var(--ease-out); }
.talk.is-open .talk__scrim { opacity: 1; }
.talk__panel { position: absolute; top: calc(var(--u) * 20); right: calc(var(--u) * 20); bottom: calc(var(--u) * 20); width: min(calc(var(--u) * 820), 100% - 24px); background: var(--bg); border-radius: var(--radius); padding: 0 calc(var(--u) * 60) calc(var(--u) * 60); transform: translateX(110%); transition: transform .9s var(--ease-out); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.talk__panel > * { flex-shrink: 0; }   /* let the content overflow and scroll instead of squashing */
/* label + close: one row that sticks to the top of the panel while the form scrolls */
.talk__head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(var(--u) * 40) 0 calc(var(--u) * 16); background: var(--bg); }
.talk.is-open .talk__panel { transform: none; }
.talk__panel h2 { font-size: calc(var(--u) * 88); line-height: 1; font-weight: 400; letter-spacing: -0.03em; margin: calc(var(--u) * 34) 0 calc(var(--u) * 40); }
.talk__close { flex: none; }
.talk__chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); margin: calc(var(--u) * 20) 0 calc(var(--u) * 36); }
.chip { border: 1px solid rgba(0,0,0,.18); border-radius: 999px; padding: calc(var(--u) * 12) calc(var(--u) * 22); font-size: calc(var(--u) * 19); transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out);   /* never opacity/transform: GSAP animates those (a CSS transition on them froze the intro) */ }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.field { display: block; margin-bottom: calc(var(--u) * 18); }
.field input, .field textarea { width: 100%; background: #fff; border: 0; border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 24) calc(var(--u) * 26); font-size: calc(var(--u) * 22); outline: 2px solid transparent; transition: outline-color .3s; font-family: inherit; resize: none; }
.field input:focus, .field textarea:focus { outline-color: var(--blue); }
.talk__submit { margin-top: calc(var(--u) * 20); }
.talk__actions { display: flex; gap: calc(var(--u) * 12); flex-wrap: wrap; }
.talk__lead { max-width: 34em; margin: calc(var(--u) * -10) 0 calc(var(--u) * 36); color: #4a4e63; font-size: calc(var(--u) * 24); }
.talk__alt { margin-top: auto; padding-top: calc(var(--u) * 40); display: flex; gap: calc(var(--u) * 40); font-size: calc(var(--u) * 20); }
@media (max-width: 699px) {
  .talk__panel { top: 10px; right: 10px; bottom: 10px; padding: 0 20px 28px; }
  .talk__head { padding: 18px 0 10px; }
  .talk__panel h2 { font-size: 36px; margin: 18px 0 16px; } .talk__lead { font-size: 15px; margin: 0 0 22px; }
  .chip { font-size: 13px; padding: 8px 14px; } .talk__chips { gap: 6px; }
  .field input, .field textarea { font-size: 15px; padding: 14px 16px; border-radius: 10px; }
  .talk__alt { font-size: 13px; flex-wrap: wrap; gap: 14px; }
}

/* ---------- ABOUT ---------- */
body[data-page="about"], body[data-page="about"] html { background: #000; }
.a-hero { height: 100vh; min-height: 560px; position: relative; background: #000; color: #fff; overflow: hidden; }
.a-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-hero__bottom { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(var(--u) * 70); }
.a-hero__word { font-size: calc(var(--u) * 352); line-height: .78; letter-spacing: -0.045em; font-weight: 500; white-space: nowrap; display: flex; justify-content: space-between; }
.a-hero__word span { display: inline-block; }
.a-hero__scroll { position: absolute; right: 0; bottom: calc(var(--u) * -34); font-size: calc(var(--u) * 26); text-transform: uppercase; }
.a-hero__lead { position: absolute; left: var(--pad); top: calc(var(--u) * 240); max-width: calc(var(--u) * 700); font-size: calc(var(--u) * 30); color: rgba(255,255,255,.75); }
@media (max-width: 699px) { .a-hero__word { font-size: 19vw; } .a-hero__scroll { position: static; display: block; text-align: right; margin-top: 10px; font-size: 12px; } .a-hero__lead { top: 110px; font-size: 16px; max-width: 80vw; } }

.dark-zone { background: #000; color: #fff; position: relative; overflow: hidden; }
.brands { padding-top: calc(var(--u) * 140); padding-bottom: calc(var(--u) * 120); }
.brands__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 var(--pad); margin-bottom: calc(var(--u) * 80); }
.brands__head .caps { text-align: right; max-width: calc(var(--u) * 330); }
.marquee { display: flex; overflow: hidden; padding: calc(var(--u) * 34) 0; user-select: none; }
.marquee__track { display: flex; flex: none; gap: calc(var(--u) * 140); padding-right: calc(var(--u) * 140); align-items: center; will-change: transform; }
.wordmark { font-size: calc(var(--u) * 44); white-space: nowrap; color: #fff; opacity: .92; display: inline-flex; align-items: center; gap: calc(var(--u) * 12); }
.wordmark svg { height: 1em; width: auto; }
.wm-a { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: calc(var(--u) * 34); }
.wm-b { font-weight: 300; letter-spacing: -0.02em; }
.wm-c { font-weight: 600; letter-spacing: -0.04em; font-style: italic; }
.wm-d { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; }
.wm-e { font-weight: 800; letter-spacing: -0.05em; text-transform: lowercase; }
@media (max-width: 699px) { .brands__head { flex-direction: column; gap: 16px; } .brands__head .caps { text-align: left; } .wordmark { font-size: 22px; } .wm-a { font-size: 16px; } .marquee__track { gap: 48px; padding-right: 48px; } .marquee { padding: 14px 0; } }

.lists { position: relative; padding-top: calc(var(--u) * 160); padding-bottom: calc(var(--u) * 300); }
.outline-word { position: absolute; left: 0; font-size: calc(var(--u) * 430); line-height: .8; letter-spacing: -0.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); pointer-events: none; will-change: transform; font-weight: 400; }
.list-row { position: relative; z-index: 2; display: grid; grid-template-columns: calc(var(--u) * 884) calc(var(--u) * 240) 1fr; padding: 0 var(--pad); align-items: start; margin-bottom: calc(var(--u) * 260); }
.list-row__title { font-size: calc(var(--u) * 72); text-transform: uppercase; line-height: 1; }
.list-row__count { display: flex; align-items: center; gap: calc(var(--u) * 24); font-size: calc(var(--u) * 40); }
.list-row__count svg { width: calc(var(--u) * 44); }
.list-row__items { grid-column: 2 / -1; margin-top: calc(var(--u) * 40); border-top: 1px solid rgba(255,255,255,.12); padding-top: calc(var(--u) * 26); }
.list-row__items li { list-style: none; display: grid; grid-template-columns: calc(var(--u) * 420) 1fr; gap: calc(var(--u) * 20); font-size: calc(var(--u) * 21); line-height: 2; color: rgba(255,255,255,.55); transition: color .3s; }
.list-row__items li:hover { color: #fff; }
@media (max-width: 699px) {
  .outline-word { font-size: 38vw; }
  .list-row { grid-template-columns: 1fr auto; margin-bottom: 90px; }
  .list-row__title { font-size: 34px; } .list-row__count { font-size: 22px; } .list-row__count svg { width: 22px; }
  .list-row__items { grid-column: 1 / -1; } .list-row__items li { grid-template-columns: 1fr; font-size: 14px; line-height: 1.5; padding: 8px 0; }
  .list-row__items li span + span { color: rgba(255,255,255,.35); }
}

.studio-word { position: relative; z-index: 1; padding-left: calc(var(--u) * 250); font-size: calc(var(--u) * 430); line-height: .8; letter-spacing: -0.03em; white-space: nowrap; color: rgba(220,222,235,.9); }
@media (max-width: 699px) { .studio-word { font-size: 40vw; padding-left: 8vw; } }

.expertise { background: var(--blue); color: #fff; position: relative; }
.expertise__head { padding-top: calc(var(--u) * 230); position: relative; z-index: 3; }
.expertise__title { font-size: calc(var(--u) * 222); line-height: .96; letter-spacing: -0.02em; text-transform: uppercase; }
.expertise__title .l2 { padding-left: calc(var(--u) * 464); }
.expertise__aside { position: absolute; right: var(--pad); top: calc(var(--u) * 300); width: calc(var(--u) * 330); }
.letter-boxes { display: flex; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 36); }
.letter-boxes span { width: calc(var(--u) * 34); height: calc(var(--u) * 46); border: 1.5px solid rgba(255,255,255,.75); border-radius: calc(var(--u)*6); display: grid; place-items: center; font-size: calc(var(--u) * 15); font-weight: 600; }
.cards-pin { height: 520vh; position: relative; }
.cards-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 2400px; }
.cards-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.xcard { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 402); height: calc(var(--u) * 562); margin-left: calc(var(--u) * -201); margin-top: calc(var(--u) * -281); transform-style: preserve-3d; will-change: transform; }
.xcard__face, .xcard__back { position: absolute; inset: 0; border-radius: calc(var(--u) * 20); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.xcard__back { background: var(--blue); border: calc(var(--u) * 5) solid #fff; overflow: hidden; }
.xcard__back svg { width: 100%; height: 100%; }
.xcard__face { background: #fff; color: var(--ink); transform: rotateY(180deg); padding: calc(var(--u) * 40) calc(var(--u) * 36) calc(var(--u) * 34); display: flex; flex-direction: column; box-shadow: 0 calc(var(--u) * 30) calc(var(--u) * 60) rgba(0, 6, 80, .25); }
.xcard__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * 22); }
.xcard__top h3 { font-size: calc(var(--u) * 40); font-weight: 400; letter-spacing: -0.01em; }
.xcard__glyph { width: calc(var(--u) * 34); height: calc(var(--u) * 44); }
.xcard ul { list-style: none; font-size: calc(var(--u) * 21); }
.xcard li { padding: calc(var(--u) * 15) 0; background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.6px); background-size: calc(var(--u) * 12) 4px; background-repeat: repeat-x; background-position: 0 100%; }
.xcard li:last-child { background: none; }
.xcard__bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.xcard__bottom h3 { transform: rotate(180deg); font-size: calc(var(--u) * 40); font-weight: 400; }
@media (max-width: 699px) {
  .expertise__head { padding-top: 120px; }
  .expertise__title { font-size: 15vw; } .expertise__title .l2 { padding-left: 12vw; }
  .expertise__aside { position: static; width: auto; margin-top: 24px; }
  .letter-boxes span { width: 22px; height: 30px; font-size: 11px; }
  .cards-pin { height: auto; }
  .cards-sticky { position: relative; height: auto; overflow: visible; perspective: 1400px; padding: 60px 20px 100px; }
  .cards-stage { position: relative; display: grid; grid-template-columns: 1fr; gap: 20px; justify-items: center; }
  .xcard { position: relative; left: auto; top: auto; margin: 0; width: min(78vw, 320px); height: calc(min(78vw, 320px) * 1.4); }
  .xcard__face { padding: 26px 22px; } .xcard__top h3, .xcard__bottom h3 { font-size: 24px; } .xcard ul { font-size: 14px; } .xcard li { padding: 9px 0; background-size: 8px 4px; }
  .xcard__glyph { width: 20px; height: 26px; }
}

.dots-cta { height: 220vh; position: relative; background: var(--blue); color: #fff; }
.dots-cta__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.dots-cta canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dots-cta .together { z-index: 1; }

/* ---------- PROJECTS ---------- */
.p-hero { padding-top: calc(var(--u) * 300); padding-bottom: calc(var(--u) * 120); display: flex; justify-content: space-between; align-items: flex-start; }
.p-hero__title { font-size: calc(var(--u) * 336); line-height: .8; letter-spacing: -0.045em; font-weight: 400; }
.p-hero__meta { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 50); font-size: calc(var(--u) * 80); line-height: .9; }
.p-hero__meta svg { width: calc(var(--u) * 72); }
.filters { display: flex; gap: calc(var(--u) * 12); flex-wrap: wrap; margin-bottom: calc(var(--u) * 70); }
.filters .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.p-grid { padding-bottom: calc(var(--u) * 260); }
.card.is-hidden { display: none; }
/* card -> outside link: camera flies into the picture (core/zoomlink.js) */
.zoomer { position: fixed; inset: 0; z-index: 300; overflow: hidden; cursor: progress; }
.zoomer__scrim { position: absolute; inset: 0; background: rgba(6, 7, 13, .72); opacity: 0; }
.zoomer__box { position: absolute; overflow: hidden; transform: translateZ(0); }
.zoomer__box img { position: absolute; left: 0; top: 0; max-width: none; width: auto; height: auto; transform-origin: 0 0; will-change: transform; }
.zoomer__wash { position: absolute; inset: 0; opacity: 0; }
@media (max-width: 699px) { .p-hero { padding-top: 130px; } .p-hero__title { font-size: 19vw; } .p-hero__meta { font-size: 26px; gap: 14px; } .p-hero__meta svg { width: 24px; } .filters { margin-bottom: 30px; } }

/* ---------- reveal helpers ---------- */
/* (no permanent will-change on reveal elements: GSAP promotes them only while they animate) */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }

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

/* ---------- text animation (core/text.js) ---------- */
.tc { position: relative; }
.tc.is-scr { -webkit-text-fill-color: transparent; }                      /* real glyph keeps the layout ... */
.tc.is-scr::after { content: attr(data-g); position: absolute; left: 0; top: 0; -webkit-text-fill-color: currentColor; color: var(--blue); opacity: .85; }   /* ... the decoding glyph sits on top */
.is-typing .tc.is-cur::before { content: ''; position: absolute; right: -0.12em; top: 0.12em; bottom: 0.08em; width: max(1.5px, 0.07em); background: var(--blue); border-radius: 1px; }
.is-typed .tc.is-cur::before { animation: caret-blink .9s steps(1) 2, caret-out .3s 1.8s forwards; }
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes caret-out { to { opacity: 0; } }
.immersive .tc.is-scr::after, .a-hero .tc.is-scr::after, .expertise .tc.is-scr::after, .next-page .tc.is-scr::after, .dark-zone .tc.is-scr::after { color: #8fa0ff; }
.immersive .is-typing .tc.is-cur::before, .a-hero .is-typing .tc.is-cur::before, .expertise .is-typing .tc.is-cur::before, .next-page .is-typing .tc.is-cur::before { background: #8fa0ff; }

/* =====================================================================================================
   TABLET (700–1099 px). Everything below is scoped to tablets only: phones (≤699) and laptops/desktops
   (≥1100) are untouched. The desktop layout is scaled by --u here, which leaves type too small and
   several two-column layouts too narrow, so tablets get readable minimum sizes and stacked columns.
   ===================================================================================================== */
@media (min-width: 700px) and (max-width: 1099px) {
  body { font-size: clamp(17px, calc(var(--u) * 28), 20px); }
  .caps { font-size: 12px; }
  .pill { height: 44px; padding: 0 20px; gap: 10px; font-size: 12px; }
  .nav { gap: 10px; }
  .call-btn { width: 44px; padding: 0; }

  /* menu dropdown + contact drawer: real tap-sized type */
  .menu { width: 320px; top: 56px; gap: 8px; }
  .menu__card { padding: 20px 24px; border-radius: 14px; }
  .menu__links a { font-size: 18px; padding: 9px 0; }
  .menu__links a .bullet { width: 6px; height: 6px; }
  .menu__news h4 { font-size: 24px; margin-bottom: 16px; }
  .menu__cta { font-size: 14px; } .menu__cta svg { width: 16px; }
  .talk__panel { width: min(580px, 100% - 24px); top: 12px; right: 12px; bottom: 12px; padding: 0 36px 32px; }
  .talk__head { padding: 24px 0 12px; }
  .talk__panel h2 { font-size: 48px; margin: 20px 0 20px; }
  .talk__lead { font-size: 17px; margin: 0 0 26px; }
  .chip { font-size: 14px; padding: 9px 16px; } .talk__chips { gap: 8px; margin: 14px 0 26px; }
  .field { margin-bottom: 12px; }
  .field input, .field textarea { font-size: 16px; padding: 16px 18px; border-radius: 12px; }
  .talk__alt { font-size: 14px; gap: 24px; padding-top: 28px; }

  /* home: showreel card full width, copy underneath */
  .bold__grid { grid-template-columns: 1fr; gap: 44px; margin-top: 64px; }
  .bold__media { margin-top: 0; }
  .bold__title .l1 { padding-left: 0; }   /* "Design Meets" starts on the same left edge as "Intelligence." */
  .bold__copy { max-width: 620px; }
  .bold__copy p { margin-bottom: 32px; }
  .sreel__top { left: 24px; right: 24px; top: 20px; }
  .sreel__bot { left: 24px; right: 24px; bottom: 32px; gap: 14px; }
  .sreel__bar { left: 24px; right: 24px; bottom: 18px; }
  .sreel__play { width: 54px; height: 54px; }
  .sreel__live { gap: 8px; }

  /* home: selected work */
  .work__head .caps { max-width: 300px; }
  .card__tags { font-size: 11px; margin-top: 14px; }
  .card__title { font-size: clamp(26px, calc(var(--u) * 54), 40px); margin-top: 4px; }
  .card--cta .card__media { padding: 28px; }
  .cta__mark { width: 56px; }

  /* home: tablet zoom-through — portrait stacks the device above the copy, landscape keeps two balanced columns */
  .tablet-layout { grid-template-columns: 1fr; gap: 110px; }   /* room for the device's tilted entrance */
  .tablet-copy { max-width: 620px; }
  .tablet-copy p + p { margin-top: 20px; }
  .tablet { border-radius: 30px; padding: 12px; } .tablet__screen { border-radius: 20px; }

  /* home: warp words fit the width */
  .step-text { font-size: 6.2vw; }
  .together__kicker { top: 130px; } .together .plus-row { top: 124px; left: 12vw; right: 12vw; }
  .continue svg { width: 12px; }

  /* footer */
  .site-footer { padding: 120px var(--pad) 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 48px 32px; font-size: 17px; }
  .footer__news { grid-column: 1 / -1; order: -1; }
  .footer__news h3 { font-size: 52px; margin-bottom: 24px; }
  .footer__col > * + * { margin-top: 28px; }
  .footer__bottom { margin-top: 90px; grid-template-columns: 1fr auto; gap: 10px 24px; font-size: 13px; }
  .to-top { width: 56px; height: 56px; grid-row: 1 / span 3; grid-column: 2; }
  .next-page__line { width: 120px; } .next-page__link svg { width: 16px; }

  /* about */
  .a-hero__lead { top: 150px; font-size: 18px; max-width: 480px; }
  .a-hero__scroll { font-size: 13px; }
  .brands__head .caps { max-width: 300px; }
  .wordmark { font-size: 28px; } .wm-a { font-size: 21px; }
  .marquee__track { gap: 70px; padding-right: 70px; }
  .list-row { grid-template-columns: 1fr auto; margin-bottom: 130px; }
  .list-row__title { font-size: 48px; } .list-row__count { font-size: 28px; gap: 14px; } .list-row__count svg { width: 28px; }
  .list-row__items { grid-column: 1 / -1; margin-top: 28px; padding-top: 18px; }
  .list-row__items li { grid-template-columns: 1fr 1fr; gap: 24px; font-size: 16px; line-height: 1.5; padding: 9px 0; }
  .studio-word { font-size: 24vw; padding-left: 6vw; }
  .expertise__head { padding-top: 160px; }
  .expertise__title { font-size: 13vw; } .expertise__title .l2 { padding-left: 10vw; }
  .expertise__aside { position: static; width: 340px; margin-top: 32px; }
  .letter-boxes span { width: 26px; height: 34px; font-size: 12px; }
  /* approach cards: one row of four on tablets (JS lays them out); card size follows the screen width, type follows the card */
  .cards-sticky { --cw: max(120px, min(calc((100vw - 48px - 30px) / 4), 300px)); }
  .xcard { width: var(--cw); height: calc(var(--cw) * 1.6); margin-left: calc(var(--cw) / -2); margin-top: calc(var(--cw) * -0.8); }
  .xcard__face { padding: calc(var(--cw) * .09) calc(var(--cw) * .075) calc(var(--cw) * .08); border-radius: calc(var(--cw) * .07); }
  .xcard__back { border-radius: calc(var(--cw) * .07); border-width: 3px; }
  .xcard__top { margin-bottom: calc(var(--cw) * .06); }
  .xcard__top h3, .xcard__bottom h3 { font-size: calc(var(--cw) * .11); }
  .xcard__glyph { width: calc(var(--cw) * .09); height: calc(var(--cw) * .12); }
  .xcard ul { font-size: calc(var(--cw) * .071); }
  .xcard li { padding: calc(var(--cw) * .045) 0; background-size: 9px 4px; }

  /* projects */
  .p-hero { padding-top: 170px; }
  .p-hero__title { white-space: nowrap; font-size: 20vw; }   /* "WORKS" stays on one line */
  .p-hero__meta svg { width: 40px; }
  .filters { gap: 8px; margin-bottom: 44px; }
}
@media (min-width: 700px) and (max-width: 1099px) and (orientation: landscape) {
  .tablet-layout { grid-template-columns: 1.25fr 1fr; gap: 48px; }
  .tablet-copy { font-size: 17px; }
}

/* =====================================================================================================
   SERVICES
   ===================================================================================================== */
.s-intro { display: grid; grid-template-columns: calc(var(--u) * 1040) 1fr; gap: calc(var(--u) * 120); align-items: start; padding-bottom: calc(var(--u) * 160); }
.s-intro__lead { font-size: calc(var(--u) * 46); line-height: 1.2; letter-spacing: -0.015em; }
.s-index { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); }
.s-index__chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); }
.s-index__chip span { color: var(--blue); font-variant-numeric: tabular-nums; font-size: .8em; }
.s-index__chip:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.s-index__chip:hover span { color: #9fb0ff; }

.s-list { padding-bottom: calc(var(--u) * 160); }
.svc { display: grid; grid-template-columns: calc(var(--u) * 700) 1fr; gap: calc(var(--u) * 140); padding: calc(var(--u) * 110) 0 calc(var(--u) * 120); border-top: 1px solid rgba(10, 12, 30, .14); scroll-margin-top: 120px; }
.svc__head { position: sticky; top: calc(var(--u) * 170); align-self: start; }
.svc__num { display: inline-block; color: var(--muted); margin-bottom: calc(var(--u) * 28); transition: color .5s var(--ease-out); }
.svc.is-active .svc__num { color: var(--blue); }
.svc__title { font-size: calc(var(--u) * 84); line-height: 1.02; letter-spacing: -0.03em; font-weight: 400; }
.svc__tags { list-style: none; display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 40); }
.svc__tags li { border: 1px solid rgba(10, 12, 30, .18); border-radius: 999px; padding: calc(var(--u) * 9) calc(var(--u) * 18); }
.svc__lead { font-size: calc(var(--u) * 40); line-height: 1.28; letter-spacing: -0.015em; margin-bottom: calc(var(--u) * 70); max-width: 26em; }
.svc__cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 70); align-items: start; }
.svc__deliv > .caps { color: var(--muted); margin-bottom: calc(var(--u) * 10); }
.dots-list { list-style: none; font-size: calc(var(--u) * 24); }
.dots-list li { padding: calc(var(--u) * 18) 0; background-image: radial-gradient(circle, #9aa3d6 1.2px, transparent 1.6px); background-size: 10px 4px; background-repeat: repeat-x; background-position: 0 100%; }
.dots-list li:last-child { background: none; }
.svc__note { background: #fff; border-radius: var(--radius); padding: calc(var(--u) * 46) calc(var(--u) * 44); box-shadow: 0 calc(var(--u) * 20) calc(var(--u) * 60) rgba(20, 24, 60, .06); }
.svc__note h3 { font-size: calc(var(--u) * 32); line-height: 1.15; letter-spacing: -0.015em; font-weight: 400; margin-bottom: calc(var(--u) * 18); }
.svc__note p { font-size: calc(var(--u) * 21); line-height: 1.55; color: #4a4e63; }
.svc__cta { margin-top: calc(var(--u) * 30); display: inline-flex; align-items: center; gap: 8px; font-size: calc(var(--u) * 17); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--blue); }
.svc__cta svg { width: 1.15em; transition: transform .5s var(--ease-out); }
.svc__cta:hover svg { transform: translate(3px, -3px); }

.s-process { background: #0b0c12; color: #fff; padding: calc(var(--u) * 220) 0 calc(var(--u) * 180); }
.s-process__head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(var(--u) * 60); }
.s-process__head .caps { max-width: calc(var(--u) * 380); color: rgba(255, 255, 255, .7); }
.s-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: calc(var(--u) * 130); }
.phase { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: calc(var(--u) * 36); }
.phase .xcard__glyph { width: calc(var(--u) * 30); height: calc(var(--u) * 38); color: #fff; }
.phase h3 { font-size: calc(var(--u) * 52); font-weight: 400; letter-spacing: -0.02em; margin: calc(var(--u) * 46) 0 calc(var(--u) * 18); }
.phase p { font-size: calc(var(--u) * 21); line-height: 1.55; color: rgba(255, 255, 255, .64); max-width: 22em; }
.phase__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: calc(var(--u) * 30); }
.phase__tags li { border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: calc(var(--u) * 7) calc(var(--u) * 15); color: rgba(255, 255, 255, .85); }
.s-process__areas { margin-top: calc(var(--u) * 140); color: rgba(255, 255, 255, .5); }

.s-faq { display: grid; grid-template-columns: calc(var(--u) * 700) 1fr; gap: calc(var(--u) * 140); padding-top: calc(var(--u) * 220); padding-bottom: calc(var(--u) * 240); align-items: start; }
.s-faq__head { position: sticky; top: calc(var(--u) * 170); }
.s-faq__head .caps { max-width: calc(var(--u) * 420); margin: calc(var(--u) * 30) 0 calc(var(--u) * 40); color: var(--muted); }
.faq__item { border-top: 1px solid rgba(10, 12, 30, .14); }
.faq__item:last-child { border-bottom: 1px solid rgba(10, 12, 30, .14); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; padding: calc(var(--u) * 34) 0; font-size: calc(var(--u) * 32); line-height: 1.2; letter-spacing: -0.012em; }
.faq__q:hover span { color: var(--blue); }
.faq__q span { transition: color .3s; }
.faq__icon { position: relative; flex: none; width: calc(var(--u) * 44); height: calc(var(--u) * 44); min-width: 30px; min-height: 30px; border-radius: 50%; background: #fff; transition: background .4s var(--ease-out), transform .6s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 36%; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__icon { background: var(--blue); color: #fff; transform: rotate(135deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.faq__a > div { overflow: hidden; }
.faq__a p { font-size: calc(var(--u) * 22); line-height: 1.6; color: #4a4e63; max-width: 44em; padding-bottom: calc(var(--u) * 36); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* =====================================================================================================
   BLOG
   ===================================================================================================== */
.b-intro { display: block; padding-bottom: calc(var(--u) * 110); }
.b-intro .s-intro__lead { max-width: calc(var(--u) * 1100); }
.b-featured { padding-bottom: calc(var(--u) * 160); }
.b-feat { display: grid; grid-template-columns: 1.4fr 1fr; gap: calc(var(--u) * 90); align-items: center; }
.b-feat .card__media { position: relative; aspect-ratio: 844 / 550; border-radius: var(--radius); overflow: hidden; background: #dcdff0; }
.b-feat .card__media img { width: 100%; height: 100%; object-fit: cover; }
.b-feat__kicker { display: flex; gap: 18px; color: var(--muted); }
.b-feat__kicker span:first-child { color: var(--blue); }
.b-feat__title { font-size: calc(var(--u) * 70); line-height: 1.04; letter-spacing: -0.03em; font-weight: 400; margin: calc(var(--u) * 30) 0 calc(var(--u) * 26); }
.b-feat .card__desc { font-size: calc(var(--u) * 24); }
.b-feat__btn { margin-top: calc(var(--u) * 40); }
.b-feat .card__date { margin-top: calc(var(--u) * 40); }
.b-feat:hover .b-feat__btn::before { transform: translateY(0); }
.b-feat:hover .b-feat__btn .pill-label span { transform: translateY(-100%); }
.b-list { padding-bottom: calc(var(--u) * 240); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gap); row-gap: calc(var(--u) * 100); }
.post-card .card__tags, .card--cta .card__tags { display: flex; gap: 14px; }
.post-card .card__tags span:first-child { color: var(--blue); }
.grid-3 .card__title { font-size: calc(var(--u) * 36); line-height: 1.15; letter-spacing: -0.012em; margin-top: calc(var(--u) * 12); display: block; }
.card__desc { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 20); line-height: 1.55; color: #4a4e63; }
.card__date { margin-top: calc(var(--u) * 18); color: var(--muted); }
.post-card:hover .card__title { color: var(--blue); }
.card__title { transition: color .4s var(--ease-out); }
.grid-3 .card--cta .cta__text { font-size: calc(var(--u) * 64); }

/* ---------- article ---------- */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress i { position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.post-hero { padding-top: calc(var(--u) * 270); padding-bottom: calc(var(--u) * 80); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); }
.crumbs a { color: var(--ink); } .crumbs a:hover { color: var(--blue); }
.post-hero__title { font-size: calc(var(--u) * 104); line-height: 1.02; letter-spacing: -0.035em; font-weight: 400; max-width: 15em; margin: calc(var(--u) * 50) 0 calc(var(--u) * 54); }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; color: var(--muted); }
.post-hero__cat { color: var(--blue); }
.post-cover { margin: 0; }
.post-cover__media { aspect-ratio: 16 / 8; }
.post-layout { display: grid; grid-template-columns: calc(var(--u) * 420) 1fr; gap: calc(var(--u) * 140); padding-top: calc(var(--u) * 130); padding-bottom: calc(var(--u) * 180); align-items: start; }
.post-aside { position: sticky; top: calc(var(--u) * 160); display: flex; flex-direction: column; gap: calc(var(--u) * 60); }
.post-toc .caps, .post-share .caps { color: var(--muted); margin-bottom: 14px; }
.post-toc ol { list-style: none; counter-reset: toc; }
.post-toc li { counter-increment: toc; }
.post-toc a { display: grid; grid-template-columns: 2.2em 1fr; padding: 8px 0; font-size: clamp(14px, calc(var(--u) * 19), 17px); line-height: 1.35; color: var(--muted); transition: color .3s; }
.post-toc a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; }
.post-toc a:hover, .post-toc a.is-active { color: var(--ink); }
.post-toc a.is-active::before { color: var(--blue); }
.post-share__row { display: flex; gap: 8px; }
.post-share__btn { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--ink); transition: background .3s, color .3s; }
.post-share__btn svg { width: 18px; }
.post-share__btn:hover { background: var(--ink); color: #fff; }
.post-share__ok { position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); white-space: nowrap; color: var(--blue); opacity: 0; transition: opacity .3s; }
.post-share__btn.is-copied .post-share__ok { opacity: 1; }
.post-body { max-width: 760px; font-size: clamp(17px, calc(var(--u) * 24), 21px); line-height: 1.72; color: #22253a; }
.post-body > * + * { margin-top: 1.1em; }
.post-body .post-lead { font-size: 1.28em; line-height: 1.5; color: var(--ink); letter-spacing: -0.01em; }
.post-body h2 { font-size: clamp(26px, calc(var(--u) * 48), 42px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; color: var(--ink); margin-top: 2.1em; scroll-margin-top: 120px; }
.post-body h3 { font-size: clamp(19px, calc(var(--u) * 28), 25px); line-height: 1.25; letter-spacing: -0.012em; font-weight: 500; color: var(--ink); margin-top: 1.6em; }
.post-body h2 + *, .post-body h3 + * { margin-top: .6em; }
.post-body ul, .post-body ol { padding-left: 1.25em; }
.post-body li + li { margin-top: .45em; }
.post-body li::marker { color: var(--blue); }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body a:not(.pill) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .86em; background: #e2e5f6; padding: .12em .4em; border-radius: 6px; }
.post-body blockquote { margin-top: 1.8em; margin-bottom: .6em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--blue); font-size: 1.32em; line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); }
.post-end { margin-top: 3em !important; background: var(--blue); color: #fff; border-radius: var(--radius); padding: clamp(26px, calc(var(--u) * 56), 56px); }
.post-end .caps { color: rgba(255, 255, 255, .7); }
.post-end h3 { font-size: clamp(28px, calc(var(--u) * 52), 46px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 400; color: #fff; margin: .4em 0 .35em; }
.post-end p:not(.caps) { color: rgba(255, 255, 255, .85); max-width: 32em; }
.post-end__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4em; }
.post-related { padding-top: calc(var(--u) * 60); padding-bottom: calc(var(--u) * 240); }
.post-related__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: calc(var(--u) * 70); border-top: 1px solid rgba(10, 12, 30, .14); padding-top: calc(var(--u) * 100); }

/* ---------- services + blog: phones ---------- */
@media (max-width: 699px) {
  .s-intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 70px; }
  .s-intro__lead { font-size: 22px; }
  .s-index { gap: 6px; } .s-index__chip { font-size: 13px; padding: 8px 13px; gap: 8px; }
  .s-list { padding-bottom: 60px; }
  .svc { grid-template-columns: 1fr; gap: 24px; padding: 56px 0 64px; scroll-margin-top: 80px; }
  .svc__head { position: static; }
  .svc__num { margin-bottom: 14px; }
  .svc__title { font-size: 36px; }
  .svc__tags { margin-top: 20px; gap: 6px; } .svc__tags li { padding: 6px 12px; }
  .svc__lead { font-size: 20px; margin-bottom: 32px; }
  .svc__cols { grid-template-columns: 1fr; gap: 28px; }
  .dots-list { font-size: 16px; } .dots-list li { padding: 13px 0; }
  .svc__note { padding: 24px 22px; } .svc__note h3 { font-size: 22px; } .svc__note p { font-size: 15px; } .svc__cta { font-size: 12px; margin-top: 18px; }
  .s-process { padding: 100px 0 90px; }
  .s-process__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .s-process__grid { grid-template-columns: 1fr; gap: 36px; margin-top: 54px; }
  .phase { padding-top: 22px; } .phase .xcard__glyph { width: 20px; height: 26px; }
  .phase h3 { font-size: 30px; margin: 22px 0 10px; } .phase p { font-size: 15px; } .phase__tags { margin-top: 16px; } .phase__tags li { padding: 5px 11px; }
  .s-process__areas { margin-top: 60px; }
  .s-faq { grid-template-columns: 1fr; gap: 36px; padding-top: 100px; padding-bottom: 110px; }
  .s-faq__head { position: static; } .s-faq__head .caps { margin: 16px 0 22px; }
  .faq__q { font-size: 18px; padding: 20px 0; } .faq__a p { font-size: 15px; padding-bottom: 22px; }
  .b-intro { padding-bottom: 50px; } .b-featured { padding-bottom: 80px; }
  .b-feat { grid-template-columns: 1fr; gap: 22px; }
  .b-feat__title { font-size: 30px; margin: 14px 0 12px; } .b-feat .card__desc { font-size: 15px; } .b-feat__btn { margin-top: 22px; } .b-feat .card__date { margin-top: 18px; }
  .b-list { padding-bottom: 110px; }
  .grid-3 { grid-template-columns: 1fr; row-gap: 48px; }
  .grid-3 .card__title { font-size: 23px; margin-top: 8px; } .card__desc { font-size: 15px; margin-top: 8px; } .card__date { margin-top: 12px; }
  .grid-3 .card--cta .cta__text { font-size: 38px; }
  .post-hero { padding-top: 120px; padding-bottom: 32px; }
  .post-hero__title { font-size: 34px; margin: 22px 0 22px; } .post-hero__meta { gap: 6px 16px; }
  .post-cover__media { aspect-ratio: 4 / 3; }
  .post-layout { grid-template-columns: 1fr; gap: 0; padding-top: 44px; padding-bottom: 80px; }
  .post-aside { position: static; order: 2; margin-top: 50px; }
  .post-toc { display: none; }
  .post-body h2 { margin-top: 1.8em; }
  .post-related { padding-bottom: 110px; }
  .post-related__head { flex-direction: column; align-items: flex-start; margin-bottom: 32px; padding-top: 60px; }
}
/* ---------- services + blog: tablets ---------- */
@media (min-width: 700px) and (max-width: 1099px) {
  .s-intro { grid-template-columns: 1fr; gap: 36px; padding-bottom: 100px; }
  .s-intro__lead { font-size: 28px; max-width: 24em; }
  .s-index__chip { font-size: 14px; padding: 9px 15px; }
  .svc { grid-template-columns: 1fr; gap: 34px; padding: 80px 0 90px; }
  .svc__head { position: static; }
  .svc__title { font-size: 54px; }
  .svc__tags li { padding: 7px 14px; }
  .svc__lead { font-size: 24px; margin-bottom: 40px; }
  .svc__cols { gap: 36px; }
  .dots-list { font-size: 17px; } .dots-list li { padding: 14px 0; }
  .svc__note { padding: 28px; } .svc__note h3 { font-size: 24px; } .svc__note p { font-size: 16px; } .svc__cta { font-size: 13px; }
  .s-process { padding: 130px 0 110px; }
  .s-process__grid { grid-template-columns: 1fr 1fr; gap: 50px var(--gap); margin-top: 80px; }
  .phase .xcard__glyph { width: 24px; height: 30px; }
  .phase h3 { font-size: 38px; margin: 28px 0 12px; } .phase p { font-size: 16px; } .phase__tags li { padding: 6px 12px; }
  .s-faq { grid-template-columns: 1fr; gap: 44px; padding-top: 130px; padding-bottom: 150px; }
  .s-faq__head { position: static; }
  .faq__q { font-size: 22px; padding: 24px 0; } .faq__a p { font-size: 17px; padding-bottom: 26px; }
  .b-feat { grid-template-columns: 1fr; gap: 30px; }
  .b-feat__title { font-size: 44px; } .b-feat .card__desc { font-size: 17px; }
  .grid-3 { grid-template-columns: 1fr 1fr; row-gap: 70px; }
  .grid-3 .card__title { font-size: 26px; } .card__desc { font-size: 16px; }
  .post-hero { padding-top: 170px; }
  .post-hero__title { font-size: 60px; }
  .post-layout { grid-template-columns: 1fr; gap: 0; padding-top: 70px; }
  .post-aside { position: static; order: 2; margin-top: 60px; }
  .post-toc { display: none; }
  .post-body { max-width: 680px; }
  .post-related__head { padding-top: 80px; margin-bottom: 44px; }
}
.s-hero .p-hero__title { font-size: min(calc(var(--u) * 336), 15.5vw); }
@media (max-width: 699px) { .s-hero .p-hero__title { font-size: 14vw; } }
@media (min-width: 700px) and (max-width: 1099px) { .s-hero .p-hero__title { font-size: 13.5vw; } }

/* keyboard focus: a clear ring for keyboard users only (mouse/touch clicks never show it) */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.dark-sec :focus-visible, .next-page :focus-visible, .post-end :focus-visible, .talk__panel .pill--dark:focus-visible { outline-color: #9fb0ff; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 0; }
/* footer text links: at least 24 px tall tap targets (WCAG 2.2 target size) */
.footer__col a:not(.pill) { padding: 2px 0; }