/* ==========================================================================
   VELTRIX — design system
   Colour, type, spacing, grid, radius and motion tokens are transcribed from
   analysis.json (designSystem.*) and from the px values measured on the
   reference render at 1440px (pages[].typography).
   ========================================================================== */

/* --------------------------------------------------------------- fonts --- */
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/GeneralSans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pretendard KR';
  src: url('../fonts/Pretendard-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;
}
@font-face {
  font-family: 'Pretendard KR';
  src: url('../fonts/Pretendard-600.woff2') format('woff2');
  font-weight: 500 900; font-style: normal; font-display: swap;
  unicode-range: U+1100-11FF, U+3000-303F, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FF00-FFEF;
}

/* -------------------------------------------------------------- tokens --- */
:root {
  /* colour — designSystem.colors, resolved from the color-mix expressions */
  --white: #ffffff;
  --black: #000000;
  --brand-500: #99988f;
  --secondary-500: #583939;
  --secondary-subtle: #8a7474;
  --secondary-light: #cdc4c4;

  --ink: #171715;                 /* body copy */
  --ink-60: rgba(23, 23, 21, .60);
  --ink-45: rgba(23, 23, 21, .45);
  --ink-20: rgba(23, 23, 21, .20);
  --ink-12: rgba(23, 23, 21, .12);

  --light-subtle: #e6e6e3;
  --light-base: #dbdbd8;          /* page background */
  --light-strong: #d1d1cd;
  --neutral-300: #b8b7b0;
  --neutral-400: #a3a29a;

  --dark-base: #2e2e2b;
  --dark-strong: #171715;
  --footer-bg: #2c1d1d;

  --on-dark: #e6e6e3;
  --on-dark-60: rgba(230, 230, 227, .60);
  --on-dark-40: rgba(230, 230, 227, .38);
  --on-dark-line: rgba(230, 230, 227, .22);

  /* radius / shadow — designSystem.radius, designSystem.shadow */
  --radius: 3px;
  --shadow: none;

  /* spacing — designSystem.spacing clamp scale (space-md = 14.8px @1440) */
  --space-2xs: clamp(.125rem, .1rem + .125vw, .25rem);
  --space-xs:  clamp(.25rem, .2rem + .25vw, .5rem);
  --space-sm:  clamp(.5rem, .45rem + .25vw, .75rem);
  --space-md:  clamp(.75rem, .7rem + .25vw, 1rem);
  --space-lg:  clamp(1rem, .9rem + .5vw, 1.5rem);
  --space-xl:  clamp(1.25rem, 1.1rem + .75vw, 2rem);
  --gap: clamp(.75rem, .7rem + .25vw, 1rem);

  /* grid — designSystem.grid */
  --container: 120rem;
  --container-narrow: 90rem;
  --pad: var(--space-md);
  --section-pad: clamp(2.5rem, 1.6rem + 2.4vw, 4rem);      /* 64px @1440 */
  --section-pad-lg: clamp(3.25rem, 1.9rem + 3.6vw, 6rem);  /* 96px @1440 */
  --nav-h: 48px;

  /* type — sizes chosen so the 1440px render matches the measured px */
  --font-sans: 'General Sans', 'Pretendard KR', 'Apple SD Gothic Neo', 'Malgun Gothic', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Pretendard KR', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-d1: clamp(2.5rem, .82rem + 8.94vw, 8.9rem);    /* 141.8px @1440 — hero-basic / hero-split titles */
  --fs-d1-mid: clamp(2.25rem, .95rem + 7.3vw, 7.2rem);/* 115.2px @1440 — hero-editorial titles */
  --fs-d-split: clamp(1.875rem, 1.2rem + 4.17vw, 5rem);/* 79.2px @1440 — split hero titles */
  --fs-d2: clamp(2.25rem, .425rem + 8.76vw, 8.5rem);  /* 133px @1440 — typo-title blocks */
  --fs-d3: clamp(1.75rem, 1.586rem + 3.24vw, 4.5rem); /* 72px  @1440 — full-bleed card titles */
  --fs-d4: clamp(2.375rem, 2rem + 1.875vw, 4.25rem);  /* 59px  @1440 — section display headings */
  --fs-h1: clamp(1.5rem, 1.17rem + 1.66vw, 2.6625rem);/* 42.6px @1440 */
  --fs-h1-sm: clamp(1.5rem, 1.375rem + .625vw, 2.125rem); /* 34px @1440 */
  --fs-h2: clamp(1.5rem, 1.45rem + .25vw, 1.75rem);   /* 26.8px @1440 */
  --fs-h3: clamp(1.125rem, 1.075rem + .25vw, 1.375rem);/* 20.8px @1440 */
  --fs-lead: clamp(1rem, .975rem + .125vw, 1.125rem); /* 17.4px @1440 */
  --fs-body: clamp(.9375rem, .875rem + .15vw, 1rem);  /* 16px   @1440 */
  --fs-small: clamp(.8125rem, .78rem + .09vw, .875rem);
  --fs-label: clamp(.8125rem, .74rem + .22vw, .9375rem); /* 15px @1440 — mono label */
  --fs-label-sm: clamp(.6875rem, .65rem + .125vw, .78rem); /* 12px @1440 — mono tag */
  --fs-nav: clamp(.75rem, .7rem + .2vw, .95rem);         /* 14px @1440 */

  --lh-tight: .8;
  --lh-display: .9;
  --lh-heading: 1.1;
  --lh-body: 1.6;

  /* motion — designSystem.motion */
  --t-fast: .2s ease;
  --t-base: .3s ease-out;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--light-base);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: var(--lh-heading);
  margin: 0;
}
h1 { font-size: var(--fs-h1-sm); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-lead); }

p { margin: 0; font-weight: 500; line-height: var(--lh-body); }

::selection { background: var(--secondary-500); color: var(--white); }

:focus-visible { outline: 2px solid var(--secondary-500); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--pad); z-index: 300;
  background: var(--ink); color: var(--light-base);
  padding: .6rem 1rem; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* -------------------------------------------------------------- layout --- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--flush { padding-inline: 0; }

.section { padding-block: var(--section-pad); }
.section--tall { padding-block: var(--section-pad-lg); }
.section--flush { padding-block: 0; }
.section--no-top { padding-top: 0; }

.bg-light { background: var(--light-base); }
.bg-light-strong { background: var(--light-strong); }
.bg-light-subtle { background: var(--light-subtle); }
.bg-dark { background: var(--dark-base); color: var(--on-dark); }
.bg-secondary { background: var(--secondary-500); color: var(--light-subtle); }
.bg-secondary-subtle { background: var(--secondary-subtle); color: var(--light-subtle); }
.bg-neutral { background: var(--neutral-300); }

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-secondary h1, .bg-secondary h2, .bg-secondary h3 { color: inherit; }

/* --------------------------------------------------------------- type ---- */
.display-1 { font-size: var(--fs-d1); line-height: var(--lh-tight); text-transform: uppercase; font-weight: 500; letter-spacing: -.015em; }
.display-2 { font-size: var(--fs-d2); line-height: var(--lh-tight); text-transform: uppercase; font-weight: 500; letter-spacing: -.015em; }
.display-3 { font-size: var(--fs-d3); line-height: .9; text-transform: uppercase; font-weight: 500; letter-spacing: -.01em; }
.display-mid { font-size: var(--fs-d1-mid); line-height: var(--lh-tight); text-transform: uppercase; font-weight: 500; letter-spacing: -.015em; }
.display-split { font-size: var(--fs-d-split); line-height: var(--lh-display); text-transform: uppercase; font-weight: 500; letter-spacing: -.01em; }
.display-4 { font-size: var(--fs-d4); line-height: 1; text-transform: uppercase; font-weight: 500; letter-spacing: -.01em; }
.heading-hero { font-size: var(--fs-h1); line-height: 1; text-transform: uppercase; font-weight: 500; }
.heading-md { font-size: var(--fs-h2); font-weight: 500; line-height: 1.3; }
.heading-sm { font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-body); font-weight: 500; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }
.small { font-size: var(--fs-small); line-height: 1.5; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.mono-sm { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: .06em; text-transform: uppercase; }

.eyebrow {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  color: var(--ink-60);
}
.bg-dark .eyebrow, .bg-secondary .eyebrow { color: var(--on-dark-60); }

.note {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.65;
  font-weight: 500;
  color: var(--ink-60);
}
.bg-dark .note, .bg-secondary .note { color: var(--on-dark-60); }

.muted { color: var(--ink-60); }
.bg-dark .muted, .bg-secondary .muted { color: var(--on-dark-60); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.measure { max-width: 34rem; }
.measure-wide { max-width: 46rem; }
.measure-sm { max-width: 26rem; }

/* ------------------------------------------------------------ elements --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: .32em .55em;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-60);
}
.tag::before { content: "+"; opacity: .8; }
.tag--plain::before { content: none; }
.bg-dark .tag, .bg-secondary .tag, .hero-editorial .tag, .dark-panel .tag { color: var(--on-dark-60); }
.tag--light { color: var(--on-dark-60); }
.tag--solid { background: var(--secondary-500); color: var(--light-subtle); border-color: var(--secondary-500); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4em;
  border: 1px solid var(--ink-20);
  border-radius: var(--radius);
  padding: .72em 1em;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  background: transparent;
  color: var(--ink);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn::after { content: "+"; font-family: var(--font-mono); opacity: .7; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--light-base); }
.btn--arrow::after { content: "\2197"; }
.btn--light { border-color: var(--on-dark-line); color: var(--on-dark); }
.btn--light:hover { background: var(--light-base); border-color: var(--light-base); color: var(--ink); }
.btn--solid { background: var(--secondary-500); border-color: var(--secondary-500); color: var(--white); }
.btn--solid:hover { background: var(--dark-strong); border-color: var(--dark-strong); color: var(--white); }
.btn--fill { background: var(--light-subtle); border-color: var(--light-subtle); }
.btn--fill:hover { background: var(--ink); color: var(--light-base); }

/* label · centre-tag · label row with hairlines (section-quote, faq, clients) */
.rule-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--gap);
  border-top: 1px solid var(--ink-12);
  padding-top: var(--space-sm);
}
.rule-row > :last-child { text-align: right; }
.bg-dark .rule-row, .bg-secondary .rule-row { border-color: var(--on-dark-line); }

.hairline { border: 0; border-top: 1px solid var(--ink-12); margin: 0; }
.bg-dark .hairline, .bg-secondary .hairline { border-color: var(--on-dark-line); }

.media { position: relative; overflow: hidden; background: var(--neutral-300); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--ratio-3-2 { aspect-ratio: 3 / 2; }
.media--ratio-4-3 { aspect-ratio: 4 / 3; }
.media--ratio-16-9 { aspect-ratio: 16 / 9; }
.media--ratio-1-1 { aspect-ratio: 1 / 1; }
.media--ratio-3-4 { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------- nav ----- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding-inline: var(--pad);
  color: var(--ink);
  transition: background-color var(--t-base), color var(--t-base);
}
.nav--over-dark { color: var(--light-subtle); }
.nav::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23, 23, 21, .38), rgba(23, 23, 21, 0));
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base);
}
.nav--over-dark::before { opacity: 1; }
.nav.is-stuck::before { opacity: 0; }
.nav__inner { position: relative; }
.nav.is-stuck { background: var(--light-base); color: var(--ink); box-shadow: 0 1px 0 var(--ink-12); }

.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__brand { display: flex; align-items: center; gap: .6rem; }
.nav__wordmark {
  /* typographic wordmark, like the reference site's brand text */
  font-size: clamp(1rem, .95rem + .28vw, 1.375rem);   /* 20px @1440 */
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1;
  color: currentColor;
  white-space: nowrap;
}

.nav__burger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--secondary-500);
  color: var(--white);
  border-radius: var(--radius);
  padding: .45rem .7rem;
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__burger:hover { background: var(--dark-strong); }
.nav__burger-lines { display: grid; gap: 3px; width: 12px; }
.nav__burger-lines span { display: block; height: 1px; background: currentColor; }

.nav__links { display: flex; align-items: center; gap: clamp(.8rem, 1.4vw, 1.6rem); margin-inline: auto; }
.nav__link {
  font-size: var(--fs-nav);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
  color: currentColor;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.nav__link:hover, .nav__link.is-active { border-color: currentColor; }

.nav__more { position: relative; margin-left: auto; }
.nav__more-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--light-subtle); color: var(--ink);
  border-radius: var(--radius);
  padding: .45rem .6rem;
  font-size: var(--fs-nav);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 500; line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__more-toggle:hover { background: var(--ink); color: var(--light-base); }
.nav__more-toggle svg { width: 10px; transition: transform var(--t-fast); }
.nav__more[data-open="true"] .nav__more-toggle svg { transform: rotate(180deg); }
.nav__mega {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px;
  background: var(--light-subtle);
  border-radius: var(--radius);
  padding: .5rem;
  display: grid;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.nav__more[data-open="true"] .nav__mega { opacity: 1; visibility: visible; transform: none; }
.nav__mega a {
  padding: .5rem .6rem;
  border-radius: var(--radius);
  font-size: var(--fs-nav);
  letter-spacing: .04em; text-transform: uppercase; font-weight: 500;
  color: var(--ink);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nav__mega a:hover { background: var(--ink); color: var(--light-base); }

/* full-screen menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--dark-base);
  color: var(--on-dark);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease-out), visibility .45s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--pad); height: var(--nav-h); }
.menu__close {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--on-dark-line); border-radius: var(--radius);
  padding: .45rem .7rem; font-size: var(--fs-label-sm);
  letter-spacing: .08em; text-transform: uppercase;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.menu__close:hover { background: var(--light-base); color: var(--ink); }
.menu__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gap);
  padding: var(--pad);
  align-items: start;
  overflow-y: auto;
}
.menu__main { display: grid; gap: .1rem; }
.menu__link {
  font-size: clamp(1.75rem, 1rem + 3.2vw, 3.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .55;
  transition: opacity var(--t-fast);
}
.menu__link:hover { opacity: 1; }
.menu__aside { display: grid; gap: var(--space-lg); align-content: start; }
.menu__contact { display: grid; gap: .35rem; }
.menu__small-link { color: var(--on-dark-60); transition: color var(--t-fast); font-size: var(--fs-body); }
.menu__small-link:hover { color: var(--on-dark); }
.menu__foot { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: space-between; padding: var(--pad); border-top: 1px solid var(--on-dark-line); }
.menu .muted { color: var(--on-dark-40); }

/* floating in-page pill nav (hero-display / hero-split / listings) */
.pill-nav {
  display: inline-flex;
  align-items: stretch;
  background: var(--light-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}
.pill-nav a {
  padding: .68em .9em;
  font-size: var(--fs-small);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  transition: background-color var(--t-fast), color var(--t-fast);
  display: inline-flex; align-items: center; gap: .5em;
}
.pill-nav a + a { border-left: 1px solid var(--ink-12); }
.pill-nav a:hover { background: var(--ink); color: var(--light-base); }

/* ---------------------------------------------------------- hero types --- */
/* hero-display — home / consultation */
.hero-display { position: relative; padding-top: var(--nav-h); background: var(--light-base); }
.hero-display__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: clamp(1.2rem, 2vw, 2.2rem) 0 var(--space-lg);
}
.hero-display__title { margin: 0; }
.hero-display__meta { display: grid; align-content: end; gap: var(--space-md); }
.hero-display__meta-top { border-top: 1px solid var(--ink-20); }
.hero-display__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: end; }
.hero-display > .container { padding-bottom: clamp(1rem, 2.6vw, 2.4rem); }
.hero-display__services { display: grid; gap: .1rem; align-content: start; }
.hero-display__service {
  font-size: var(--fs-small);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--secondary-500);
  transition: color var(--t-fast);
}
.hero-display__service:hover { color: var(--ink); }
.hero-display__recognition { display: grid; gap: .25rem; }
.hero-display__action { display: flex; justify-content: flex-end; align-items: end; }

.hero-display__stage {
  position: relative;
  overflow: hidden;
  height: clamp(320px, 62vw, 900px);
  background: var(--dark-base);
}
.hero-display__stage img, .hero-display__stage video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.hero-display__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,23,21,.34) 0%, rgba(23,23,21,.12) 38%, rgba(23,23,21,.46) 100%);
}
.hero-display__caption {
  position: absolute; left: var(--pad); top: clamp(1rem, 4vw, 3rem);
  color: var(--light-subtle);
  font-size: var(--fs-h2);
  line-height: 1.15;
  text-transform: uppercase;
  max-width: 32ch;
  font-weight: 500;
}
.hero-display__center { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-display__wordmark {
  position: absolute; left: var(--pad); right: var(--pad); bottom: -.12em;
  font-size: clamp(3rem, 18vw, 20rem);
  line-height: .85;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  font-weight: 500;
  letter-spacing: -.02em;
  pointer-events: none;
}

/* hero-intro — about */
.hero-intro {
  position: relative;
  min-height: clamp(520px, 62vw, 900px);
  display: grid;
  align-items: end;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--dark-base);
  color: var(--light-subtle);
}
.hero-intro__bg { position: absolute; inset: 0; }
.hero-intro__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-intro__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,23,21,.28) 0%, rgba(23,23,21,.10) 45%, rgba(23,23,21,.72) 100%);
}
.hero-intro__body { position: relative; padding-bottom: var(--space-lg); display: grid; gap: var(--space-lg); }
.hero-intro h1 { font-size: var(--fs-h1-sm); line-height: 1; }
.hero-intro__row { display: grid; grid-template-columns: 1fr auto; gap: var(--gap); align-items: end; }
.hero-stats { display: flex; gap: clamp(1.5rem, 4vw, 4rem); }
.hero-stats__item { display: grid; gap: .1rem; padding-left: clamp(1rem, 2.4vw, 2.4rem); border-left: 1px solid rgba(255,255,255,.3); }
.hero-stats__num { font-size: var(--fs-h1); line-height: 1; font-weight: 500; color: var(--light-subtle); }
.hero-stats__label { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.65); }

/* hero-basic — services / disciplines / journal / contact / consultation */
.hero-basic { padding-top: var(--nav-h); }
.hero-basic__title { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; margin: 0; padding-block: clamp(.4rem, 1vw, .8rem) clamp(.5rem, 1.2vw, 1rem); }
.hero-basic__title span { display: block; }
.hero-basic__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--gap); align-items: end; border-top: 1px solid var(--ink-20); padding-top: var(--space-md); }
.hero-basic--compact .hero-basic__title { padding-block: clamp(.6rem, 1.4vw, 1.2rem) 0; }

/* hero-editorial — projects */
.hero-editorial { padding-top: var(--nav-h); position: relative; }
.hero-editorial__title { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; margin: 0; }
.hero-editorial__media { margin-top: var(--space-md); }
.hero-editorial__foot { padding-top: var(--space-lg); display: grid; gap: var(--space-md); }

/* hero-split — discipline / service detail */
.hero-split { padding-top: var(--nav-h); position: relative; overflow: hidden; }
.hero-split__title { margin: 0; padding-block: clamp(.4rem, 1vw, .8rem) clamp(.6rem, 1.4vw, 1.2rem); }
.hero-split__title--spread { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; }
.hero-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.hero-split__copy { display: grid; gap: var(--space-lg); align-content: start; max-width: 34rem; }
.hero-split__media { min-height: clamp(260px, 34vw, 520px); }
.hero-split--offset .hero-split__copy { align-content: end; padding-bottom: var(--space-lg); }

/* hero-slider — gallery / project detail */
.hero-slider {
  position: relative;
  min-height: clamp(460px, 60vw, 860px);
  display: grid;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  background: var(--dark-base);
  color: var(--light-subtle);
}
.hero-slider__track { position: absolute; inset: 0; }
.hero-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease-out); }
.hero-slider__slide.is-active { opacity: 1; }
.hero-slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slider::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,23,21,.34), rgba(23,23,21,.18) 45%, rgba(23,23,21,.55));
  pointer-events: none;
}
.hero-slider__body { position: relative; z-index: 2; }
.hero-slider__foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--space-md);
  display: flex; justify-content: space-between; gap: var(--gap);
}

/* hero-typo — offices */
.hero-typo { position: relative; padding-top: var(--nav-h); background: var(--dark-base); color: var(--light-subtle); overflow: hidden; }
.hero-typo__media { position: absolute; inset: var(--nav-h) 0 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.hero-typo__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-typo__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,23,21,.30), rgba(23,23,21,.10) 40%, rgba(23,23,21,.70));
}
.hero-typo__body { position: relative; z-index: 2; min-height: clamp(460px, 56vw, 852px); display: grid; align-content: space-between; padding-bottom: var(--space-md); }
.hero-typo__body > h1 { color: var(--light-subtle); }
.hero-typo__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: end; }

/* hero-contact */
.hero-contact { padding-top: var(--nav-h); }
.hero-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-block: clamp(.6rem, 1.4vw, 1.2rem) var(--space-lg); }
.hero-contact__left { display: grid; gap: var(--space-sm); align-content: start; }
.hero-contact__left h1 { border-bottom: 1px solid var(--ink-20); padding-bottom: var(--space-sm); line-height: 1; }
.contact-line { display: grid; grid-template-columns: 90px 1fr; gap: var(--gap); align-items: center; border-top: 1px solid var(--ink-12); padding-block: var(--space-sm); }
.contact-line:first-child { border-top: 0; }
.contact-line__value { font-size: var(--fs-lead); text-transform: uppercase; letter-spacing: .01em; }
.contact-line__value a { transition: color var(--t-fast); }
.contact-line__value a:hover { color: var(--secondary-500); }

.person-row { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-md); align-items: center; border-top: 1px solid var(--ink-12); padding-block: var(--space-sm); }
.person-row__media { aspect-ratio: 1/1; overflow: hidden; background: var(--neutral-300); }
.person-row__media img { width: 100%; height: 100%; object-fit: cover; }
.person-row__body { display: grid; grid-template-columns: 1fr auto; gap: var(--gap); align-items: center; }
.person-row__links { display: flex; gap: var(--space-md); }
.person-row__links a { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-60); transition: color var(--t-fast); }
.person-row__links a:hover { color: var(--ink); }

/* ------------------------------------------------------- achievements ---- */
.achievements { display: grid; gap: var(--space-xl); }
.achievements__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  min-height: clamp(240px, 34vw, 500px);
  align-items: start;
}
.achievements__head > :last-child { border-left: 1px solid var(--ink-12); padding-left: var(--gap); align-self: end; }
.achievements__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-xs); }
.achievements__thumb { aspect-ratio: 5/4; overflow: hidden; background: var(--neutral-300); }
.achievements__thumb img { width: 100%; height: 100%; object-fit: cover; }
.stat-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: var(--gap);
  align-items: baseline;
  border-top: 1px solid var(--ink-12);
  padding-block: clamp(1.1rem, 8.5vw, 7.6rem);
}
.stat-row__num { font-size: var(--fs-h1); font-weight: 500; line-height: 1; }
.stat-row__label { font-size: var(--fs-h2); color: var(--ink-45); font-weight: 500; }

/* ---------------------------------------------------------- about grid --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap);
  padding: var(--space-md);
  min-height: clamp(420px, 52vw, 750px);
  color: var(--light-subtle);
}
.about-grid__copy { display: grid; align-content: center; gap: var(--space-lg); padding-inline: clamp(0px, 1.5vw, 2rem); }
.about-grid__copy p { font-size: var(--fs-h3); line-height: 1.45; }
.about-grid__media { grid-column: span 2; overflow: hidden; position: relative; }
.about-grid__media img { width: 100%; height: 118%; object-fit: cover; position: absolute; inset: 0; will-change: transform; }
.about-grid--reverse .about-grid__copy { order: 2; }
.about-grid--reverse .about-grid__media { order: 1; }
.about-grid--light { color: var(--ink); }

/* ------------------------------------------------------- typo titles ----- */
.typo-titles { display: grid; gap: clamp(1.5rem, 6.4vw, 5.75rem); }
.typo-titles__title { margin: 0; display: grid; }
.typo-titles__line { display: block; white-space: nowrap; }
.typo-titles__line--center { text-align: center; }
.typo-titles__line--right { text-align: right; }
.typo-titles__line--split { display: flex; justify-content: space-between; gap: .3em; }
.typo-titles__foot { display: grid; grid-template-columns: 1fr auto; gap: var(--gap); align-items: end; }

/* --------------------------------------------------------- solutions ----- */
.solutions { display: grid; }
.solution-card {
  position: relative;
  min-height: clamp(300px, 36vw, 520px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: var(--light-subtle);
  isolation: isolate;
}
.solution-card--tall { min-height: clamp(360px, 62vw, 924px); }
.solution-card--compact .solution-card__title { font-size: clamp(1.5rem, 1.4rem + .8vw, 2.5rem); letter-spacing: 0; }
.solution-card__bg { position: absolute; inset: 0; z-index: -2; }
.solution-card__bg img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.solution-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,23,21,.25), rgba(23,23,21,.10) 40%, rgba(23,23,21,.62));
}
.solution-card__inner {
  position: relative;
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap);
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.35);
}
.solution-card__title { margin: 0; text-align: center; color: var(--white); }
.solution-card__desc { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; color: rgba(255,255,255,.85); max-width: 22ch; justify-self: end; line-height: 1.5; }
.solution-card__tag { justify-self: start; color: rgba(255,255,255,.85); }
.solution-card a.solution-card__link { position: absolute; inset: 0; z-index: 3; }
.solution-card:hover .solution-card__bg img { transform: scale(1.03); }
.solution-card__bg img { transition: transform .9s var(--ease-out); }

/* ------------------------------------------------------------- quote ----- */
.quote { display: grid; gap: clamp(1.75rem, 8vw, 7rem); }
.quote__body { max-width: 46ch; margin-inline: auto; text-align: center; font-size: var(--fs-h2); line-height: 1.5; }
.quote__body strong { font-weight: 500; }
.quote__body .muted { font-weight: 500; }
.quote__media { max-width: 300px; margin-inline: auto; }

/* ------------------------------------------------------------ reveal ----- */
.reveal-section { position: relative; background: var(--dark-base); color: var(--on-dark); }
.reveal-section__sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
}
.reveal-section__media { position: absolute; inset: 0; }
.reveal-section__media img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.reveal-section__media::after { content: ""; position: absolute; inset: 0; background: rgba(23,23,21,.34); }
.reveal-section__words { position: relative; display: grid; text-align: center; place-items: center; }
.reveal-section__words > * { grid-area: 1 / 1; }
.reveal-word {
  font-size: var(--fs-d3);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--white);
  font-weight: 500;
  text-indent: .3em;
}
.reveal-section__spacer { height: 260vh; }

/* --------------------------------------------------------- list rows ----- */
.list-rows { display: grid; }
.list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: center;
  border-top: 1px solid var(--ink-12);
  padding-block: clamp(1rem, 4.3vw, 3.9rem);
  transition: background-color var(--t-fast), padding-inline var(--t-fast);
}
.bg-dark .list-row { border-color: var(--on-dark-line); }
.list-row__label { font-size: var(--fs-lead); text-transform: uppercase; letter-spacing: .02em; font-weight: 500; }
.list-row__value { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-60); }
.bg-light .list-row__value, .bg-light-strong .list-row__value { color: var(--ink-60); }
.list-row:hover { padding-inline: var(--space-md); background: rgba(255,255,255,.05); }
.bg-light .list-row:hover, .bg-light-strong .list-row:hover { background: rgba(23,23,21,.04); }

/* -------------------------------------------------------- fullscreen ----- */
.fullscreen-word {
  position: relative;
  min-height: clamp(380px, 56vw, 820px);
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--dark-base);
}
.fullscreen-word img { position: absolute; inset: 0; width: 100%; height: 108%; object-fit: cover; will-change: transform; }
.fullscreen-word::after { content: ""; position: absolute; inset: 0; background: rgba(23,23,21,.30); }
.fullscreen-word__text {
  position: relative; z-index: 2;
  font-size: var(--fs-d3);
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 500;
}

/* ----------------------------------------------------------- clients ----- */
.clients { display: grid; gap: clamp(1.75rem, 7vw, 6.25rem); }
.clients__lead { max-width: 46ch; margin-inline: auto; text-align: center; font-size: var(--fs-h3); line-height: 1.5; }
.clients__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-xs); }
.client-cell {
  display: grid; place-items: center;
  aspect-ratio: 1/1;
  background: var(--light-subtle);
  padding: var(--space-md);
}
.client-cell img { max-height: 54px; width: auto; object-fit: contain; filter: grayscale(1) contrast(.92); opacity: .72; transition: opacity var(--t-fast), filter var(--t-fast); }
.client-cell:hover img { filter: none; opacity: 1; }
.client-cell--media { padding: 0; background: var(--neutral-300); }
.client-cell--media img { max-height: none; width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 1; }

/* marquee strip */
.marquee { overflow: hidden; border-block: 1px solid var(--ink-12); padding-block: .55rem; }
.bg-dark .marquee, .marquee--light { border-color: var(--on-dark-line); }
.marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 26s linear infinite; }
.marquee__item { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---------------------------------------------------- project listing ---- */
.project-list { display: grid; }
.project-card {
  position: relative;
  min-height: clamp(380px, 50vw, 720px);
  display: grid; align-items: end;
  overflow: hidden;
  color: var(--light-subtle);
  isolation: isolate;
}
.project-card__bg { position: absolute; inset: 0; z-index: -2; }
.project-card__bg img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.project-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(23,23,21,.16), rgba(23,23,21,.05) 35%, rgba(23,23,21,.72));
}
.project-card__inner { position: relative; padding-block: var(--space-lg); display: grid; gap: var(--space-sm); max-width: 44rem; }
.project-card--right .project-card__inner { justify-self: end; }
.project-card__chip {
  display: inline-flex; align-items: center; gap: .8em;
  align-self: start;
  background: var(--light-subtle); color: var(--ink);
  border-radius: var(--radius);
  padding: .5em .8em;
  font-size: var(--fs-h3);
  line-height: 1;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.project-card__chip::after { content: "+"; font-family: var(--font-mono); opacity: .7; }
.project-card:hover .project-card__chip { background: var(--secondary-500); color: var(--white); }
.project-card__desc { font-size: var(--fs-h3); line-height: 1.4; color: rgba(255,255,255,.9); }
.project-card__meta { display: flex; justify-content: space-between; gap: var(--gap); border-top: 1px solid rgba(255,255,255,.3); padding-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.project-card__link { position: absolute; inset: 0; z-index: 3; }

/* ------------------------------------------------------ testimonials ----- */
.testimonials { display: grid; gap: var(--space-xl); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink-12); }
.testimonial {
  background: var(--light-subtle);
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
  display: grid; gap: var(--space-lg); align-content: space-between;
  min-height: clamp(220px, 22vw, 300px);
}
.testimonial__quote { font-size: var(--fs-body); line-height: 1.65; }
.testimonial__who { display: grid; gap: .1rem; }

/* ---------------------------------------------------------- journal ------ */
.journal-feature { position: relative; min-height: clamp(320px, 40vw, 560px); overflow: hidden; display: grid; align-items: center; }
.journal-feature__bg { position: absolute; inset: 0; }
.journal-feature__bg img { width: 100%; height: 110%; object-fit: cover; will-change: transform; }
.journal-feature__card {
  position: relative;
  background: rgba(230,230,227,.92);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  max-width: 34rem;
  display: grid; gap: var(--space-md); justify-items: center; text-align: center;
  margin-inline: var(--pad);
}
.journal-feature--right .journal-feature__card { justify-self: end; }
.journal-feature__card h3 { font-size: var(--fs-h2); line-height: 1.3; }

.journal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-12); }
.journal-item { display: grid; grid-template-columns: 1fr 1fr; background: var(--light-base); }
.journal-item__media { overflow: hidden; background: var(--neutral-300); aspect-ratio: 3/2; }
.journal-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.journal-item:hover .journal-item__media img { transform: scale(1.04); }
.journal-item__body { background: var(--light-subtle); padding: clamp(1.2rem, 2.4vw, 2.2rem); display: grid; gap: var(--space-md); align-content: center; justify-items: start; }
.journal-item__body h3 { font-size: var(--fs-h3); line-height: 1.35; }
.journal-item--flip .journal-item__media { order: 2; }

.journal-filters { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; }
.journal-filter {
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-60);
  padding: .3em .1em; border-radius: var(--radius);
  transition: padding var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}
.journal-filter:hover, .journal-filter.is-active { padding-inline: .6em; background: var(--ink); color: var(--light-base); }

/* --------------------------------------------------------- galleries ----- */
.image-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; padding-block: var(--section-pad); }
.image-split__a { align-self: start; }
.image-split__b { align-self: end; padding-top: clamp(2rem, 8vw, 7rem); }

.grid-gallery { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap); align-items: center; }
.grid-gallery__side { display: grid; gap: var(--space-xl); align-content: space-between; height: 100%; }
.grid-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.grid-gallery__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--neutral-300); }
.grid-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.grid-gallery__thumb:hover img { transform: scale(1.05); }
.check-list { display: grid; gap: .4rem; justify-items: start; }
.check-item { display: inline-flex; align-items: center; gap: .6rem; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; }
.check-item__dot { width: 20px; height: 20px; border-radius: 50%; background: var(--neutral-300); display: grid; place-items: center; font-size: 11px; color: var(--ink); }

.static-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.static-gallery__a { grid-column: 1 / span 5; }
.static-gallery__b { grid-column: 6 / span 4; align-self: end; }
.static-gallery__c { grid-column: 10 / span 3; align-self: center; }

/* ---------------------------------------------------------- locations ---- */
.location-row { position: relative; overflow: hidden; min-height: clamp(280px, 34vw, 490px); display: grid; align-items: end; color: var(--light-subtle); isolation: isolate; }
.location-row__bg { position: absolute; inset: 0; z-index: -2; }
.location-row__bg img { width: 100%; height: 110%; object-fit: cover; will-change: transform; }
.location-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,23,21,.10), rgba(23,23,21,.68)); }
.location-row__inner { position: relative; padding: var(--space-lg) var(--pad); display: grid; grid-template-columns: auto 1fr auto; gap: var(--gap); align-items: end; }
.location-row__chip {
  display: inline-flex; align-items: center; gap: .7em;
  background: var(--light-subtle); color: var(--ink);
  border-radius: var(--radius); padding: .45em .7em;
  font-size: var(--fs-h3); line-height: 1;
}
.location-row__chip::after { content: "+"; font-family: var(--font-mono); opacity: .7; }
.location-row__addr { font-size: var(--fs-body); line-height: 1.5; color: rgba(255,255,255,.92); }
.location-row__hours { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); align-self: end; }

.office-table { display: grid; }
.office-table__row {
  display: grid; grid-template-columns: 90px 1fr 1.6fr; gap: var(--gap);
  align-items: center;
  background: rgba(23,23,21,.35);
  border-top: 1px solid rgba(255,255,255,.18);
  padding: .8rem var(--space-md);
  font-family: var(--font-mono); font-size: var(--fs-label-sm);
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.office-table__row:first-child { border-top: 0; }
.office-table__row > :last-child { text-align: right; }

/* --------------------------------------------------------------- faq ----- */
.faq { display: grid; gap: var(--space-xl); }
.faq__lead { max-width: 46ch; margin-inline: auto; text-align: center; font-size: var(--fs-h3); line-height: 1.5; }
.faq__list { display: grid; gap: 1px; }
.faq-item { display: grid; grid-template-columns: 40px 1fr; background: var(--light-subtle); }
.faq-item__num { display: grid; place-items: center; background: var(--dark-base); color: var(--on-dark-60); font-family: var(--font-mono); font-size: var(--fs-label-sm); }
.faq-item__body { padding: 0 var(--space-lg); }
.faq-item__q {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto; gap: var(--gap);
  align-items: center; text-align: left;
  padding-block: clamp(.9rem, 1.6vw, 1.25rem);
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; font-weight: 500;
  transition: color var(--t-fast);
}
.faq-item__q:hover { color: var(--secondary-500); }
.faq-item__sign { font-family: var(--font-mono); transition: transform var(--t-fast); }
.faq-item[data-open="true"] .faq-item__sign { transform: rotate(45deg); }
.faq-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.faq-item[data-open="true"] .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p { padding-bottom: clamp(.9rem, 1.6vw, 1.25rem); color: var(--ink-60); max-width: 60ch; }

/* -------------------------------------------------------------- form ----- */
.form-section { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.form-section__aside { position: relative; overflow: hidden; display: grid; place-items: center; min-height: clamp(340px, 40vw, 620px); }
.form-section__aside img { position: absolute; inset: 0; width: 100%; height: 108%; object-fit: cover; }
.form-section__aside--plain { background: var(--light-strong); }
.form-section__aside-body { position: relative; z-index: 2; display: grid; gap: var(--space-md); justify-items: center; text-align: center; padding: var(--space-xl); }
.form-section__title { font-family: var(--font-mono); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.2; text-transform: uppercase; font-weight: 400; letter-spacing: .02em; }
.form-section__aside--photo .form-section__aside-body { color: var(--white); }
.form-section__aside--photo::after { content: ""; position: absolute; inset: 0; background: rgba(23,23,21,.42); }
.form-section__aside--photo .form-section__aside-body { position: relative; z-index: 3; }

.form-card { background: var(--light-subtle); padding: clamp(1.4rem, 3vw, 3rem); display: grid; gap: var(--space-lg); align-content: center; }
.form-card > .btn { justify-self: start; }
.field { display: grid; }
.field input, .field textarea {
  border: 0; border-bottom: 1px solid var(--ink-20);
  background: transparent;
  padding: .8rem 0;
  font-size: var(--fs-lead);
  transition: border-color var(--t-fast);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 90px; }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; }
.chip span {
  display: inline-block;
  border: 1px solid var(--ink-20);
  border-radius: 999px;
  padding: .5em .9em;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.chip input:checked + span { background: var(--secondary-500); border-color: var(--secondary-500); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--secondary-500); outline-offset: 2px; }

.consent { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-small); }
.consent input { width: 14px; height: 14px; accent-color: var(--secondary-500); }

.newsletter { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; justify-content: center; }
.newsletter__label { font-size: var(--fs-h3); }
.newsletter__field { min-width: min(260px, 60vw); border: 0; border-bottom: 1px solid var(--ink-20); background: transparent; padding: .6rem 0; font-size: var(--fs-lead); }
.newsletter__field:focus { outline: none; border-color: var(--ink); }

.form-status { font-size: var(--fs-small); color: var(--secondary-500); min-height: 1.2em; }

/* ------------------------------------------------------ rich content ----- */
.spec-list { display: grid; }
.spec-row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); align-items: baseline; padding-block: clamp(.6rem, 1.2vw, 1rem); }
.spec-row__k { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-60); }
.spec-row__v { border-top: 1px solid var(--ink-20); padding-top: .5rem; font-size: var(--fs-body); text-transform: uppercase; letter-spacing: .02em; }
.spec-row--head .spec-row__v { font-size: var(--fs-h2); text-transform: none; letter-spacing: 0; line-height: 1.3; border-top: 0; }

.rich { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); }
.rich__aside { display: grid; gap: var(--space-lg); align-content: start; }
.rich__body { display: grid; gap: var(--space-md); max-width: 62rem; }
.rich__body h4 { font-size: var(--fs-body); font-weight: 600; margin-top: var(--space-md); }
.rich__body p { color: var(--ink-60); font-size: var(--fs-body); }
.rich__body ul { margin: var(--space-sm) 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.rich__body li { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; font-size: var(--fs-body); color: var(--ink-60); line-height: 1.55; }
.rich__body li::before { content: "\2713"; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--ink-20); border-radius: 50%; font-size: 10px; color: var(--ink); margin-top: .18em; }

/* --------------------------------------------------------- awards -------- */
.awards-table { width: 100%; border-collapse: collapse; }
.awards-table th, .awards-table td { text-align: left; padding-block: clamp(.6rem, 1.1vw, .9rem); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; font-weight: 400; }
.awards-table thead th { border-bottom: 1px solid var(--ink); color: var(--ink); }
.awards-table tbody tr { border-bottom: 1px solid var(--ink-12); }
.awards-table td:last-child, .awards-table th:last-child { text-align: right; }
.awards-table tbody tr { transition: background-color var(--t-fast); }
.awards-table tbody tr:hover { background: rgba(23,23,21,.04); }

/* ----------------------------------------------------------- numbered ---- */
.numbered { display: grid; gap: 1px; }
.numbered__row {
  display: grid; grid-template-columns: 34px 200px 1fr auto; gap: var(--gap);
  align-items: center;
  background: rgba(230,230,227,.86);
  color: var(--ink);
  padding: clamp(.75rem, 1.4vw, 1.1rem) var(--space-md);
  transition: background-color var(--t-fast);
}
.numbered__row:hover { background: rgba(230,230,227,.98); }
.numbered__i { font-family: var(--font-mono); font-size: var(--fs-label-sm); color: var(--ink-45); }
.numbered__k { font-family: var(--font-mono); font-size: var(--fs-label-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-60); }
.numbered__v { font-size: var(--fs-body); }
.numbered__sign { font-family: var(--font-mono); color: var(--ink-45); }

/* --------------------------------------------------------- team tabs ----- */
.tabs { display: grid; gap: var(--space-lg); }
.tabs__nav { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.tabs__btn {
  border: 1px solid var(--ink-20); border-radius: var(--radius);
  padding: .5em .8em; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tabs__btn:hover { border-color: var(--ink); }
.tabs__btn.is-active { background: var(--secondary-500); border-color: var(--secondary-500); color: var(--white); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.team-card { display: grid; gap: var(--space-sm); }
.team-card__media { aspect-ratio: 3/4; overflow: hidden; background: var(--neutral-300); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.team-card:hover .team-card__media img { transform: scale(1.04); }

/* --------------------------------------------------------- services ------ */
.service-row { display: grid; grid-template-columns: 40px 1.15fr 1fr; gap: var(--gap); align-items: center; padding-block: var(--space-lg); }
.service-row__i { font-family: var(--font-mono); font-size: var(--fs-label-sm); color: var(--ink-60); padding-top: .4rem; }
.service-row__media { overflow: hidden; background: var(--neutral-300); aspect-ratio: 4/5; }
.service-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.service-row:hover .service-row__media img { transform: scale(1.03); }
.service-row__body { display: grid; gap: var(--space-md); align-content: center; justify-items: start; max-width: 30rem; }
.service-row__specs { display: flex; gap: var(--space-xl); }
.service-row__spec { display: grid; gap: .1rem; }

/* --------------------------------------------------------- team stats ---- */
.team-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; }
.team-stats__sticky { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); display: grid; gap: var(--space-lg); align-content: start; }
.team-stats__media { display: grid; gap: var(--space-md); }
.team-stats__media .media { aspect-ratio: 4/3; }

/* --------------------------------------------------------- statement ----- */
.statement { display: grid; gap: var(--space-xl); justify-items: start; }
.statement__text { font-size: clamp(1.5rem, 1rem + 2.1vw, 3rem); line-height: 1.2; font-weight: 500; max-width: 22ch; }
.statement__text--wide { max-width: 26ch; }

/* --------------------------------------------------------- dark panel ---- */
.dark-panel { position: relative; overflow: hidden; background: var(--dark-base); color: var(--on-dark); isolation: isolate; }
.dark-panel__bg { position: absolute; inset: 0; z-index: -2; }
.dark-panel__bg img { width: 100%; height: 110%; object-fit: cover; opacity: .55; will-change: transform; }
.dark-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(23,23,21,.42); }
.dark-panel__inner { position: relative; display: grid; gap: var(--space-xl); }
.dark-panel__lead { max-width: 46ch; margin-inline: auto; text-align: center; font-size: var(--fs-h3); line-height: 1.5; }

/* ------------------------------------------------------------- footer ---- */
.footer { background: var(--footer-bg); color: var(--light-subtle); }
.footer__cta { padding-block: var(--section-pad-lg); display: grid; gap: var(--space-xl); }
.footer__cta-title { font-size: var(--fs-h2); text-transform: uppercase; line-height: 1.25; max-width: 20ch; }
.footer__word-wrap { position: relative; display: grid; place-items: center; padding-block: clamp(1.5rem, 5vw, 4rem); }
.footer__word {
  font-size: clamp(2.25rem, 8.2vw, 8rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(230,230,227,.42);
  font-weight: 500;
  white-space: nowrap;
}
.footer__word-media { position: absolute; width: min(28rem, 42vw); aspect-ratio: 16/10; overflow: hidden; }
.footer__word-media img { width: 100%; height: 100%; object-fit: cover; }
.footer__arrow { display: grid; place-items: center; font-family: var(--font-mono); color: var(--on-dark-40); }
.footer__links { display: grid; }
.footer-main-link {
  display: grid; grid-template-columns: 1fr auto; gap: var(--gap); align-items: center;
  border-top: 1px solid rgba(230,230,227,.18);
  padding-block: clamp(.9rem, 1.8vw, 1.5rem);
  font-size: var(--fs-h2);
  text-transform: uppercase;
  opacity: .78;
  transition: opacity var(--t-fast), border-color var(--t-fast);
}
.footer-main-link:hover { opacity: 1; border-color: var(--light-subtle); }
.footer-main-link::after { content: "\2197"; font-family: var(--font-mono); font-size: var(--fs-body); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-block: var(--section-pad); border-top: 1px solid rgba(230,230,227,.18); }
.footer__col { display: grid; gap: .45rem; align-content: start; }
.footer__col a, .footer__col span { color: var(--on-dark-60); font-size: var(--fs-body); line-height: 1.55; }
.footer__col a { transition: color var(--t-fast); }
.footer__col a:hover { color: var(--light-subtle); }
.footer__bottom { background: var(--light-strong); color: var(--ink); }
.footer__bottom-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-block: var(--space-md); border-top: 1px solid var(--ink-12); }
.footer__bottom-inner span, .footer__bottom-inner a { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; }
.footer__bottom-inner a {
  /* analysis: a.nav-bottom-link — background-color 0.2s ease */
  border-radius: var(--radius);
  padding: .15em .35em;
  margin-inline: -.35em;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.footer__bottom-inner a:hover { background: var(--ink); color: var(--light-strong); }

/* --------------------------------------------------------- animation ----- */
[data-anim] { will-change: transform, opacity; }
.js [data-anim="rise"] { opacity: 0; transform: translate3d(0, 32px, 0); }
.js [data-anim="fade"] { opacity: 0; }
.js [data-anim="mask"] > * { transform: scale(1.08); }
.js [data-anim="mask"] { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-anim] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .marquee__track { animation: none; }
}

/* ------------------------------------------------------- breakpoints ----- */
/* designSystem.breakpoints — large 1200, medium 768, small 320 */
@media (max-width: 1199px) {
  .achievements__head { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: repeat(5, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom-inner { grid-template-columns: repeat(2, 1fr); row-gap: .4rem; }
  .service-row { grid-template-columns: 28px 1fr 1fr; }
  .static-gallery__a { grid-column: 1 / span 7; }
  .static-gallery__b { grid-column: 8 / span 5; }
  .static-gallery__c { grid-column: 3 / span 6; }
  .nav__links { display: none; }
  .rich { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: .2rem; }
  .numbered__row { grid-template-columns: 26px 1fr auto; }
  .numbered__k { display: none; }
}

@media (max-width: 991px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid__media { grid-column: auto; aspect-ratio: 4/3; }
  .about-grid--reverse .about-grid__copy { order: 0; }
  .about-grid--reverse .about-grid__media { order: 0; }
  .hero-display__head { grid-template-columns: 1fr; }
  .hero-display__cols { grid-template-columns: 1fr; }
  .hero-display__action { justify-content: flex-start; }
  .form-section { grid-template-columns: 1fr; }
  .team-stats { grid-template-columns: 1fr; }
  .team-stats__sticky { position: static; }
  .grid-gallery { grid-template-columns: 1fr; }
  .hero-split__grid { grid-template-columns: 1fr; }
  .hero-contact__grid { grid-template-columns: 1fr; }
  .hero-typo__row { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .menu__layout { grid-template-columns: 1fr; }
  .solution-card__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--space-sm); }
  .solution-card__tag, .solution-card__desc { justify-self: center; text-align: center; }
  .image-split { grid-template-columns: 1fr; }
  .image-split__b { padding-top: 0; }
  .location-row__inner { grid-template-columns: 1fr; }
  .typo-titles__line { white-space: normal; }
  .typo-titles__line--split { display: block; }
  .office-table__row { grid-template-columns: 70px 1fr; }
  .office-table__row > :last-child { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 767px) {
  :root { --nav-h: 44px; }
  .hero-stats { flex-wrap: wrap; gap: var(--space-lg); }
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
  .testimonial-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .journal-item { grid-template-columns: 1fr; }
  .journal-item--flip .journal-item__media { order: 0; }
  .achievements__thumbs { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .stat-row { grid-template-columns: 1fr; gap: .2rem; }
  .service-row { grid-template-columns: 1fr; }
  .service-row__i { padding-top: 0; }
  .static-gallery { grid-template-columns: 1fr; }
  .static-gallery__a, .static-gallery__b, .static-gallery__c { grid-column: auto; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom-inner { grid-template-columns: 1fr; }
  .hero-basic__foot { grid-template-columns: 1fr; }
  .grid-gallery__thumbs { grid-template-columns: repeat(2, 1fr); }
  .person-row__body { grid-template-columns: 1fr; gap: .2rem; }
  .contact-line { grid-template-columns: 1fr; gap: .2rem; }
  .footer-main-link { font-size: var(--fs-h3); }
  .numbered__row { grid-template-columns: 24px 1fr auto; }
}