/* =====================================================================
   STUDIO BAOBAB — Website v2 · Global stylesheet
   ---------------------------------------------------------------------
   Source of truth: Homepage-v2 prototype (Sept launch) + Brand System.
   Reference design width: 1700px. All sizes are fluid around it.
   This sheet is the base for every future page of the site.
   ===================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Epilogue'; font-weight: 400; font-style: normal; src: url('../fonts/Epilogue-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Epilogue'; font-weight: 500; font-style: normal; src: url('../fonts/Epilogue-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Figtree'; font-weight: 300; font-style: normal; src: url('../fonts/Figtree-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Figtree'; font-weight: 400; font-style: normal; src: url('../fonts/Figtree-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Figtree'; font-weight: 500; font-style: normal; src: url('../fonts/Figtree-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Figtree'; font-weight: 600; font-style: normal; src: url('../fonts/Figtree-SemiBold.ttf') format('truetype'); font-display: swap; }

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (Figma tokens) */
  --ink:          #252E37;   /* deep slate — dark bands, hero, footer */
  --ink-soft:     #3A434C;
  --paper:        #FBF8F6;   /* warm off-white (footer text) */
  --lime:         #E9FFA9;   /* signature accent */
  --orange:       #FFA05B;   /* arrows, ticks, chevrons — punctuation only */

  /* v2 interface colours (sampled from the prototype) */
  --bg:           #FFFFFF;
  --bg-band:      #F3F1EF;   /* approach band */
  --text:         #000000;   /* body & headings on light surfaces */
  --text-muted:   #999999;   /* resting state of collapsed work rows */
  --text-on-dark: #FFFFFF;
  --line:         rgba(0, 0, 0, 0.16);
  --line-strong:  rgba(0, 0, 0, 0.42);
  --line-on-dark: rgba(255, 255, 255, 0.35);

  /* Type */
  --font-heading: 'Epilogue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --header-text-size: clamp(0.8125rem, 0.94vw, 1rem);
  --ls-eyebrow: 0.16em;
  --ls-label:   0.08em;
  /* Section headings (h2). One scale for every band across the site, so
     "Work that connects…" and "What you can expect…" match the approach
     heading they sit next to. .contact__heading keeps its own scale. */
  --fs-h2: clamp(1.625rem, 2.6vw, 2.75rem);
  --lh-h2: 1.3;

  /* Layout */
  --container-pad: clamp(20px, 4.7vw, 80px);
  --container-max: 1760px;
  --surface-radius: 3px;
  --hero-media-radius: 5px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-quick:  160ms;
  --t-base:   300ms;
  --t-slow:   600ms;
}

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

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  html.is-step-scrolling {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.6vw + 0.75rem, 1.1875rem);  /* ≈19px at 1700 */
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

main {
  isolation: isolate;
}

main > section {
  background: var(--bg);
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
}

main > section > * {
  min-width: 0;
}

@supports (height: 100dvh) {
  main > section { min-height: 100dvh; }
}

h1, h2, h3, h4, h5, h6, p, ul, dl, dd, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 500; }
p { line-height: 1.4; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong { font-weight: 600; }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 18px;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 999px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.35vw + 0.6rem, 0.875rem);
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.br-desktop { display: none; }
@media (min-width: 720px) { .br-desktop { display: inline; } }

/* Its opposite: a line break that only exists on phones. Editors can drop
   <br class="br-mobile"> into any SCF heading field — baobab_inline_html()
   allows <br class>. */
.br-mobile { display: none; }
@media (max-width: 760px) { .br-mobile { display: inline; } }

.obj-left  { object-position: 0% 50%; }
.obj-right { object-position: 100% 50%; }

/* ---------- Buttons (pill CTAs) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 44px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--t-quick) var(--ease-out),
              color var(--t-quick) var(--ease-out),
              transform var(--t-quick) var(--ease-out);
}

.btn--lime { background: var(--lime); color: var(--ink); }

.btn--ink { background: var(--ink); color: var(--text-on-dark); }

.btn--hero-icon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 8px 64px 8px 34px;
  min-height: 58px;
  color: var(--ink);
}

.btn--hero-icon::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 8px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--orange);
  transform: translateY(-50%);
  transition: width var(--t-base) var(--ease-out),
              height var(--t-base) var(--ease-out),
              right var(--t-base) var(--ease-out);
}

.btn--hero-icon .btn__label,
.btn--hero-icon .btn__icon {
  z-index: 1;
}

.btn--hero-icon .btn__label {
  position: relative;
  transition: transform var(--t-base) var(--ease-out);
}

.btn--hero-icon .btn__icon {
  position: absolute;
  top: 50%;
  left: calc(100% - 50px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--ink);
  transform: translateY(-50%);
  transition: left var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
}

.btn--hero-icon .btn__icon svg {
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform var(--t-quick) var(--ease-out);
}

.btn--hero-icon:hover::before {
  right: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
}

.btn--hero-icon:hover .btn__label {
  transform: translateX(30px);
}

.btn--hero-icon:hover .btn__icon {
  left: 8px;
  background: var(--lime);
}

.btn--hero-icon:hover .btn__icon svg {
  transform: rotate(0deg);
}

.btn:hover {
  background-color: var(--orange);
  color: var(--ink);
  transform: translateY(-1px);
}
.btn:active { transform: none; opacity: 0.85; }

/* Inline links with the orange ↗ mark */
.arrow-link { white-space: nowrap; }
.arrow-link__icon {
  display: inline-block;
  vertical-align: -0.08em;
  margin-right: 0.25em;
  color: var(--orange);
}
.arrow-link a {
  transition: color var(--t-quick) var(--ease-out);
}
.arrow-link a:hover { color: var(--orange); }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  /* Full bleed: the element spans the viewport so the revealed plate
     reaches both edges, while the content stays on the container's
     gutters. 100% resolves against the viewport here — the header is
     fixed with left and right pinned — so there is no scrollbar gap of
     the kind 100vw would leave. */
  padding-block: clamp(20px, 2.4vw, 40px);
  padding-inline: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  color: var(--text-on-dark);
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translate3d(0, 0, 0);
  transition: color var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out),
              backdrop-filter var(--t-base) var(--ease-out);
  will-change: transform, background-color, backdrop-filter;
}

.site-header.is-on-light {
  color: var(--ink);
}
/* Scrolling back up brings the header down on a translucent plate that
   takes the tone of the band underneath: white over the light sections,
   ink over the dark ones. updateHeaderTheme() keeps .is-on-light in step
   with the real background. The case study template neutralises all of
   this further down (compact menu). */
.site-header.is-revealed {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header.is-revealed.is-on-light {
  color: var(--ink);
  background-color: rgba(255, 255, 255, 0.7);
}

.site-header.is-revealed:not(.is-on-light) {
  color: var(--text-on-dark);
  background-color: rgba(37, 46, 55, 0.7);
}
.site-header.is-hidden {
  transform: translate3d(0, calc(-100% - 16px), 0);
}

.site-header__tagline {
  font-size: var(--header-text-size);
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.site-header__logo { position: relative; z-index: 30; }
.site-header__logo img { width: clamp(120px, 9.4vw, 160px); height: auto; }

.site-header__nav { justify-self: end; }

.nav-list {
  display: flex;
  gap: clamp(20px, 2.2vw, 38px);
}

.nav-list__link {
  font-size: var(--header-text-size);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  padding-block: 6px;
  transition: color var(--t-quick) var(--ease-out);
}
.nav-list__link:hover { color: var(--lime); }
.site-header.is-on-light .nav-list__link:hover { color: var(--orange); }
.case-study-template .site-header.is-on-light .nav-list__link:hover {
  color: inherit;
  font-weight: 500;
}

.site-header__menu-toggle {
  display: none;
  justify-self: end;
  width: 44px; height: 44px;
  position: relative;
  z-index: 30;
}
.site-header__menu-label { display: none; }
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.menu-icon { top: calc(50% - 1px); }
.menu-icon::before { left: 0; right: 0; top: -7px; }
.menu-icon::after  { left: 0; right: 0; top: 7px; }
.site-header__menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.site-header__menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(7px) rotate(45deg); }
.site-header__menu-toggle[aria-expanded="true"] .menu-icon::after  { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--text-on-dark);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(120px, 12.6vw, 215px) var(--container-pad) clamp(64px, 5vw, 96px);
  overflow: hidden;
}

.hero__content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 820px;
}

.hero__title {
  font-size: clamp(2.25rem, 3.53vw, 3.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.hero__title-line { display: block; }

.hero__accent { color: var(--lime); }

.hero__intro {
  --hero-intro-measure: clamp(32ch, 48vw, 50ch);
  position: relative;
  margin-top: clamp(36px, 3.6vw, 62px);
  margin-right: auto;
  margin-left: auto;
  max-width: var(--hero-intro-measure);
  font-size: clamp(1rem, 1.29vw, 1.375rem);
  font-weight: 300;
  line-height: 1.4;
  display: block;
}
.hero__intro-final {
  display: block;
  max-width: var(--hero-intro-measure);
}

.hero__cta { margin-top: 10px; }
.hero__cta-line {
  display: block;
  width: 1px;
  height: clamp(56px, 5.4vw, 92px);
  margin: 10px auto 26px;
  background: linear-gradient(180deg, var(--orange) 0%, rgba(255, 108, 31, 0) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero.is-narration-ready .hero__cta-line,
  .hero.is-narration-ready .hero__cta .btn {
    opacity: 0;
  }

  .hero.is-narration-ready .hero__intro-final {
    opacity: 0;
    transform: translateY(8px);
  }

  .hero.is-narrating .hero__intro-final {
    animation: heroIntroFadeIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .hero.is-narration-complete .hero__intro-final {
    opacity: 1;
    transform: none;
  }

  .hero.is-narration-complete .hero__cta-line {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    animation: heroCtaLine 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
  }

  .hero.is-narration-complete .hero__cta .btn {
    opacity: 0;
    animation: heroCtaButton 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards;
  }
}

@keyframes heroIntroFadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroCtaLine {
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes heroCtaButton {
  to {
    opacity: 1;
  }
}

/* On a phone the hero is one screenful and the CTA is the point of it, so
   the line and the button arrive with the text instead of a beat after it:
   the 0.05s and 0.48s staggers go, and both runs shorten. */
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
  .hero.is-narration-complete .hero__cta-line {
    animation-duration: 0.3s;
    animation-delay: 0s;
  }

  .hero.is-narration-complete .hero__cta .btn {
    animation-duration: 0.3s;
    animation-delay: 0s;
  }
}

/* --- Hero showcase --- */
.hero__collage {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: clamp(300px, 30vw, 520px);
  --hero-card-large-w: clamp(236px, 15.5vw, 264px);
  --hero-card-large-h: clamp(392px, 57.5svh, 718px);
  --hero-card-small-w: clamp(176px, 12.5vw, 212px);
  --hero-card-small-h: clamp(324px, 47.3svh, 590px);
  --hero-card-large-top: clamp(176px, 22.6svh, 282px);
  --hero-card-small-top: clamp(214px, 27.7svh, 346px);
  perspective: 1100px;
  pointer-events: none;
}

.hero__collage--left  { left: 0; }
.hero__collage--right { right: 0; }

.hero__card {
  --hero-card-enter-x: 0px;
  --hero-card-enter-y: 18px;
  --hero-card-depth: 0px;
  --hero-card-tilt: 0deg;
  --hero-card-settle-tilt: 0deg;
  position: absolute;
  overflow: hidden;
  border-radius: var(--hero-media-radius);
  background: #d9d9d2;
  transform-origin: center;
  pointer-events: auto;
}

.hero__card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.12));
  mix-blend-mode: multiply;
}

.hero__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-out);
}

.hero__card--tall {
  z-index: 3;
  width: var(--hero-card-large-w);
  height: var(--hero-card-large-h);
}

.hero__card:not(.hero__card--tall) {
  z-index: 1;
  top: var(--hero-card-small-top);
  width: var(--hero-card-small-w);
  height: var(--hero-card-small-h);
}

.hero__card:not(.hero__card--tall)::after {
  mix-blend-mode: normal;
}

.hero__collage--left .hero__card--tall {
  --hero-card-enter-x: -112px;
  --hero-card-enter-y: 20px;
  --hero-card-depth: 52px;
  --hero-card-tilt: 5deg;
  --hero-card-settle-tilt: -1deg;
  left: clamp(-8px, -0.35vw, -6px);
  top: var(--hero-card-large-top);
  box-shadow:
    32px 0 48px rgba(0, 0, 0, 0.35),
    12px 28px 58px rgba(0, 0, 0, 0.32);
}

.hero__collage--left .hero__card:not(.hero__card--tall) {
  --hero-card-enter-x: -84px;
  --hero-card-enter-y: 14px;
  --hero-card-depth: -34px;
  --hero-card-tilt: 3.5deg;
  --hero-card-settle-tilt: -0.7deg;
  left: clamp(148px, 13.2vw, 224px);
}

.hero__collage--left .hero__card:not(.hero__card--tall)::after {
  background:
    linear-gradient(90deg,
      rgba(37, 46, 55, 0.1) 0%,
      rgba(37, 46, 55, 0.42) 58%,
      var(--ink) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18));
}

.hero__collage--left .hero__card--tall img {
  object-position: 50% 50%;
}

.hero__collage--left .hero__card:not(.hero__card--tall) img {
  object-position: 50% 50%;
}

.hero__collage--right .hero__card:not(.hero__card--tall) {
  --hero-card-enter-x: 84px;
  --hero-card-enter-y: 14px;
  --hero-card-depth: -34px;
  --hero-card-tilt: -3.5deg;
  --hero-card-settle-tilt: 0.7deg;
  right: clamp(204px, 13.7vw, 234px);
}

.hero__collage--right .hero__card:not(.hero__card--tall)::after {
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(37, 46, 55, 0.42) 42%,
      rgba(37, 46, 55, 0.1) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18));
}

.hero__collage--right .hero__card--tall {
  --hero-card-enter-x: 112px;
  --hero-card-enter-y: 20px;
  --hero-card-depth: 52px;
  --hero-card-tilt: -5deg;
  --hero-card-settle-tilt: 1deg;
  right: clamp(-22px, -1.1vw, -18px);
  top: var(--hero-card-large-top);
  box-shadow:
    -32px 0 48px rgba(0, 0, 0, 0.35),
    -12px 28px 58px rgba(0, 0, 0, 0.32);
}

.hero__collage--right .hero__card:not(.hero__card--tall) img {
  object-position: 46% 50%;
}

.hero__collage--right .hero__card--tall img {
  object-position: 48% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__card:hover img {
    transform: scale(1.03);
  }

  .hero.is-showcase-ready .hero__card {
    opacity: 0;
    transform:
      translate3d(var(--hero-card-enter-x), var(--hero-card-enter-y), var(--hero-card-depth))
      scale(0.945)
      rotateY(var(--hero-card-tilt));
    filter: saturate(0.9) brightness(0.86);
    will-change: opacity, transform, filter;
  }

  .hero.is-showcase-animated .hero__card {
    animation: heroProjectCardIn 1.18s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  }

  .hero.is-showcase-animated .hero__card--tall {
    animation-delay: 0.08s;
  }

  .hero.is-showcase-animated .hero__card:not(.hero__card--tall) {
    animation-delay: 0.62s;
  }
}

@keyframes heroProjectCardIn {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--hero-card-enter-x), var(--hero-card-enter-y), var(--hero-card-depth))
      scale(0.945)
      rotateY(var(--hero-card-tilt));
    filter: saturate(0.9) brightness(0.86);
  }

  56% {
    opacity: 1;
    transform:
      translate3d(calc(var(--hero-card-enter-x) * -0.025), -2px, 6px)
      scale(1.006)
      rotateY(var(--hero-card-settle-tilt));
    filter: saturate(1.01) brightness(1.015);
  }

  82% {
    opacity: 1;
    transform:
      translate3d(calc(var(--hero-card-enter-x) * -0.006), -0.5px, 1px)
      scale(1.001)
      rotateY(0deg);
    filter: saturate(1) brightness(1.004);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotateY(0deg);
    filter: saturate(1) brightness(1);
  }
}

/* =====================================================================
   INTRO STATEMENT + CLIENTS
   ===================================================================== */
.intro {
  display: grid;
  align-content: center;
  padding-top: clamp(88px, 14.1vw, 240px);
  padding-bottom: clamp(88px, 10vw, 170px);
  text-align: center;
}

.intro__statement {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: var(--container-pad);
  font-size: clamp(1.375rem, 2.45vw, 2.625rem);
  font-weight: 400;
  line-height: 1.5;
}

.clients {
  width: 100%;
  min-width: 0;
  margin-top: clamp(72px, 9vw, 160px);
}

.clients__eyebrow {
  padding-inline: var(--container-pad);
  color: var(--text);
}

.clients__marquee {
  --clients-edge-fade: clamp(54px, 11vw, 190px);
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: clamp(40px, 4.4vw, 76px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--clients-edge-fade),
    #000 calc(100% - var(--clients-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--clients-edge-fade),
    #000 calc(100% - var(--clients-edge-fade)),
    transparent 100%
  );
}

.clients__marquee.is-draggable {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.clients__marquee::before,
.clients__marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--clients-edge-fade);
  pointer-events: none;
}

.clients__marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.clients__marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
}

.clients__marquee.is-draggable.is-dragging {
  cursor: grabbing;
}

.clients__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 7vw, 120px);
  width: max-content;
  max-width: none;
  min-width: 100%;
  padding-inline: clamp(24px, 3.5vw, 60px);
  transform: translate3d(var(--clients-x, 0px), 0, 0);
  will-change: transform;
}

/* JS duplicates the logo set and drives the marquee transform. */
.clients__track.is-marquee-ready {
  justify-content: flex-start;
}

.clients__track li { flex-shrink: 0; }

.clients__track img {
  height: clamp(28px, 2.8vw, 48px);
  width: auto;
  filter: grayscale(1);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.clients__item--height img {
  height: var(--client-logo-size);
  width: auto;
}

.clients__item--width img {
  width: var(--client-logo-size);
  height: auto;
}

/* =====================================================================
   WORK
   ===================================================================== */
.work {
  padding-top: clamp(112px, 9vw, 156px);
  padding-bottom: clamp(72px, 8vw, 136px);
}

.work__heading {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
  padding-inline: var(--container-pad);
  margin-bottom: clamp(48px, 6.2vw, 105px);
}

.work__list {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.work-row {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(14px, 1vw, 17px);
  transition: padding var(--t-slow) var(--ease-out);
}
.work-row:first-child { border-top: 0; }
.work-row--active {
  padding-top: clamp(18px, 1.4vw, 24px);
  padding-bottom: clamp(32px, 3vw, 52px);
}

.work-row__link {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  gap: clamp(24px, 2.5vw, 44px);
  align-items: center;
  min-width: 0;
}

.work-row__link:focus-visible {
  outline-offset: 10px;
}

.work-row__title {
  font-size: clamp(1.375rem, 1.91vw, 2.03125rem);
  font-weight: 500;
  line-height: 1.25;
  transition: color var(--t-base) var(--ease-out);
}

.work-row__description {
  margin-top: 0;
  max-width: 34em;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: clamp(0.9375rem, 0.4vw + 0.7rem, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
  transform: translateY(-4px);
  transition:
    margin-top var(--t-slow) var(--ease-out),
    max-height var(--t-slow) var(--ease-out),
    opacity var(--t-base) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

.work-row--active .work-row__description {
  margin-top: clamp(16px, 1.8vw, 30px);
  max-height: 8em;
  opacity: 1;
  transform: translateY(0);
}

.work-row__tags {
  margin-top: clamp(16px, 1.8vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 1.8vw, 30px);
  font-size: clamp(0.6875rem, 0.3vw + 0.55rem, 0.8125rem);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.work-row__media {
  display: flex;
  justify-content: flex-end;
  gap: clamp(8px, 0.75vw, 13px);
  width: 100%;
  min-width: 0;
  transition: opacity var(--t-slow) var(--ease-out), filter var(--t-slow) var(--ease-out);
}

.work-row__img,
.work-row__placeholder {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(96px, 8.8vw, 150px);
  border-radius: var(--surface-radius);
  overflow: hidden;
  transition: height var(--t-slow) var(--ease-out), opacity var(--t-slow) var(--ease-out);
}

.work-row__img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.work-row--active .work-row__img,
.work-row--active .work-row__placeholder {
  height: clamp(200px, 20vw, 340px);
}

.work-row__placeholder {
  background: linear-gradient(180deg, #D2D2D2 0%, #F4F4F4 100%);
}

.work-row--active.work-row--featured .work-row__img:first-child { flex: 0 1 36%; }
.work-row--active.work-row--featured .work-row__img:last-child  { flex: 0 1 62.7%; }

.work-row__img::after,
.work-row__placeholder::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 72%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 1;
  transition: opacity var(--t-slow) var(--ease-out);
}

.work-row--active .work-row__img::after,
.work-row--active .work-row__placeholder::after {
  opacity: 0;
}

/* Resting state: collapsed rows sit quietly until hovered/focused */
.work-row:not(.work-row--active) .work-row__title { color: var(--text-muted); }
.work-row:not(.work-row--active) .work-row__tags  { color: var(--text-muted); }
.work-row:not(.work-row--active) .work-row__media { opacity: 0.5; }

.work__cta {
  text-align: center;
  margin-top: clamp(56px, 5.9vw, 100px);
  padding-inline: var(--container-pad);
}

@media (hover: hover) and (pointer: fine) {
  .work.has-work-cursor .work__list,
  .work.has-work-cursor .work-row__link,
  .case-study-milestones.has-milestone-cursor .case-study-milestones__inner {
    cursor: none;
  }

  .work-row__link:hover .work-row__title {
    color: var(--text);
  }

  .work-cursor,
  .case-study-scroll-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    display: grid;
    align-content: center;
    justify-items: center;
    row-gap: 2px;
    width: 82px;
    height: 82px;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--following-cursor-x, -120px), var(--following-cursor-y, -120px), 0) translate(-50%, -50%) scale(0.72);
    transition: opacity var(--t-quick) var(--ease-out),
                transform var(--t-base) var(--ease-out),
                background-color var(--t-quick) var(--ease-out);
  }

  .work-cursor {
    background: rgba(255, 160, 91, 0.8);
  }

  .case-study-scroll-cursor {
    background: rgba(233, 255, 169, 0.8);
  }

  .case-study-scroll-cursor.is-action {
    background: rgba(255, 160, 91, 0.8);
  }

  .work-cursor::before {
    content: "View";
  }

  .case-study-scroll-cursor::before {
    content: "Scroll";
  }

  .case-study-scroll-cursor.is-action::before {
    content: "Click";
  }

  .work-cursor.is-visible,
  .case-study-scroll-cursor.is-visible {
    opacity: 1;
    transform: translate3d(var(--following-cursor-x, -120px), var(--following-cursor-y, -120px), 0) translate(-50%, -50%) scale(1);
  }
}

/* =====================================================================
   EXPERTISE (dark stats band)
   ===================================================================== */
.expertise {
  min-height: auto;
  margin-top: 0;
  background: var(--ink);
  color: var(--text-on-dark);
  padding: clamp(40px, 4.2vw, 72px) var(--container-pad) clamp(40px, 4.2vw, 72px);
  display: block;
}

.expertise__eyebrow {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
  color: var(--text-on-dark);
}

.expertise__stats {
  max-width: var(--container-max);
  margin: clamp(28px, 3.4vw, 56px) auto 0;
  padding-inline: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(1rem, 2vw, 2rem);
  justify-items: center;
  align-items: start;
}

.stat {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
  row-gap: clamp(0.45rem, 0.8vw, 0.75rem);
}

.stat__value {
  grid-row: 1;
  padding: 0;
  margin: 0;
  color: var(--lime);
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .expertise.is-animation-ready .stat__value {
  opacity: 0;
  transform: translateY(0.35rem);
}

.stat__label {
  grid-row: 2;
  padding: 0;
  margin: 0;
  max-width: 12em;
  font-size: clamp(0.95rem, 0.7vw + 0.8rem, 1.35rem);
  font-weight: 400;
  line-height: 1.4;
}

.js .expertise.is-animation-ready.is-animated .stat__value {
  opacity: 1;
  transform: translateY(0);
}

.stat:last-child .stat__label {
  max-width: none;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .stat__value {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   AUDIENCES (we work with / delivering)
   ===================================================================== */
.audiences {
  --audiences-min-height: calc(100vh - 0px);
  --audiences-min-height: calc(100svh - 0px);
  --audiences-content-height: 0px;
  --padding-block: min(
    clamp(84px, 8vw, 144px),
    max(24px, calc((var(--audiences-min-height) - var(--audiences-content-height)) / 2))
  );
  min-height: var(--audiences-min-height);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--padding-block) var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  gap: clamp(28px, 2.4vw, 40px);
  align-content: center;
}

@supports (height: 100dvh) {
  .audiences {
    --audiences-min-height: calc(100dvh - 0px);
  }
}

.audiences__col {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
}

.audiences__eyebrow {
  padding-top: 0.7em;
  color: var(--text);
  min-width: clamp(110px, 9vw, 155px);
}

.audiences__col--delivering { grid-template-columns: auto 1fr; }
.audiences__col--delivering .audiences__eyebrow { min-width: clamp(96px, 7vw, 120px); }
.audiences__col--delivering { gap: clamp(20px, 2.3vw, 40px); }

.audiences__list {
  font-size: clamp(1.375rem, 2.41vw, 2.5625rem);
  font-weight: 400;
  line-height: 1.42;
}

.audiences__wheel {
  overflow: hidden;
}

.audiences__list--wheel {
  --wheel-y: 0px;
  transform: translate3d(0, var(--wheel-y), 0);
}

.audiences__list--wheel.is-animating {
  transition: transform 1100ms var(--ease-out);
}

.audiences__list--wheel li {
  opacity: 0.18;
  transition: opacity 700ms var(--ease-out),
              font-weight 700ms var(--ease-out);
}

.audiences__list--wheel li:nth-child(1) { opacity: 1; font-weight: 500; }
.audiences__list--wheel li:nth-child(2) { opacity: 0.62; }
.audiences__list--wheel li:nth-child(3) { opacity: 0.42; }
.audiences__list--wheel li:nth-child(4) { opacity: 0.26; }

.audiences__audience-button {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.audiences__audience-button:hover,
.audiences__audience-button:focus-visible {
  color: var(--orange);
}

.audiences__list--ruled {
  border-left: 1.5px solid var(--text);
  padding-left: clamp(20px, 1.6vw, 28px);
  font-size: clamp(1.25rem, 2.24vw, 2.375rem);
  font-weight: 400;
  line-height: 1.38;
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.audiences__list--ruled li {
  animation: deliveringCurtain 380ms var(--ease-out) both;
  animation-delay: var(--deliver-delay, 0ms);
  transform-origin: top;
}

.audiences__list--ruled.is-changing {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

@keyframes deliveringCurtain {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, -0.7em, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .audiences__list--ruled li {
    animation: none;
  }
}

/* =====================================================================
   APPROACH
   ===================================================================== */
.approach {
  background: var(--bg-band);
  padding: clamp(80px, 8.2vw, 140px) var(--container-pad) clamp(72px, 7.5vw, 128px);
  display: grid;
  align-content: center;
  text-align: center;
}

.approach__heading {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
}

.approach__intro {
  margin: clamp(24px, 2.6vw, 45px) auto 0;
  max-width: 46em;
  font-size: clamp(1rem, 1.29vw, 1.375rem);
  font-weight: 400;
  line-height: 1.4;
}

.approach__pillars {
  max-width: 1560px;
  margin: clamp(64px, 5.8vw, 104px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  text-align: left;
}

.pillar {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.7vw, 30px);
  background: #fff;
  border-radius: var(--surface-radius);
  padding: clamp(24px, 2.6vw, 36px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(16px);
  animation: pillar-enter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.pillar:nth-child(2) { animation-delay: 0.12s; }
.pillar:nth-child(3) { animation-delay: 0.24s; }

@keyframes pillar-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pillar__icon {
  width: clamp(72px, 6.5vw, 110px);
  height: auto;
  flex-shrink: 0;
}

/* Inline SVG version (About intro). The width comes from .pillar__icon;
   these two only handle what an <img> did not need: a square box while the
   height resolves, and room for the glass drop shadows, which are SVG
   filters whose region extends past the viewBox and would be clipped by
   the root's default overflow. */
.pillar__icon--animated {
  aspect-ratio: 1;
  overflow: visible;
}

.pillar__text {
  font-size: clamp(1rem, 1.35vw, 1.4375rem);
  font-weight: 300;
  line-height: 1.3;
  max-width: 24em;
}

.approach__cta { margin-top: clamp(56px, 6.3vw, 108px); }

/* =====================================================================
   CASE STUDY TEMPLATE
   ===================================================================== */
.case-study {
  background: var(--bg);
}

.case-study-hero {
  max-width: var(--container-max);
  margin-inline: auto;
  height: auto;
  min-height: 0;
  padding: clamp(118px, 8.5vw, 150px) var(--container-pad) clamp(28px, 2.8vw, 48px);
  display: grid;
  grid-template-rows: auto auto;
  row-gap: clamp(28px, 3vw, 50px);
}

.case-study-hero__media {
  position: relative;
  aspect-ratio: 19 / 8;
  height: auto;
  min-height: 0;
  border-radius: var(--surface-radius);
  overflow: hidden;
  background: var(--bg-band);
}

.case-study-hero__media img,
.case-study-milestones__image img,
.case-study-milestones__image video,
.case-study-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  grid-template-rows: auto auto;
  gap: clamp(28px, 4vw, 72px);
  row-gap: clamp(16px, 1.8vw, 30px);
  align-items: start;
}

.case-study-hero__title {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.9375rem, 3.05vw, 3.375rem);
  font-weight: 500;
  line-height: 1.04;
}

.case-study-hero__summary {
  grid-column: 1;
  grid-row: 2;
  max-width: 33em;
  font-size: 1rem;
  line-height: 1.35;
}

.case-study-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: end;
  width: min(100%, 58rem);
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 76px);
  font-size: clamp(0.8125rem, 0.28vw + 0.68rem, 0.9375rem);
  line-height: 1.35;
}

.case-study-meta__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45em;
  align-content: start;
}

.case-study-meta dt {
  color: var(--ink-soft);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.case-study-meta dd {
  margin: 0;
  font-weight: 300;
  max-width: none;
  text-align: left;
}

@supports (height: 100dvh) {
  .case-study-hero { height: auto; }
  .case-study-panel { min-height: 100dvh; }
}

.case-study-milestones {
  --case-milestone-progress-height: 1em;
  position: relative;
  height: auto;
  background: var(--bg);
  overflow-anchor: none;
}

.js .case-study-milestones {
  height: var(--case-milestones-height, 300vh);
}

.case-study-milestones__inner {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  height: auto;
  padding: clamp(64px, 7.4vw, 128px) var(--container-pad);
  display: grid;
  grid-template-columns: minmax(360px, 39fr) minmax(0, 61fr);
  gap: clamp(48px, 6vw, 112px);
  align-items: center;
  overflow: visible;
  background: var(--bg);
}

.js .case-study-milestones__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
}

@supports (height: 100dvh) {
  .js .case-study-milestones__inner { height: 100dvh; }
}

.case-study-milestones__copy {
  position: relative;
  padding-left: clamp(8.4px, 0.84vw, 16.8px);
}

.case-study-milestones__copy::before,
.case-study-milestones__copy::after {
  content: '';
  position: absolute;
  left: 0;
  top: clamp(4px, 0.6vw, 10px);
  bottom: clamp(2px, 0.3vw, 6px);
}

.case-study-milestones__copy::before {
  width: 2px;
  background: var(--orange);
}

.case-study-milestones__copy::after {
  left: -0.5px;
  bottom: auto;
  width: 3px;
  height: var(--case-milestone-progress-height);
  background: var(--ink);
  transition: height var(--t-base) var(--ease-out);
}

.case-study-milestones__list {
  display: grid;
  gap: clamp(28px, 3.6vw, 66px);
  max-width: 38em;
}

.case-study-milestone {
  display: grid;
  gap: 0;
  transition: gap var(--t-base) var(--ease-out);
}

.case-study-milestone.is-active {
  gap: clamp(16px, 1.8vw, 30px);
}

.case-study-milestone__heading {
  font-family: var(--font-sans);
}

.case-study-milestone__button {
  display: inline-flex;
  padding: 0;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.35vw + 0.6rem, 0.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-eyebrow);
  text-align: left;
  text-transform: uppercase;
  transition: color var(--t-quick) var(--ease-out);
}

.case-study-milestone__button:hover,
.case-study-milestone__button:focus-visible {
  color: var(--orange);
}

.case-study-milestone__text {
  max-width: 38em;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out);
}

.case-study-milestone__text:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}

.case-study-milestone__text p {
  font-size: clamp(0.9375rem, 0.38vw + 0.72rem, 1.125rem);
  line-height: 1.35;
}

.case-study-milestones__media,
.case-study-milestones__image,
.case-study-gallery__item {
  position: relative;
  border-radius: var(--surface-radius);
  overflow: hidden;
  background: var(--bg-band);
}

.case-study-milestones__media {
  width: min(100%, calc(71svh * 16 / 10));
  aspect-ratio: 16 / 10;
  justify-self: end;
  height: auto;
  background: var(--bg-band);
}

.case-study-milestones__image {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.018);
  transition: opacity var(--t-slow) var(--ease-out),
              visibility 0s linear var(--t-slow),
              transform var(--t-slow) var(--ease-out);
}

.case-study-milestones__image.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 0s;
}

.case-study-milestones__image:first-child img {
  object-position: 50% 44%;
}

.case-study-gallery {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--container-pad) var(--container-pad) clamp(100px, 10vw, 180px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  align-items: stretch;
  gap: clamp(12px, 1vw, 18px);
  grid-auto-flow: dense;
}

.case-study-gallery__item {
  grid-column: span 1;
  min-height: 280px;
  max-height: none;
  align-self: stretch;
}

.case-study-gallery__item--large {
  grid-column: span 2;
  min-height: 0;
  aspect-ratio: var(--gallery-aspect, 19 / 8);
}

.case-study-gallery__item--portrait {
  grid-column: span 1;
  min-height: 0;
  aspect-ratio: var(--gallery-aspect, 3 / 4);
}

.case-study-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-gallery__item--large img {
  object-position: 50% 42%;
}

.case-study-gallery__credit {
  grid-column: 1 / -1;
  margin-top: clamp(8px, 1vw, 16px);
  font-size: clamp(0.8125rem, 0.32vw + 0.68rem, 0.9375rem);
}

.case-study-gallery__credit p {
  margin: 0;
}

.case-study-gallery__credit a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.case-study-gallery__credit a:hover {
  color: var(--orange);
}

.case-study-recommendations {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--container-pad) clamp(100px, 10vw, 180px);
  display: grid;
}

.case-study-recommendations__header {
  margin-bottom: clamp(24px, 2.6vw, 44px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
}

.case-study-recommendations__title {
  font-size: clamp(1.625rem, 1.8vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
}

.case-study-recommendations__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1vw, 18px);
}

.case-study-recommendation {
  display: grid;
  gap: clamp(18px, 1.4vw, 26px);
}

.case-study-recommendation__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--surface-radius);
  overflow: hidden;
  background: var(--bg-band);
}

.case-study-recommendation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.case-study-recommendation__name {
  font-size: clamp(1.125rem, 0.8vw + 0.8rem, 1.625rem);
  font-weight: 500;
  line-height: 1.12;
}

.case-study-recommendation:hover .case-study-recommendation__media img,
.case-study-recommendation:focus-visible .case-study-recommendation__media img {
  transform: scale(1.035);
}

/* =====================================================================
   CASE STUDIES ARCHIVE
   ===================================================================== */
.case-studies-archive {
  background: var(--bg);
  min-height: auto;
}

.case-studies-archive__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(118px, 8.5vw, 150px) var(--container-pad) clamp(100px, 10vw, 180px);
}

.case-studies-archive__filters {
  position: relative;
  max-width: min(100%, 980px);
  margin-bottom: clamp(48px, 5.2vw, 92px);
  margin-inline: auto;
}

.case-studies-archive__filter-label,
.case-studies-archive__filter-toggle {
  display: none;
}

.case-studies-archive__filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 0.8vw, 14px);
}

.case-studies-archive__filter,
.case-studies-archive__filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 18px 8px;
  border: 1px solid rgba(37, 46, 55, 0.18);
  border-radius: 999px;
  color: var(--ink);
  font-size: clamp(0.75rem, 0.24vw + 0.64rem, 0.875rem);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-transform: uppercase;
  transition: background-color var(--t-quick) var(--ease-out),
              border-color var(--t-quick) var(--ease-out),
              color var(--t-quick) var(--ease-out);
}

.case-studies-archive__filter-toggle {
  display: none;
}

.case-studies-archive__filter:hover,
.case-studies-archive__filter:focus-visible,
.case-studies-archive__filter.is-active,
.case-studies-archive__filter-toggle:hover,
.case-studies-archive__filter-toggle:focus-visible,
.case-studies-archive__filters.is-open .case-studies-archive__filter-toggle {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--ink);
}

.case-studies-archive__filter-arrow {
  width: 8px;
  height: 8px;
  margin-left: 14px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-quick) var(--ease-out);
}

.case-studies-archive__filters.is-open .case-studies-archive__filter-arrow {
  transform: translateY(2px) rotate(225deg);
}

.case-studies-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(42px, 4.6vw, 78px) clamp(12px, 1vw, 18px);
}

.case-study-card {
  min-width: 0;
}

.case-study-card.is-filtered-out {
  display: none;
}

.case-study-card__link {
  display: grid;
  gap: clamp(18px, 1.4vw, 26px);
}

.case-study-card__link:focus-visible {
  outline-offset: 8px;
}

.case-study-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--surface-radius);
  overflow: hidden;
  background: var(--bg-band);
}

.case-study-card__media img,
.case-study-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-card__media img {
  transition: transform var(--t-slow) var(--ease-out);
}

.case-study-card__placeholder {
  display: block;
  background: linear-gradient(180deg, #D2D2D2 0%, #F4F4F4 100%);
}

.case-study-card__content {
  display: grid;
  gap: clamp(12px, 1vw, 18px);
}

.case-study-card__title {
  font-size: clamp(1.125rem, 0.8vw + 0.8rem, 1.625rem);
  font-weight: 500;
  line-height: 1.12;
}

.case-study-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(14px, 1.3vw, 24px);
  padding-right: clamp(18px, 2vw, 34px);
  color: var(--ink-soft);
  font-size: clamp(0.6875rem, 0.3vw + 0.55rem, 0.8125rem);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  line-height: 1.3;
  text-transform: uppercase;
}

.case-study-card:hover .case-study-card__media img,
.case-study-card__link:focus-visible .case-study-card__media img {
  transform: scale(1.035);
}

.case-studies-archive .nav-links {
  margin-top: clamp(56px, 5.9vw, 100px);
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2vw, 32px);
  font-size: clamp(0.8125rem, 0.28vw + 0.68rem, 0.9375rem);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.case-studies-archive .nav-links a:hover {
  color: var(--orange);
}

.case-studies-archive__empty {
  max-width: 34em;
  font-size: clamp(1rem, 0.6vw + 0.75rem, 1.1875rem);
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact {
  --contact-min-height: calc(100svh - clamp(66px, 4.8vw, 76px));
  max-width: var(--container-max);
  margin-inline: auto;
  min-height: var(--contact-min-height);
  padding: clamp(36px, 2.8vw, 52px) var(--container-pad) clamp(42px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 44fr);
  column-gap: clamp(48px, 9vw, 160px);
  align-items: start;
  align-content: center;
}

@supports (height: 100dvh) {
  .contact {
    --contact-min-height: calc(100dvh - clamp(66px, 4.8vw, 76px));
  }
}

@media (min-width: 1400px) {
  .contact {
    padding-top: clamp(56px, 4.1vw, 70px);
  }
}

.contact__heading {
  font-size: clamp(1.875rem, 3.15vw, 3.4375rem);
  font-weight: 400;
  line-height: 1.12;
}

.contact__help {
  margin-top: clamp(32px, 3.6vw, 62px);
  font-size: clamp(1rem, 1.29vw, 1.375rem);
  line-height: 1.4;
}

.contact-form__lead {
  font-size: clamp(1rem, 1.29vw, 1.375rem);
  line-height: 1.4;
}
.contact-form__lead-heading {
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}

.contact-form__fields {
  margin-top: clamp(32px, 3.6vw, 58px);
  display: grid;
  gap: clamp(16px, 1.35vw, 23px);
}

.form-field { margin: 0; position: relative; }

.form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.6vw, 44px);
}

.form-field__input {
  display: block;
  width: 100%;
  padding: 4px 2px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text);
  transition: border-color var(--t-quick) var(--ease-out);
}
.form-field__input:focus {
  outline: none;
  border-bottom-color: var(--orange);
}
.form-field__input::placeholder {
  color: var(--text);
  opacity: 0.8;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Selects: mimic the placeholder look until an option is chosen.
   The captions are authored in sentence case, exactly like the inputs'
   placeholders, and the uppercase + tracking come from here — so all six
   fields are typeset by the same rule instead of half of them shouting
   from the markup. :has() covers the three selects; :invalid stays as the
   fallback for browsers without it (it only ever matches the required
   one, which is the behaviour we had before). */
.form-field--select .form-field__input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 28px;
  letter-spacing: 0;
  text-transform: none;
}
.form-field--select .form-field__input:invalid,
.form-field--select .form-field__input:has(option[value=""]:checked) {
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* Once a value is chosen the base rule takes over again: full-strength
   var(--text) from .form-field__input, no tracking, no transform. */
.form-field--select .form-field__input option {
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.form-field--select::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 8px;
  width: 14px; height: 14px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%23FFA05B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.form-field--textarea {
  margin-top: clamp(12px, 1.9vw, 32px);
}
.form-field--textarea .form-field__input {
  height: 42px;
  min-height: 42px;
  padding-top: 14px;
  padding-bottom: 8px;
  resize: vertical;
}

/* Privacy acceptance. The native checkbox is restyled rather than hidden
   behind a decorative box, so it keeps its own focus, label and semantics.
   Two sets of selectors: the fallback form's markup, and CF7's, which
   wraps the same input in .wpcf7-list-item > label. */
.form-field--acceptance {
  margin-top: clamp(10px, 1.2vw, 18px);
}

.form-acceptance,
.form-field--acceptance .wpcf7-list-item label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.form-field--acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.form-acceptance__input,
.form-field--acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease-out),
              background-color var(--t-quick) var(--ease-out);
}

.form-acceptance__input:checked,
.form-field--acceptance input[type="checkbox"]:checked {
  border-color: var(--ink);
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.5 11 1.8' fill='none' stroke='%23E9FFA9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 9px;
}

.form-acceptance__input:focus-visible,
.form-field--acceptance input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.form-acceptance__text,
.form-field--acceptance .wpcf7-list-item-label {
  font-size: 0.875rem;
  line-height: 1.4;
}

.form-acceptance__text a,
.form-field--acceptance .wpcf7-list-item-label a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-acceptance__text a:hover,
.form-field--acceptance .wpcf7-list-item-label a:hover {
  color: var(--orange);
}

.contact-form__error {
  margin-top: 20px;
  font-size: 0.875rem;
  color: #C24E1D;
}

.contact-form__fallback {
  margin-top: clamp(24px, 2vw, 32px);
  line-height: 1.5;
}

html:not(.js) .contact-form__fields,
html:not(.js) .contact-form__submit {
  display: none;
}

.contact-form__submit {
  margin-top: clamp(28px, 2.4vw, 40px);
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: none;
  padding: clamp(14px, 1vw, 17px) var(--container-pad);
}

.site-footer__logo img { width: clamp(110px, 8.2vw, 140px); height: auto; }

.site-footer__legal {
  text-align: center;
  font-size: clamp(0.75rem, 0.3vw + 0.6rem, 0.875rem);
  font-weight: 300;
}
.site-footer__legal strong { font-weight: 600; }
.site-footer__legal a {
  font-weight: 600;
  transition: color var(--t-quick) var(--ease-out);
}
.site-footer__legal a:hover { color: var(--lime); }

.site-footer__social {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 22px;
}
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--lime);
  transition: color var(--t-quick) var(--ease-out);
}
.site-footer__social a:hover { color: var(--text-on-dark); }

/* =====================================================================
   REVEAL ON SCROLL (subtle, disabled with reduced motion)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  main > section.is-scroll-panel {
    z-index: var(--panel-index, 1);
  }

  main > section.is-scroll-tall {
    z-index: var(--panel-index, 1);
  }

  main > section.is-snap-sequence {
    z-index: var(--panel-index, 1);
  }

  main > section.is-combined-block {
    z-index: var(--panel-index, 1);
  }

  .hero__content,
  .hero__collage,
  .intro__statement,
  .clients,
  .work__heading,
  .work-row,
  .work__cta,
  .expertise__eyebrow,
  .expertise__stats,
  .audiences__col,
  .approach__heading,
  .approach__intro,
  .approach__pillars,
  .approach__cta,
  .contact__pitch,
  .contact-form {
    --parallax-y: 0px;
  }

  .is-scroll-panel .hero__content,
  .is-scroll-panel .hero__collage,
  .is-scroll-panel .intro__statement,
  .is-scroll-panel .clients,
  .is-scroll-panel .work__heading,
  .is-scroll-panel .work-row,
  .is-scroll-panel .work__cta,
  .is-scroll-panel .expertise__eyebrow,
  .is-scroll-panel .expertise__stats,
  .is-scroll-panel .audiences__col,
  .is-scroll-panel .approach__heading,
  .is-scroll-panel .approach__intro,
  .is-scroll-panel .approach__pillars,
  .is-scroll-panel .approach__cta,
  .is-scroll-panel .contact__pitch,
  .is-scroll-panel .contact-form {
    transform: translate3d(0, var(--parallax-y), 0);
    will-change: transform;
  }

  .reveal {
    --reveal-y: 26px;
    opacity: 0;
    transform: translate3d(0, calc(var(--reveal-y) + var(--parallax-y, 0px)), 0);
    transition: opacity var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
  }
  .reveal.is-visible {
    opacity: 1;
    --reveal-y: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .btn--hero-icon::before,
  .btn--hero-icon .btn__label,
  .btn--hero-icon .btn__icon,
  .btn--hero-icon .btn__icon svg { transition: none; }
  .btn--hero-icon:hover .btn__label { transform: none; }
  .btn--hero-icon:hover .btn__icon { left: calc(100% - 50px); }
  .btn--hero-icon:hover .btn__icon svg { transform: rotate(0deg); }
  .hero__card img { transition: none; }
  .hero__card:hover img { transform: none; }
  .case-study-recommendation__media img { transition: none; }
  .case-study-recommendation:hover .case-study-recommendation__media img,
  .case-study-recommendation:focus-visible .case-study-recommendation__media img { transform: none; }
  .case-study-card__media img { transition: none; }
  .case-study-card:hover .case-study-card__media img,
  .case-study-card__link:focus-visible .case-study-card__media img { transform: none; }
  .pillar {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* --- Laptop / small desktop --- */
@media (max-width: 1750px) {
  .hero__title {
    font-size: clamp(2.25rem, 3.3vw, 3.5rem);
  }
}

@media (max-width: 1200px) {
  .work-row__link { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); }
}

/* --- Tablet --- */
@media (max-width: 980px) {
  .hero { padding-top: 150px; }

  .hero__collage { width: 280px; }
  .hero__collage--left  { left: -48px; }
  .hero__collage--right { right: -48px; }

  .case-studies-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-study-hero__intro {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }

  .case-study-hero__title,
  .case-study-hero__summary,
  .case-study-meta {
    grid-column: auto;
    grid-row: auto;
  }

  .case-study-meta {
    max-width: 620px;
    width: auto;
    justify-self: stretch;
    align-self: start;
    grid-template-columns: 1fr;
    gap: clamp(4px, 0.4vw, 8px);
  }

  .case-study-meta__row {
    grid-template-columns: minmax(54px, max-content) minmax(0, 1fr);
    gap: clamp(8px, 0.8vw, 14px);
    align-items: baseline;
  }

  .case-study-meta dd {
    font-weight: 500;
  }

  .case-study-milestones__inner {
    grid-template-columns: 1fr;
    align-content: center;
    gap: clamp(28px, 4vw, 44px);
    padding-block: clamp(52px, 7vw, 84px);
  }

  .case-study-milestones__list {
    max-width: 42em;
    gap: clamp(22px, 3vw, 38px);
  }

  .case-study-milestone.is-active {
    gap: clamp(18px, 2.6vw, 28px);
  }

  .case-study-milestones__media {
    height: clamp(260px, 40svh, 420px);
  }

  .case-study-recommendations__grid {
    grid-template-columns: 1fr;
    order: 2;
  }

  .case-study-recommendations__header {
    display: contents;
  }

  .case-study-recommendations__title {
    order: 1;
    margin-bottom: clamp(24px, 2.6vw, 44px);
  }

  .case-study-recommendations__header .btn {
    order: 3;
    justify-self: center;
    margin-top: clamp(32px, 7vw, 56px);
  }

  .case-study-recommendation {
    grid-template-columns: minmax(96px, 34vw) minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 4vw, 24px);
  }

  .case-study-recommendation__media {
    aspect-ratio: 4 / 3;
  }

  .expertise__stats {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    row-gap: clamp(24px, 4vw, 40px);
    justify-items: stretch;
  }
  .stat { display: flex; flex-direction: column; }
  .stat__value { order: -1; }
  .site-header__tagline { display: none; }
  .site-header { grid-template-columns: auto 1fr; }
  .site-header__logo { justify-self: start; }

  .audiences {
    grid-template-columns: 1fr;
    row-gap: clamp(32px, 5vw, 52px);
  }

  .approach__pillars {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap: var(--container-pad);
  }

  .contact {
    grid-template-columns: 1fr;
    row-gap: clamp(56px, 8vw, 80px);
  }
  .contact-form { max-width: 640px; }
}

/* --- Mobile nav + stacked layouts --- */
@media (max-width: 760px) {
  :root {
    --mobile-header-height: calc(44px + clamp(40px, 4.8vw, 80px));
    --padding-block: clamp(64px, 12vw, 96px);
  }

  main > section,
  .audiences,
  .contact,
  .case-study-panel {
    min-height: auto;
  }

  main > section:not(.hero) {
    padding-block: var(--padding-block);
    text-align: left;
  }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
    align-items: center;
  }

  .intro {
    background-color: var(--paper);
  }

  /* Deliberately NOT 100dvh here. The dynamic unit tracks iOS Safari's
     retracting toolbar, so the hero grew by 60-90px as you scrolled and
     shoved the rest of the page down with it. svh is the stable floor
     (toolbar visible); the cost is a sliver of the next section showing
     once the toolbar hides, which is the right trade. */

  .audiences {
    --audiences-min-height: auto;
    --padding-block: clamp(64px, 12vw, 96px);
    align-content: start;
  }

  .contact {
    --contact-min-height: auto;
    align-content: start;
  }

  .js .case-study-milestones {
    height: auto;
    overflow-anchor: auto;
  }

  .js .case-study-milestones__inner {
    position: relative;
    top: auto;
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  .site-header {
    grid-template-columns: auto 1fr auto;
    padding-inline-end: 0;
  }
  .site-header.is-menu-open,
  .case-study-template .site-header.is-menu-open {
    bottom: 0;
    align-content: start;
    color: var(--text-on-dark);
    background-color: var(--ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header__tagline { display: none; }
  .site-header__logo { justify-self: start; }
  .js .site-header__menu-toggle {
    display: block;
    width: 24px;
  }
  .site-header__menu-toggle .menu-icon { left: 0; right: 0; }

  .js .site-header__nav {
    position: absolute;
    top: var(--mobile-header-height);
    right: 0;
    bottom: 0;
    left: 0;
    justify-self: stretch;
    z-index: 25;
    display: grid;
    place-items: center;
    min-height: calc(100svh - var(--mobile-header-height));
    background: var(--ink);
    color: var(--text-on-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease-out),
                visibility 0s linear var(--t-base);
  }
  .js .site-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .nav-list__link { font-size: 1.25rem; }

  html:not(.js) .site-header {
    grid-template-columns: 1fr;
    row-gap: 12px;
    height: auto;
  }
  html:not(.js) .site-header__nav {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
  }
  html:not(.js) .nav-list {
    flex-flow: row wrap;
    align-items: center;
    gap: 8px 20px;
  }
  html:not(.js) .nav-list__link {
    font-size: 0.75rem;
  }

  /* Hero: text only, collage hidden to keep the message legible */
  .hero { padding-top: calc(var(--mobile-header-height) + clamp(36px, 10vw, 56px)); }
  /* The h1 clamp bottoms out at its 36px floor here, which is too loud on
     a 390px screen: -15% (30.6px). Home and About share the class. */
  .hero__title { font-size: 1.9125rem; }
  .hero__title-line { display: inline; }
  .hero__collage { display: none; }

  .work__heading { text-align: left; }
  .work__cta { text-align: left; }

  .work-row__link {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .work-row {
    padding-block: 28px;
  }
  .work-row__media {
    display: block;
  }
  .work-row__description {
    display: none;
  }
  .work-row__img,
  .work-row__placeholder,
  .work-row--active .work-row__img,
  .work-row--active .work-row__placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .work-row__img:not(:first-child),
  .work-row__placeholder:not(:first-child) {
    display: none;
  }
  .work-row__img::after,
  .work-row__placeholder::after {
    display: none;
  }

  .case-studies-archive {
    --case-archive-mobile-filter-space: clamp(72px, 14.5vw, 94px);
    padding-block: 0;
  }

  .case-studies-archive__inner {
    padding-top: var(--case-archive-mobile-filter-space);
  }

  .case-studies-archive__filters {
    display: grid;
    justify-items: center;
    max-width: min(100%, 320px);
    text-align: center;
    margin-bottom: var(--case-archive-mobile-filter-space);
  }

  .case-studies-archive__filter-label {
    display: block;
    margin-bottom: 12px;
    color: var(--ink-soft);
    font-size: clamp(0.75rem, 0.35vw + 0.6rem, 0.875rem);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    line-height: 1.2;
    text-transform: uppercase;
  }

  .case-studies-archive__filter-toggle {
    display: inline-flex;
    min-width: 168px;
    padding-right: 16px;
  }

  .js .case-studies-archive__filter-list {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 20;
    display: grid;
    width: min(100%, 320px);
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(37, 46, 55, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(37, 46, 55, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, -4px, 0);
    visibility: hidden;
    transition: opacity var(--t-quick) var(--ease-out),
                transform var(--t-quick) var(--ease-out),
                visibility 0s linear var(--t-quick);
  }

  .js .case-studies-archive__filters.is-open .case-studies-archive__filter-list {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
    visibility: visible;
    transition-delay: 0s;
  }

  .case-studies-archive__filter {
    min-height: 34px;
    padding-inline: 14px;
  }

  .js .case-studies-archive__filter-list .case-studies-archive__filter {
    width: 100%;
  }

  .case-studies-archive__grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 9vw, 56px);
  }

  .case-study-hero {
    height: auto;
    min-height: auto;
    padding-top: clamp(108px, 20vw, 132px);
    grid-template-rows: auto auto;
    row-gap: clamp(30px, 8vw, 42px);
  }

  .case-study-hero__media {
    aspect-ratio: 19 / 12;
    height: auto;
  }

  .case-study-meta dd {
    font-size: 14px;
    font-weight: 400;
  }

  .case-study-milestones__inner {
    padding-block: clamp(34px, 7vw, 58px);
  }

  .case-study-milestones__copy {
    padding-left: 8.4px;
  }

  .case-study-milestones__copy::before {
    width: 1px;
  }

  .case-study-milestones__copy::after {
    width: 2px;
  }

  .case-study-milestones__list {
    gap: 20px;
  }

  .case-study-milestone.is-active {
    gap: 14px;
  }

  .case-study-milestones__media {
    width: 100%;
  }

  .case-study-gallery {
    grid-template-columns: 1fr;
    height: auto;
  }

  .case-study-gallery__item,
  .case-study-gallery__item--large,
  .case-study-gallery__item--portrait {
    grid-column: auto;
    height: auto;
    aspect-ratio: var(--gallery-aspect, auto);
    min-height: auto;
  }

  .case-study-gallery__item img {
    height: auto;
    object-fit: contain;
  }

  /* Touch devices: rows readable by default. The white gradient veil
     (.work-row__img::after) is already display:none up here; this opacity
     was the other half of it. There is no hover on a phone, so no resting
     state to play down — the photographs show at full strength. */
  .work-row:not(.work-row--active) .work-row__media { opacity: 1; }
  .work-row:not(.work-row--active) .work-row__title { color: var(--text); }
  .work-row:not(.work-row--active) .work-row__tags  { color: var(--text); }

  .expertise__eyebrow { text-align: left; }

  .audiences__col { grid-template-columns: 1fr; gap: 20px; }
  .audiences__eyebrow { padding-top: 0; }

  .pillar { align-items: flex-start; }

  .form-field-row { grid-template-columns: 1fr; gap: clamp(28px, 2.6vw, 44px); }

  /* The form is where a phone visit is heading. It should be on screen the
     moment it is scrolled to — no fade, no parallax offset. */
  .contact-form,
  .contact-form.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 18px;
    text-align: center;
    padding-block: 32px;
  }
  .site-footer__legal { text-align: center; }
  .site-footer__social { justify-self: center; }
}

/* --- Case study compact menu --- */
.case-study-template .site-header,
.case-study-template .site-header.is-revealed,
.case-study-template .site-header.is-hidden,
.case-study-template .site-header.is-menu-open {
  top: clamp(16px, 1.8vw, 28px);
  right: var(--container-pad);
  bottom: auto;
  left: auto;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  color: var(--ink);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.case-study-template .site-header__tagline,
.case-study-template .site-header__logo {
  display: none;
}

.case-study-template .site-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 40px;
  min-height: 40px;
  padding: 0 15px 0 14px;
  border: 1px solid rgba(37, 46, 55, 0.1);
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 10px 30px rgba(37, 46, 55, 0.08);
}

.case-study-template .site-header__menu-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1;
  text-transform: uppercase;
}

.case-study-template .site-header__menu-toggle .menu-icon {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: 15px;
  height: 1.5px;
  flex: 0 0 15px;
}

.case-study-template .site-header__menu-toggle .menu-icon,
.case-study-template .site-header__menu-toggle .menu-icon::before,
.case-study-template .site-header__menu-toggle .menu-icon::after {
  background: currentColor;
}

.case-study-template .site-header__menu-toggle .menu-icon::before,
.case-study-template .site-header__menu-toggle .menu-icon::after {
  left: 0;
  right: 0;
}

.case-study-template .site-header__menu-toggle .menu-icon::before { top: -5px; }
.case-study-template .site-header__menu-toggle .menu-icon::after { top: 5px; }

.case-study-template .site-header:hover .site-header__menu-toggle .menu-icon,
.case-study-template .site-header:focus-within .site-header__menu-toggle .menu-icon,
.case-study-template .site-header__menu-toggle[aria-expanded="true"] .menu-icon {
  background: transparent;
}

.case-study-template .site-header:hover .site-header__menu-toggle .menu-icon::before,
.case-study-template .site-header:focus-within .site-header__menu-toggle .menu-icon::before,
.case-study-template .site-header__menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform: translateY(5px) rotate(45deg);
}

.case-study-template .site-header:hover .site-header__menu-toggle .menu-icon::after,
.case-study-template .site-header:focus-within .site-header__menu-toggle .menu-icon::after,
.case-study-template .site-header__menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform: translateY(-5px) rotate(-45deg);
}

.js .case-study-template .site-header__nav,
.case-study-template .site-header__nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 25;
  display: block;
  width: max-content;
  min-width: 168px;
  min-height: 0;
  padding: 10px;
  border: 1px solid rgba(37, 46, 55, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(37, 46, 55, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -4px, 0);
  transition: opacity var(--t-quick) var(--ease-out),
              transform var(--t-quick) var(--ease-out),
              visibility 0s linear var(--t-quick);
}

.case-study-template .site-header:hover .site-header__nav,
.case-study-template .site-header:focus-within .site-header__nav,
.js .case-study-template .site-header__nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

.case-study-template .nav-list {
  display: grid;
  gap: 2px;
}

.case-study-template .nav-list__link {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1;
  white-space: nowrap;
}

.case-study-template .nav-list__link:hover,
.case-study-template .site-header.is-on-light .nav-list__link:hover {
  background: rgba(233, 255, 169, 0.72);
  color: var(--ink);
  font-weight: 500;
}

.case-study-template .case-study-hero {
  padding-top: clamp(42px, 3.4vw, 62px);
}

@media (max-width: 760px) {
  .case-study-template .site-header,
  .case-study-template .site-header.is-revealed,
  .case-study-template .site-header.is-hidden,
  .case-study-template .site-header.is-menu-open {
    top: clamp(14px, 4vw, 20px);
    right: var(--container-pad);
  }

  /* Clear the floating pill menu: it sits at clamp(14px, 4vw, 20px) and is
     40px tall, so the old 64px floor left only 8-12px of air under it
     between 320 and 430px. */
  .case-study-template .case-study-hero {
    padding-top: clamp(76px, 18vw, 96px);
  }
}

/* --- Small mobile --- */
@media (max-width: 420px) {
  .btn { width: 100%; padding-inline: 24px; }
  .btn--hero-icon { padding: 8px 62px 8px 24px; }
  .btn--hero-icon:hover .btn__label { transform: translateX(26px); }
}

/* =====================================================================
   WP - About page template
   Reuses the theme's blocks (hero, approach pillars, clients marquee,
   case-study hero / recommendations, work rows); the IDs only adapt the
   composition for this page.
   ===================================================================== */

/* 01 Hero — compact dark band; the bold part of the heading turns lime */
#about-hero {
  min-height: auto;
  padding: clamp(150px, 15vw, 250px) var(--container-pad) clamp(88px, 10.5vw, 180px);
}

/* The emphasised part is marked by colour alone: same weight, same line,
   so the heading reads as one sentence instead of two stacked halves. */
#about-hero .hero__title strong,
#about-hero .hero__title span {
  display: inline;
  color: var(--lime);
  font-weight: 400;
}

/* 02 Intro pillars — theme icon above each paragraph, on white */
#about-intro {
  background: var(--bg);
  padding: clamp(56px, 4.5vw, 76px) var(--container-pad) clamp(72px, 6.5vw, 108px);
}

#about-intro .approach__pillars {
  width: 100%;
  /* 10% narrower than the container: at 1760px the three paragraphs drift
     apart and stop reading as one block. Tablet (≤980px) keeps the full
     width — there is no room to give away down there. */
  max-width: calc(var(--container-max) * 0.9);
  margin-inline: auto;
  margin-top: 0;
}

#about-intro .pillar {
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

#about-intro .pillar__text {
  max-width: 26em;
  font-size: clamp(0.9375rem, 0.38vw + 0.72rem, 1.125rem);
  font-weight: 400;
  line-height: 1.4;
}

/* 03 Us — lime band */
#about-us {
  background: var(--lime);
  color: var(--ink);
  padding-top: clamp(84px, 9vw, 156px);
  padding-bottom: clamp(84px, 9vw, 156px);
}

#about-us .approach__heading {
  max-width: 19em;
  margin-inline: auto;
}

#about-us .approach__intro {
  max-width: 50em;
  margin-top: clamp(28px, 3.4vw, 60px);
  font-size: clamp(0.9375rem, 0.38vw + 0.72rem, 1.125rem);
}

#about-us .approach__intro p + p {
  margin-top: 0.9em;
}

#about-us .eyebrow {
  margin-top: clamp(28px, 3vw, 52px);
  color: var(--ink);
}

/* 04 Trusted by — same marquee as the homepage */
#about-clients {
  padding: clamp(64px, 6vw, 104px) 0 clamp(80px, 8vw, 150px);
  background: var(--bg);
  text-align: center;
}

#about-clients .clients {
  margin-top: 0;
}

/* 05 The studio + 08 Why Baobab — full-bleed split panels */
#about-studio,
#about-why {
  max-width: none;
  min-height: auto;
  padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto;
  gap: 0;
  align-items: center;
  background: var(--bg-band);
}

#about-studio .case-study-hero__media,
#about-why .case-study-hero__media {
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

#about-studio .case-study-hero__media {
  grid-column: 1;
  aspect-ratio: 4 / 3;
}

/* The copy sets the height (70vh floor); the photo just fills the column. */
#about-why {
  min-height: 70vh;
}

#about-why .case-study-hero__media {
  grid-column: 2;
  aspect-ratio: auto;
  align-self: stretch;
}

#about-why .case-study-hero__media img {
  object-position: center bottom;
}

#about-studio .case-study-hero__intro,
#about-why .case-study-hero__intro {
  grid-row: 1;
  display: block;
  padding-top: clamp(56px, 6vw, 110px);
  padding-bottom: clamp(56px, 6vw, 110px);
}

#about-studio .case-study-hero__intro {
  grid-column: 2;
  padding-inline: clamp(40px, 8vw, 136px);
}

#about-why .case-study-hero__intro {
  grid-column: 1;
  padding-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  padding-right: clamp(40px, 6vw, 100px);
}

#about-studio .case-study-hero__title,
#about-why .case-study-hero__title {
  max-width: 12em;
  margin-bottom: clamp(24px, 3vw, 52px);
}

/* Both panel headings sit on the site-wide h2 scale, like every other
   section heading on the page. */
#about-studio .case-study-hero__title,
#about-why .case-study-hero__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-h2);
}

#about-studio .case-study-hero__summary,
#about-why .case-study-hero__summary {
  max-width: 34em;
  font-size: clamp(0.9375rem, 0.38vw + 0.72rem, 1.125rem);
  line-height: 1.4;
}

#about-studio .case-study-hero__summary p + p,
#about-why .case-study-hero__summary p + p {
  margin-top: 0.9em;
}

/* 06 People — portrait + copy, two cards side by side */
#about-people {
  padding-top: clamp(72px, 8.5vw, 150px);
  padding-bottom: clamp(64px, 8vw, 134px);
}

#about-people .case-study-recommendations__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.2vw, 72px);
  align-items: center;
}

#about-people .case-study-recommendation {
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  align-items: center;
  gap: clamp(16px, 1.5vw, 26px);
}

#about-people .case-study-recommendation__media {
  aspect-ratio: 3 / 4;
}

/* Portrait wrapped in the LinkedIn link: it has to fill the 3:4 figure the
   image used to fill on its own. */
.case-study-recommendation__link {
  display: block;
  height: 100%;
  cursor: pointer;
}

/* A person without a LinkedIn URL is not clickable, so the card stays put
   rather than inheriting the case-study cards' hover zoom. */
#about-people .case-study-recommendation:hover .case-study-recommendation__media img {
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* With a URL there is something to click: a smaller, quieter zoom than
     the 1.035 the work cards use, and the same on keyboard focus — which
     lands on the name link, the one that is in the tab order. */
  #about-people .case-study-recommendation:hover:has(.case-study-recommendation__link) .case-study-recommendation__media img {
    transform: scale(1.02);
  }

  #about-people .case-study-recommendation:focus-within .case-study-recommendation__media img {
    transform: scale(1.02);
  }
}

#about-people .case-study-card__placeholder {
  background:
    linear-gradient(180deg, rgba(251, 248, 246, 0.24), rgba(37, 46, 55, 0.1)),
    var(--bg-band);
}

#about-people .case-study-card__content {
  gap: clamp(8px, 0.8vw, 14px);
}

#about-people .case-study-recommendation__name {
  font-size: clamp(1.375rem, 1.91vw, 2.03125rem);
}

/* Roles sit back in ink; orange stays reserved for punctuation (arrows,
   ticks, chevrons) and for the numbered principles further down. */
#about-people .eyebrow[itemprop="jobTitle"] {
  color: rgba(37, 46, 55, 0.8);
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  font-weight: 600;
}

#about-people .page-plain__content {
  margin-top: clamp(4px, 0.6vw, 10px);
  max-width: 22em;
  font-size: clamp(0.9375rem, 0.38vw + 0.72rem, 1.125rem);
  line-height: 1.4;
}

#about-people .page-plain__content p:last-child {
  margin-bottom: 0;
}

/* 07 What you can expect — dark band, numbered 2 × 2 grid */
#about-how {
  max-width: none;
  padding: clamp(80px, 7.5vw, 128px) var(--container-pad) clamp(84px, 9vw, 152px);
  background: var(--ink);
  color: var(--text-on-dark);
}

#about-how .work__heading {
  padding-inline: 0;
}

#about-how .work__list {
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 3.2vw, 54px) clamp(40px, 6vw, 100px);
}

#about-how .work-row,
#about-how .work-row:first-child {
  padding: clamp(18px, 2.2vw, 38px) 0 0;
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 0;
}

#about-how .work-row__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 0.9vw, 14px);
  align-items: start;
}

#about-how .eyebrow {
  color: var(--orange);
  font-weight: 600;
}

#about-how .work-row__title {
  color: inherit;
}

#about-how .work-row__description,
#about-how .work-row--active .work-row__description {
  max-width: 30em;
  max-height: none;
  margin-top: 0;
  overflow: visible;
  opacity: 1;
  transform: none;
  font-weight: 300;
}

@media (max-width: 980px) {
  #about-intro .approach__pillars {
    max-width: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 32px);
  }

  #about-studio,
  #about-why {
    grid-template-columns: 1fr;
  }

  #about-studio .case-study-hero__media,
  #about-why .case-study-hero__media,
  #about-studio .case-study-hero__intro,
  #about-why .case-study-hero__intro {
    grid-column: auto;
    grid-row: auto;
  }

  #about-studio .case-study-hero__media {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  #about-why {
    min-height: 0;
  }

  #about-why .case-study-hero__media {
    order: 2;
    height: auto;
    align-self: auto;
    aspect-ratio: 4 / 3;
  }

  #about-studio .case-study-hero__intro,
  #about-why .case-study-hero__intro {
    padding: clamp(48px, 7vw, 72px) var(--container-pad);
  }

  #about-people .case-study-recommendations__grid {
    grid-template-columns: 1fr;
  }

  #about-how .work__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  #about-hero {
    padding: calc(var(--mobile-header-height) + clamp(48px, 12vw, 72px)) var(--container-pad) clamp(56px, 14vw, 84px);
  }

  #about-intro,
  #about-us,
  #about-people,
  #about-how {
    padding-top: clamp(64px, 12vw, 96px);
    padding-bottom: clamp(64px, 12vw, 96px);
  }

  #about-intro .approach__pillars {
    grid-template-columns: 1fr;
    gap: clamp(36px, 9vw, 52px);
  }

  /* Stacked into one column, each icon and its paragraph centre on each
     other rather than ranging left under a centred icon. */
  #about-intro .pillar {
    align-items: center;
    text-align: center;
  }

  #about-intro .pillar__text {
    margin-inline: auto;
  }

  #about-clients {
    padding: clamp(48px, 10vw, 72px) 0 clamp(56px, 12vw, 84px);
  }

  #about-studio .case-study-hero__media {
    aspect-ratio: 4 / 3;
  }

  /* The portrait takes its height from the text beside it instead of
     holding a fixed 3:4 and leaving the card lopsided. min-height keeps a
     very short bio from squashing it. */
  #about-people .case-study-recommendation {
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    align-items: stretch;
  }

  #about-people .case-study-recommendation__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 180px;
  }

  #about-people .case-study-recommendation__media img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  #about-studio .case-study-hero__title,
  #about-why .case-study-hero__title {
    max-width: none;
  }

  /* Same convention as the homepage on mobile: everything left-aligned */
  #about-us,
  #about-clients {
    text-align: left;
  }

  #about-us .approach__heading,
  #about-us .approach__intro {
    margin-inline: 0;
  }

  #about-how .work__list {
    gap: clamp(28px, 7vw, 40px);
  }

  #about-how .work-row__description {
    display: block;
  }
}

/* =====================================================================
   WP - Contact page template
   Short dark hero → "Book a call" band → the shared contact block. The
   hero and the band reuse the theme's blocks; only the composition here
   is specific to this page.
   ===================================================================== */

/* 01 Hero — the compact dark band, like About's. */
#contact-hero {
  min-height: auto;
  padding: clamp(150px, 15vw, 250px) var(--container-pad) clamp(72px, 8vw, 132px);
}

#contact-hero .hero__title strong,
#contact-hero .hero__title span {
  display: inline;
  color: var(--lime);
  font-weight: 400;
}

#contact-hero .hero__intro {
  margin-top: clamp(24px, 2.6vw, 40px);
}

/* 02 Book a call — the left column of the contact block rather than a band
   of its own. Its lead reuses .contact-form__lead, so the two columns open
   on the same line and in the same voice. */
.contact-booking__cta {
  margin-top: clamp(32px, 3.6vw, 58px);
}

/* The Microsoft Bookings frame, and the placeholder standing in for it
   until the visitor loads it. Both occupy the same box, so accepting does
   not shift the page. */
.booking-embed {
  display: grid;
  min-height: 560px;
  /* The same top margin .contact-form__fields has, so the calendar starts
     level with the form's first field on the other side. */
  margin-top: clamp(32px, 3.6vw, 58px);
  border: 1px solid var(--line);
  border-radius: var(--surface-radius);
  background: var(--bg);
  overflow: hidden;
}

.booking-embed__placeholder {
  place-self: center;
  max-width: 38em;
  padding: clamp(24px, 4vw, 48px);
  text-align: center;
}

.booking-embed__note {
  font-size: clamp(0.9375rem, 0.38vw + 0.72rem, 1.125rem);
  line-height: 1.4;
}

.booking-embed__load {
  margin-top: clamp(20px, 2.2vw, 32px);
}

.booking-embed__alt {
  margin-top: clamp(14px, 1.4vw, 22px);
  font-size: 0.9375rem;
}

.booking-embed__alt a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.booking-embed__alt a:hover {
  color: var(--orange);
}

.booking-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 560px;
  border: 0;
}

/* Without JS the button has nothing to do; the link is the way in. */
html:not(.js) .booking-embed__load {
  display: none;
}

@media (max-width: 980px) {
  #contact-hero {
    padding-top: clamp(120px, 18vw, 170px);
    padding-bottom: clamp(56px, 9vw, 96px);
  }

  /* .contact collapses to one column here, so the calendar takes the full
     width — and the height Bookings needs to show a month and its times
     together instead of scrolling inside the iframe. */
  .booking-embed,
  .booking-embed iframe {
    min-height: 680px;
  }
}

@media (max-width: 760px) {
  #contact-hero {
    padding: calc(var(--mobile-header-height) + clamp(48px, 12vw, 72px)) var(--container-pad) clamp(56px, 14vw, 84px);
  }

  .booking-embed__placeholder {
    text-align: left;
  }

  .booking-embed,
  .booking-embed iframe {
    min-height: 620px;
  }

  .booking-embed__load {
    width: 100%;
  }
}

/* =====================================================================
   WP — Plain page template (.page-plain)
   Used by legal pages, 404 and placeholders. Coherent with the system:
   Epilogue headings, Figtree body, container rhythm.
   ===================================================================== */
.page-plain {
  min-height: 60vh;
  padding: calc(96px + 8vh) var(--container-pad) 12vh;
}

.page-plain__inner {
  max-width: 46em;
  margin-inline: auto;
}

.page-plain__inner h1,
.page-plain__title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.12;
  margin-bottom: 0.9em;
}

.page-plain__content h2 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 500; margin: 1.6em 0 0.5em; }
.page-plain__content h3 { font-size: clamp(1.1rem, 1.4vw, 1.25rem); font-weight: 500; margin: 1.4em 0 0.4em; }
.page-plain__content p { margin-bottom: 0.9em; }
.page-plain__content ul { list-style: disc; padding-left: 1.2em; margin-bottom: 0.9em; }
.page-plain__content ol { padding-left: 1.2em; margin-bottom: 0.9em; }
.page-plain__content a { text-decoration: underline; text-underline-offset: 2px; }
.page-plain__content a:hover { color: var(--orange); }

/* =====================================================================
   WP — Case study video media
   Ambient videos (hero loop, gallery mockups) mirror the img treatment.
   ===================================================================== */
.case-study-hero__media video,
.case-study-milestones__image video,
.case-study-gallery__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Main video — between milestones and gallery, with player controls. */
.case-study-video {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 0;
}

@supports (height: 100dvh) {
  .case-study-video {
    min-height: 100dvh;
  }
}

.case-study-video__frame {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-band);
}

@supports (height: 100dvh) {
  .case-study-video__frame {
    height: 100dvh;
  }
}

.case-study-video__frame iframe,
.case-study-video__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.case-study-video__frame video {
  display: block;
  object-fit: cover;
}

@media (max-width: 760px) {
  .case-study-gallery__item video {
    height: auto;
    object-fit: contain;
  }

  .case-study-video {
    min-height: 0;
  }

  .case-study-video__frame {
    height: auto;
    aspect-ratio: var(--case-video-aspect, 16 / 9);
  }

  .case-study-video__frame video {
    object-fit: contain;
  }
}

/* =====================================================================
   WP — Contact Form 7 layer
   The CF7 template (docs/contact-form-7.md) reuses the .contact-form and
   .form-field classes, so these rules only neutralise CF7's extra
   wrappers and style its validation/response messages.
   ===================================================================== */
.contact .wpcf7 {
  display: contents; /* keep the .contact two-column grid intact */
}

/* Scoped to .contact, not to .contact-form. CF7 renders the form as
   <form class="wpcf7-form"> and only adds the theme's class if html_class
   is set in its Additional settings, so every rule below used to match
   nothing on the live site and the validation tips and the response
   message fell back to browser defaults. .contact wraps both the CF7 form
   and the static fallback, so one set of rules now covers both. */
.contact .wpcf7-form-control-wrap {
  display: block;
  min-width: 0;
  width: 100%;
}

.contact .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: #C24E1D;
}

.contact .wpcf7-response-output {
  border: 0;
  margin: 20px 0 0;
  padding: 0;
  font-size: 0.875rem;
}

/* CF7 puts .invalid / .failed / .sent on the <form> itself. */
.contact .wpcf7-form.invalid .wpcf7-response-output,
.contact .wpcf7-form.failed .wpcf7-response-output,
.contact .contact-form.invalid .wpcf7-response-output,
.contact .contact-form.failed .wpcf7-response-output {
  color: #C24E1D;
}

.contact .wpcf7-form.sent .wpcf7-response-output,
.contact .contact-form.sent .wpcf7-response-output {
  color: var(--text);
}

.contact .wpcf7-spinner {
  margin: 0 0 0 12px;
}

/* =====================================================================
   WP — Blog base templates (refine when the blog launches)
   ===================================================================== */
.post-teaser {
  padding: clamp(20px, 2vw, 28px) 0;
  border-top: 1px solid var(--line);
}

.post-teaser__date {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-teaser__title {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.15;
}

.post-teaser__title a:hover,
.post-teaser__title a:focus-visible {
  color: var(--orange);
}

.post-teaser__excerpt {
  margin-top: 8px;
  max-width: 60ch;
}

.post-single__header {
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.post-single__header .page-plain__title {
  margin-bottom: 0;
  margin-top: 6px;
}

.post-single__media {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  border-radius: var(--surface-radius);
  overflow: hidden;
}

.post-single__back {
  margin-top: clamp(32px, 3.6vw, 56px);
}

.blog-index .pagination {
  margin-top: clamp(28px, 3vw, 44px);
}