/* ==================================================================
   iBroad Media — Design System
   Modernist editorial grid · brand red · Archivo / Libre Franklin
   ================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand */
  --red: #bd100f;
  --red-100: #fbeceb;
  --red-200: #f6d4d2;
  --red-300: #eeb0ad;
  --red-400: #e0645f;
  --red-500: #d92a22;
  --red-600: #a30d0c;
  --red-700: #850a09;
  --red-900: #470c0b;

  /* Success — deliberately not the brand red, which also signals errors */
  --ok: #157a4b;
  --ok-100: #e9f6ef;
  --ok-700: #0f5c38;

  /* Neutrals */
  --ink: #201e1d;
  --ink-90: #35322f;
  --bg: #f3f2f2;
  --surface: #eae9e9;
  --paper: #ffffff;
  --line: color-mix(in srgb, #201e1d 22%, transparent);
  --line-soft: color-mix(in srgb, #201e1d 12%, transparent);
  --line-inv: color-mix(in srgb, #f3f2f2 24%, transparent);
  --muted: color-mix(in srgb, var(--ink) 68%, transparent);
  --muted-inv: color-mix(in srgb, #f3f2f2 70%, transparent);

  /* Type */
  --f-head: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap: 1400px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --nav-h: 104px;
  --nav-h-sm: 76px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h-sm) + 24px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.68;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--f-head);
  font-weight: 800;
  margin: 0;
  letter-spacing: -.032em;
  line-height: .98;
  text-transform: uppercase;
  text-wrap: balance;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* Any author `display` (e.g. .btn's inline-flex) outranks the UA [hidden] rule,
   so state it explicitly once for the whole site. */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--red);
  color: #fff;
}

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

/* ---------- 3. Layout primitives ---------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.section {
  position: relative;
  padding-block: clamp(72px, 9vw, 128px);
}

.section--tight {
  padding-block: clamp(56px, 6.5vw, 88px);
}

.section--flush {
  padding-block: 0;
}

.rule {
  border-bottom: 1px solid var(--line);
}

.rule-top {
  border-top: 1px solid var(--line);
}

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

.bg-surface {
  background: var(--surface);
}

.bg-red {
  background: var(--red);
  color: #fff;
}

.bg-ink .rule,
.bg-red .rule {
  border-color: var(--line-inv);
}

/* ---------- 4. Type utilities ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 44px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.eyebrow--plain::before {
  display: none;
}

.bg-ink .eyebrow,
.bg-red .eyebrow {
  color: var(--red-400);
}

.bg-red .eyebrow {
  color: color-mix(in srgb, #fff 82%, transparent);
}

.h-xl {
  font-size: clamp(44px, 7.6vw, 116px);
  line-height: .86;
  letter-spacing: -.045em;
}

.h-lg {
  font-size: clamp(38px, 5.6vw, 84px);
  line-height: .9;
  letter-spacing: -.04em;
}

.h-md {
  font-size: clamp(32px, 3.9vw, 56px);
  line-height: 1;
  letter-spacing: -.032em;
}

.h-sm {
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.06;
  letter-spacing: -.028em;
}

.h-xs {
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.16;
  letter-spacing: -.02em;
}

.lede {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.52;
}

.body-lg {
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.62;
  color: var(--muted);
}

.body {
  font-size: 15px;
  line-height: 1.62;
  color: var(--muted);
}

.bg-ink .body,
.bg-ink .body-lg,
.bg-ink .lede-muted {
  color: var(--muted-inv);
}

.accent {
  color: var(--red);
}

.bg-red .accent,
.bg-ink .accent {
  color: var(--red-400);
}

em.accent {
  font-style: normal;
  color: var(--red);
}

.bg-red em.accent {
  color: #fff;
}

.label {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.measure {
  max-width: 54ch;
}

.measure-sm {
  max-width: 44ch;
}

/* ---------- 5. Buttons & links ---------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  --btn-bd: var(--red);
  --btn-hover-bg: var(--ink);
  --btn-hover-fg: #fff;
  --btn-hover-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  padding: 0 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  font-family: var(--f-head);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Background and label cross-fade on one timeline. Every variant below keeps
     the SAME light/dark polarity across its hover, so the midpoint of the fade
     can never land on low-contrast text — which is what made labels disappear
     when the fill and the colour ran on separate schedules. */
  transition: background-color .26s var(--ease), color .26s var(--ease),
    border-color .26s var(--ease), transform .26s var(--ease);
}

.btn:hover,
.btn:focus-visible {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
  border-color: var(--btn-hover-bd);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  transition: transform .3s var(--ease);
}

.btn:hover svg {
  transform: translateX(5px);
}

/* dark text on light ground, before and after */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  --btn-hover-bg: var(--red-100);
  --btn-hover-fg: var(--red-700);
  --btn-hover-bd: var(--red);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--red);
  --btn-bd: #fff;
  --btn-hover-bg: var(--red-100);
  --btn-hover-fg: var(--red-700);
  --btn-hover-bd: var(--red-100);
}

/* light text on dark ground, before and after */
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: #fff;
  --btn-hover-bg: var(--red-900);
  --btn-hover-fg: #fff;
  --btn-hover-bd: #fff;
}

.btn--on-ink {
  --btn-bg: transparent;
  --btn-fg: var(--bg);
  --btn-bd: var(--line-inv);
  --btn-hover-bg: var(--red);
  --btn-hover-fg: #fff;
  --btn-hover-bd: var(--red);
}

.btn--sm {
  height: 48px;
  padding: 0 22px;
  font-size: 11.5px;
}

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* text link with sliding arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease-out), gap .3s var(--ease), color .3s var(--ease);
}

.arrow-link:hover {
  background-size: 100% 2px;
  gap: 16px;
}

.bg-ink .arrow-link {
  color: var(--red-400);
}

.arrow-link svg {
  flex: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line);
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.tag:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.tag--solid {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* ==================================================================
   6. MOTION
   ================================================================== */

/* Scroll reveal — set by JS once observed.
   Scoped to .js so a no-script browser gets the fully visible page. */
.js [data-reveal] {
  opacity: 0;
  transition:
    opacity .85s var(--ease-out) var(--rd, 0ms),
    transform .95s var(--ease-out) var(--rd, 0ms),
    clip-path .95s var(--ease-out) var(--rd, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal="up"] {
  transform: translate3d(0, 40px, 0);
}

.js [data-reveal="down"] {
  transform: translate3d(0, -28px, 0);
}

.js [data-reveal="left"] {
  transform: translate3d(-40px, 0, 0);
}

.js [data-reveal="right"] {
  transform: translate3d(40px, 0, 0);
}

.js [data-reveal="scale"] {
  transform: scale(.94);
}

.js [data-reveal="wipe"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
}

.js [data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
}

.js .is-in[data-reveal] {
  opacity: 1;
  transform: none;
}

.js .is-in[data-reveal="wipe"] {
  clip-path: inset(0 0 0 0);
}

.js .is-in[data-reveal="mask"] {
  clip-path: inset(0 0 0 0);
}

/* Line that draws itself */
.js [data-draw] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) var(--rd, 0ms);
}

.js .is-in[data-draw] {
  transform: scaleX(1);
}

/* Floating ornaments */
@keyframes float-a {

  0%,
  100% {
    transform: translate3d(0, 0, 0)
  }

  50% {
    transform: translate3d(0, -22px, 0)
  }
}

@keyframes float-b {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg)
  }

  50% {
    transform: translate3d(14px, -16px, 0) rotate(6deg)
  }
}

@keyframes float-c {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1)
  }

  50% {
    transform: translate3d(-12px, -26px, 0) scale(1.06)
  }
}

@keyframes drift {

  0%,
  100% {
    transform: translate3d(0, 0, 0)
  }

  33% {
    transform: translate3d(18px, -14px, 0)
  }

  66% {
    transform: translate3d(-10px, 10px, 0)
  }
}

.float-a {
  animation: float-a 7s ease-in-out infinite;
}

.float-b {
  animation: float-b 9s ease-in-out infinite;
}

.float-c {
  animation: float-c 11s ease-in-out infinite;
}

.drift {
  animation: drift 16s ease-in-out infinite;
}

.d-1 {
  animation-delay: -1.5s
}

.d-2 {
  animation-delay: -3s
}

.d-3 {
  animation-delay: -4.5s
}

.d-4 {
  animation-delay: -6s
}

/* Marquee */
@keyframes ticker-l {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(-50%, 0, 0)
  }
}

@keyframes ticker-r {
  from {
    transform: translate3d(-50%, 0, 0)
  }

  to {
    transform: translate3d(0, 0, 0)
  }
}

.ticker {
  overflow: hidden;
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-l 46s linear infinite;
}

.ticker--rev .ticker__track {
  animation-name: ticker-r;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-draw] {
    transform: none !important;
  }
}

/* ==================================================================
   7. NAVIGATION
   ================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}

.nav.is-stuck {
  box-shadow: 0 10px 40px -18px rgba(32, 30, 29, .42);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

.nav__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 1.8vw, 30px);
  height: var(--nav-h);
  transition: height .35s var(--ease);
}

.nav__logo {
  grid-column: 1;
  justify-self: start;
}

.nav__menu {
  grid-column: 2;
  justify-self: center;
}

.nav__cta {
  grid-column: 3;
  justify-self: end;
}

.nav__burger {
  grid-column: 3;
  justify-self: end;
}

.nav.is-stuck .nav__in {
  height: var(--nav-h-sm);
}

.nav__logo {
  display: flex;
  align-items: center;
  transition: opacity .25s var(--ease);
}

.nav__logo img {
  height: clamp(50px, 6vw, 80px);
  width: auto;
  transition: height .35s var(--ease);
}

.nav.is-stuck .nav__logo img {
  height: 50px;
}

.nav__logo:hover {
  opacity: .78;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  height: 100%;
  margin-left: 2px;
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* NB: intentionally NOT position:relative — the mega panel is absolutely
   positioned against .nav (sticky, so it is the containing block) so it can
   span the full width of the bar rather than the width of one menu item. */
.nav__item {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  position: relative;
  color: var(--ink);
  transition: color .28s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}

.nav__link:hover {
  color: var(--red);
}

.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__link .chev {
  transition: transform .3s var(--ease);
}

.nav__item:hover .chev {
  transform: rotate(180deg);
}

.nav__dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  flex: none;
}


/* active states, driven by body[data-page] */
body[data-nav="about"] .nav__link[data-nav="about"],
body[data-nav="services"] .nav__link[data-nav="services"],
body[data-nav="work"] .nav__link[data-nav="work"],
body[data-nav="clients"] .nav__link[data-nav="clients"],
body[data-nav="public"] .nav__link[data-nav="public"],
body[data-nav="contact"] .nav__link[data-nav="contact"] {
  color: var(--red);
}

body[data-nav="about"] .nav__link[data-nav="about"]::after,
body[data-nav="services"] .nav__link[data-nav="services"]::after,
body[data-nav="work"] .nav__link[data-nav="work"]::after,
body[data-nav="clients"] .nav__link[data-nav="clients"]::after,
body[data-nav="public"] .nav__link[data-nav="public"]::after,
body[data-nav="contact"] .nav__link[data-nav="contact"]::after {
  transform: scaleX(1);
}

/* Mega dropdown */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 26px 60px -26px rgba(32, 30, 29, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .34s var(--ease), transform .34s var(--ease-out), visibility .34s;
  /* the nav menu sets nowrap for its own links; panel copy must wrap again */
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
}

.nav__item:hover>.mega,
.nav__item:focus-within>.mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__in {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 40px;
  padding-block: 40px 44px;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega__link {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 26px 24px;
  border-left: 1px solid var(--line-soft);
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.mega__link:hover {
  background: var(--red-100);
  color: var(--red-700);
}

.mega__name {
  font-family: var(--f-head);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.18;
}

.mega__body {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
}

.mega__aside {
  border-left: 2px solid var(--red);
  padding: 22px 0 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-transform: none;
  letter-spacing: normal;
}

.mega__aside .label {
  color: var(--red);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.mega__pitch {
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.14;
}

.mega__aside .btn {
  margin-top: auto;
}

/* Burger + mobile drawer */
.nav__burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  position: relative;
  transition: background .2s var(--ease);
}

.nav__burger span::before,
.nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform .34s var(--ease-out);
}

.nav__burger span::before {
  top: -8px;
}

.nav__burger span::after {
  top: 8px;
}

body.drawer-open .nav__burger span {
  background: transparent;
}

body.drawer-open .nav__burger span::before {
  transform: translateY(8px) rotate(45deg);
}

body.drawer-open .nav__burger span::after {
  transform: translateY(-8px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: var(--bg);
  padding: calc(var(--nav-h-sm) + 40px) var(--gutter) 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity .4s var(--ease), transform .5s var(--ease-out), visibility .4s;
}

body.drawer-open {
  overflow: hidden;
}

body.drawer-open .drawer {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.drawer__group {
  border-top: 1px solid var(--line);
  padding-block: 18px;
}

.drawer__group>a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--f-head);
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

.drawer__group>a:hover {
  color: var(--red);
}

.drawer__sub {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}

.drawer__sub a {
  font-size: 14px;
  color: var(--muted);
  padding: 6px 0;
}

.drawer__sub a:hover {
  color: var(--red);
}

.drawer__foot {
  margin-top: 32px;
  display: grid;
  gap: 12px;
}

/* ==================================================================
   8. PAGE HEADER (shared by all inner pages)
   ================================================================== */
.pagehead {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.pagehead__crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.pagehead__crumb a:hover {
  color: var(--red);
}

.pagehead__crumb .cur {
  color: var(--red);
}

.pagehead__in {
  padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 76px);
  position: relative;
  z-index: 2;
}

.pagehead__title {
  margin-bottom: 30px;
}

.pagehead__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  border-top: 2px solid var(--ink);
  padding-top: 28px;
}

/* floating ornaments behind the header */
.pagehead__orn {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.orn-sq {
  background: var(--red);
}

.orn-ring {
  border: 2px solid var(--red);
  border-radius: 50%;
  background: none;
}

.orn-dot {
  background: var(--red);
  border-radius: 50%;
}

.orn-line {
  background: var(--line);
}

/* ==================================================================
   9. SHARED SECTION PATTERNS
   ================================================================== */
/* section intro: heading left, paragraph right */
.intro {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding-bottom: clamp(36px, 4.5vw, 60px);
}

.intro--tight {
  grid-template-columns: 1fr;
}

.headrow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.stat {
  padding: 34px 22px 32px 0;
  border-left: 1px solid var(--line-inv);
}

.stat:first-child {
  border-left: 0;
}

.stat>div {
  padding-left: 22px;
}

.stat__n {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--red-400);
  font-variant-numeric: tabular-nums;
}

.stat__l {
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .72;
  font-family: var(--f-head);
  font-weight: 600;
}



/* ==================================================================
   15. GROUP CARDS
   ================================================================== */
.gcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.gcard {
  --gc: var(--red);
  /* per-company accent, set below */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(32, 30, 29, .06), 0 12px 28px -18px rgba(32, 30, 29, .35);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease);
}

.gcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 4px rgba(32, 30, 29, .08), 0 30px 50px -24px rgba(32, 30, 29, .45);
}

.gcard--ib {
  --gc: #bd100f;
}

.gcard--mv {
  --gc: #1d5a8c;
}

.gcard--ra {
  --gc: #5b3391;
}

.gcard__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface);
}

.gcard__media picture {
  display: contents;
}

.gcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.gcard:hover .gcard__media img {
  transform: scale(1.05);
}

.gcard__body {
  display: block;
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(18px, 1.8vw, 24px);
}

/* Supplied lockups differ in aspect (3.9 / 2.2 / 2.5), so they are capped on
   BOTH axes inside a fixed-height slot — that keeps the three optically level
   instead of letting the widest one dominate. */
/* The three lockups are built differently — iBroad7 is one wide line, the other
   two stack a wordmark over a tagline. Matching their box heights would leave
   the stacked marks with tiny letterforms, so each gets its own cap chosen to
   make the WORDMARKS read at a similar size. */
.gcard__logo {
  --gl: 100%;
  display: flex;
  align-items: center;
  height: clamp(58px, 4.8vw, 74px);
  margin-bottom: 14px;
}

.gcard--ib .gcard__logo {
  --gl: 58%;
}

.gcard--mv .gcard__logo {
  --gl: 100%;
}

.gcard--ra .gcard__logo {
  --gl: 92%;
}

.gcard__logo picture {
  display: contents;
}

.gcard__logo img {
  max-height: var(--gl);
  max-width: min(100%, 240px);
  width: auto;
  object-fit: contain;
  object-position: left center;
  transition: transform .4s var(--ease);
}

.gcard:hover .gcard__logo img {
  transform: scale(1.03);
}

.gcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.gcard__tag {
  font-size: clamp(13.5px, 1.05vw, 15px);
  line-height: 1.4;
  color: var(--muted);
}

.gcard__go {
  flex: none;
  color: var(--gc);
  transition: transform .38s var(--ease-out);
}

.gcard:hover .gcard__go {
  transform: translateX(6px);
}

@media (max-width: 1024px) {
  .gcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .gcards {
    grid-template-columns: 1fr;
  }
}

/* capabilities — channel-led grid */
.caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--line-soft);
}

.cap {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 30px;
  min-height: 268px;
  transition: background .38s var(--ease);
}

.cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}

.cap:hover {
  background: var(--paper);
}

.cap:hover::before {
  transform: scaleX(1);
}

.cap__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cap__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}

.cap:hover .cap__name {
  color: var(--red);
}

.cap__go {
  flex: none;
  color: var(--red);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
}

.cap:hover .cap__go {
  opacity: 1;
  transform: none;
}

.cap__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* channel chips give the block its media-plan texture */
.cap__chips {
  list-style: none;
  margin: auto 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cap__chips li {
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}

.cap:hover .cap__chips li {
  border-color: var(--red-300);
  color: var(--red-700);
  background: var(--red-100);
}


/* logo wall */
/* Supplied client marks are colour-on-white, so the cells are white too and the
   logo's own background disappears into the tile. */
.logowall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}

.logowall__cell {
  background: var(--paper);
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: background .34s var(--ease);
}

.logowall__cell img {
  max-height: 58px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .74;
  transition: filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}

.logowall__cell:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.07);
}

/* ==================================================================
   16. FEATURED CASE STUDY CAROUSEL
   ================================================================== */
/* Full-bleed: the carousel sits outside .wrap so the card runs to both screen
   edges. The copy inside still lines up with the page grid via its padding. */
.cases {
  position: relative;
  margin-top: clamp(8px, 1.4vw, 20px);
}

.cases__viewport {
  overflow: hidden;
  background: var(--ink);
}

.cases__track {
  display: flex;
  transition: transform .72s var(--ease-out);
  will-change: transform;
}

.case {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  background: var(--ink);
  color: var(--bg);
  min-height: clamp(460px, 44vw, 600px);
  display: flex;
  align-items: center;
}

/* photography bleeds in from the right and dissolves into the ink */
.case__media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
}

.case__media picture {
  display: contents;
}

.case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stays solid across the width the copy occupies, then releases the photograph.
   The copy column ends at ~52% of the card and the image starts at 38%, so the
   fade cannot begin before roughly a third of the way into the image. */
.case__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 30%,
      color-mix(in srgb, var(--ink) 74%, transparent) 50%,
      color-mix(in srgb, var(--ink) 26%, transparent) 74%,
      transparent 94%);
}

.case__body {
  position: relative;
  z-index: 2;
  width: min(56%, 720px);
  padding-block: clamp(32px, 3.6vw, 56px);
  /* aligns with the section heading above, and always clears the prev arrow */
  padding-left: max(72px, calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding-right: clamp(24px, 2.4vw, 40px);
}

.case__title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.case__copy {
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.6;
  color: var(--muted-inv);
  max-width: 46ch;
  margin-bottom: 26px;
}

.case__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  border-top: 1px solid var(--red);
  padding-top: 18px;
  margin-bottom: 28px;
}

.case__fact b {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.case__fact span {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--muted-inv);
}

/* controls */
.cases__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: clamp(44px, 3.4vw, 54px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 10px 26px -10px rgba(32, 30, 29, .5);
  transform: translateY(-50%);
  transition: background .3s var(--ease), color .3s var(--ease),
    transform .3s var(--ease-out), opacity .3s var(--ease), visibility .3s;
}

.cases__nav--prev {
  left: clamp(14px, 1.4vw, 24px);
}

.cases__nav--next {
  right: clamp(14px, 1.4vw, 24px);
}

.cases__nav:hover {
  background: var(--red);
  color: #fff;
}

.cases__nav:hover {
  transform: translateY(-50%) scale(1.08);
}

/* first slide has no previous, last slide has no next */
.cases__nav.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cases__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 24px;
}

.cases__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  padding: 0;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background .3s var(--ease), transform .3s var(--ease-out);
}

.cases__dot:hover {
  background: color-mix(in srgb, var(--ink) 45%, transparent);
}

.cases__dot.is-on {
  background: var(--red);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .cases__track {
    transition: none;
  }
}

@media (max-width: 900px) {

  /* the photograph moves behind the whole card and the scrim turns vertical */
  .case {
    min-height: 0;
  }

  .case__media {
    inset: 0;
    width: 100%;
  }

  .case__media::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 88%, transparent) 0%,
        color-mix(in srgb, var(--ink) 93%, transparent) 45%,
        var(--ink) 100%);
  }

  /* wider side padding so the copy clears the nav arrows sitting at the edges */
  .case__body {
    width: 100%;
    padding: 30px 60px 34px;
  }

  .case__facts {
    gap: 12px;
  }

  /* the wider body padding leaves the kicker just short of one line */
  .case .eyebrow {
    letter-spacing: .18em;
    gap: 10px;
  }

  .case .eyebrow::before {
    width: 24px;
  }

  .cases__nav {
    width: 40px;
  }

  .cases__nav--prev {
    left: 10px;
  }

  .cases__nav--next {
    right: 10px;
  }
}

@media (max-width: 520px) {
  .case__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .case__fact b {
    font-size: 15px;
  }

  .case__fact span {
    font-size: 9.5px;
    letter-spacing: 0;
  }
}

/* ticker type */
.ticker__item {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -.022em;
  text-transform: uppercase;
  padding: 0 28px;
  white-space: nowrap;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}

.ticker__item::after {
  content: "·";
  margin-left: 28px;
  color: var(--red);
}

.ticker--red .ticker__item {
  color: var(--red);
}

.ticker--red .ticker__item::after {
  color: var(--ink);
}

/* big closing CTA */
.cta-final {
  position: relative;
  overflow: hidden;
}

.cta-final__in {
  position: relative;
  z-index: 2;
  padding-block: clamp(80px, 10vw, 132px);
}

.cta-final__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  border-top: 2px solid color-mix(in srgb, #fff 55%, transparent);
  padding-top: 32px;
}

.cta-final__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cta-final__orn {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border: 2px solid color-mix(in srgb, #fff 26%, transparent);
}

/* media frame */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Campaign photography runs in colour — the client's creative IS the work, and
   desaturating it undersells the case study. Only the motion is on hover. */
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}

.frame:hover img {
  transform: scale(1.04);
}

.frame__tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: var(--red);
  color: #fff;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 7px 13px;
}

.frame--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.frame--ph span {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 38%, transparent);
  max-width: 22ch;
  line-height: 1.7;
}

/* ==================================================================
   10. FOOTER
   ================================================================== */
.foot {
  background: var(--ink);
  color: var(--bg);
}

.foot__in {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 44px);
  padding-block: clamp(56px, 7vw, 84px) 44px;
}

.foot__logo {
  height: 74px;
  width: auto;
  margin-bottom: 26px;
}

.foot__blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-inv);
  max-width: 34ch;
  margin-bottom: 26px;
}

.foot__h {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-400);
  margin-bottom: 16px;
}

.foot__links {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.foot__links a {
  font-size: 13.5px;
  color: color-mix(in srgb, #f3f2f2 78%, transparent);
  width: fit-content;
  transition: color .26s var(--ease), transform .26s var(--ease);
}

.foot__links a:hover {
  color: var(--red-400);
  transform: translateX(4px);
}

.foot__addr {
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in srgb, #f3f2f2 76%, transparent);
}

.foot__contact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
}

.foot__contact a {
  color: #f3f2f2;
  transition: color .26s var(--ease);
}

.foot__contact a:hover {
  color: var(--red-400);
}

.foot__offices {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 7px;
  align-items: baseline;
}

.foot__offices dt {
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, #f3f2f2 48%, transparent);
  white-space: nowrap;
}

.foot__offices dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in srgb, #f3f2f2 76%, transparent);
}

/* offices strip under the market tiers */
.offices {
  padding-top: 22px;
}

.offices__cap {
  display: block;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

.offices__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.offices__list li {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

.offices__list li:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* the one office outside India reads differently */
.offices__list li.is-intl {
  border-color: var(--red);
  color: var(--red);
}

.foot__bar {
  border-top: 1px solid var(--line-inv);
}

.foot__bar-in {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  padding-block: 22px;
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, #f3f2f2 55%, transparent);
}

.foot__brands {
  margin-left: auto;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.foot__brands span {
  color: var(--red-400);
}

.foot__bar-in a:hover {
  color: #fff;
}

/* back to top */
.totop {
  position: fixed;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  z-index: 80;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--red);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out), visibility .35s, background .3s var(--ease);
}

.totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.totop:hover {
  background: var(--ink);
  border-color: var(--ink);
}

/* scroll progress bar */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--red);
  z-index: 100;
  width: 0;
  transition: width .1s linear;
}

/* ==================================================================
   11. RESPONSIVE
   ================================================================== */
@media (max-width: 1180px) {

  .nav__menu,
  .nav__cta {
    display: none;
  }

  .nav__burger {
    display: flex;
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat:nth-child(4) {
    border-left: 0;
  }

  .logowall {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1180px) {
  .caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .caps {
    grid-template-columns: 1fr;
  }

  .cap {
    min-height: 0;
    padding: 26px 22px 24px;
  }

  .pagehead__orn {
    display: none;
  }

  /* ornaments crowd the copy on narrow screens */
  .intro,
  .pagehead__split,
  .cta-final__split {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cta-final__btns {
    justify-content: flex-start;
  }

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

  .foot__in>div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat {
    border-left: 0;
    border-top: 1px solid var(--line-inv);
    padding: 24px 16px 22px 0;
  }

  .stat>div {
    padding-left: 0;
  }

  .logowall {
    grid-template-columns: repeat(3, 1fr);
  }

  .logowall__cell {
    height: 84px;
    padding: 12px;
  }

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

  .foot__brands {
    margin-left: 0;
  }

  .btn {
    height: 52px;
    padding: 0 22px;
    font-size: 11.5px;
  }
}

/* ==================================================================
   12. HOME
   ================================================================== */
.skip {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 200;
  background: var(--red);
  color: #fff;
  padding: 12px 20px;
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.skip:focus {
  top: 12px;
}

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  min-height: min(84vh, 760px);
}

/* Full-bleed artwork behind everything, pushed right so the collage clears the
   copy column. The overhang on the right is cropped by the section; the left
   edge sits inside the scrim, and the artwork's own field there is near-white
   so there is no visible seam. */
.hero__media {
  position: absolute;
  inset: 0 -12% 0 7%;
  z-index: 0;
  background: #f4f4f4;
}

.hero__media picture {
  display: contents;
}

/* overscanned 3% top and bottom so the parallax shift can never pull an empty
   edge into view */
.hero__media img {
  position: absolute;
  top: -3%;
  left: 0;
  width: 100%;
  height: 106%;
  object-fit: cover;
  object-position: center center;
  will-change: transform;
}

/* keeps the copy legible over the artwork as the collage creeps left on
   narrower screens; fades out well before the illustration */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 94%, transparent) 26%,
      color-mix(in srgb, var(--bg) 62%, transparent) 44%,
      color-mix(in srgb, var(--bg) 16%, transparent) 58%,
      transparent 70%);
}

.hero__in {
  position: relative;
  z-index: 3;
  padding-block: clamp(52px, 5.4vw, 84px);
}

.hero__copy {
  max-width: min(690px, 50%);
}

.hero__title {
  font-size: clamp(38px, 4.7vw, 76px);
  line-height: .9;
  letter-spacing: -.042em;
  margin-bottom: 26px;
  max-width: 15ch;
}

.hero__lede {
  margin-bottom: 32px;
  color: var(--muted);
}

.hero__orn {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* split feature (copy + media, edge to edge) */
.split-feature__in {
  display: grid;
  grid-template-columns: 1.05fr minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.split-feature__copy {
  padding: clamp(52px, 5.4vw, 76px) clamp(32px, 4vw, 64px) clamp(52px, 5.4vw, 76px) 0;
}

.split-feature__media {
  position: relative;
  min-height: 0;
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--line-inv);
  background: color-mix(in srgb, #f3f2f2 6%, transparent);
}

.split-feature__media picture {
  display: contents;
}

/* Taken out of flow so the copy column sets the section height and the portrait
   fills it edge to edge — in flow, its own aspect ratio stretched the section. */
.split-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  /* keeps the lead flag and the crowd in frame */
}

.split-feature__media span {
  color: color-mix(in srgb, #f3f2f2 42%, transparent);
}

/* client / mandate line above the case-study body copy */
.cs-client {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-400);
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-inv);
}

.cycles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 34px;
}

.cycle {
  border-top: 2px solid var(--red);
  padding: 16px 14px 18px 0;
}

.cycle b {
  display: block;
  font-family: var(--f-head);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.cycle span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-inv);
}

/* pan-india */
.panindia {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.facts {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  display: grid;
  gap: 14px;
}

.fact {
  display: flex;
  gap: 18px;
  align-items: baseline;
}

.fact b {
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--red);
  min-width: 122px;
  flex: none;
}

.fact span {
  font-size: 14px;
  line-height: 1.5;
}



/* market tiers — replaces the old city grid */
.tiers {
  border-top: 2px solid var(--ink);
}

.tiers__cap {
  display: block;
  padding: 16px 0 4px;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

.tier {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line-soft);
}

.tier--last {
  border-bottom: 0;
}

.tier__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.tier__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -.03em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}

.tier__meta {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  text-align: right;
  flex: none;
}

/* the bar length reads as reach: national widest, hyperlocal tightest */
.tier__bar {
  display: block;
  height: 4px;
  background: var(--line-soft);
  margin-bottom: 12px;
}

.tier__bar i {
  display: block;
  height: 100%;
  background: var(--red);
}

.tier__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}

.tier:hover .tier__name {
  color: var(--red);
}


/* Links parked on # until their page exists — same look, no navigation. */
a[data-soon] {
  cursor: pointer;
}


@media (max-width: 1180px) {

  /* align-items:center from the desktop rule would collapse the media to zero
     width once the axis flips to column — the image has no in-flow content. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .hero__in {
    order: 1;
    width: 100%;
  }

  .hero__copy {
    max-width: none;
  }

  .hero__media {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(260px, 46vw, 400px);
  }

  .hero__scrim {
    display: none;
  }

  .hero__orn {
    display: none;
  }

  .split-feature__in {
    grid-template-columns: 1fr;
  }

  .split-feature__copy {
    padding-inline: 0;
  }

  .split-feature__media {
    min-height: 0;
    height: 300px;
    border-left: 0;
    border-top: 1px solid var(--line-inv);
  }

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

@media (max-width: 640px) {
  .cycles {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cycle {
    padding-block: 14px;
  }

  .fact {
    flex-direction: column;
    gap: 4px;
  }

  .fact b {
    min-width: 0;
  }
}

/* ==================================================================
   13. JOURNEY
   ================================================================== */
.journey {
  --jy-col: clamp(88px, 11vw, 168px);
  --jy-gap: clamp(24px, 3.4vw, 56px);
}

.journey__track {
  position: relative;
}

/* Each chapter is its own grid row. This matters: a position:sticky grid item
   is constrained by the whole grid container, not by its row, so with one big
   grid every year pinned to the same offset and they stacked on top of each
   other. One row per chapter gives each sticky year its own bounds. */
.journey__row {
  display: grid;
  grid-template-columns: var(--jy-col) minmax(0, 1fr);
  column-gap: var(--jy-gap);
}

/* the vertical rail sits in the gutter between the year and the chapter */
.journey__rail {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: calc(var(--jy-col) + var(--jy-gap) / 2 - 1px);
  width: 2px;
  background: var(--line-soft);
}

.journey__rail-fill {
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}

/* sticky year marker */
.journey__year {
  grid-column: 1;
  position: sticky;
  top: calc(var(--nav-h-sm) + 28px);
  align-self: start;
  padding-block: 56px 0;
  /* never taller than its own chapter, so it releases cleanly at the hand-off */
  max-height: 100%;
}

.journey__year b {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: .92;
  letter-spacing: -.045em;
  color: var(--red);
}

.journey__year b i {
  font-style: normal;
}

.journey__year small {
  display: block;
  margin-top: 12px;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

/* chapter */
.chapter {
  grid-column: 2;
  position: relative;
  /* keeps the rail dot outside the card's clip */
  padding-block: 56px;
  border-bottom: 1px solid var(--line-soft);
}

.chapter--last {
  border-bottom: 0;
}

/* the marker dot on the rail */
.chapter::before {
  content: "";
  position: absolute;
  top: 66px;
  left: calc(-1 * var(--jy-gap) / 2 - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}

.chapter.is-active::before {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.45);
}

/* Each chapter is a wide 16:9 card: the photograph fills it, a black gradient
   sits over it, and the copy reads on top. The ::before spacer sets the 16:9
   floor while letting a long chapter grow taller rather than clip its text. */
.chapter__card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  display: grid;
  isolation: isolate;
  box-shadow: 0 2px 6px rgba(32, 30, 29, .08), 0 26px 48px -30px rgba(32, 30, 29, .5);
}

.chapter__card::before {
  content: "";
  grid-area: 1 / 1;
  padding-top: 56.25%;
}

.chapter__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.chapter__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 26%, transparent) 0%,
      color-mix(in srgb, var(--ink) 58%, transparent) 40%,
      color-mix(in srgb, var(--ink) 84%, transparent) 72%,
      color-mix(in srgb, var(--ink) 93%, transparent) 100%);
}

.chapter__body {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(24px, 3vw, 44px);
  max-width: 62ch;
}

/* Stays white in every state — the light red read as washed out against a
   photograph. The active chapter is still signalled by the rail dot and by
   the inactive years dimming. */
.chapter__title {
  max-width: 24ch;
  color: #fff;
}

.chapter__body .body-lg {
  color: color-mix(in srgb, var(--bg) 84%, transparent);
}

.chapter__body .tag {
  border-color: color-mix(in srgb, #fff 34%, transparent);
  color: color-mix(in srgb, var(--bg) 78%, transparent);
}

.chapter__body .tag:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
}

.chapter__body .arrow-link {
  color: var(--red-400);
}

.journey__row .journey__year b,
.journey__row .journey__year small {
  transition: opacity .45s var(--ease);
}

.journey__track.has-active .journey__row:has(.chapter:not(.is-active)) .journey__year b {
  opacity: .32;
}

.chapter__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* journey numbers */
.numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.number {
  border-top: 2px solid var(--red);
  padding: 22px 20px 26px 0;
  transition: border-color .35s var(--ease);
}

.number:hover {
  border-color: #fff;
}

.number b {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  letter-spacing: -.035em;
}

.number span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-inv);
}

@media (max-width: 960px) {
  .journey {
    --jy-col: 74px;
    --jy-gap: 22px;
  }

  .journey__year {
    padding-block: 40px 0;
  }

  .chapter {
    padding-block: 40px;
  }

  .chapter::before {
    top: 50px;
  }

  /* a phone column is too narrow to hold this copy inside 16:9 */
  .chapter__card::before {
    padding-top: 72%;
  }

  .chapter__body {
    max-width: 100%;
  }

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

/* On a phone the year column starves the chapter — an image card cannot live
   in 239px. Below 640 the year sits above its chapter and the card runs full
   width; the rail and its dot have no gutter left to occupy, so they go. */
@media (max-width: 640px) {
  .journey__row {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .journey__year {
    grid-column: 1;
    position: static;
    max-height: none;
    padding-block: 30px 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }

  .journey__year small {
    margin-top: 0;
  }

  .journey__rail {
    display: none;
  }

  .chapter {
    grid-column: 1;
    padding-block: 0 34px;
  }

  .chapter::before {
    display: none;
  }

  .chapter__card::before {
    padding-top: 96%;
  }

  .chapter__body {
    padding: 22px;
    gap: 14px;
  }

  /* the copy fills the whole card here, so the photograph drops back further */
  .chapter__card::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ink) 62%, transparent) 0%,
        color-mix(in srgb, var(--ink) 78%, transparent) 45%,
        color-mix(in srgb, var(--ink) 92%, transparent) 100%);
  }
}

@media (max-width: 560px) {
  .numbers {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   14. SHOWREEL
   ================================================================== */
.reel {
  position: relative;
  overflow: hidden;
  padding-block: clamp(80px, 9vw, 132px);
}

.reel__orn {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
}

.reel__orn--a {
  width: 340px;
  height: 340px;
  border: 1px solid color-mix(in srgb, #f3f2f2 12%, transparent);
  right: -120px;
  top: -110px;
}

.reel__orn--b {
  width: 260px;
  height: 260px;
  background: color-mix(in srgb, var(--red) 16%, transparent);
  left: -150px;
  bottom: 10%;
  filter: blur(46px);
}

/* a soft red bloom behind the frame so the stage reads as lit */
.reel__glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 52%;
  width: min(1100px, 90%);
  height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--red) 30%, transparent) 0%, transparent 68%);
  filter: blur(48px);
  pointer-events: none;
}

.reel__in {
  position: relative;
  z-index: 2;
}

.reel__head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.reel__title {
  max-width: 12ch;
}

.reel__lede {
  color: var(--muted-inv);
  max-width: 46ch;
}

/* the stage */
.reel__stage {
  position: relative;
}

.reel__player {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid color-mix(in srgb, #f3f2f2 16%, transparent);
  cursor: pointer;
}

.reel__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), opacity .5s var(--ease);
}

.reel__player:hover .reel__poster {
  transform: scale(1.035);
}

.reel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32, 30, 29, .12) 0%, rgba(32, 30, 29, .42) 100%);
  transition: background .45s var(--ease);
}

.reel__player:hover .reel__scrim {
  background: linear-gradient(180deg, rgba(32, 30, 29, .06) 0%, rgba(32, 30, 29, .34) 100%);
}

/* play button with a breathing ring */
.reel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(68px, 7vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: #fff;
  box-shadow: 0 18px 50px -12px rgba(189, 16, 15, .7);
  transition: transform .4s var(--ease-out), background .3s var(--ease);
}

.reel__play svg {
  margin-left: 4px;
  width: 30%;
  height: 30%;
}

.reel__play::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  animation: reel-pulse 2.6s ease-out infinite;
}

@keyframes reel-pulse {
  0% {
    transform: scale(.92);
    opacity: .85
  }

  70% {
    transform: scale(1.25);
    opacity: 0
  }

  100% {
    transform: scale(1.25);
    opacity: 0
  }
}

.reel__player:hover .reel__play {
  transform: translate(-50%, -50%) scale(1.09);
  background: var(--red-600);
}

.reel__label {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 13px 22px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* once playing, the video fills the stage */
.reel__player.is-playing .reel__poster,
.reel__player.is-playing .reel__scrim,
.reel__player.is-playing .reel__play,
.reel__player.is-playing .reel__label {
  opacity: 0;
  visibility: hidden;
}

.reel__stage video,
.reel__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.reel__credits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.reel__credit {
  border-top: 2px solid var(--red);
  padding: 18px 18px 0 0;
}

.reel__credit b {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.reel__credit span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-inv);
}

@media (max-width: 960px) {
  .reel__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

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

  .reel__label {
    padding: 10px 14px;
  }
}

@media (max-width: 560px) {
  .reel__credits {
    grid-template-columns: 1fr;
  }

  .reel__credit {
    padding-right: 0;
  }
}

/* ==================================================================
   17. LEADERSHIP
   ================================================================== */

/* --- the founder, set apart on ink --- */
.lead-feature__in {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 6vw, 84px);
}

.lead-feature__photo {
  position: relative;
}

.lead-feature__photo picture {
  display: contents;
}

.lead-feature__photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-inv);
}

/* a red edge anchoring the portrait to the brand */
.lead-feature__photo::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -10px;
  width: 84px;
  height: 84px;
  border-left: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
}

.lead-feature__name {
  margin-bottom: 10px;
}

.lead-feature__role {
  font-family: var(--f-head);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-400);
  margin-bottom: 22px;
}

.lead-feature__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 28px;
  border-top: 1px solid var(--line-inv);
  padding-top: 20px;
}

.lead-feature__meta b {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
}

.lead-feature__meta span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-inv);
}

/* --- the directors --- */
.leaders {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.leader {
  --lc: var(--red);
  /* company colour, set per card */
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 10px 26px -18px rgba(32, 30, 29, .32);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease);
}

.leader:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(32, 30, 29, .07), 0 26px 44px -24px rgba(32, 30, 29, .42);
}

.leader--ib {
  --lc: #bd100f;
}

.leader--mv {
  --lc: #1d5a8c;
}

.leader--ra {
  --lc: #5b3391;
}

.leader--gp {
  --lc: var(--ink);
}

.leader__photo {
  position: relative;
  aspect-ratio: 300 / 320;
  overflow: hidden;
  background: var(--surface);
}

.leader__photo picture {
  display: contents;
}

.leader__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  /* muted at rest so ten different studio backdrops read as one set */
  filter: grayscale(1) contrast(1.02);
  transition: filter .5s var(--ease), transform .8s var(--ease-out);
}

.leader:hover .leader__photo img {
  filter: grayscale(0);
  transform: scale(1.04);
}

.leader__body {
  position: relative;
  padding: 20px 20px 22px;
}

/* the company colour draws itself across the card on hover */
.leader__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--lc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

.leader:hover .leader__body::before {
  transform: scaleX(1);
}

.leader__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.14;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.leader__role {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 11px;
}

.leader__co {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lc);
}

.leader__co::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lc);
  flex: none;
}

@media (max-width: 1024px) {
  .leaders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lead-feature__in {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .lead-feature__in {
    grid-template-columns: 1fr;
  }

  .lead-feature__photo {
    max-width: 260px;
  }

  .lead-feature__meta {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .leaders {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   18. ABOUT
   ================================================================== */

/* what we bring together */
.brings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--line-soft);
}

.bring {
  background: var(--bg);
  padding: 22px 24px;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background .34s var(--ease);
}

.bring::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
  transition: transform .34s var(--ease-out);
}

.bring:hover {
  background: var(--paper);
}

.bring:hover::before {
  transform: scale(1.5);
}

.bring b {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* awards — the supplied shots already carry their red ring, so the medallion
   is the artwork rather than a border we draw */
.awards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  border-top: 2px solid var(--ink);
  padding-top: clamp(32px, 3.6vw, 52px);
}

.award {
  text-align: center;
}

.award__medal {
  width: min(100%, 240px);
  margin: 0 auto 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  transition: transform .5s var(--ease-out);
}

.award__medal picture {
  display: contents;
}

.award__medal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.award:hover .award__medal {
  transform: translateY(-6px) scale(1.03);
}

.award__kicker {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--red);
  margin-bottom: 14px;
}

.award__detail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  text-align: left;
  max-width: 340px;
  margin: 0 auto;
}

.award__year {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--red);
  flex: none;
  padding-right: 14px;
  border-right: 1px solid var(--line);
}

.award__detail b {
  display: block;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.award__detail>div>span {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* operating belief */
.belief__line {
  max-width: 18ch;
  margin-bottom: 36px;
}

.belief__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  border-top: 2px solid var(--ink);
  padding-top: 30px;
}

.belief__split .btn-row {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .brings {
    grid-template-columns: 1fr;
  }

  .awards__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .award__medal {
    width: min(100%, 200px);
  }

  .belief__split {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .belief__split .btn-row {
    justify-content: flex-start;
  }
}

/* ==================================================================
   19. OUR GROUP PAGE
   ================================================================== */
.gpage {
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
}

.gpage__row {
  --gc: var(--red);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 14px 32px -22px rgba(32, 30, 29, .34);
  /* an anchored jump should not tuck the row under the sticky nav */
  scroll-margin-top: calc(var(--nav-h-sm) + 28px);
  transition: box-shadow .45s var(--ease);
}

.gpage__row:hover {
  box-shadow: 0 2px 6px rgba(32, 30, 29, .07), 0 30px 54px -28px rgba(32, 30, 29, .44);
}

.gpage__row--ib {
  --gc: #bd100f;
}

.gpage__row--mv {
  --gc: #1d5a8c;
}

.gpage__row--ra {
  --gc: #5b3391;
}

/* alternate the image side so the page has rhythm rather than three identical rows */
.gpage__row:nth-child(even) .gpage__media {
  order: 2;
}

.gpage__media {
  align-self: stretch;
  min-height: 300px;
  overflow: hidden;
  background: var(--surface);
}

.gpage__media picture {
  display: contents;
}

.gpage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.gpage__row:hover .gpage__media img {
  transform: scale(1.04);
}

.gpage__body {
  padding: clamp(26px, 3vw, 48px) clamp(26px, 3vw, 48px) clamp(28px, 3vw, 48px) 0;
}

.gpage__row:nth-child(even) .gpage__body {
  padding-left: clamp(26px, 3vw, 48px);
  padding-right: 0;
}

.gpage__logo {
  display: flex;
  align-items: center;
  height: clamp(48px, 4vw, 62px);
  margin-bottom: 16px;
}

.gpage__logo picture {
  display: contents;
}

.gpage__logo img {
  max-height: 100%;
  max-width: min(100%, 220px);
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.gpage__row--ib .gpage__logo img {
  max-height: 62%;
}

.gpage__row--ra .gpage__logo img {
  max-height: 92%;
}

.gpage__tagline {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gc);
  margin-bottom: 12px;
}

.gpage__role {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.08;
  letter-spacing: -.028em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.gpage__desc {
  margin-bottom: 20px;
  max-width: 46ch;
}

.gpage__best {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}

.gpage__best b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
}

.gpage__cta {
  color: var(--gc);
}

@media (max-width: 900px) {
  .gpage__row {
    grid-template-columns: 1fr;
  }

  .gpage__row:nth-child(even) .gpage__media {
    order: 0;
  }

  .gpage__media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .gpage__body,
  .gpage__row:nth-child(even) .gpage__body {
    padding: 26px 24px 30px;
  }
}

/* ==================================================================
   20. ENQUIRY FORM
   ================================================================== */
.enquiry__in {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* --- progress --- */
.enq__progress {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: clamp(28px, 3vw, 40px);
}

.enq__bar {
  flex: 1;
  height: 3px;
  background: var(--line-soft);
  overflow: hidden;
}

.enq__bar i {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--red);
  transition: width .5s var(--ease-out);
}

.enq__count {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  white-space: nowrap;
}

.enq__count b {
  color: var(--red);
}

/* --- steps: all visible without JS, one at a time with it --- */
.enq__step {
  border: 0;
  margin: 0 0 clamp(28px, 3vw, 40px);
  padding: 0;
  min-width: 0;
}

.js .enq__step[hidden] {
  display: none;
}

.enq__legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
}

.enq__kicker {
  display: block;
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.enq__q {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.enq__hint {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
}

.enq__sub {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
  margin: 26px 0 12px;
}

/* --- choice chips: the native control stays, only its look changes --- */
.enq__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  position: relative;
  display: inline-flex;
}

.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.chip span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--ink);
  background: var(--paper);
  transition: border-color .25s var(--ease), background .25s var(--ease),
    color .25s var(--ease), transform .25s var(--ease-out);
}

.chip span::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.chip:hover span {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.chip input:checked+span {
  border-color: var(--red);
  background: var(--red-100);
  color: var(--red-700);
}

.chip input:checked+span::before {
  border-color: var(--red);
  background: var(--red);
  box-shadow: inset 0 0 0 3px var(--red-100);
}

.chip input:focus-visible+span {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.enq__chips--sm span {
  padding: 10px 15px;
  font-size: 13.5px;
}

.enq__chips--sm span::before {
  width: 13px;
  height: 13px;
}

/* --- text fields --- */
.enq__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.field label i {
  font-style: normal;
  color: var(--red);
}

.field label i.opt {
  color: color-mix(in srgb, var(--ink) 42%, transparent);
  font-size: 9.5px;
  letter-spacing: .12em;
}

.field input,
.field textarea {
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.field textarea {
  resize: vertical;
  min-height: 108px;
  line-height: 1.55;
}

.field input::placeholder,
.field textarea::placeholder {
  color: color-mix(in srgb, var(--ink) 38%, transparent);
}

.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-100);
}

.field__msg {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--red-600);
  min-height: 0;
}

.field.is-bad input,
.field.is-bad textarea {
  border-color: var(--red-500);
}

.enq__alert {
  background: var(--red-100);
  border-left: 3px solid var(--red);
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--red-700);
}

.enq__legal {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}

/* honeypot: off-screen but not display:none, which some bots detect */
.enq__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enq__nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.enq__nav .enq__send {
  margin-left: auto;
}

/* --- success --- */
.enq-done {
  max-width: 54ch;
}

.enq-done__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
  margin-bottom: 24px;
}

.enq-done h2 {
  margin-bottom: 16px;
}

.enq-done .lede {
  color: var(--muted);
  margin-bottom: 28px;
}

.enq-done a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- aside --- */
.enquiry__aside {
  display: grid;
  gap: 16px;
  position: sticky;
  top: calc(var(--nav-h-sm) + 24px);
}

.enq-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 24px 24px 26px;
}

.enq-card--ink {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.enq-card--ink .eyebrow {
  color: var(--red-400);
}


.enq-direct {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(20px, 1.9vw, 25px);
  letter-spacing: -.02em;
  color: var(--bg);
  margin-bottom: 6px;
  transition: color .25s var(--ease);
}

.enq-direct:hover {
  color: var(--red-400);
}

.enq-direct--sm {
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted-inv);
}

.enq-hours {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, #f3f2f2 50%, transparent);
}

.enq-offices {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.enq-offices b {
  display: inline-block;
  min-width: 96px;
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.enq-addr {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .enquiry__in {
    grid-template-columns: 1fr;
  }

  .enquiry__aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .enq__grid {
    grid-template-columns: 1fr;
  }

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

  .enq__nav .enq__send {
    margin-left: 0;
    width: 100%;
  }

  .enq__nav .btn {
    flex: 1;
  }
}

/* --- enquiry: "Other" fields, flash message, aligned offices --- */
.field--other {
  margin-top: 16px;
  max-width: 460px;
}

.enq-flash {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.55;
  animation: flash-in .4s var(--ease-out);
}

.enq-flash::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: currentColor;
  -webkit-mask: var(--flash-icon) center / 13px no-repeat;
  mask: var(--flash-icon) center / 13px no-repeat;
}

.enq-flash.is-good {
  --flash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  border-left: 3px solid var(--ok);
  background: var(--ok-100);
  color: var(--ok-700);
}

.enq-flash.is-bad {
  --flash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
  border-left: 3px solid var(--red);
  background: var(--red-100);
  color: var(--red-700);
}

@keyframes flash-in {
  from {
    opacity: 0;
    transform: translateY(-6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion: reduce) {
  .enq-flash {
    animation: none;
  }
}

/* two aligned columns — the label never pushes the value out of line */
.offices-list {
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: baseline;
}

.offices-list dt {
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  white-space: nowrap;
}

.offices-list dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

.enq-addr {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.enq-addr__label {
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  margin-bottom: 8px;
}

.enq-addr address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

/* ==================================================================
   21. MAP BAND
   ================================================================== */
.mapband {
  position: relative;
  border-top: 1px solid var(--line);
}

.mapband__frame {
  height: clamp(340px, 42vw, 480px);
  background: var(--surface);
}

.mapband__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* pulls Google's default palette toward the site's neutral ground */
  filter: grayscale(.55) contrast(1.04);
  transition: filter .5s var(--ease);
}

.mapband:hover .mapband__frame iframe {
  filter: none;
}

/* the card floats over the map so our name reads, not the map's label */
/* Google anchors its own place card to the top-left of the iframe, so ours
   sits right to avoid stacking two cards on top of each other. */
.mapband__over {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  /* map stays draggable around the card */
}

.mapcard {
  pointer-events: auto;
  width: min(100%, 380px);
  background: var(--paper);
  border-radius: 14px;
  padding: 28px 30px 30px;
  box-shadow: 0 2px 6px rgba(32, 30, 29, .08), 0 26px 54px -26px rgba(32, 30, 29, .5);
}

.mapcard__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1;
  letter-spacing: -.032em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.mapcard__role {
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}

.mapcard__addr {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.mapcard__links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {

  /* stack instead of overlaying — a card on top of a small map hides the map */
  .mapband__frame {
    height: 260px;
  }

  .mapband__over {
    position: static;
    padding-block: 0;
  }

  .mapcard {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--line);
    padding: 26px var(--gutter) 28px;
  }

  .mapband__over.wrap {
    padding-inline: 0;
  }
}

/* ==================================================================
   22. WORK INDEX
   ================================================================== */
.wgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
}

/* alternating weights: 7/5 then 5/7 — an edit, not a template */
.wcard--lg {
  grid-column: span 7;
}

.wcard--sm {
  grid-column: span 5;
}

.wgrid>.wcard:nth-child(3) {
  grid-column: span 5;
}

.wgrid>.wcard:nth-child(4) {
  grid-column: span 7;
}

.wcard {
  --wc: var(--red);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 12px 30px -20px rgba(32, 30, 29, .34);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease);
}

.wcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(32, 30, 29, .08), 0 32px 54px -26px rgba(32, 30, 29, .44);
}

.wcard--ib {
  --wc: #bd100f;
}

.wcard--mv {
  --wc: #1d5a8c;
}

.wcard--ra {
  --wc: #5b3391;
}

.wcard__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}

.wcard--sm .wcard__media {
  aspect-ratio: 4 / 3;
}

.wcard__media picture {
  display: contents;
}

.wcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}

.wcard:hover .wcard__media img {
  transform: scale(1.05);
}

.wcard__year {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 14px;
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.wcard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2vw, 28px);
  flex: 1;
}

.wcard__client {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wc);
}

.wcard__title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}

.wcard:hover .wcard__title {
  color: var(--wc);
}

.wcard__sum {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.wcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.wcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wcard__tags i {
  font-style: normal;
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink) 60%, transparent);
}

.wcard__go {
  flex: none;
  color: var(--wc);
  transition: transform .38s var(--ease-out);
}

.wcard:hover .wcard__go {
  transform: translateX(6px);
}

@media (max-width: 960px) {
  .wgrid {
    grid-template-columns: 1fr;
  }

  .wcard--lg,
  .wcard--sm,
  .wgrid>.wcard:nth-child(3),
  .wgrid>.wcard:nth-child(4) {
    grid-column: auto;
  }

  .wcard__media,
  .wcard--sm .wcard__media {
    aspect-ratio: 16 / 10;
  }
}

/* ==================================================================
   23. CASE STUDY DETAIL
   ================================================================== */
.casehead__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.casehead__tags li {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--line);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.casehero {
  background: var(--surface);
}

.casehero picture {
  display: contents;
}

.casehero img {
  width: 100%;
  height: clamp(280px, 46vw, 560px);
  object-fit: cover;
  display: block;
}

.casefacts {
  padding-block: clamp(28px, 3vw, 40px);
}

.casefacts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.casefact {
  border-top: 2px solid var(--red);
  padding: 16px 18px 0 0;
}

/* label above, value below — reads like a project spec sheet */
.casefact__l {
  display: block;
  margin-bottom: 8px;
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, #f3f2f2 52%, transparent);
}

.casefact b {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.2;
  letter-spacing: -.022em;
}

.casebody {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.caseblock {
  padding-bottom: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--line-soft);
}

.caseblock:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.caseblock__h {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.caseblock__p {
  font-size: clamp(15.5px, 1.2vw, 17px);
  line-height: 1.68;
  color: var(--muted);
  max-width: 60ch;
}

.casebody__aside {
  position: sticky;
  top: calc(var(--nav-h-sm) + 24px);
  display: grid;
  gap: 16px;
}

.casescope {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 24px;
}

.casescope ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.casescope li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.casescope li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}

.casescope--meta {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.casescope--meta .eyebrow {
  color: var(--red-400);
}

.casescope__co {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
}

.casescope__yr {
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-inv);
}

/* more work */
.morework {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.mwork {
  --wc: var(--red);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mwork--ib {
  --wc: #bd100f;
}

.mwork--mv {
  --wc: #1d5a8c;
}

.mwork--ra {
  --wc: #5b3391;
}

.mwork__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg);
}

.mwork__media picture {
  display: contents;
}

.mwork__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}

.mwork:hover .mwork__media img {
  transform: scale(1.05);
}

.mwork__client {
  font-family: var(--f-head);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wc);
}

.mwork__title {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}

.mwork:hover .mwork__title {
  color: var(--wc);
}

@media (max-width: 960px) {
  .casefacts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

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

  .casebody__aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 560px) {
  .casebody__aside {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   24. BRANDS & CLIENTS
   ================================================================== */
.thanks {
  position: relative;
  overflow: hidden;
}

.thanks__orn {
  position: absolute;
  right: -90px;
  top: -90px;
  z-index: 1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, #f3f2f2 12%, transparent);
  pointer-events: none;
}

.thanks__in {
  position: relative;
  z-index: 2;
  padding-block: clamp(56px, 7vw, 100px);
}

.thanks__line {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-transform: uppercase;
  max-width: 20ch;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.thanks__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  border-top: 1px solid var(--line-inv);
  padding-top: 28px;
}

/* longest-standing */
.longest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.longest__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  border-radius: 14px;
  padding: 26px 26px 28px;
  border-top: 3px solid var(--red);
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 12px 28px -20px rgba(32, 30, 29, .3);
  transition: transform .4s var(--ease-out);
}

.longest__item:hover {
  transform: translateY(-4px);
}

.longest__logo {
  display: flex;
  align-items: center;
  height: 46px;
  margin-bottom: 6px;
}

.longest__logo img {
  max-height: 100%;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.longest__since {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
}

.longest__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.longest__line {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* sector clusters — logos flow at their natural width rather than sitting in a
   fixed matrix, so the page reads as a list of relationships, not a grid */
.csectors {
  display: grid;
  gap: clamp(28px, 3.2vw, 48px);
  border-top: 2px solid var(--ink);
  padding-top: clamp(28px, 3vw, 44px);
}

.csector {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: start;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line-soft);
}

.csector:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.csector__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -.028em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.csector__note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40ch;
}

.csector__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.clogo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 74px;
  padding: 0 20px;
  background: var(--paper);
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.clogo img {
  max-height: 38px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  /* muted so 46 different brand palettes read as one page; true colour on hover */
  filter: grayscale(1);
  opacity: .74;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}

.clogo:hover {
  transform: translateY(-3px);
  border-color: var(--line);
  box-shadow: 0 10px 24px -14px rgba(32, 30, 29, .4);
}

.clogo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 900px) {
  .thanks__split {
    grid-template-columns: 1fr;
  }

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

  .csector {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .clogo {
    height: 64px;
    padding: 0 16px;
  }

  .clogo img {
    max-height: 32px;
    max-width: 108px;
  }
}

/* ==================================================================
   25. SERVICES
   ================================================================== */
.svcgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

.svccard {
  --sc: var(--red);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(24px, 2.4vw, 34px);
  border-top: 3px solid var(--sc);
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 12px 28px -20px rgba(32, 30, 29, .32);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease);
}

.svccard:hover {
  transform: translateY(-6px);
  box-shadow: 0 2px 6px rgba(32, 30, 29, .08), 0 30px 50px -26px rgba(32, 30, 29, .44);
}

.svccard--ib {
  --sc: #bd100f;
}

.svccard--mv {
  --sc: #1d5a8c;
}

.svccard--ra {
  --sc: #5b3391;
}

.svccard--gp {
  --sc: var(--ink);
}

.svccard--pub {
  --sc: #bd100f;
}

.svccard__name {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.1;
  letter-spacing: -.028em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}

.svccard:hover .svccard__name {
  color: var(--sc);
}

.svccard__lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.svccard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.svccard__cta {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc);
}

.svccard__go {
  color: var(--sc);
  transition: transform .35s var(--ease-out);
}

.svccard:hover .svccard__go {
  transform: translateX(6px);
}

/* per-service accent on the page header rule */
.svchead--ib {
  --svc: #bd100f;
}

.svchead--mv {
  --svc: #1d5a8c;
}

.svchead--ra {
  --svc: #5b3391;
}

.svchead--gp {
  --svc: var(--ink);
}

.svchead .eyebrow {
  color: var(--svc, var(--red));
}

/* ---- the interactive module ---- */
.svcmod {
  --svc: var(--red);
}

.svcmod--ib {
  --svc: #bd100f;
}

.svcmod--mv {
  --svc: #1d5a8c;
}

.svcmod--ra {
  --svc: #5b3391;
}

.svcmod--gp {
  --svc: var(--ink);
}

/* capability list */
.svccaps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--line-soft);
}

.svccaps li {
  background: var(--bg);
  padding: 20px 22px;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  transition: background .3s var(--ease);
}

.svccaps li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

.svccaps li:hover {
  background: var(--paper);
}

@media (max-width: 1024px) {
  .svcgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .svcgrid {
    grid-template-columns: 1fr;
  }

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

/* ==================================================================
   26. POLITICAL & PUBLIC COMMUNICATION
   ================================================================== */
.polcycles {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 5vw, 76px);
}

.polcycles__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
  z-index: 1;
}

.polcycle {
  padding: 6px 30px 6px 0;
  border-left: 1px solid color-mix(in srgb, #fff 42%, transparent);
}

.polcycle:first-child {
  border-left: 0;
  padding-left: 0;
}

.polcycle:not(:first-child) {
  padding-left: 30px;
}

.polcycle__year {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(38px, 4.2vw, 62px);
  line-height: .94;
  letter-spacing: -.04em;
}

.polcycle__label {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 12px;
  color: color-mix(in srgb, #fff 82%, transparent);
}

.polcycle__text {
  font-size: 14.5px;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 34ch;
}

/* the eight non-negotiables */
.demands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--line-soft);
}

.demands li {
  background: var(--paper);
  padding: 24px 22px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .3s var(--ease);
}

.demands li:hover {
  background: var(--bg);
}

.demands__n {
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--red);
}

.demands__t {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* language grid */
.langs {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}

.langs li {
  background: var(--bg);
  padding: 18px 16px;
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s var(--ease), color .3s var(--ease);
}

.langs li:hover {
  background: var(--red);
  color: #fff;
}

.langs__n {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.langs__r {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.langs li:hover .langs__r {
  color: color-mix(in srgb, #fff 78%, transparent);
}

/* operating model */
.opmodel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}

.opmodel__i {
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(22px, 2.2vw, 32px);
  border-left: 3px solid var(--red);
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 14px 32px -22px rgba(32, 30, 29, .34);
}

.opmodel__t {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin-bottom: 10px;
}

.opmodel__d {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .demands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .langs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .polcycles__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .polcycle,
  .polcycle:not(:first-child) {
    border-left: 0;
    padding: 0;
  }

  .polcycle:not(:first-child) {
    border-top: 1px solid color-mix(in srgb, #fff 42%, transparent);
    padding-top: 26px;
  }

  .langs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

@media (max-width: 520px) {
  .demands {
    grid-template-columns: 1fr;
  }

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

/* ==================================================================
   27. WHY iBROAD MEDIA
   ================================================================== */
.statband {
  padding-block: clamp(34px, 3.4vw, 52px);
}

.statband__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
}

.statband__row li {
  padding-right: 24px;
  border-left: 1px solid var(--line-inv);
  padding-left: 26px;
}

.statband__row li:first-child {
  border-left: 0;
  padding-left: 0;
}

.statband__row b {
  display: block;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: .96;
  letter-spacing: -.04em;
}

.statband__row span {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-inv);
}

.whygrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.whycard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(22px, 2.2vw, 30px);
  border-top: 3px solid var(--red);
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 14px 32px -22px rgba(32, 30, 29, .34);
}

.whycard__k {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.whycard__hl {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.14;
  letter-spacing: -.028em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.whycard__hl em {
  font-style: normal;
  color: var(--red);
}

.whycard__d {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: auto;
}

/* what goes wrong -> how we run it */

/* ==================================================================
   28. CAREERS
   ================================================================== */
.lifegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.lifecard {
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(22px, 2.2vw, 32px);
  border-top: 3px solid var(--ink);
  box-shadow: 0 1px 2px rgba(32, 30, 29, .05), 0 14px 32px -22px rgba(32, 30, 29, .34);
}

.lifecard__hl {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.14;
  letter-spacing: -.028em;
  margin-bottom: 12px;
  text-wrap: balance;
}

.lifecard__hl em {
  font-style: normal;
  color: var(--red);
}

.lifecard__d {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Borders on the cells, not a background behind the gaps — an odd item count
   would otherwise leave a grey phantom cell at the end of the last row. */
.teamlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 1px solid var(--line-soft);
}

.teamlist li {
  background: var(--paper);
  padding: 20px 22px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s var(--ease);
}

.teamlist li:hover {
  background: var(--bg);
}

.teamlist__n {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.teamlist__d {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.teamlist__note {
  margin-top: 26px;
  font-size: 14.5px;
  color: var(--muted);
}

/* offices in the aside */
.loclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.loclist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.5;
}

.loclist b {
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  min-width: 84px;
}

.loclist span {
  color: var(--muted);
}

.cvhint {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- the upload cards ---- */
.cvrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-bottom: 22px;
}

.cvdrop {
  position: relative;
}

/* The input stays in the DOM and keyboard-reachable; the label is the surface. */
.cvdrop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cvdrop__face {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 148px;
  padding: 22px 22px 24px;
  cursor: pointer;
  background: var(--paper);
  border: 2px dashed var(--line);
  border-radius: 12px;
  transition: border-color .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}

.cvdrop__face:hover {
  border-color: var(--red);
  background: var(--bg);
}

.cvdrop input[type="file"]:focus-visible+.cvdrop__face {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.cvdrop.is-over .cvdrop__face {
  border-color: var(--red);
  border-style: solid;
  background: color-mix(in srgb, var(--red) 5%, var(--paper));
}

.cvdrop.has-file .cvdrop__face {
  border-style: solid;
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, var(--paper));
}

.cvdrop.is-bad .cvdrop__face {
  border-style: solid;
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 5%, var(--paper));
}

.cvdrop__icon {
  color: var(--red);
}

.cvdrop.has-file .cvdrop__icon {
  color: var(--ok);
}

.cvdrop__t {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.cvdrop__t i {
  font-style: normal;
  color: var(--red);
}

.cvdrop__t i.opt {
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  margin-left: 4px;
}

.cvdrop__h {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.cvdrop.has-file .cvdrop__h {
  color: var(--ink);
  font-weight: 600;
}

.cvdrop__clear {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line-soft);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.cvdrop__clear:hover {
  color: var(--red);
  border-color: var(--red);
}

.cvdrop .field__msg {
  display: block;
  margin-top: 8px;
}

.cvnote {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 1024px) {
  .statband__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 26px;
  }

  .statband__row li:nth-child(4) {
    border-left: 0;
    padding-left: 0;
  }

  .whygrid,
  .lifegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 780px) {
  .statband__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .statband__row li:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .statband__row li:nth-child(even) {
    padding-left: 20px;
  }

  .whygrid,
  .lifegrid {
    grid-template-columns: 1fr;
  }

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

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

/* ==================================================================
   29. ABOUT — FULL-BLEED SCALE BAND
   ================================================================== */
/* The image spans the full width at its own 1672x941 aspect, so nothing is
   squeezed into a column. A black gradient rides over it from the left and
   fades out to the right, keeping the copy legible while the billboard side
   of the photograph stays clear.

   The three layers stack with positive z-index on purpose: a negative-index
   picture sat behind the section's own ink background and never painted. */
.scaleband {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(56.28vw, 840px);
  /* the image's own aspect ratio */
}

.scaleband__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.scaleband__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  /* hold the billboard in frame */
}

.scaleband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 30%,
      color-mix(in srgb, var(--ink) 92%, transparent) 44%,
      color-mix(in srgb, var(--ink) 62%, transparent) 62%,
      color-mix(in srgb, var(--ink) 22%, transparent) 82%,
      transparent 100%);
}

.scaleband__in {
  position: relative;
  z-index: 2;
  padding-block: clamp(56px, 6vw, 104px);
}

.scaleband__copy {
  max-width: 60ch;
}

@media (max-width: 1024px) {

  /* No room to clear a side of the frame, so the photograph sits above the copy
     as a full-width band at its own aspect, and the gradient runs downward into
     solid ink where the text begins. */
  .scaleband {
    min-height: 0;
    display: block;
  }

  .scaleband__bg {
    inset: 0 0 auto 0;
    height: 56.28vw;
  }

  .scaleband__bg img {
    height: 100%;
    object-position: 64% center;
  }

  .scaleband::after {
    background: linear-gradient(180deg,
        transparent 0,
        color-mix(in srgb, var(--ink) 22%, transparent) calc(56.28vw * .55),
        color-mix(in srgb, var(--ink) 70%, transparent) calc(56.28vw * .88),
        var(--ink) 56.28vw);
  }

  .scaleband__in {
    padding-top: calc(56.28vw + clamp(26px, 5vw, 44px));
  }
}

/* ==================================================================
   30. FULL-BLEED IMAGE BAND  (service detail + public communication)
   ================================================================== */
/* Same construction as the About page's scale band: the image spans the full
   width at its own aspect (--band-h carries that ratio per image, so nothing
   is scaled or squeezed), and a black gradient merges into it from the left
   so the copy stays readable while the right of the frame stays clear.

   Positive z-index throughout — a negative-index picture sits behind the
   section's own ink background and never paints. */
.imgband {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: min(var(--band-h, 55vw), 820px);
}

.imgband__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.imgband__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% center;
}

.imgband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
      var(--ink) 0%,
      var(--ink) 30%,
      color-mix(in srgb, var(--ink) 92%, transparent) 44%,
      color-mix(in srgb, var(--ink) 62%, transparent) 62%,
      color-mix(in srgb, var(--ink) 22%, transparent) 82%,
      transparent 100%);
}

.imgband__in {
  position: relative;
  z-index: 2;
  padding-block: clamp(52px, 6vw, 96px);
}

/* Sized against the viewport, not in ch — a ch-based column is set by the
   container's 16px font and collapses to a few words at highlight sizes. The
   56% ceiling keeps the copy inside the strong half of the gradient. */
.imgband__copy {
  max-width: min(720px, 56%);
}

/* This band is the page's highlight, so the type runs a step larger than a
   normal section intro and the note reads as a lede rather than body copy. */
.imgband__copy .eyebrow {
  font-size: 11.5px;
  letter-spacing: .24em;
  margin-bottom: 22px;
}

.imgband__copy h2 {
  font-size: clamp(30px, 4.5vw, 66px);
  line-height: .98;
  letter-spacing: -.038em;
}

.imgband__copy .lede {
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--bg) 86%, transparent);
}

.imgband__copy .measure {
  max-width: 56ch;
}

@media (max-width: 1024px) {
  .imgband__copy {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .imgband__copy .lede {
    font-size: clamp(16.5px, 4.2vw, 19px);
  }
}

@media (max-width: 1024px) {

  /* No room to clear a side of the frame, so the photograph sits above the copy
     as a full-width band at its own aspect, fading downward into solid ink. */
  .imgband {
    min-height: 0;
    display: block;
  }

  .imgband__bg {
    inset: 0 0 auto 0;
    height: var(--band-h, 55vw);
  }

  .imgband__bg img {
    height: 100%;
    object-position: 66% center;
  }

  .imgband::after {
    background: linear-gradient(180deg,
        transparent 0,
        color-mix(in srgb, var(--ink) 22%, transparent) calc(var(--band-h, 55vw) * .55),
        color-mix(in srgb, var(--ink) 70%, transparent) calc(var(--band-h, 55vw) * .88),
        var(--ink) var(--band-h, 55vw));
  }

  .imgband__in {
    padding-top: calc(var(--band-h, 55vw) + clamp(24px, 5vw, 42px));
  }
}

/* ==================================================================
   31. LEGAL DOCUMENTS + SITEMAP PAGE
   ================================================================== */
/* Same page header component as every other page, just turned down: these are
   documents, not pitches, so the display title steps back to a plain size. */
.pagehead--plain {
  padding-block: clamp(38px, 4vw, 62px) clamp(30px, 3vw, 46px);
}

.pagehead--plain .pagehead__title {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -.03em;
}

.pagehead--plain .pagehead__split {
  grid-template-columns: 1fr;
}

.pagehead--plain .lede {
  font-size: clamp(16px, 1.25vw, 18px);
}

.legal__in {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/* contents rail */
.legal__toc {
  position: sticky;
  top: calc(var(--nav-h-sm) + 24px);
}

.legal__toc-h {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 4px;
}

.legal__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.legal__toc li {
  border-bottom: 1px solid var(--line-soft);
}

.legal__toc a {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted);
  transition: color .25s var(--ease);
}

.legal__toc a span {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--red);
  flex: none;
  padding-top: 2px;
}

.legal__toc a:hover {
  color: var(--ink);
}

.legal__dates {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}

.legal__dates b {
  color: var(--ink);
  font-weight: 600;
}

/* the document itself */
.legal__doc {
  max-width: 76ch;
}

.legal__sec {
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--nav-h-sm) + 24px);
}

.legal__sec:last-of-type {
  border-bottom: 0;
}

.legal__h {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--f-head);
  font-weight: 800;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.15;
  letter-spacing: -.022em;
  margin-bottom: 18px;
}

.legal__n {
  font-size: 12px;
  color: var(--red);
  flex: none;
}

.legal__p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--muted);
  margin-bottom: 14px;
}

.legal__p:last-child {
  margin-bottom: 0;
}

.legal__p b {
  color: var(--ink);
  font-weight: 600;
}

.legal__ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.legal__ul li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted);
}

.legal__ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

.legal__dl {
  margin: 0 0 14px;
  display: grid;
  gap: 14px;
}

.legal__dl dt {
  font-family: var(--f-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 5px;
}

.legal__dl dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted);
}

.legal__note {
  background: var(--paper);
  border-left: 3px solid var(--red);
  padding: 18px 22px 20px;
  margin-bottom: 16px;
  border-radius: 0 10px 10px 0;
}

.legal__note-h {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

.legal__note p:last-child {
  font-size: 15px;
  line-height: 1.68;
}

.legal__foot {
  margin-top: 34px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}

/* sitemap page */
.smap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.smap__h {
  font-family: var(--f-head);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 6px;
}

.smap__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.smap__list li {
  border-bottom: 1px solid var(--line-soft);
}

.smap__list a {
  display: block;
  padding: 11px 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}

.smap__list a:hover {
  color: var(--red);
  padding-left: 6px;
}

.smap__note {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .legal__in {
    grid-template-columns: 1fr;
  }

  .legal__toc {
    position: static;
  }

  .legal__toc ol {
    columns: 2;
    column-gap: 32px;
  }

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

@media (max-width: 620px) {
  .legal__toc ol {
    columns: 1;
  }

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