/* IDÉE Agency — 2026 site
   Tokens per design handoff: bg #f5f4f2 / ink #1d1c1b / accent #d12731 */

:root {
  --bg: #ffffff;        /* page ground */
  --ink: #1d1c1b;
  --red: #d12731;
  --red-dark: #b21e27;
  --muted: #5c5854;
  --meta: #8a8681;
  --hair: #dcdad6;
  --tile: #e8e6e2;
  --photo-ground: #141312; /* team portrait backdrop */
  --band-dark: #262524;   /* dark band ground - --ink lifted 4% toward white */
  --bg-2: #f2f1ef;      /* work section only — one step down from --bg */
  --vm-bg: #f4f2ee;     /* vision & mission ground - warmer than --bg-2 */
  --footer-link: #c9c6c2;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --max: 1440px;
  --pad: 28px;
}

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

html { background: var(--bg); scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red); }
button, input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--red); color: #fff; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); width: 100%; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.kicker { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; letter-spacing: 0.08em; color: var(--red); margin-bottom: 18px; }
.hairline-top { border-top: 1px solid var(--hair); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- keyframes ---------- */
@keyframes idRise    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popTop    { from { opacity: 0; transform: translateY(-90px); } to { opacity: 1; transform: none; } }
@keyframes popBottom { from { opacity: 0; transform: translateY(80px); }  to { opacity: 1; transform: none; } }
@keyframes popLeft   { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: none; } }
@keyframes popRight  { from { opacity: 0; transform: translateX(75px); }  to { opacity: 1; transform: none; } }
@keyframes btnReveal { from { clip-path: inset(0 100% 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes splashPop     { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes splashRiseI   { from { opacity: 0; transform: translateY(78px); }  to { opacity: 1; transform: none; } }
@keyframes splashRiseD   { from { opacity: 0; transform: translateY(106px); } to { opacity: 1; transform: none; } }
@keyframes splashRiseDot { from { opacity: 0; transform: translateY(50px); }  to { opacity: 0.9; transform: none; } }
@keyframes splashSlide   { from { transform: translateY(0); } to { transform: translateY(101%); visibility: hidden; } }
@keyframes splashCounter { from { transform: translateY(0); } to { transform: translateY(-101vh); } }
@keyframes markExit      { from { transform: translateY(0); } to { transform: translateY(-46vh); } }
@keyframes eeFade { 0% { opacity: 1; max-width: 1.1em; } 55% { opacity: 0; max-width: 1.1em; } 100% { opacity: 0; max-width: 0; } }

/* ---------- intro splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100;
  background: var(--red); overflow: hidden; pointer-events: none;
  animation: splashSlide 0.85s 1.5s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
.splash__inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: splashCounter 0.85s 1.5s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
/* The panel drops away while the mark rides up out of it: .splash__inner
   cancels the panel's own travel, so markExit on each letter is what actually
   lifts them. It accelerates, so they clear the shrinking panel rather than
   drifting. */
.splash__mark {
  color: #fff; font-weight: 700; font-size: clamp(80px, 16vw, 190px);
  letter-spacing: 0.01em;
}
/* The D leads: it starts first and travels fastest, so it settles at ~0.70s.
   The I follows at ~1.00s and the full stop lands last at ~1.06s — three beats
   rather than one block, all clear of the 1.5s panel exit. */
/* Each letter carries two animations: the rise in, then markExit on the way
   out. The exit leaves in the same order the letters arrived - D, then I, then
   the full stop - and all three are clear before the panel finishes at 2.35s. */
.splash__mark span { display: inline-block; }
.splash__mark .s-d {
  animation: splashRiseD 0.58s 0.12s cubic-bezier(0.16, 0.86, 0.24, 1) both,
             markExit 0.62s 1.46s cubic-bezier(0.55, 0, 0.85, 0.25) forwards;
}
.splash__mark .s-i {
  animation: splashRiseI 0.74s 0.26s cubic-bezier(0.22, 0.82, 0.28, 1) both,
             markExit 0.62s 1.58s cubic-bezier(0.55, 0, 0.85, 0.25) forwards;
}
.splash__mark .s-dot {
  animation: splashRiseDot 0.52s 0.54s cubic-bezier(0.3, 1.15, 0.4, 1) both,
             markExit 0.62s 1.70s cubic-bezier(0.55, 0, 0.85, 0.25) forwards;
}
body.no-splash .splash { display: none; }

/* ---------- header ---------- */
/* Opaque, not translucent. A 94%-white bar with a blur behind it picks up
   whatever is scrolling underneath - so sitting at the top of a white section
   with the grey projects band still passing behind, the bar reads grey. Solid
   white removes that entirely; the per-band rules below recolour it. */
.header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
}
/* no backdrop blur: the bar is opaque, and a blur layer only invited the
   band underneath to tint it */
.header, body[data-nav] .header { -webkit-backdrop-filter: none; backdrop-filter: none; }
.header__bar {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
}
.logo {
  background: none; border: 0; cursor: pointer; padding: 0;
  font-weight: 700; font-size: 34px; letter-spacing: 0.02em; color: var(--ink);
  transform: translateZ(0); backface-visibility: hidden; line-height: 1;
}
.logo:hover { color: var(--red); }
.logo span { display: inline-block; }
.logo .l-i  { animation: popBottom 0.6s 2.00s var(--ease) both; }
.logo .l-d  { animation: popTop    0.6s 2.15s var(--ease) both; }
.logo .l-e  { overflow: hidden; vertical-align: bottom; animation: popLeft  0.6s 2.25s var(--ease) both, eeFade 1.6s 3.9s ease-in-out forwards; }
.logo .l-ea { overflow: hidden; vertical-align: bottom; animation: popRight 0.6s 2.35s var(--ease) both, eeFade 1.6s 3.9s ease-in-out forwards; }
.logo .l-dot { color: var(--red); animation: popBottom 0.55s 2.55s var(--ease) both; }

.nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
.nav__link {
  background: none; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--ink); padding: 8px 0;
  transition: color 0.2s;
}
.nav__link:hover { color: var(--red); }
.nav__cta {
  background: var(--ink); border: 0; cursor: pointer;
  font-size: 13px; font-weight: 500; color: #fff;
  padding: 10px 20px; border-radius: 999px; transition: background 0.2s;
}
.nav__cta:hover { background: var(--red); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(64px, 10vw, 140px); padding-bottom: clamp(48px, 7vw, 96px); }
.hero h1 {
  font-weight: 500; font-size: clamp(24px, 3.6vw, 44px);
  line-height: 1.3; letter-spacing: -0.01em; max-width: 1080px;
}
.hero__row { display: flex; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }
.btn-red {
  background: var(--red); color: #fff; border: 0;
  font-size: 13px; font-weight: 600; padding: 14px 26px;
  border-radius: 999px; cursor: pointer; min-height: 46px;
  transition: background 0.2s;
  animation: btnReveal 0.7s 2.7s var(--ease) both;
}
.btn-red:hover { background: var(--red-dark); color: #fff; }
.hero__meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta);
  animation: idRise 0.6s 2.9s var(--ease) both;
}
.scroll-btn {
  margin-left: auto; width: 46px; height: 46px; border-radius: 999px;
  background: none; border: 1.5px solid var(--red); color: var(--red);
  font-size: 22px; font-weight: 400; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
  animation: idRise 0.6s 3.0s var(--ease) both;
  flex: 0 0 auto;
}
.scroll-btn:hover { background: var(--red); color: #fff; }

/* ---------- work: one row per project ---------- */
.work { padding-bottom: clamp(56px, 8vw, 110px); }

.prow {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom: 1px solid var(--hair);
  align-items: start;
}
.prow:first-child { padding-top: clamp(8px, 1vw, 16px); }

.prow__meta { position: sticky; top: 92px; display: flex; flex-direction: column; }
.prow__no {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta); margin-bottom: 14px;
}
.prow__name {
  font-weight: 700; font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px;
  transition: color 0.25s;
}
.prow:hover .prow__name { color: var(--red); }
.prow__svc { font-size: 13px; line-height: 1.6; color: var(--muted); }
.prow__city {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta); margin-top: 10px;
  text-transform: uppercase;
}
.prow__btn {
  align-self: flex-start; margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); background: none;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 11px 22px; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.prow__btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.prow__btn span { transition: transform 0.25s var(--ease); }
.prow__btn:hover span { transform: translateX(3px); }

.prow__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
/* project imagery is authored as 16:9 website tiles, so the row boxes match
   that rather than cropping a quarter off each side */
.shot {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--tile); overflow: hidden; display: block;
}
.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.prow:hover .shot img { transform: scale(1.02); }
.shot__fallback {
  position: absolute; inset: 0; display: none;
  align-items: flex-end; padding: 14px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.08em; color: var(--meta);
  background: var(--tile);
}
.shot.is-broken .shot__fallback { display: flex; }

/* a clip sits on its own poster and only fades in once it is actually
   playing, so a slow connection or a refused autoplay just shows the still */
.shot__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.is-playing > .shot__vid { opacity: 1; }
.pp__gallery .shot-full.has-clip { position: relative; aspect-ratio: 16 / 9; }
.pp__gallery .shot-full.has-clip img { position: absolute; inset: 0; height: 100%; object-fit: cover; }

.work__archive { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.work__archive a {
  font-size: 13px; font-weight: 600;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
.work__archive a:hover { border-color: var(--red); }

@media (max-width: 860px) {
  .prow { grid-template-columns: 1fr; gap: 22px; }
  .prow__meta { position: static; }
  .prow__btn { margin-top: 18px; }
}

/* ---------- project page ---------- */
.pp { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px); }
.pp__back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta);
  margin-bottom: clamp(28px, 4vw, 48px);
}
.pp__back:hover { color: var(--red); }
.pp__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 4vw, 64px); align-items: start;
  padding-bottom: clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--hair);
}
.pp__title {
  font-weight: 700; font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.08; letter-spacing: -0.02em;
}
.pp__facts { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.pp__fact { display: flex; gap: 16px; align-items: baseline; }
.pp__fact dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta);
  min-width: 74px; flex: 0 0 auto;
}
.pp__fact dd { font-size: 14px; line-height: 1.6; }
.pp__lede {
  font-size: clamp(19px, 2vw, 28px); font-weight: 500; line-height: 1.26;
  letter-spacing: -0.012em;
  margin: clamp(12px, 1.4vw, 20px) 0 clamp(16px, 1.8vw, 24px);
  max-width: 30ch;
}
.pp__blurb {
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75;
  color: var(--muted); max-width: 620px; margin-top: 6px;
}
/* the gallery breaks out of the .wrap gutter and runs the full width of the
   screen — body has overflow-x: hidden, so the 100vw box can't start a
   sideways scroll */
.pp__gallery {
  display: flex; flex-direction: column; gap: clamp(8px, 1.2vw, 18px);
  margin-top: clamp(32px, 4vw, 56px);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.pp__gallery figure { background: var(--tile); min-height: 180px; }
.pp__gallery img { width: 100%; height: auto; display: block; }
.pp__next {
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--hair);
  padding: clamp(36px, 5vw, 64px) 0 0;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
}
.pp__next-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta);
}
.pp__next-name {
  font-weight: 700; font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: -0.01em;
}

/* ---------- studio ---------- */
.studio__grid {
  padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 100px);
  display: grid;
  grid-template-columns: minmax(min(100%, 300px), 400px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}
@media (max-width: 900px) { .studio__grid { grid-template-columns: 1fr; } }
.studio__statement {
  font-weight: 600; font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.35; max-width: 520px;
}
.svc-row {
  display: block; padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}
.svc-row__head { transition: transform 0.35s var(--ease); }
.svc-row:hover .svc-row__head { transform: translateX(-14px); }
.svc-row.is-open .svc-row__head { transform: none; }
.svc-row .svc-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--meta); min-width: 28px;
}
.svc-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; transition: color 0.25s; }
.svc-row:hover .svc-title { color: var(--red); }
.svc-list { font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ---------- team ----------
   The band fills the viewport so the dark ground reads as a full page once the
   header flips to it — the roster is centred in that height rather than pinned
   to the top. svh keeps it honest on mobile, where the browser chrome moves. */
#team {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.team__inner { padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 100px); }
/* one row, however many people are in content.js: auto-flow column gives each
   member an equal share of the width rather than wrapping at a fixed minimum */
.team__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 30px);
}
@media (max-width: 860px) {
  .team__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }
}
.member { display: flex; flex-direction: column; gap: 12px; }
.member__meta { min-width: 0; }
/* every portrait sits on the same charcoal ground and takes the same grade, so
   a studio shot and a cut-out read as one set rather than five sources */
.member__photo {
  position: relative; width: 100%; aspect-ratio: 25 / 48;
  background: var(--photo-ground); overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px;
}
/* full brightness throughout; the portrait grows inside its frame on hover, so
   the row never reflows around it */
.member__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1);
  transition: transform 0.65s var(--ease);
}
.member:hover .member__photo img,
.member:focus-within .member__photo img { transform: scale(1.07); }
/* a small red dot in the corner; it springs up when the portrait is hovered */
.member__photo::before {
  content: '';
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  transform: translateY(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.32, 0.5, 1);
}
.member:hover .member__photo::before,
.member:focus-within .member__photo::before { transform: translateY(-16px); }
@media (prefers-reduced-motion: reduce) {
  .member__photo::before { transition: none; }
  .member:hover .member__photo::before { transform: none; }
}
/* the bottom fifth falls away to black, so the frame sits into the band
   rather than ending on a hard edge */
.member__photo::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 20%;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .member__photo img { transition: filter 0.4s var(--ease); }
  .member:hover .member__photo img { transform: none; }
}
/* the role now sits beside the portrait, so the label inside an empty tile
   would just repeat it */
.member__slot { display: none; }
.member__name {
  font-weight: 700; font-size: 14px; color: var(--bg);
  transition: color 0.25s var(--ease);
}
.member:hover .member__name,
.member:focus-within .member__name { color: var(--red); }
.member__role {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.06em; color: var(--meta); margin-top: 4px;
}

/* ---------- faq ---------- */
.faq__inner { max-width: 900px; margin: 0 auto; padding: clamp(56px, 8vw, 100px) var(--pad); }
.faq__inner h2:not(.display) { font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); margin-bottom: 28px; }
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q {
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 0; color: var(--ink); transition: color 0.2s;
}
.faq__q:hover { color: var(--red); }
.faq__q span:first-child { font-size: 15px; font-weight: 600; }
.faq__mark {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px; color: var(--red);
}
.faq__a {
  padding: 0 0 22px; font-size: 14px; line-height: 1.8;
  color: var(--muted); max-width: 640px;
  animation: idRise 0.3s both;
}
.faq__a[hidden] { display: none; }

/* ---------- cta ---------- */
.cta { background: var(--ink); color: var(--bg); }
.cta__inner { padding-top: clamp(72px, 11vw, 150px); padding-bottom: clamp(72px, 11vw, 150px); text-align: center; }
.cta h2 {
  font-weight: 700; font-size: clamp(38px, 8vw, 96px);
  letter-spacing: -0.02em; line-height: 1.02; margin-bottom: 36px;
}
.cta h2 span { color: var(--red); }
.cta__btn {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 14px; font-weight: 600; padding: 16px 34px; border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.cta__btn:hover { background: var(--bg); color: var(--ink); }
.cta__meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta); margin-top: 32px;
}
.cta__meta a { color: var(--meta); }
.cta__meta a:hover { color: var(--red); }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--bg); border-top: 1px solid rgba(255, 255, 255, 0.15); }
.footer__inner {
  max-width: var(--max); margin: 0 auto; padding: 28px var(--pad);
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  align-items: center; justify-content: space-between;
}
.footer__logo { font-weight: 700; font-size: 15px; }
.footer__logo span { color: var(--red); }
.footer__nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__nav button {
  background: none; border: 0; cursor: pointer;
  font-size: 12px; color: var(--footer-link); padding: 6px 0; transition: color 0.2s;
}
.footer__nav button:hover { color: var(--red); }
.footer__legal {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.06em; color: var(--meta);
}

@media (max-width: 560px) {
  .hero__row { gap: 14px; }
  .scroll-btn { margin-left: auto; }
  .logo { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- inner pages: no splash, static logo ---------- */
body.static-head .logo span { animation: none !important; opacity: 1; transform: none; max-width: none; }
body.static-head .logo .l-e,
body.static-head .logo .l-ea { display: none; }
body.static-head .btn-red,
body.static-head .hero__meta,
body.static-head .scroll-btn { animation: none !important; opacity: 1; clip-path: none; }

/* ---------- the company we keep ----------
   Four rows, each a track carrying its logos twice over and sliding by exactly
   one copy, so the loop closes on itself with no seam. Odd rows run the other
   way. Rows are full-bleed, so the wall reads as traffic across the screen
   rather than a block of marks in a column. */
/* full-height on desktop: the wall fills the screen, so the header is over
   white ground the whole time you are in this section rather than carrying the
   grey of the band above it */
#clients {
  overflow: hidden; background: var(--bg);
  min-height: 100svh; display: grid; align-content: center;
}
.clients { padding-top: clamp(48px, 6vw, 76px); padding-bottom: clamp(48px, 6vw, 76px); }

.crow {
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.crow + .crow { margin-top: clamp(18px, 2.4vw, 40px); }
.crow__track {
  display: flex; align-items: center; width: max-content;
  animation: crow-run var(--dur, 60s) linear infinite;
  will-change: transform;
}
.crow--rev .crow__track { animation-direction: reverse; }
/* each set carries its own trailing gap, so the space between the two copies
   is the same as the space inside them and -50% lands on an exact repeat */
.crow__set {
  display: flex; align-items: center;
  gap: clamp(40px, 5.5vw, 96px);
  padding-right: clamp(40px, 5.5vw, 96px);
}
@keyframes crow-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* the rows never stop - the wall should read as constant traffic, so no
   hover pause and no pausing when only part of the section is on screen */
.crow__track { animation-play-state: running !important; }

.client { flex: 0 0 auto; width: clamp(112px, 11.5vw, 168px); }
.client {
  display: flex; align-items: center; justify-content: center;
  height: 60px;
}

/* raster path (current logos)
   The artwork is inverted to black-on-white, so each logo's plate matches the
   white section and no blend is needed on the cell itself. The blend that
   remains is img-over-box, entirely inside the cell: screen() leaves the white
   plate white and paints the artwork the box's colour - ink at rest, red on
   hover. */
/* The logos are now flat PNGs: black artwork carried entirely by the alpha
   channel, with no plate behind it. That replaces the old arrangement, where
   each logo was a white-on-black image inverted and screened over a dark box -
   clever, but it produced an opaque WHITE rectangle per logo, which only
   disappeared if the ground behind it was also exactly white. Any other ground
   and you saw a grid of white boxes. Nothing here depends on the ground now,
   so the section can be any colour and the logos just sit on it. */
.client__box {
  display: block; font-size: 0; line-height: 0;
  background: none;
  max-width: 100%;
}
.client__box img {
  display: block; height: 46px; width: auto; max-width: 100%;
  opacity: 0.88;
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}
.client--raster:hover .client__box img {
  opacity: 1;
  /* tint to brand red on hover without needing a second file */
  filter: invert(24%) sepia(85%) saturate(4000%) hue-rotate(345deg) brightness(88%) contrast(95%);
}

/* vector path (drop real SVGs in and this takes over) */
.client--vector { color: var(--ink); transition: color 0.25s var(--ease); }
.client--vector:hover { color: var(--red); }
.client--vector svg { height: 46px; width: auto; max-width: 100%; display: block; fill: currentColor; }
.client--vector svg * { fill: currentColor !important; stroke: none !important; }

.client__name {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.06em; color: var(--ink);
  text-align: center; transition: color 0.25s;
}
.client:hover .client__name { color: var(--red); }

@media (max-width: 700px) {
  /* no marquee on a phone: a plain three-up grid per row on white. The ground
     is stated on the section, the block inside it and the cells, so nothing
     above or below can lend it a tint. */
  #clients { background: #fff; min-height: 0; display: block; }
  .clients { background: #fff; }
  .client { background: transparent; }
  /* The four marquee rows collapse away entirely so every logo becomes a cell
     of one continuous three-column grid - otherwise each row ends in a ragged
     part-row of two and the wall reads as four broken blocks. */
  #clientGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 7vw, 34px) clamp(12px, 3.5vw, 20px);
    align-items: center;
  }
  .crow, .crow__track, .crow__set { display: contents; }
  .crow__set[aria-hidden="true"] { display: none; }
  .client { width: auto; height: 52px; }
  /* main.js sets a pixel height per logo for optical balance. On a narrow cell
     max-width then shrinks the width while that height stays, which squashes
     wide wordmarks - so on phones the height gives way and the aspect ratio
     wins. */
  .client__box img {
    height: auto !important;
    max-height: 46px;
    max-width: 100%;
    width: auto;
  }
  .client--vector svg { height: auto; max-height: 46px; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .crow__track { animation: none; }
  .crow__set[aria-hidden="true"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .client__box, .client--vector { transition: none; }
}

/* ---------- expandable service rows ---------- */
.svc-row { cursor: pointer; }
.svc-row__head { display: flex; gap: 20px; align-items: baseline; width: 100%; }

.svc-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 20px clamp(16px, 2vw, 28px);
  padding: 4px 0 18px 48px;
  animation: idRise 0.3s both;
}
.svc-detail[hidden] { display: none; }
.svc-detail__group {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.08em; color: var(--red);
  margin-bottom: 8px; text-transform: uppercase;
}
.svc-detail ul { list-style: none; }
.svc-detail li { font-size: 12px; line-height: 1.75; color: var(--muted); }
@media (max-width: 560px) { .svc-detail { padding-left: 0; } }

/* ---------- vision / mission ----------
   "Editorial band": the masthead sits at the top, a full-bleed strip of eight
   cells runs under it as index and progress rail at once, and a full-bleed red
   band below holds whichever statement is live. The section is pinned - it
   runs several screens tall, the inner panel sticks, and scroll position picks
   the step. main.js maps progress to an index and adds .vm--pinned once that
   is running; without it (narrow screens, reduced motion, no JS) the strip
   stacks and reads as a plain list. */
.vm {
  position: relative; background: var(--vm-bg);
  /* the bands bleed edge to edge, so their contents carry the page gutter
     themselves rather than sitting in a .wrap */
  --vm-gut: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
}
.vm--pinned { height: calc(100vh + var(--vm-steps, 8) * 52vh); }
.vm__sticky { display: flex; align-items: stretch; }
.vm--pinned .vm__sticky { position: sticky; top: 0; height: 100vh; }
.vm__inner { width: 100%; display: flex; flex-direction: column; }
.vm--pinned .vm__inner { height: 100%; }

.vm__top {
  padding: clamp(96px, 12vh, 132px) var(--vm-gut) clamp(20px, 3vh, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: end;
}
.vm__headline {
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  margin-top: clamp(10px, 1.1vw, 16px);
}
.vm__headline .kw { color: var(--red); font-weight: 500; }
.vm__intro {
  border-top: 1px solid var(--hair);
  padding-top: 14px;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--muted);
}

/* the band of eight: hairline top and bottom, one cell per statement. The
   icons grey until the scroll has reached them, red once it has, so the strip
   doubles as the progress rail. */
.vm__nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  padding: 0 var(--vm-gut);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.vm__cell {
  background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: clamp(7px, 0.9vh, 11px);
  padding: clamp(13px, 1.8vh, 20px) clamp(8px, 1vw, 16px) clamp(12px, 1.6vh, 18px) 0;
  border-right: 1px solid var(--hair);
}
.vm__nav .vm__cell:last-child { border-right: 0; }
.vm__cn {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta);
  transition: color 0.35s var(--ease);
}
.vm__ico {
  width: clamp(24px, 2.2vw, 32px); height: auto;
  color: var(--hair);
  transition: color 0.45s var(--ease);
}
.vm__ico.is-lit { color: var(--red); }
.vm__ct {
  font-size: clamp(11px, 0.86vw, 13px); line-height: 1.3; color: var(--meta);
  transition: color 0.35s var(--ease), font-weight 0.2s linear;
}
.vm__cell.is-active .vm__cn { color: var(--red); }
.vm__cell.is-active .vm__ct { color: var(--red); font-weight: 600; }
.vm__cfull { display: none; }

/* The dark band. Every statement is stacked inside it and positioned by how far
   it is from the current step: --o is 0 for the live one, negative above,
   positive below. Scrolling forward carries the live one up and out of the top
   edge while the next rises from beneath; scrolling back mirrors it. The band
   clips, so they vanish at the edge rather than fading in mid-air. */
.vm__panel {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(300px, 42vh, 520px);
  background: var(--band-dark);
  overflow: hidden;
}
.vm__slide {
  position: absolute;
  left: var(--vm-gut); right: var(--vm-gut);
  top: clamp(30px, 4.4vh, 56px); bottom: clamp(30px, 4.4vh, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 68px);
  align-items: center;
  transform: translateY(calc(var(--o, 1) * 118%));
  transition: transform 0.62s cubic-bezier(0.22, 0.85, 0.3, 1);
}
.vm__big {
  position: absolute; right: 0; top: 0;
  width: clamp(54px, 6.2vw, 88px); height: auto;
  color: #fff;
}
.vm__text { min-width: 0; }
.vm__label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--red); margin-bottom: clamp(10px, 1.2vw, 16px);
}
.vm__quote {
  color: #fff; font-weight: 500;
  font-size: clamp(20px, 2.4vw, 34px); line-height: 1.26;
  letter-spacing: -0.012em;
}
.vm__quote .kw { font-weight: 700; color: #fff; }
.vm__blurb {
  color: #fff;
  font-size: clamp(13px, 0.98vw, 15px); line-height: 1.6;
  max-width: 40ch;
  opacity: 0.74;
  align-self: center;
}

@media (max-width: 900px) {
  .vm__top {
    padding: clamp(56px, 8vw, 90px) var(--pad) clamp(20px, 5vw, 30px);
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .vm__panel { display: none; }
  /* unpinned the strip is the content, so each cell becomes a full row with
     its statement spelled out */
  .vm__nav {
    grid-template-columns: 1fr;
    padding: 0 var(--pad);
    border-top: 0; border-bottom: 0;
  }
  .vm__cell {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px; row-gap: 5px;
    padding: clamp(18px, 4vw, 24px) 0;
    border-right: 0;
    border-bottom: 1px solid var(--hair);
  }
  .vm__cell[data-label]::before {
    content: attr(data-label);
    grid-column: 1 / -1;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: 0.08em; color: var(--red);
    padding-bottom: 12px;
  }
  .vm__cell[data-label] { border-top: 1px solid var(--hair); padding-top: clamp(20px, 5vw, 28px); }
  .vm__nav .vm__cell:first-child { border-top: 0; padding-top: 0; }
  .vm__cn { grid-column: 1; grid-row: 2; color: var(--red); }
  .vm__ico { grid-column: 1; grid-row: 3; width: 26px; color: var(--red); align-self: start; }
  .vm__ct {
    grid-column: 2; grid-row: 2;
    font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
  }
  .vm__cfull {
    display: block; grid-column: 2; grid-row: 3;
    font-size: 16px; line-height: 1.5; color: var(--ink); font-weight: 500;
  }
  .vm__cfull .kw { color: var(--red); }
}

@media (prefers-reduced-motion: reduce) {
  .vm__slide, .vm__ico, .vm__ct, .vm__cn { transition: none; }
}

/* ---------- why us ---------- */
.why { padding-bottom: clamp(48px, 6vw, 80px); border-top: 1px solid var(--hair); padding-top: clamp(40px, 5vw, 64px); }
.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(24px, 3vw, 52px);
}
.why__no {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; color: var(--meta); margin-bottom: 12px;
}
.why__name { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.why__body { font-size: 13px; line-height: 1.75; color: var(--muted); }

/* ---------- enquiry ---------- */
.enq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  padding-top: clamp(56px, 8vw, 100px);
  padding-bottom: clamp(56px, 8vw, 100px);
}
.enq__title { font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.3; max-width: 420px; }
.enq__body { font-size: 14px; line-height: 1.75; color: var(--muted); max-width: 420px; margin-top: 16px; }
.enq__details { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.enq__details div { display: flex; gap: 16px; align-items: baseline; }
.enq__details dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta);
  min-width: 70px; flex: 0 0 auto;
}
.enq__details dd { font-size: 13px; line-height: 1.6; }

.enq__form { display: flex; flex-direction: column; gap: 18px; }
.enq__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 18px; }
.enq__hp { position: absolute; left: -9999px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--meta);
}
.field input, .field textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 10px 0; border-radius: 0; -webkit-appearance: none;
  transition: border-color 0.2s;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--red); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.btn-red--static { animation: none !important; align-self: flex-start; margin-top: 6px; }

/* ---------- footer social ---------- */
.footer__social { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__social a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; color: var(--footer-link);
}
.footer__social a:hover { color: var(--red); }

/* ---------- studio: red field ----------
   Full-viewport block that arrives off-white and turns red as it scrolls in
   (main.js toggles .is-red). Every colour is a variable so one class change
   cross-fades the whole block instead of just the background. */
.studio-red {
  --sr-bg: var(--bg);
  --sr-fg: var(--ink);       /* service titles, marks, kicker */
  --sr-stmt: var(--ink);     /* the big statement */
  --sr-sub: var(--muted);    /* service lists, capability items */
  --sr-meta: var(--meta);    /* row numbers */
  --sr-line: var(--hair);
  --sr-hover: var(--red);    /* title colour on row hover */

  background: var(--sr-bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  transition: background-color 0.9s var(--ease);
}
.studio-red.is-red {
  --sr-bg: var(--red);
  --sr-fg: #fff;
  --sr-stmt: var(--ink);
  --sr-sub: rgba(245, 244, 242, 0.85);
  --sr-meta: rgba(245, 244, 242, 0.75);
  --sr-line: rgba(255, 255, 255, 0.28);
  --sr-hover: var(--ink);
}
.studio-red > .studio__grid { width: 100%; }

.studio-red .kicker { color: var(--sr-fg); opacity: 0.85; transition: color 0.9s var(--ease); }
.studio-red .studio__statement { color: var(--sr-stmt); transition: color 0.9s var(--ease); }
.studio-red .svc-row { border-bottom-color: var(--sr-line); transition: border-color 0.9s var(--ease); }
.studio-red .svc-num { color: var(--sr-meta); transition: color 0.9s var(--ease); }
.studio-red .svc-title { color: var(--sr-fg); }
.studio-red .svc-row:hover .svc-title { color: var(--sr-hover); }
.studio-red .svc-list { color: var(--sr-sub); transition: color 0.9s var(--ease), transform 0.3s var(--ease); }
.studio-red .svc-row__head { color: var(--sr-fg); transition: color 0.9s var(--ease); }
.studio-red .svc-detail__group { color: var(--sr-fg); opacity: 0.9; }
.studio-red .svc-detail li { color: var(--sr-sub); }
.studio-red ::selection { background: #fff; color: var(--red); }

/* the light blocks that follow it */
#studio .vm { border-top: 0; padding-top: clamp(48px, 6vw, 76px); }

@media (max-width: 900px) {
  .studio-red { min-height: 0; display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-red,
  .studio-red * { transition: none !important; }
}

/* ---------- studio: service title grows on hover ----------
   The title scales from its top-left so it only ever grows downward, and the
   service list slides down by exactly the height the title gained — so the
   paragraph stays readable instead of fading out. The row reserves that
   space up front, so nothing below it moves. */
.svc-body { min-height: 64px; }
.svc-title {
  transform-origin: left top;
  transition: transform 0.3s var(--ease), color 0.25s;
  will-change: transform;
}
.svc-row:hover .svc-title { transform: scale(2); }
.svc-row:hover .svc-list { transform: translateY(20px); }
.svc-row.is-open .svc-title,
.svc-row.is-open:hover .svc-title { transform: none; }
.svc-row.is-open .svc-list,
.svc-row.is-open:hover .svc-list { transform: none; }

@media (max-width: 560px) {
  .svc-body { min-height: 0; }
  .svc-row:hover .svc-title { transform: none; }
  .svc-row:hover .svc-list { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row:hover .svc-title { transform: none; }
  .svc-row:hover .svc-list { transform: none; }
}

/* ================= display headers + section bands ================= */

/* A dark band. Sections carry their own ground so the colour arrives with
   the section as you scroll into it. */
.band-dark {
  background: var(--band-dark);
  color: var(--bg);
}
.band-dark .kicker { color: var(--red); }
.band-dark .member__name { color: var(--bg); }
.band-dark .member:hover .member__name { color: var(--red); }
.band-dark .member__role { color: rgba(245, 244, 242, 0.6); }
.band-dark .member__photo { background: var(--photo-ground); }
.band-dark .member__slot { color: rgba(245, 244, 242, 0.45); }
.band-dark ::selection { background: var(--bg); color: var(--ink); }

/* The logo wall sits on white — pinned explicitly so a neighbouring band can
   never bleed into it. Each logo's plate is painted white to match, so only
   the artwork reads. */
#clients { background: var(--bg); }
/* the work rows sit on a slightly deeper grey so the run of project imagery
   reads as its own field. The tiles step down again so an image that has not
   loaded still separates from the ground. */
#work { background: var(--bg-2); }
#work .shot { background: #e6e4e0; }
#work .shot__fallback { background: #e6e4e0; }

/* ---------- scroll reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* staggered children where a block has them */
.reveal > * { transition: inherit; }

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

/* ---------- header adapts to the band behind it ---------- */
.header {
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}
/* The bar used to take the projects band's grey here. It is gone on purpose:
   working out "which section am I over" from scroll position kept getting the
   logo wall wrong, leaving a grey bar over a white section. The bar is now
   white unless it is over a genuinely dark or red band, where the switch is
   needed for the logo to stay legible. The cost is a barely-visible step
   between #fff and #f2f1ef on the projects rows; the gain is that white
   sections are white, always, with no scroll maths involved. */
body[data-nav="grey"] .header { background: #fff; }

/* the logo wall is pure white, and the bar has to match it exactly or the
   section reads as sitting under a grey lid */
body[data-nav="white"] .header { background: #fff; }

/* belt and braces: the logo wall and its bar are white at every width and in
   every nav state. Nothing about scroll position can change this. */
#clients, #clients .clients { background: #fff !important; }

/* the vision band is a full-bleed split - the bar goes solid in the section's
   own ground so the red starts cleanly at the header's bottom edge instead of
   showing through it */
body[data-nav="vm"] .header { background: var(--vm-bg); }

body[data-nav="dark"] .header { background: var(--band-dark); }
body[data-nav="dark"] .logo,
body[data-nav="dark"] .nav__link { color: var(--bg); }
body[data-nav="dark"] .nav__cta { background: var(--bg); color: var(--ink); }
body[data-nav="dark"] .nav__cta:hover { background: var(--red); color: #fff; }

body[data-nav="red"] .header { background: rgba(209, 39, 49, 0.92); }
body[data-nav="red"] .logo,
body[data-nav="red"] .nav__link { color: #fff; }
body[data-nav="red"] .logo .l-dot { color: var(--ink); }
body[data-nav="red"] .nav__cta { background: var(--ink); color: #fff; }
body[data-nav="red"] .nav__cta:hover { background: var(--bg); color: var(--ink); }


/* ---------- word reveal ----------
   Each word rides up out of its own clipping mask, staggered. This is the
   "text arrives" move from the reference sites; the mask is what makes it
   read as type setting itself rather than a plain fade. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;   /* room for descenders inside the mask */
  margin-bottom: -0.06em;
}
.w__i {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.85s cubic-bezier(0.2, 0, 0, 1);
  transition-delay: calc(var(--i, 0) * 34ms);
}
.is-in .w__i { transform: none; }

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

/* ---------- icon sizing ----------
   Artwork icons are filled paths, not strokes, so nothing here draws them;
   the hover spin lives in the block further down. */
.why__icon {
  display: block;
  width: clamp(76px, 7.5vw, 108px);
  height: auto;
  margin-bottom: clamp(18px, 2vw, 28px);
  overflow: visible;
}

/* The +/- mark. Drawn at 64px and scaled down to ~16px at rest, so the 4x
   hover state renders at the SVG's native size and stays crisp — scaling a
   raster up is what blurred the old text glyph. Anchored right-centre so it
   grows inward instead of pushing the row. */
.svc-row__mark {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-left: auto;
  align-self: center;
  color: var(--ink);
  transform: scale(0.25);
  transform-origin: right center;
  transition: transform 0.55s cubic-bezier(0.34, 1.32, 0.5, 1), color 0.25s;
}
.svc-row__mark .mark-ring { stroke-width: 1.3; }
.svc-row__mark .mark-v {
  transform-origin: center;
  transition: opacity 0.3s var(--ease), transform 0.45s cubic-bezier(0.34, 1.32, 0.5, 1);
}
.svc-row__mark.is-minus .mark-v { opacity: 0; transform: rotate(90deg); }

.svc-row:hover .svc-row__mark { transform: scale(1); }
.svc-row.is-open .svc-row__mark,
.svc-row.is-open:hover .svc-row__mark { transform: scale(0.25); }

/* black on the red field, not white */
.studio-red .svc-row__mark { color: var(--ink); }

@media (max-width: 560px) {
  .svc-row:hover .svc-row__mark { transform: scale(0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row__mark { transition: none; }
  .svc-row:hover .svc-row__mark { transform: scale(0.25); }
}


/* ---------- supplied artwork icons ----------
   Filled paths rather than strokes, so these are not stroke-drawn. Hover
   spins them a full turn in 3D, swells them at the halfway point and settles
   back, while the artwork shifts to red under a very faint red bloom. A flat
   shape rotating past 90deg shows its own mirror image, which is what makes
   the turn read as dimensional rather than as a flat rotation. */
.why__block { perspective: 900px; }
.why__icon {
  color: var(--ink);
  transform-style: preserve-3d;
  transition: color 0.35s var(--ease);
}

@keyframes iconTurn {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(180deg) scale(1.22); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* Only the drawn artwork answers the pointer - not the icon's bounding box and
   not the rest of the card. pointer-events inherits, so switching it off on the
   <svg> and back on for its contents leaves the transparent gaps inert.
   main.js starts the spin on mouseover and clears it on animationend, so a
   flat shape turning edge-on mid-spin cannot drop the hover and restart it. */
.why__icon { pointer-events: none; }
.why__icon > * { pointer-events: painted; }

.why__icon.is-turn,
.why__icon:hover { color: var(--red); }
.why__icon.is-turn { animation: iconTurn 0.95s cubic-bezier(0.3, 0, 0.2, 1); }
/* the dot inverts so the signature stays legible once the artwork goes red */
.why__icon.is-turn .dot,
.why__icon:hover .dot { fill: var(--ink); }
.why__icon .dot { fill: var(--red); transition: fill 0.35s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .why__icon { transition: none; }
  .why__icon.is-turn { animation: none; }
}


/* ---------- work: link out to the full portfolio ----------
   Note .prow sets display:grid, which beats the UA's [hidden]{display:none};
   any row hidden by the hidden attribute needs this to actually disappear. */
.prow[hidden] { display: none !important; }

.work__more { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 60px); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; cursor: pointer;
  border: 1.5px solid var(--ink); border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink); padding: 14px 28px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-outline:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn-outline span { transition: transform 0.25s var(--ease); }
.btn-outline:hover span { transform: translateX(3px); }

/* ---------- touch targets ----------
   Anything tappable needs to be about a fingertip across. These only widen the
   hit area - nothing moves, because the extra height is padding inside
   elements that were already sitting in their own row. */
@media (max-width: 860px) {
  .nav__link { padding: 13px 8px; }
  .nav { gap: 4px; }
  .nav__cta { padding-top: 12px; padding-bottom: 12px; }
  .prow__name a { display: inline-block; padding: 6px 0; }
  .prow__btn { padding-top: 14px; padding-bottom: 14px; }
  .enq__details dd a,
  .cta__meta a,
  .footer__social a { display: inline-block; padding: 8px 0; }
  .footer__nav button { padding: 12px 0; }
  .footer__nav { gap: 20px; }
  .pp__back { display: inline-block; padding: 8px 0; }
  .work__more a, .work__archive a { padding-top: 14px; padding-bottom: 14px; }
}