/* ═══════════════════════════════════════════════════════════
   NUSA TERA INSPIRA — Tech Classicism
   Linen field, teal accent, ink buttons.
   Type: Instrument Serif (antique display) + Wix Madefor Display
   ═══════════════════════════════════════════════════════════ */

:root {
  --linen: #F8F7F3;        /* broken-white page background */
  --linen-deep: #ECE8DF;
  --accent: #297373;       /* dark-teal accent */
  --accent-hover: #1F5A5A; /* deeper teal */
  --ink: #2C2C2A;
  --ink-soft: rgba(44, 44, 42, 0.62);
  --hairline: rgba(44, 44, 42, 0.14);

  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Wix Madefor Display", -apple-system, sans-serif;

  --container: min(92vw, 1240px);
  --radius-card: 20px;

  --dot: radial-gradient(rgba(44,44,42,0.28) 1.1px, transparent 1.4px);
  --dot-size: 12px;
  --grid-line: rgba(44, 44, 42, 0.15);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* NOTE: no `scroll-behavior: smooth` here — it corrupts ScrollTrigger.refresh()
   whenever it runs while the page is scrolled (e.g. on viewport resize): the
   refresh's internal scroll restores become async animations, so the pinned
   parallax measures its start off by the scroll offset and bleeds over other
   sections. Smooth anchor scrolling is done in JS instead (main.js). */

body {
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

/* Grain over the linen field — paper, not flat digital color */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }

.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

/* ─────────────── Logo lockup — two faces in one line ─────────────── */
.logo-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35em;
  line-height: 1;
}
.logo-sans {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.82em;
}

/* ─────────────── Buttons — both variants converge on accent ─────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 1.7em;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn--primary {
  background: var(--ink);
  color: var(--linen);
  border-color: var(--ink);
}
.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline-light {
  background: transparent;
  color: var(--linen);
  border-color: rgba(248, 247, 243, 0.6);
}
.btn--outline-light:hover {
  background: var(--linen);
  border-color: var(--linen);
  color: var(--ink);
}
.btn--primary:hover,
.btn--outline:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--linen);
}
.btn--light {
  background: var(--linen);
  color: var(--ink);
  border-color: var(--linen);
}
.btn--light:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--linen);
}
.btn--pill-light {
  background: var(--linen);
  color: var(--ink);
  border-color: var(--linen);
  font-size: 0.875rem;
}
.btn--pill-light:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--linen);
}

/* ─────────────── Section headline treatment ─────────────── */
.section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-title .serif { font-size: 1.08em; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dot pixelation patch — signature detail on one motif per image */
.pixel-patch {
  position: absolute;
  background-image: radial-gradient(var(--linen) 1.6px, transparent 2px);
  background-size: 7px 7px;
  pointer-events: none;
}

/* ═══════════════ PRELOADER ═══════════════ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--linen);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 500ms ease 100ms;
}
.preloader.is-done { opacity: 0; pointer-events: none; }

.preloader__image {
  position: absolute;
  inset: 0;
  clip-path: inset(41% 38% 41% 38%);
  animation: pl-reveal 1.3s var(--ease-out) 0.45s forwards;
}
.preloader__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.preloader__veil {
  position: absolute;
  inset: 0;
  background: rgba(248, 247, 243, 0.35);
}
@keyframes pl-reveal {
  to { clip-path: inset(0 0 0 0); }
}

.preloader__bracket {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 2.5px solid var(--ink);
}
.preloader__bracket--tl { top: 41%; left: 38%; border-right: 0; border-bottom: 0; animation: pl-tl 1.3s var(--ease-out) 0.45s forwards; }
.preloader__bracket--tr { top: 41%; right: 38%; border-left: 0; border-bottom: 0; animation: pl-tr 1.3s var(--ease-out) 0.45s forwards; }
.preloader__bracket--bl { bottom: 41%; left: 38%; border-right: 0; border-top: 0; animation: pl-bl 1.3s var(--ease-out) 0.45s forwards; }
.preloader__bracket--br { bottom: 41%; right: 38%; border-left: 0; border-top: 0; animation: pl-br 1.3s var(--ease-out) 0.45s forwards; }
@keyframes pl-tl { to { top: 18px; left: 18px; } }
@keyframes pl-tr { to { top: 18px; right: 18px; } }
@keyframes pl-bl { to { bottom: 18px; left: 18px; } }
@keyframes pl-br { to { bottom: 18px; right: 18px; } }

.preloader__logo {
  position: relative;
  z-index: 2;
  font-size: 1.6rem;
  color: var(--ink);
  animation: pl-logo 900ms ease 1.1s forwards;
}
.preloader__logo-img {
  display: block;
  width: clamp(180px, 42vw, 260px);
  height: auto;
  filter: grayscale(1); /* monochrome, matching the header/footer logo */
}
@keyframes pl-logo { to { opacity: 0; transform: translateY(-8px); } }

/* ═══════════════ NAVIGATION — fixed; transparent at the page top, solid on scroll ═══════════════ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  /* fully transparent while at the top — the hero owns the whole viewport */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    transform 320ms var(--ease-out),
    background 320ms ease,
    border-color 320ms ease,
    backdrop-filter 320ms ease;
  will-change: transform;
}
/* scrolled away from the top (JS adds this): translucent broken-white bar (tint + blur) */
.nav--scrolled {
  background: rgba(248, 247, 243, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: rgba(44, 44, 42, 0.06);
}
/* over the hero video the bar is transparent, so flip the nav content to light */
.nav:not(.nav--scrolled) .nav__links a { color: var(--linen); }
.nav:not(.nav--scrolled) .nav__logo-img { filter: grayscale(1) brightness(0) invert(1); }
.nav:not(.nav--scrolled) .nav__burger span { background: var(--linen); }
/* …except while the (opaque linen) mobile menu is open under the burger */
.nav:not(.nav--scrolled) .nav__burger[aria-expanded="true"] span { background: var(--ink); }
/* auto-hide: slides up out of view; JS reveals it on hover / at the page top */
.nav--hidden { transform: translateY(-100%); }
.nav__logo {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.05rem;
  white-space: nowrap;
}
.nav__logo-img {
  display: block;
  height: clamp(34px, 4vw, 44px);
  width: auto;
  filter: grayscale(1); /* monochrome on this site */
}
.nav__links {
  display: flex;
  gap: 2.2rem;
  margin-left: auto; /* push links to the right so they sit beside the CTA */
}
.nav__links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  position: relative;
  transition: opacity 160ms ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav__burger span {
  width: 26px;
  height: 2px;
  background: var(--ink);
  transition: transform 250ms ease, opacity 250ms ease;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  background: var(--linen);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
}

/* ═══════════════ HERO ═══════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* full-bleed background video */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* darken toward the copy (left + bottom) so the headline reads over the footage,
   plus a soft top band so the transparent nav's light text reads over bright footage */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20, 24, 22, 0.45) 0%, transparent 18%),
    linear-gradient(90deg, rgba(20, 24, 22, 0.80) 0%, rgba(20, 24, 22, 0.50) 42%, rgba(20, 24, 22, 0.12) 100%),
    linear-gradient(0deg, rgba(20, 24, 22, 0.35) 0%, transparent 38%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: max(4vw, calc((100vw - 1240px) / 2));
  padding-right: 4vw;
}
.hero__copy {
  max-width: 40rem;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
body.is-loaded .hero__copy {
  opacity: 1;
  transform: translateY(0);
}
.hero__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--linen);
}
.hero__title .line { display: block; }
.hero__title .serif { font-size: 1.1em; }
.hero__sub {
  margin-top: 1.6rem;
  max-width: 34rem;
  color: rgba(248, 247, 243, 0.82);
  font-size: 1.05rem;
}
.hero__ctas {
  display: flex;
  gap: 0.9rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.pixel-patch--hero {
  left: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
}

/* ═══════════════ DIRECTORY LIST ═══════════════ */
.directory {
  position: relative;
  min-height: 100svh;
  padding: clamp(4rem, 8vw, 7rem) 0 38svh;
  overflow: hidden;
}
/* content dissolves into the dot pattern at the top edge (hero → directory) */
.dot-dissolve::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  background-image: var(--dot);
  background-size: var(--dot-size) var(--dot-size);
  pointer-events: none;
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.directory__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* ── Left: capabilities credit-rollup ── */
.directory__rollup {
  position: relative;
  height: clamp(320px, 54svh, 580px);
  overflow: hidden;
  /* items fade in/out at the top & bottom edges, like film credits */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.directory__track {
  animation: rollup 28s linear infinite; /* 1.5× faster than the original 42s */
  will-change: transform;
}
@keyframes rollup {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
/* each set carries its own trailing gap as padding (padding doesn't collapse and
   is included in the box height), so two stacked sets == exactly 2× one set and
   translateY(-50%) wraps with no jump — a truly seamless loop */
.rollup__set { padding-bottom: 1.5rem; }

/* credits layout: focus area right-aligned on the left, capabilities on the right */
.rollup__group {
  display: grid;
  grid-template-columns: 40% 1fr;
  column-gap: 1.3rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
.rollup__group:last-child { margin-bottom: 0; }
.rollup__area {
  grid-column: 1;
  text-align: right;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}
.rollup__group ul { grid-column: 2; list-style: none; }
.rollup__group li {
  font-size: 0.86rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.rollup__group li + li { margin-top: 2px; }

/* ── Right: headline ── */
.directory__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1.3rem;
}
.directory__headline h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.directory__headline h2 .serif { font-size: 1.1em; }
.directory__cta { margin-top: 1.8rem; }

/* ── Layered wave divider (bottom ~35svh) — melts into blue Services ──
   Four asymmetric waves at different heights, opacities and phases; each is a
   seamlessly-tiling teal wave that drifts sideways forever (alternating
   directions + speeds) so the layers slide over one another. */
.waves-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35svh;
  overflow: hidden;
  pointer-events: none;
}
.waves-divider .wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;          /* two tiles wide → translateX(-50%) loops one full tile */
  height: 100%;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 50% 100%;
  will-change: transform;
}
.waves-divider .wave--1 {
  opacity: 0.25;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path fill='%23297373' d='M0,67 C280,67 280,123 560,123 C1000,123 1000,67 1440,67 L1440,200 L0,200 Z'/></svg>");
  animation: wave-left 28s linear infinite;
}
.waves-divider .wave--2 {
  opacity: 0.40;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path fill='%23297373' d='M0,148 C320,148 320,96 640,96 C1040,96 1040,148 1440,148 L1440,200 L0,200 Z'/></svg>");
  animation: wave-right 22s linear infinite;
}
.waves-divider .wave--3 {
  opacity: 0.60;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path fill='%23297373' d='M0,121 C410,121 410,169 820,169 C1130,169 1130,121 1440,121 L1440,200 L0,200 Z'/></svg>");
  animation: wave-left 17s linear infinite;
}
.waves-divider .wave--4 {
  opacity: 1;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path fill='%23297373' d='M0,185 C250,185 250,145 500,145 C970,145 970,185 1440,185 L1440,200 L0,200 Z'/></svg>");
  animation: wave-right 12s linear infinite;
}
@keyframes wave-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes wave-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ═══════════════ SERVICES — BENTO HOVER-SWAP ═══════════════ */
.services {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--accent); /* waves above melt straight into this blue */
}
.services .section-title { color: var(--linen); }
.services .bento__card { box-shadow: 0 14px 40px rgba(44, 44, 42, 0.18); }
.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.bento__card {
  position: relative;
  aspect-ratio: 4 / 3.1;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
}
.bento__card[data-tone="teal"] { background: var(--accent); }
.bento__card[data-tone="ink"] { background: var(--ink); }

/* two absolutely-positioned layers: image out, content in — together */
.bento__media {
  position: absolute;
  inset: 0;
  transition: opacity 300ms ease;
}
.bento__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bento__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44,44,42,0.55) 0%, transparent 45%);
}
.bento__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 2rem 2rem 5.4rem;
  /* translucent white layer — the artwork stays faintly visible through it */
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
.bento__content p {
  color: var(--ink);
  font-size: 1rem;
  max-width: 30rem;
}
.bento__title {
  position: absolute;
  left: 2rem;
  bottom: 1.6rem;
  z-index: 2;
  color: var(--linen);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  letter-spacing: -0.01em;
  pointer-events: none;
}
.bento__title .serif { font-size: 1.08em; }

/* keep the painting visible on hover so it shows through the frosted white layer */
.bento__card:hover .bento__media,
.bento__card.is-hovered .bento__media {
  opacity: 0.65;
}
.bento__card:hover .bento__content,
.bento__card.is-hovered .bento__content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* title flips to ink on hover — readable on the white layer */
.bento__card:hover .bento__title,
.bento__card.is-hovered .bento__title {
  color: var(--ink);
}

/* ═══════════════ APPROACH — HOVER-EXPAND GRID ═══════════════ */
.approach {
  --grid-w: 4px;                            /* grid line thickness (tuning knob) */
  --grid-stroke: var(--linen);              /* solid linen survey lines over the image */
  position: relative;
  /* Paint above the pinned parallax below it. That section goes
     position:fixed while pinned (z-index:auto); during a ScrollTrigger
     re-measure — most visibly a viewport RESIZE — it can momentarily paint
     over the section it overlaps in the DOM. Lifting this section's paint
     order makes that overlap impossible. Stays well below nav (900). */
  z-index: 3;
  min-height: 100vh;                        /* tuning knob: 90–110vh */
  display: flex;
  overflow: hidden;
  isolation: isolate;
}
/* full-bleed image — the section background. It never moves or scales. */
.approach__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assets/img/grid.jpg") center / cover no-repeat;
}
/* soft linen scrim at the top only, so the headline stays legible */
.approach__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(248, 247, 243, 0.85) 0%,
    rgba(248, 247, 243, 0.35) 13%,
    rgba(248, 247, 243, 0) 26%);
}
.approach__inner {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.approach .section-title { margin-bottom: 0; }

/* Each track size is a registered (typed) custom property. Chrome won't
   interpolate grid-template-columns/rows directly here — it snaps — but typed
   custom properties always transition smoothly, and the grid re-lays out
   every frame as they change. */
@property --ac1 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ac2 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ac3 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ac4 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ac5 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ar1 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ar2 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ar3 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ar4 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --ar5 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }

/* the grid overlay — fills remaining height, edge to edge over the image */
.approach-grid {
  flex: 1;
  display: grid;
  grid-template-columns: var(--ac1) var(--ac2) var(--ac3) var(--ac4) var(--ac5);
  /* row 1 is the title row; the four text rows are tracks 2–5 */
  grid-template-rows: var(--ar1) var(--ar2) var(--ar3) var(--ar4) var(--ar5);
  border-top: var(--grid-w) solid var(--grid-stroke);
  border-left: var(--grid-w) solid var(--grid-stroke);
}
.approach__cell {
  border-right: var(--grid-w) solid var(--grid-stroke);
  border-bottom: var(--grid-w) solid var(--grid-stroke);
  min-width: 0;
  min-height: 0;
}
/* title cell — first row, double width, headline sits at its bottom-left.
   Same linen fill as the text cells, but no hover-expand. */
.approach__cell--title {
  grid-column: span 2;
  background: var(--linen);
  display: flex;
  align-items: flex-end;
  padding: clamp(1rem, 1.6vw, 1.5rem);
}
/* text cells — solid linen, ink copy, always fully visible (nothing on hover) */
.approach__text {
  background: var(--linen);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: clamp(1rem, 1.6vw, 1.5rem);
}
.approach__num {
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: auto;
}
.approach__text h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
}
.approach__text p {
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* Hover-expand — only with a real pointer and when motion is allowed.
   The hovered cell's column grows by 2% (10% of a track) and the column to
   its RIGHT gives up exactly that (same for its row / the row BELOW), so the
   cell expands toward the bottom-right, its direct neighbours genuinely
   resize to absorb it, and every other track keeps its exact size and
   position. Row 1 is the title row, so text cells sit on row tracks 2–5. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .approach-grid {
    transition: --ac1 480ms var(--ease-out), --ac2 480ms var(--ease-out),
                --ac3 480ms var(--ease-out), --ac4 480ms var(--ease-out),
                --ac5 480ms var(--ease-out), --ar1 480ms var(--ease-out),
                --ar2 480ms var(--ease-out), --ar3 480ms var(--ease-out),
                --ar4 480ms var(--ease-out), --ar5 480ms var(--ease-out);
  }
  /* 01 — row 2, col 3 */
  .approach-grid:has(.approach__text--1:hover) {
    --ac3: 22%; --ac4: 18%;
    --ar2: 22%; --ar3: 18%;
  }
  /* 02 — row 3, col 5 (last): no column to its right, so it grows leftward
     instead — its column widens and col 4 gives up the space */
  .approach-grid:has(.approach__text--2:hover) {
    --ac5: 22%; --ac4: 18%;
    --ar3: 22%; --ar4: 18%;
  }
  /* 03 — row 4, col 1 */
  .approach-grid:has(.approach__text--3:hover) {
    --ac1: 22%; --ac2: 18%;
    --ar4: 22%; --ar5: 18%;
  }
  /* 04 — row 5 (last), col 3: no row below to absorb growth, so it only
     expands rightward */
  .approach-grid:has(.approach__text--4:hover) {
    --ac3: 22%; --ac4: 18%;
  }
}

/* ═══════════════ VALUE PROP — PARALLAX GALLERY ═══════════════ */
.parallax {
  position: relative;
  height: 100svh;
  overflow: clip;
}
.parallax__inner {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.parallax__img {
  position: absolute;
  overflow: hidden;
  will-change: transform;
}
.parallax__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Three size tiers, laid out with clear gaps and no overlaps around the
   centred headline (the middle band is kept clear): small near the centre,
   medium in a middle ring, large anchoring the corners and bleeding off the
   side/bottom edges. Positions tuned against the resting, flat layout so
   every pair keeps ≥~28px of breathing room at desktop widths. */
/* Batch 1 — small */
.parallax__img--1 { top: 7%;  left: 39%;  width: clamp(150px, 16vw, 250px); aspect-ratio: 4/3;  }
.parallax__img--2 { top: 30%; left: 81%;  width: clamp(150px, 16vw, 250px); aspect-ratio: 3/4;  }
.parallax__img--3 { top: 52%; left: 5%;   width: clamp(150px, 16vw, 250px); aspect-ratio: 3/4;  }
/* Batch 2 — medium */
.parallax__img--4 { top: 2%;  left: 67%;  width: clamp(240px, 25vw, 390px); aspect-ratio: 16/9; }
.parallax__img--5 { top: 66%; left: 35%;  width: clamp(240px, 25vw, 390px); aspect-ratio: 4/3;  }
/* Batch 3 — large · anchors the corners, may spill past the edges */
.parallax__img--6 { top: 5%;  left: -11%; width: clamp(340px, 35vw, 560px); aspect-ratio: 4/3;  }
.parallax__img--7 { top: 69%; left: 74%;  width: clamp(340px, 35vw, 560px); aspect-ratio: 16/9; }

.parallax__headlines {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 6vw;
  pointer-events: none;
}
.parallax__headline {
  grid-area: 1 / 1;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 16ch;
}
.parallax__headline .serif { font-size: 1.1em; }
.parallax__headline--b { opacity: 0; }

/* Static fallback (reduced motion / no GSAP): stack both lines, show all tiles */
.parallax--static .parallax__headlines { align-content: center; gap: 0.15em; }
.parallax--static .parallax__headline { grid-area: auto; opacity: 1 !important; transform: none !important; }
.parallax--static .parallax__img { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* ═══════════════ STATS — CELL GRID (filled stats among hover-fill empties) ═══════════════ */
.stats {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 9rem);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* outer edges; each cell draws its right + bottom line → single 1px lines */
  border-top: 1px solid var(--grid-line);
  border-left: 1px solid var(--grid-line);
}
.stats__cell {
  border-right: 1px solid var(--grid-line);
  border-bottom: 1px solid var(--grid-line);
  aspect-ratio: 1 / 1;
}
/* empty cells: structure only; fill with washed-out accent on hover (pointer devices) */
.stats__cell--empty {
  background: transparent;
  transition: background 350ms ease; /* slower fade-out */
}
@media (hover: hover) {
  .stats__cell--empty:hover {
    background: rgba(84, 132, 144, 0.25);
    transition: background 200ms ease; /* quicker fade-in */
  }
}
/* filled cells (stats + CTA) carry the solid accent */
.stats__cell--stat,
.stats__cell--cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.7rem 1.6rem;
  background: var(--accent);
  color: var(--linen);
}
.stats__cell.reveal { transition-delay: var(--d, 0ms); } /* staggered in-view reveal */
.stats__num {
  display: block;
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  line-height: 1;
  color: var(--linen);
}
.stats__unit { font-size: 0.55em; }
.stats__cell--stat p {
  color: rgba(245, 243, 238, 0.86);
  font-size: 0.9rem;
  line-height: 1.4;
}
.stats__cell--cta {
  grid-column: span 2;   /* wider CTA */
  aspect-ratio: 2 / 1;   /* keep it one row tall */
  align-items: flex-start;
}
.stats__cell--cta h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.15;
}

/* ═══════════════ CTA BANNERS ═══════════════ */
/* Inset card, not full-bleed: container width, rounded corners, breathing
   room above and below. The image + scrim fill the card. */
.banner {
  position: relative;
  width: var(--container);
  margin-inline: auto;
  margin-block: clamp(3rem, 7vw, 6rem);
  min-height: 60svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Darkening layer over the image: a flat ink wash plus a soft radial pocket
   behind the centred copy, so the text sits directly on the photo and stays
   legible without a card. */
.banner__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 52%, rgba(20, 20, 18, 0.38), rgba(20, 20, 18, 0) 72%),
    rgba(28, 28, 26, 0.45);
}
.banner__content {
  position: relative;
  z-index: 2;
  color: var(--linen);
  padding: 4rem 6vw;
  text-shadow: 0 1px 2px rgba(20, 20, 18, 0.45), 0 2px 24px rgba(20, 20, 18, 0.35);
}
.banner__content h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 2.2rem;
}
.banner__content .serif { font-size: 1.1em; }

/* ═══════════════ MANIFESTO ═══════════════ */
.manifesto {
  position: relative;
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.manifesto__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.manifesto__image {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
}
.manifesto__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pixel-patch--manifesto {
  right: 0;
  top: 0;
  width: 110px;
  height: 110px;
}
.manifesto__copy h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.4rem;
}
.manifesto__copy .serif { font-size: 1.08em; }
.manifesto__copy p {
  color: var(--ink-soft);
  margin-bottom: 1rem;
  max-width: 36rem;
}

/* ═══════════════ TESTIMONIAL — FANNED CARD STACK ═══════════════ */
.testimonial {
  padding: clamp(4rem, 9vw, 8rem) 0;
}
.testimonial__stack {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.testimonial__fan {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.testimonial__fan--1 { background: var(--accent); transform: rotate(-4.5deg) translate(-14px, 6px); }
.testimonial__fan--2 { background: var(--ink); transform: rotate(3deg) translate(12px, -4px); }
.testimonial__fan--3 { background: var(--linen-deep); border: 1px solid var(--hairline); transform: rotate(-1.5deg) translate(-4px, 12px); }
.testimonial__quote {
  position: relative;
  background: var(--linen);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  box-shadow: 0 18px 44px rgba(44, 44, 42, 0.08);
}
.testimonial__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.35;
}
.testimonial__quote footer {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testimonial__quote cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.95rem;
}
.testimonial__quote footer span {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ═══════════════ FOOTER ═══════════════ */
.footer {
  padding-top: clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.footer__logo {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}
.footer__logo-img {
  display: inline-block;
  height: clamp(42px, 7vw, 54px);
  width: auto;
  filter: grayscale(1); /* monochrome on this site */
}
.footer__tagline {
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.footer__social {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 2rem;
}
.footer__social a {
  color: var(--ink);
  transition: opacity 160ms ease;
}
.footer__social a:hover { opacity: 0.55; }
.footer__social svg { width: 20px; height: 20px; }
.footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-bottom: 1.6rem;
}
.footer__links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
  transition: opacity 160ms ease;
}
.footer__links a:hover { opacity: 0.55; }
.footer__legal {
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-bottom: 3rem;
}
.footer__band {
  position: relative;
  height: clamp(160px, 24vw, 280px);
  overflow: hidden;
}
.footer__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.pixel-patch--footer {
  right: 8vw;
  bottom: 0;
  width: 150px;
  height: 100px;
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1024px) {
  /* drop one small + one medium tile so the collage stays legible */
  .parallax__img--3, .parallax__img--5 { display: none; }
}

@media (max-width: 820px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .hero__inner { padding-inline: 6vw; }
  /* even out the scrim on narrow screens so the copy reads across full width */
  .hero__scrim {
    background:
      linear-gradient(0deg, rgba(20, 24, 22, 0.78) 0%, rgba(20, 24, 22, 0.45) 45%, rgba(20, 24, 22, 0.35) 100%);
  }

  .directory { min-height: auto; padding-bottom: 30svh; }
  .directory__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .directory__rollup { height: clamp(280px, 40svh, 420px); order: 2; }
  .waves-divider { height: 30svh; }

  .bento { grid-template-columns: 1fr; }
  .bento__card { aspect-ratio: 4 / 3.4; }

  /* Approach: static on touch — image becomes a banner, the 4 text blocks
     stack over it. No hover, no expand. */
  .approach { min-height: auto; }
  .approach__grid, .approach-grid {
    display: flex;
    flex-direction: column;
    border: 0;
    gap: 1px;
    padding: 0 4vw clamp(2.5rem, 8vw, 4rem);
  }
  .approach__cell { display: none; }            /* drop empty image cells */
  .approach__cell.approach__text {
    display: flex;
    border: 1px solid var(--hairline);
    padding: 1.1rem 1.2rem;
    min-height: 0;
  }
  .approach__text p { font-size: 0.85rem; }

  /* Mobile keeps 5 tiles (3 and 5 hidden above): small → medium → large.
     Tiles sit ABOVE and BELOW the centred text (mid band kept clear); the two
     large ones bleed off the side edges. */
  .parallax__img--1 { width: 38vw; top: 6%;  left: 4%;   }             /* batch 1 small, upper-left */
  .parallax__img--2 { width: 36vw; top: 5%;  right: 4%;  }             /* batch 1 small, upper-right */
  .parallax__img--4 { width: 54vw; top: 60%; left: 4%;   }             /* batch 2 medium, lower-left */
  .parallax__img--6 { width: 64vw; top: 23%; left: -24%; }             /* batch 3 large, spills left, above text */
  .parallax__img--7 { width: 70vw; top: 76%; right: -36%; left: auto; }/* batch 3 large, spills right, bottom */

  /* 2 columns; drop empties so small screens aren't cramped */
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stats__cell--empty { display: none; }
  .stats__cell--cta { grid-column: span 2; aspect-ratio: auto; }

  .manifesto__inner { grid-template-columns: 1fr; }

  .banner { min-height: 48svh; }
}

@media (max-width: 520px) {
  .hero__title { font-size: 2.5rem; }
  .testimonial__fan--1 { transform: rotate(-3deg) translate(-8px, 4px); }
  .testimonial__fan--2 { transform: rotate(2deg) translate(8px, -3px); }
}

/* Reduced motion: kill parallax + reveals */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .preloader__image, .preloader__bracket, .preloader__logo { animation-duration: 0.01ms !important; animation-delay: 0s !important; }
  .parallax__img { transform: none !important; }
  .directory__track { animation: none; }
  .stats__cell--empty { transition: none; } /* hover fill stays, but instant */
  .waves-divider .wave { animation: none; } /* keep the layered waves, drop the drift */
}

/* ═══════════════ ABOUT PAGE ═══════════════ */
.about-hero {
  padding: clamp(7.5rem, 13vw, 11rem) 0 clamp(3rem, 6vw, 5rem);
}
/* about hero: single statement headline at double the home hero's size */
.hero--about .hero__title {
  font-size: clamp(5.2rem, 11.2vw, 9.6rem);
}

.about-hero h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.about-hero h2 .serif { font-size: 1.1em; }
.about-hero__lede {
  margin-top: 1.6rem;
  max-width: 46rem;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ── Team: hover-reveal people cards (same interaction as the services bento) ── */
.team {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 4rem);
}
.team__grid {
  display: grid;
  gap: 1.1rem;
}
/* two tall portrait cards, narrower than the full container so they read as the top tier */
.team__grid--leaders {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 52rem;
  margin-inline: auto;
}
/* three almost-square cards on the full container width */
.team__grid--members {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.1rem;
}
.team__card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  background: var(--accent); /* the cut-out PNGs sit on the accent field */
  box-shadow: 0 14px 40px rgba(44, 44, 42, 0.12);
}
.team__card--leader { aspect-ratio: 3 / 4; }
.team__card--member { aspect-ratio: 1 / 1.05; }
/* transparent PNG cut-outs: contain + bottom-anchored so heads never crop */
.team__media {
  position: absolute;
  inset: 0;
  transition: opacity 300ms ease;
}
.team__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* leaders: the portrait spans the full card width; the PNGs are narrower than
   the 3:4 card, so the overflow crops at the base (torso), never the head */
.team__card--leader .team__media img {
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
/* darken the base so the name reads over the portrait */
.team__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 44, 42, 0.45) 0%, transparent 40%);
}
/* hover layer — frosted white, description slides in (mirrors .bento__content) */
.team__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.8rem 1.8rem 6.2rem;
  background: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
.team__content p {
  color: var(--ink);
  font-size: 0.98rem;
}
.team__name {
  position: absolute;
  left: 1.8rem;
  right: 1.8rem;
  bottom: 1.5rem;
  z-index: 2;
  color: var(--linen);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  pointer-events: none;
}
.team__role {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  letter-spacing: 0;
  opacity: 0.85;
}
.team__card:hover .team__media,
.team__card.is-hovered .team__media {
  opacity: 0.65;
}
.team__card:hover .team__content,
.team__card.is-hovered .team__content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.team__card:hover .team__name,
.team__card.is-hovered .team__name {
  color: var(--ink);
}
@media (max-width: 820px) {
  .team__grid--leaders { max-width: 30rem; grid-template-columns: 1fr; }
  .team__grid--members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .team__grid--members { grid-template-columns: 1fr; }
  .team__card--member { aspect-ratio: 1 / 1.05; }
}

/* ── Stats: very big headline, video + subline on the left, figures on the right ── */
.stats {
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 9vw, 8rem);
}
.stats__headline {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stats__headline .serif { font-size: 1.08em; font-weight: 400; }
.stats__body {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
/* LEFT panel is itself two sub-panels: a small video, then the "why" copy */
.stats__left {
  display: grid;
  grid-template-columns: clamp(140px, 15vw, 190px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
.stats__video {
  border-radius: 13px;
  overflow: hidden;
  aspect-ratio: 480 / 624;
  background: var(--linen-deep);
}
.stats__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stats__lede h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.stats__lede p {
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.55;
}
/* each figure: rule on top, big number in a FIXED column (so every description
   starts at the same x and the gap is identical across rows), description right */
.stat-row {
  display: grid;
  grid-template-columns: clamp(5.5rem, 12vw, 13rem) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.25rem, 5vw, 6rem);
  padding: clamp(1.2rem, 2.4vw, 2.2rem) 0;
  border-top: 1.5px solid var(--hairline);
}
.stat-row:last-child { border-bottom: 1.5px solid var(--hairline); }
.stat-row__num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.stat-row__unit {
  font-size: 0.3em;
  font-weight: 700;
  vertical-align: super;
  margin-left: 0.08em;
  color: var(--accent);
}
.stat-row__desc {
  color: var(--ink-soft);
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  line-height: 1.45;
  max-width: 19rem;
}

/* ── Sectors: runs below the figures in the same section ── */
/* same treatment as the "Why it matters" heading, for consistency */
.stats__sectors-label {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sector-marquee {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.3vw, 16px);
  /* the rows run edge-to-edge and dissolve into the page at both sides */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.sector-row { overflow: hidden; }
.sector-row__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* each set carries its own trailing gap (padding-right), so two duplicated sets
   tile exactly and translateX(-50%) wraps with no jump — a seamless loop */
.sector-set {
  display: flex;
  gap: clamp(7px, 1vw, 13px);
  padding-right: clamp(7px, 1vw, 13px);
}
.sector-row--rtl .sector-row__track { animation: sector-rtl 72s linear infinite; }
.sector-row--ltr .sector-row__track { animation: sector-ltr 82s linear infinite; }
@keyframes sector-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes sector-ltr {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.sector-marquee:hover .sector-row__track { animation-play-state: paused; }
.sector-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  height: clamp(48px, 8.5vw, 77px);
  padding: clamp(8px, 1.2vw, 12px);
  border-radius: 8px;
  font-size: clamp(1.05rem, 2.3vw, 1.75rem);
  line-height: 1;
  font-weight: 500;
  color: var(--linen);
  background: var(--accent);
  transition: background 200ms ease, color 200ms ease;
}
.sector-chip:hover { background: var(--accent-hover); }
@media (prefers-reduced-motion: reduce) {
  /* no scroll: let both rows wrap into static chip clouds */
  .sector-row { overflow: visible; }
  .sector-row__track { animation: none; width: auto; }
  .sector-set { flex-wrap: wrap; }
}

@media (max-width: 820px) {
  .stats__body { grid-template-columns: 1fr; }
  .stats__left { max-width: 32rem; }
}
@media (max-width: 480px) {
  .stats__left { grid-template-columns: 1fr; }
  .stats__video { max-width: 15rem; }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES PAGE
   ═══════════════════════════════════════════════════════════ */

/* services hero: headline only, anchored bottom-left, larger than the home hero */
.hero--services { align-items: flex-end; }
.hero--services .hero__inner { padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero--services .hero__title { font-size: clamp(3.4rem, 8.5vw, 7.5rem); }

/* ── OUR SERVICES — table beside a sticky video (ref: type / description) ── */
.offer {
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(4rem, 8vw, 7rem);
}
.offer__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.offer__title .serif { font-size: 1.08em; }

.offer__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* video rides along on the left while the service rows scroll past */
.offer__media {
  position: sticky;
  top: clamp(5rem, 12vh, 8rem);
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--linen-deep);
  box-shadow: 0 18px 44px rgba(44, 44, 42, 0.14);
}
.offer__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.offer__head {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.4fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  padding-bottom: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.offer__row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.4fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1.5px solid var(--hairline);
}
.offer__type h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.offer__type h3 .serif { font-size: 1.08em; }
.offer__type-sub {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.35;
}
.offer__desc > p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1rem;
  max-width: 34rem;
}
.offer__desc ul {
  list-style: none;
  display: grid;
  gap: 0.4rem;
}
.offer__desc li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.offer__desc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.offer__hl { color: var(--accent); font-weight: 600; }

/* ── HOW WE WORK / OUR APPROACH — narrative + alternating text/image grid ── */
.method {
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--linen-deep);
}
.method__intro { max-width: 62rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.method__intro .section-title { margin-bottom: 1.4rem; }
.method__lede {
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 52rem;
}
.method__lede .serif { color: var(--accent); }

/* 4 columns × 6 rows: a full-width title row, then two content rows
   (text / image / text / image) for each of the two groups. The linen-deep
   section background shows through the gap as thin grid lines. */
.method__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
/* title is one cell two columns wide; the two empty squares beside it force the
   row to the same square height as the content rows (image cells drive those) */
.method__grid-title {
  grid-column: span 2;
  background: var(--linen);
  display: flex;
  align-items: flex-end;
  padding: clamp(1.1rem, 2.2vw, 1.8rem) clamp(1rem, 1.6vw, 1.5rem);
}
.method__grid-title h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.method__cell { min-width: 0; }
.method__cell--empty { aspect-ratio: 1; }
.method__cell--text {
  background: var(--linen);
  padding: clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
}
.method__cell--text h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.method__cell--text p { color: var(--ink-soft); font-size: 0.83rem; line-height: 1.45; }
.method__cell--img {
  aspect-ratio: 1;
  overflow: hidden;
}
.method__cell--img img { width: 100%; height: 100%; object-fit: cover; }

/* ── STANDARDS & FRAMEWORKS — quiet partner-logo row ── */
.standards {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  text-align: center;
}
.standards__label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.standards__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.standards__grid img {
  height: clamp(48px, 7vw, 72px);
  width: auto;
  opacity: 1;
  transition: transform 220ms ease;
}
.standards__grid img:hover { transform: translateY(-3px); }
.standards__more {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--ink-soft);
}

/* ── WHO WE WORK WITH — video background + bottom-aligned sector cards ── */
.clients {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  overflow: hidden;
}
.clients__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.clients__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.clients__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20, 24, 22, 0.55) 0%, rgba(20, 24, 22, 0.35) 40%, rgba(20, 24, 22, 0.72) 100%);
}
.clients__inner { position: relative; z-index: 2; }
.clients__intro { margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem); max-width: 40rem; }
.clients__intro .section-title { color: var(--linen); margin-bottom: 1.2rem; }
.clients__lede {
  color: rgba(248, 247, 243, 0.82);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
}
/* five cards on two rows: 3 across, then 2 wider ones — a 6-track grid where
   the first three span 2 and the last two span 3 */
.clients__cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
.clients__card { grid-column: span 2; }
.clients__card:nth-child(n+4) { grid-column: span 3; }
.clients__card {
  border-radius: 8px;
  padding: clamp(1.2rem, 1.6vw, 1.6rem);
  min-height: clamp(220px, 30vh, 340px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* content bottom-aligned */
  background: rgba(248, 247, 243, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink);
}
.clients__card h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.clients__card p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.4; }

/* ── Services page responsive ── */
@media (max-width: 1024px) {
  /* cards fall to 2-up; drop the full-screen lock and the 3/2 span split */
  .clients { min-height: auto; }
  .clients__cards { grid-template-columns: repeat(2, 1fr); }
  .clients__card,
  .clients__card:nth-child(n+4) { grid-column: auto; }
}
@media (max-width: 900px) {
  .offer__layout { grid-template-columns: 1fr; }
  .offer__media {
    position: relative;
    top: 0;
    aspect-ratio: 16 / 9;
    max-height: 340px;
    margin-bottom: 0.5rem;
  }
  /* grid collapses to text / image pairs, two per row; title spans the row */
  .method__grid { grid-template-columns: repeat(2, 1fr); }
  .method__grid-title { grid-column: 1 / -1; }
  .method__cell--empty { display: none; }
}
@media (max-width: 640px) {
  .offer__head { display: none; }
  .offer__row { grid-template-columns: 1fr; gap: 0.9rem; }
}
@media (max-width: 520px) {
  .method__grid { grid-template-columns: 1fr; }
  .method__cell--img { aspect-ratio: 16 / 9; }
  .clients__cards { grid-template-columns: 1fr; }
  .clients__card { min-height: 160px; }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════ */

/* contact hero: single-word statement, anchored bottom-left like services */
.hero--contact { align-items: flex-end; }
.hero--contact .hero__inner { padding-bottom: clamp(3rem, 7vw, 6rem); }
.hero--contact .hero__title { font-size: clamp(3.4rem, 8.5vw, 7.5rem); }

/* Direct-contact page: no form — a centred statement over two large channel
   cards, so the two ways to reach us carry the page instead of feeling sparse. */
.contact-section {
  padding: clamp(4rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 9rem);
}
.contact-direct {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.contact-direct__head {
  margin-bottom: clamp(2.8rem, 6vw, 4.5rem);
}
.contact-direct__head h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.contact-direct__head h2 .serif { font-size: 1.1em; }

/* two channel cards, side by side */
.contact-direct__channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  text-align: left;
}
.channel {
  display: flex;
  flex-direction: column;
  min-height: clamp(220px, 30vw, 300px);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  background: var(--linen);
  color: var(--ink);
  text-decoration: none;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
              border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.channel:hover {
  transform: translateY(-4px);
  border-color: transparent;
  background: #fff;
  box-shadow: 0 22px 50px rgba(44, 44, 42, 0.12);
}
.channel__icon {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--linen-deep);
  color: var(--ink);
  margin-bottom: auto;
  transition: background-color 200ms ease, color 200ms ease;
}
.channel__icon svg { width: 24px; height: 24px; }
.channel:hover .channel__icon {
  background: var(--accent);
  color: var(--linen);
}
.channel__label {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.channel__value {
  margin-top: 0.35rem;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  letter-spacing: -0.01em;
  word-break: break-word;
  transition: color 180ms ease;
}
.channel:hover .channel__value { color: var(--accent); }
.channel__cue {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--accent);
}
.channel__arrow {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}
.channel:hover .channel__arrow { transform: translateX(5px); }

@media (max-width: 640px) {
  .contact-direct__channels { grid-template-columns: 1fr; }
  .channel { min-height: 0; }
  .channel__icon { margin-bottom: 1.4rem; }
}